Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: don't dismiss out of sync alert on review (#1750)

Browse Source 
Clicking review button on out of sync alert should not dismiss the alert
and it should be displayed again in outline or all tab.
This commit is contained in:
Navin Karkera
2025-03-24 16:39:10 +00:00
committed by GitHub
parent 545bb4a8a6
commit bac63583ac
2 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/course-libraries/CourseLibraries.test.tsx
View File

@@ -94,17 +94,6 @@ describe('<CourseLibraries />', () => {
expect(allTab).toHaveAttribute('aria-selected', 'false');
expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
expect(alert).not.toBeInTheDocument();
// go back to all tab
userEvent.click(allTab);
// alert should not be back
expect(alert).not.toBeInTheDocument();
expect(allTab).toHaveAttribute('aria-selected', 'true');
// review updates button
const reviewActionBtn = await screen.findByRole('button', { name: 'Review Updates' });
userEvent.click(reviewActionBtn);
expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
});
it('hide alert on dismiss', async () => {
@@ -124,6 +113,10 @@ describe('<CourseLibraries />', () => {
userEvent.click(dismissBtn);
expect(allTab).toHaveAttribute('aria-selected', 'true');
waitFor(() => expect(alert).not.toBeInTheDocument());
// review updates button
const reviewActionBtn = await screen.findByRole('button', { name: 'Review Updates' });
userEvent.click(reviewActionBtn);
expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
});
});

21
src/course-libraries/OutOfSyncAlert.tsx
View File

@@ -13,9 +13,17 @@ interface OutOfSyncAlertProps {
onDismiss?: () => void;
onReview: () => void;
}
/*
Shows an alert when library components used in the current course were updated and the blocks in course can be updated.
Dismiss or review action is persisted using localStorage to avoid displaying the alert on every refresh.
/**
* Shows an alert when library components used in the current course were updated and the blocks
* in course can be updated. Following are the conditions for displaying the alert.
*
* * The alert is displayed if components are out of sync.
* * If the user clicks on dismiss button, the state is stored in localstorage of user
* in this format: outOfSyncCountAlert-${courseId} = <number of out of sync components>.
* * If the number of sync components don't change for the course and the user opens outline
* in the same browser, they don't see the alert again.
* * If the number changes, i.e., if a new component is out of sync or the user updates or ignores
* a component, the alert is displayed again.
*/
export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
showAlert,
@@ -48,11 +56,6 @@ export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
onDismiss?.();
};
const reviewAlert = () => {
dismissAlert();
onReview();
};
return (
<AlertMessage
title={intl.formatMessage(messages.outOfSyncCountAlertTitle, { outOfSyncCount })}
@@ -63,7 +66,7 @@ export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
onClose={dismissAlert}
actions={[
<Button
onClick={reviewAlert}
onClick={onReview}
>
{intl.formatMessage(messages.outOfSyncCountAlertReviewBtn)}
</Button>,