Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[frontend] Dismiss info alert popup messages after 3 seconds (along with Unit Test) #3642

Merged
merged 6 commits into from
Mar 11, 2024
Merged

[frontend] Dismiss info alert popup messages after 3 seconds (along with Unit Test) #3642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
19238da
[frontend] Dismiss info alert popup messages after 3 seconds
ananya-agarwal Mar 5, 2024
3483c88
Fixed Linting issues
ananya-agarwal Mar 5, 2024
59b9088
Unit testing
ananya-agarwal Mar 9, 2024
e5181cf
Fixing the jest
ananya-agarwal Mar 9, 2024
90b10c2
Fixing the issues in the PR
ananya-agarwal Mar 11, 2024
12bc551
Merge branch 'master' into InfoTimer
JohanAhlen Mar 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions desktop/core/src/desktop/js/reactComponents/AlertComponent/AlertComponent.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,4 +89,22 @@ describe('AlertComponent', () => {
expect(alertsAfterClosing[0]).toHaveTextContent('Error 1');
expect(alertsAfterClosing[1]).toHaveTextContent('Error 3');
});

test('info alerts should close automatically after 3 seconds', async () => {
jest.useFakeTimers();
render(<AlertComponent />);
expect(screen.queryAllByRole('alert')).toHaveLength(0);
act(() => huePubSub.publish('hue.global.info', { message: 'info' }));
expect(screen.queryAllByRole('alert')).toHaveLength(1);

//It should still be open after 2 seconds
jest.advanceTimersByTime(2000);
expect(screen.queryAllByRole('alert')).toHaveLength(1);

//After 3.1 seconds, it should really be closed
jest.advanceTimersByTime(1000);
expect(screen.queryAllByRole('alert')).toHaveLength(0);

jest.useRealTimers();
});
});
24 changes: 17 additions & 7 deletions desktop/core/src/desktop/js/reactComponents/AlertComponent/AlertComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,16 @@ interface HueAlert {
message: string;
}

type alertType = 'error' | 'info' | 'warning';
interface VisibleAlert {
alert: HueAlert;
type: 'error' | 'info' | 'warning';
type: alertType;
}

const AlertComponent: React.FC = () => {
const [alert, setAlerts] = useState<VisibleAlert[]>([]);

const updateAlerts = (alert, type) => {
const updateAlerts = (alert: HueAlert, type: alertType) => {
if (!alert.message) {
return;
}
Expand All @@ -43,7 +44,16 @@ const AlertComponent: React.FC = () => {
if (activeAlerts.some(activeAlerts => activeAlerts.alert.message === alert.message)) {
return activeAlerts;
}
return [...activeAlerts, { alert, type }];

const newAlert: VisibleAlert = { alert, type };

if (type === 'info') {
setTimeout(() => {
handleClose(newAlert);
}, 3000);
}

return [...activeAlerts, newAlert];
});
};

Expand Down Expand Up @@ -74,14 +84,14 @@ const AlertComponent: React.FC = () => {
};
}, []);

const handleClose = (alertObjToClose: HueAlert) => {
const filteredAlerts = alert.filter(alertObj => alertObj.alert !== alertObjToClose);
const handleClose = (alertObjToClose: VisibleAlert) => {
const filteredAlerts = alert.filter(alertObj => alertObj !== alertObjToClose);
setAlerts(filteredAlerts);
};

const { t } = i18nReact.useTranslation();

const getHeader = alert => {
const getHeader = (alert: VisibleAlert) => {
if (alert.type === 'error') {
return t('Error');
} else if (alert.type === 'info') {
Expand All @@ -101,7 +111,7 @@ const AlertComponent: React.FC = () => {
description={alertObj.alert.message}
showIcon={true}
closable={true}
onClose={() => handleClose(alertObj.alert)}
onClose={() => handleClose(alertObj)}
/>
))}
</div>
Expand Down
Loading