- );
- }
-
- return (
- navigate('/taxonomies')}
- >
- { intl.formatMessage(messages.emptyDrawerContentLink) }
-
- ),
- }}
- />
- );
- }
-
- return ;
-};
-
-TaxonomyList.propTypes = {
- contentId: PropTypes.string.isRequired,
-};
-
-/**
- * Drawer with the functionality to show and manage tags in a certain content.
- * It is used both in interfaces of this MFE and in edx-platform interfaces such as iframe.
- * - If you want to use it as an iframe, the component obtains the `contentId` from the url parameters.
- * Functions to close the drawer are handled internally.
- * TODO: We can delete this method when is no longer used on edx-platform.
- * - If you want to use it as react component, you need to pass the content id and the close functions
- * through the component parameters.
- */
-const ContentTagsDrawer = ({ id, onClose }) => {
- const intl = useIntl();
- // TODO: We can delete 'params' when the iframe is no longer used on edx-platform
- const params = useParams();
- const contentId = id ?? params.contentId;
-
- const context = useContentTagsDrawerContext(contentId);
- const { blockingSheet } = useContext(ContentTagsDrawerSheetContext);
-
- const {
- showToastAfterSave,
- toReadMode,
- commitGlobalStagedTagsStatus,
- isContentDataLoaded,
- contentName,
- isTaxonomyListLoaded,
- isContentTaxonomyTagsLoaded,
- stagedContentTags,
- collapsibleStates,
- isEditMode,
- commitGlobalStagedTags,
- toEditMode,
- toastMessage,
- closeToast,
- setCollapsibleToInitalState,
- otherTaxonomies,
- } = context;
-
- let onCloseDrawer = onClose;
- if (onCloseDrawer === undefined) {
- onCloseDrawer = () => {
- // "*" allows communication with any origin
- window.parent.postMessage('closeManageTagsDrawer', '*');
- };
- }
-
- useEffect(() => {
- const handleEsc = (event) => {
- /* Close drawer when ESC-key is pressed and selectable dropdown box not open */
- const selectableBoxOpen = document.querySelector('[data-selectable-box="taxonomy-tags"]');
- if (event.key === 'Escape' && !selectableBoxOpen && !blockingSheet) {
- onCloseDrawer();
- }
- };
- document.addEventListener('keydown', handleEsc);
-
- return () => {
- document.removeEventListener('keydown', handleEsc);
- };
- }, [blockingSheet]);
-
- useEffect(() => {
- /* istanbul ignore next */
- if (commitGlobalStagedTagsStatus === 'success') {
- showToastAfterSave();
- toReadMode();
- }
- }, [commitGlobalStagedTagsStatus]);
-
- // First call of the initial collapsible states
- React.useEffect(() => {
- setCollapsibleToInitalState();
- }, [isTaxonomyListLoaded, isContentTaxonomyTagsLoaded]);
-
- return (
-
-
+ );
+};
+
+interface ContentTagsDrawerProps {
+ id?: string;
+ onClose?: () => void;
+ variant?: 'drawer' | 'component';
+}
+
+/**
+ * Drawer with the functionality to show and manage tags in a certain content.
+ * It is used both in interfaces of this MFE and in edx-platform interfaces such as iframe.
+ * - If you want to use it as an iframe, the component obtains the `contentId` from the url parameters.
+ * Functions to close the drawer are handled internally.
+ * TODO: We can delete this method when is no longer used on edx-platform.
+ * - If you want to use it as react component, you need to pass the content id and the close functions
+ * through the component parameters.
+ */
+const ContentTagsDrawer = ({
+ id,
+ onClose,
+ variant = 'drawer',
+}: ContentTagsDrawerProps) => {
+ const intl = useIntl();
+ // TODO: We can delete 'params' when the iframe is no longer used on edx-platform
+ const params = useParams();
+ const contentId = id ?? params.contentId;
+
+ if (contentId === undefined) {
+ throw new Error('Error: contentId cannot be null.');
+ }
+
+ const context = useContentTagsDrawerContext(contentId);
+ const { blockingSheet } = useContext(ContentTagsDrawerSheetContext);
+
+ const {
+ showToastAfterSave,
+ toReadMode,
+ commitGlobalStagedTagsStatus,
+ isTaxonomyListLoaded,
+ isContentTaxonomyTagsLoaded,
+ stagedContentTags,
+ collapsibleStates,
+ toastMessage,
+ closeToast,
+ setCollapsibleToInitalState,
+ otherTaxonomies,
+ } = context;
+
+ let onCloseDrawer: () => void;
+ if (variant === 'drawer') {
+ if (onClose === undefined) {
+ onCloseDrawer = () => {
+ // "*" allows communication with any origin
+ window.parent.postMessage('closeManageTagsDrawer', '*');
+ };
+ } else {
+ onCloseDrawer = onClose;
+ }
+ }
+
+ useEffect(() => {
+ if (variant === 'drawer') {
+ const handleEsc = (event) => {
+ /* Close drawer when ESC-key is pressed and selectable dropdown box not open */
+ const selectableBoxOpen = document.querySelector('[data-selectable-box="taxonomy-tags"]');
+ if (event.key === 'Escape' && !selectableBoxOpen && !blockingSheet) {
+ onCloseDrawer();
+ }
+ };
+ document.addEventListener('keydown', handleEsc);
+
+ return () => {
+ document.removeEventListener('keydown', handleEsc);
+ };
+ }
+ return () => {};
+ }, [blockingSheet]);
+
+ useEffect(() => {
+ /* istanbul ignore next */
+ if (commitGlobalStagedTagsStatus === 'success') {
+ showToastAfterSave();
+ toReadMode();
+ }
+ }, [commitGlobalStagedTagsStatus]);
+
+ // First call of the initial collapsible states
+ React.useEffect(() => {
+ setCollapsibleToInitalState();
+ }, [isTaxonomyListLoaded, isContentTaxonomyTagsLoaded]);
+
+ const renderFooter = () => {
+ if (isTaxonomyListLoaded && isContentTaxonomyTagsLoaded) {
+ switch (variant) {
+ case 'drawer':
+ return ;
+ case 'component':
+ return ;
+ default:
+ return null;
+ }
+ }
+ return null;
+ };
+
+ return (
+
+