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

feat: add legacy library alert (#2412)

Browse Source 
Adds an Alert to the Legacy Library Page to notify the user of the process of deprecating Legacy Libraries and a Button to open the Migrate Library interface.
This commit is contained in:
Rômulo Penido
2025-09-02 16:23:49 -03:00
committed by GitHub
parent f79b65c273
commit 2fb04d670f
4 changed files with 112 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/studio-home/tabs-section/libraries-tab/MigrateLegacyLibrariesAlert.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { Alert, Button } from '@openedx/paragon';
import { Warning } from '@openedx/paragon/icons';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import messages from '../messages';
export const MigrateLegacyLibrariesAlert = () => (
<Alert variant="warning" icon={Warning}>
<Alert.Heading>
<FormattedMessage {...messages.alertTitle} />
</Alert.Heading>
<div className="row">
<div className="col-8">
<FormattedMessage {...messages.alertDescription} />
</div>
<div className="col-4 d-flex justify-content-center align-items-start">
<Button>
<FormattedMessage {...messages.alertReviewButton} />
</Button>
</div>
</div>
</Alert>
);

69
src/studio-home/tabs-section/libraries-tab/index.jsx
View File

@@ -1,69 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Icon, Row } from '@openedx/paragon';
import { Error } from '@openedx/paragon/icons';
import { LoadingSpinner } from '../../../generic/Loading';
import CardItem from '../../card-item';
import { sortAlphabeticallyArray } from '../utils';
import AlertMessage from '../../../generic/alert-message';
import messages from '../messages';
const LibrariesTab = ({
libraries,
isLoading,
isFailed,
}) => {
const intl = useIntl();
if (isLoading) {
return (
<Row className="m-0 mt-4 justify-content-center">
<LoadingSpinner />
</Row>
);
}
return (
isFailed ? (
<AlertMessage
variant="danger"
description={(
<Row className="m-0 align-items-center">
<Icon src={Error} className="text-danger-500 mr-1" />
<span>{intl.formatMessage(messages.librariesTabErrorMessage)}</span>
</Row>
)}
/>
) : (
<div className="courses-tab">
{sortAlphabeticallyArray(libraries).map(({
displayName, org, number, url,
}) => (
<CardItem
key={`${org}+${number}`}
isLibraries
displayName={displayName}
org={org}
number={number}
url={url}
/>
))}
</div>
)
);
};
LibrariesTab.propTypes = {
libraries: PropTypes.arrayOf(
PropTypes.shape({
displayName: PropTypes.string.isRequired,
libraryKey: PropTypes.string.isRequired,
number: PropTypes.string.isRequired,
org: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
}),
).isRequired,
isLoading: PropTypes.bool.isRequired,
isFailed: PropTypes.bool.isRequired,
};
export default LibrariesTab;

71
src/studio-home/tabs-section/libraries-tab/index.tsx Normal file
View File

@@ -0,0 +1,71 @@
import React from 'react';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Icon, Row } from '@openedx/paragon';
import { Error } from '@openedx/paragon/icons';
import AlertMessage from '@src/generic/alert-message';
import { LoadingSpinner } from '@src/generic/Loading';
import CardItem from '../../card-item';
import { sortAlphabeticallyArray } from '../utils';
import messages from '../messages';
import { MigrateLegacyLibrariesAlert } from './MigrateLegacyLibrariesAlert';
interface LibrariesTabProps {
libraries: {
displayName: string;
libraryKey: string;
number: string;
org: string;
url: string;
}[];
isLoading: boolean;
isFailed: boolean;
}
const LibrariesTab = ({
libraries,
isLoading,
isFailed,
}: LibrariesTabProps) => {
const intl = useIntl();
if (isLoading) {
return (
<Row className="m-0 mt-4 justify-content-center">
<LoadingSpinner />
</Row>
);
}
return (
isFailed ? (
<AlertMessage
variant="danger"
description={(
<Row className="m-0 align-items-center">
<Icon src={Error} className="text-danger-500 mr-1" />
<span>{intl.formatMessage(messages.librariesTabErrorMessage)}</span>
</Row>
)}
/>
) : (
<>
<MigrateLegacyLibrariesAlert />
<div className="courses-tab">
{sortAlphabeticallyArray(libraries).map(({
displayName, org, number, url,
}) => (
<CardItem
key={`${org}+${number}`}
isLibraries
displayName={displayName}
org={org}
number={number}
url={url}
/>
))}
</div>
</>
)
);
};
export default LibrariesTab;

18
src/studio-home/tabs-section/messages.ts
View File

@@ -88,6 +88,24 @@ const messages = defineMessages({
id: 'course-authoring.studio-home.libraries.tab.library.not.found.alert.message',
defaultMessage: 'There are no libraries with the current filters.',
},
alertTitle: {
id: 'studio-home.legacy-libraries.migrate-alert.title',
defaultMessage: 'Migrate Legacy Libraries',
description: 'Title for the alert message to migrate legacy libraries',
},
alertDescription: {
id: 'studio-home.legacy-libraries.migrate-alert.description',
defaultMessage: 'In a future release, legacy libraries will no longer be supported.'
+ ' The new libraries experience allows you to author sections, subsections, units,'
+ ' and components to reuse across your courses. Content from legacy libraries can be'
+ ' migrated to the new experience.',
description: 'Description for the alert message to migrate legacy libraries',
},
alertReviewButton: {
id: 'studio-home.legacy-libraries.migrate-alert.review-button',
defaultMessage: 'Review Legacy Libraries',
description: 'Label for the button to review legacy libraries',
},
});
export default messages;