-
-
+
+
+ {intl.formatMessage(messages.headerSubtitle)}
+
+
+ {otherTaxonomies.length !== 0 && (
+
+
+ {intl.formatMessage(messages.otherTagsHeader)}
+
+
+ {intl.formatMessage(messages.otherTagsDescription)}
+
+ { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded && (
+ otherTaxonomies.map((data) => (
+
+
+
+
+ ))
+ )}
{ isTaxonomyListLoaded && isContentTaxonomyTagsLoaded && (
diff --git a/src/content-tags-drawer/ContentTagsDrawer.scss b/src/content-tags-drawer/ContentTagsDrawer.scss
index e716840894..76889a4401 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.scss
+++ b/src/content-tags-drawer/ContentTagsDrawer.scss
@@ -2,7 +2,7 @@
min-width: max(500px, 33vw);
}
-@media only screen and (max-width: 500px) {
+@media only screen and (width <= 500px) {
.pgn__sheet-component:has(#content-tags-drawer) {
min-width: 100vw;
}
@@ -18,6 +18,15 @@
background-color: transparent;
color: $gray-300 !important;
}
+
+ .other-description {
+ font-size: .9rem;
+ }
+
+ .enable-taxonomies-button:not([disabled]):hover {
+ background-color: transparent;
+ color: $info-900 !important;
+ }
}
// Apply styles to sheet only if it has a child with a .tags-drawer class
diff --git a/src/content-tags-drawer/ContentTagsDrawer.test.jsx b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
index 03de825cc6..8f2e517c35 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.test.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
@@ -19,16 +19,21 @@ import {
} from './data/apiHooks';
import { getTaxonomyListData } from '../taxonomy/data/api';
import messages from './messages';
+import { ContentTagsDrawerSheetContext } from './common/context';
+import { languageExportId } from './utils';
const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@7f47fe2dbcaf47c5a071671c741fe1ab';
const mockOnClose = jest.fn();
const mockMutate = jest.fn();
+const mockSetBlockingSheet = jest.fn();
+const mockNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
contentId,
}),
+ useNavigate: () => mockNavigate,
}));
// FIXME: replace these mocks with API mocks
@@ -61,15 +66,18 @@ jest.mock('../taxonomy/data/api', () => ({
const queryClient = new QueryClient();
const RootWrapper = (params) => (
-
-
-
-
-
+
+
+
+
+
+
+
);
describe('
', () => {
beforeEach(async () => {
+ jest.clearAllMocks();
await queryClient.resetQueries();
// By default, we mock the API call with a promise that never resolves.
// You can override this in specific test.
@@ -157,6 +165,177 @@ describe('
', () => {
});
};
+ const setupMockDataWithOtherTagsTestings = () => {
+ useContentTaxonomyTagsData.mockReturnValue({
+ isSuccess: true,
+ data: {
+ taxonomies: [
+ {
+ name: 'Taxonomy 1',
+ taxonomyId: 123,
+ canTagObject: true,
+ tags: [
+ {
+ value: 'Tag 1',
+ lineage: ['Tag 1'],
+ canDeleteObjecttag: true,
+ },
+ {
+ value: 'Tag 2',
+ lineage: ['Tag 2'],
+ canDeleteObjecttag: true,
+ },
+ ],
+ },
+ {
+ name: 'Taxonomy 2',
+ taxonomyId: 1234,
+ canTagObject: false,
+ tags: [
+ {
+ value: 'Tag 3',
+ lineage: ['Tag 3'],
+ canDeleteObjecttag: true,
+ },
+ {
+ value: 'Tag 4',
+ lineage: ['Tag 4'],
+ canDeleteObjecttag: true,
+ },
+ ],
+ },
+ ],
+ },
+ });
+ getTaxonomyListData.mockResolvedValue({
+ results: [
+ {
+ id: 123,
+ name: 'Taxonomy 1',
+ description: 'This is a description 1',
+ canTagObject: true,
+ },
+ ],
+ });
+
+ useTaxonomyTagsData.mockReturnValue({
+ hasMorePages: false,
+ canAddTag: false,
+ tagPages: {
+ isLoading: false,
+ isError: false,
+ data: [{
+ value: 'Tag 1',
+ externalId: null,
+ childCount: 0,
+ depth: 0,
+ parentValue: null,
+ id: 12345,
+ subTagsUrl: null,
+ canChangeTag: false,
+ canDeleteTag: false,
+ }, {
+ value: 'Tag 2',
+ externalId: null,
+ childCount: 0,
+ depth: 0,
+ parentValue: null,
+ id: 12346,
+ subTagsUrl: null,
+ canChangeTag: false,
+ canDeleteTag: false,
+ }, {
+ value: 'Tag 3',
+ externalId: null,
+ childCount: 0,
+ depth: 0,
+ parentValue: null,
+ id: 12347,
+ subTagsUrl: null,
+ canChangeTag: false,
+ canDeleteTag: false,
+ }],
+ },
+ });
+ };
+
+ const setupMockDataLanguageTaxonomyTestings = (hasTags) => {
+ useContentTaxonomyTagsData.mockReturnValue({
+ isSuccess: true,
+ data: {
+ taxonomies: [
+ {
+ name: 'Languages',
+ taxonomyId: 123,
+ exportId: languageExportId,
+ canTagObject: true,
+ tags: hasTags ? [
+ {
+ value: 'Tag 1',
+ lineage: ['Tag 1'],
+ canDeleteObjecttag: true,
+ },
+ ] : [],
+ },
+ {
+ name: 'Taxonomy 1',
+ taxonomyId: 1234,
+ canTagObject: true,
+ tags: [
+ {
+ value: 'Tag 1',
+ lineage: ['Tag 1'],
+ canDeleteObjecttag: true,
+ },
+ {
+ value: 'Tag 2',
+ lineage: ['Tag 2'],
+ canDeleteObjecttag: true,
+ },
+ ],
+ },
+ ],
+ },
+ });
+ getTaxonomyListData.mockResolvedValue({
+ results: [
+ {
+ id: 123,
+ name: 'Languages',
+ description: 'This is a description 1',
+ exportId: languageExportId,
+ canTagObject: true,
+ },
+ {
+ id: 1234,
+ name: 'Taxonomy 1',
+ description: 'This is a description 2',
+ canTagObject: true,
+ },
+ ],
+ });
+
+ useTaxonomyTagsData.mockReturnValue({
+ hasMorePages: false,
+ canAddTag: false,
+ tagPages: {
+ isLoading: false,
+ isError: false,
+ data: [{
+ value: 'Tag 1',
+ externalId: null,
+ childCount: 0,
+ depth: 0,
+ parentValue: null,
+ id: 12345,
+ subTagsUrl: null,
+ canChangeTag: false,
+ canDeleteTag: false,
+ }],
+ },
+ });
+ };
+
const setupLargeMockDataForStagedTagsTesting = () => {
useContentTaxonomyTagsData.mockReturnValue({
isSuccess: true,
@@ -749,6 +928,16 @@ describe('
', () => {
postMessageSpy.mockRestore();
});
+ it('should call `onClose` when Escape key is pressed and no selectable box is active', () => {
+ const { container } = render(
);
+
+ fireEvent.keyDown(container, {
+ key: 'Escape',
+ });
+
+ expect(mockOnClose).toHaveBeenCalled();
+ });
+
it('should not call closeManageTagsDrawer when Escape key is pressed and a selectable box is active', () => {
const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
@@ -771,6 +960,98 @@ describe('
', () => {
postMessageSpy.mockRestore();
});
+ it('should not call `onClose` when Escape key is pressed and a selectable box is active', () => {
+ const { container } = render(
);
+
+ // Simulate that the selectable box is open by adding an element with the data attribute
+ const selectableBox = document.createElement('div');
+ selectableBox.setAttribute('data-selectable-box', 'taxonomy-tags');
+ document.body.appendChild(selectableBox);
+
+ fireEvent.keyDown(container, {
+ key: 'Escape',
+ });
+
+ expect(mockOnClose).not.toHaveBeenCalled();
+
+ // Remove the added element
+ document.body.removeChild(selectableBox);
+ });
+
+ it('should not call closeManageTagsDrawer when Escape key is pressed and container is blocked', () => {
+ const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
+
+ const { container } = render(
);
+ fireEvent.keyDown(container, {
+ key: 'Escape',
+ });
+
+ expect(postMessageSpy).not.toHaveBeenCalled();
+
+ postMessageSpy.mockRestore();
+ });
+
+ it('should not call `onClose` when Escape key is pressed and container is blocked', () => {
+ const { container } = render(
);
+ fireEvent.keyDown(container, {
+ key: 'Escape',
+ });
+
+ expect(mockOnClose).not.toHaveBeenCalled();
+ });
+
+ it('should call `setBlockingSheet` on add a tag', async () => {
+ setupMockDataForStagedTagsTesting();
+ render(
);
+ expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+ expect(mockSetBlockingSheet).toHaveBeenCalledWith(false);
+
+ // To edit mode
+ const editTagsButton = screen.getByRole('button', {
+ name: /edit tags/i,
+ });
+ fireEvent.click(editTagsButton);
+
+ // Click on "Add a tag" button to open dropdown
+ const addTagsButton = screen.getByText(/add a tag/i);
+ // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+ fireEvent.mouseDown(addTagsButton);
+
+ // Click to check Tag 3
+ const tag3 = screen.getByText(/tag 3/i);
+ fireEvent.click(tag3);
+
+ // Click "Add tags" to save to global staged tags
+ const addTags = screen.getByRole('button', { name: /add tags/i });
+ fireEvent.click(addTags);
+
+ expect(mockSetBlockingSheet).toHaveBeenCalledWith(true);
+ });
+
+ it('should call `setBlockingSheet` on delete a tag', async () => {
+ setupMockDataForStagedTagsTesting();
+ render(
);
+ expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+ expect(mockSetBlockingSheet).toHaveBeenCalledWith(false);
+
+ // To edit mode
+ const editTagsButton = screen.getByRole('button', {
+ name: /edit tags/i,
+ });
+ fireEvent.click(editTagsButton);
+
+ // Delete the tag
+ const tag = screen.getByText(/tag 2/i);
+ const deleteButton = within(tag).getByRole('button', {
+ name: /delete/i,
+ });
+ fireEvent.click(deleteButton);
+
+ expect(mockSetBlockingSheet).toHaveBeenCalledWith(true);
+ });
+
it('should call `updateTags` mutation on save', async () => {
setupMockDataForStagedTagsTesting();
render(
);
@@ -808,4 +1089,95 @@ describe('
', () => {
expect(taxonomies[i].textContent).toBe(expectedOrder[i]);
}
});
+
+ it('should not show "Other tags" section', async () => {
+ setupMockDataForStagedTagsTesting();
+
+ render(
);
+ expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+ expect(screen.queryByText('Other tags')).not.toBeInTheDocument();
+ });
+
+ it('should show "Other tags" section', async () => {
+ setupMockDataWithOtherTagsTestings();
+
+ render(
);
+ expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+ expect(screen.getByText('Other tags')).toBeInTheDocument();
+ expect(screen.getByText('Taxonomy 2')).toBeInTheDocument();
+ expect(screen.getByText('Tag 3')).toBeInTheDocument();
+ expect(screen.getByText('Tag 4')).toBeInTheDocument();
+ });
+
+ it('should test delete "Other tags" and cancel', async () => {
+ setupMockDataWithOtherTagsTestings();
+ render(
);
+ expect(await screen.findByText('Taxonomy 2')).toBeInTheDocument();
+
+ // To edit mode
+ const editTagsButton = screen.getByRole('button', {
+ name: /edit tags/i,
+ });
+ fireEvent.click(editTagsButton);
+
+ // Delete the tag
+ const tag = screen.getByText(/tag 3/i);
+ const deleteButton = within(tag).getByRole('button', {
+ name: /delete/i,
+ });
+ fireEvent.click(deleteButton);
+
+ expect(tag).not.toBeInTheDocument();
+
+ // Click "Cancel"
+ const cancelButton = screen.getByRole('button', { name: /cancel/i });
+ fireEvent.click(cancelButton);
+
+ expect(screen.getByText(/tag 3/i)).toBeInTheDocument();
+ });
+
+ it('should show Language Taxonomy', async () => {
+ setupMockDataLanguageTaxonomyTestings(true);
+ render(
);
+ expect(await screen.findByText('Languages')).toBeInTheDocument();
+ });
+
+ it('should hide Language Taxonomy', async () => {
+ setupMockDataLanguageTaxonomyTestings(false);
+ render(
);
+ expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+ expect(screen.queryByText('Languages')).not.toBeInTheDocument();
+ });
+
+ it('should show empty drawer message', async () => {
+ useContentTaxonomyTagsData.mockReturnValue({
+ isSuccess: true,
+ data: {
+ taxonomies: [],
+ },
+ });
+ getTaxonomyListData.mockResolvedValue({
+ results: [],
+ });
+ useTaxonomyTagsData.mockReturnValue({
+ hasMorePages: false,
+ canAddTag: false,
+ tagPages: {
+ isLoading: false,
+ isError: false,
+ data: [],
+ },
+ });
+
+ render(
);
+ expect(await screen.findByText(/to use tags, please or contact your administrator\./i)).toBeInTheDocument();
+ const enableButton = screen.getByRole('button', {
+ name: /enable a taxonomy/i,
+ });
+ fireEvent.click(enableButton);
+ expect(mockNavigate).toHaveBeenCalledWith('/taxonomies');
+ });
});
diff --git a/src/content-tags-drawer/ContentTagsDrawerHelper.jsx b/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
index 3f6d5508c5..16ec9f6d94 100644
--- a/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
@@ -4,8 +4,9 @@ import { useIntl } from '@edx/frontend-platform/i18n';
import { cloneDeep } from 'lodash';
import { useContentData, useContentTaxonomyTagsData, useContentTaxonomyTagsUpdater } from './data/apiHooks';
import { useTaxonomyList } from '../taxonomy/data/apiHooks';
-import { extractOrgFromContentId } from './utils';
+import { extractOrgFromContentId, languageExportId } from './utils';
import messages from './messages';
+import { ContentTagsDrawerSheetContext } from './common/context';
/** @typedef {import("./data/types.mjs").Tag} ContentTagData */
/** @typedef {import("./data/types.mjs").StagedTagData} StagedTagData */
@@ -42,12 +43,15 @@ import messages from './messages';
* showToastAfterSave: () => void,
* closeToast: () => void,
* setCollapsibleToInitalState: () => void,
+ * otherTaxonomies: TagsInTaxonomy[],
* }}
*/
const useContentTagsDrawerContext = (contentId) => {
const intl = useIntl();
const org = extractOrgFromContentId(contentId);
+ const { setBlockingSheet } = React.useContext(ContentTagsDrawerSheetContext);
+
// True if the drawer is on edit mode.
const [isEditMode, setIsEditMode] = React.useState(false);
// This stores the tags added on the add tags Select in all taxonomies.
@@ -58,6 +62,8 @@ const useContentTagsDrawerContext = (contentId) => {
const [globalStagedRemovedContentTags, setGlobalStagedRemovedContentTags] = React.useState({});
// Merges feched tags, global staged tags and global removed staged tags
const [tagsByTaxonomy, setTagsByTaxonomy] = React.useState(/** @type TagsInTaxonomy[] */ ([]));
+ // Other taxonomies that the user doesn't have permissions
+ const [otherTaxonomies, setOtherTaxonomies] = React.useState(/** @type TagsInTaxonomy[] */ ([]));
// This stores taxonomy collapsible states (open/close).
const [collapsibleStates, setColapsibleStates] = React.useState({});
// Message to show a toast in the content drawer.
@@ -74,7 +80,7 @@ const useContentTagsDrawerContext = (contentId) => {
const { data: taxonomyListData, isSuccess: isTaxonomyListLoaded } = useTaxonomyList(org);
// Tags feched from database
- const fechedTaxonomies = React.useMemo(() => {
+ const { fechedTaxonomies, fechedOtherTaxonomies } = React.useMemo(() => {
const sortTaxonomies = (taxonomiesList) => {
const taxonomiesWithData = taxonomiesList.filter(
(t) => t.contentTags.length !== 0,
@@ -114,17 +120,43 @@ const useContentTagsDrawerContext = (contentId) => {
const contentTaxonomies = contentTaxonomyTagsData.taxonomies;
+ const otherTaxonomiesList = [];
+
// eslint-disable-next-line array-callback-return
contentTaxonomies.map((contentTaxonomyTags) => {
const contentTaxonomy = taxonomiesList.find((taxonomy) => taxonomy.id === contentTaxonomyTags.taxonomyId);
if (contentTaxonomy) {
contentTaxonomy.contentTags = contentTaxonomyTags.tags;
+ } else {
+ otherTaxonomiesList.push({
+ canChangeTaxonomy: false,
+ canDeleteTaxonomy: false,
+ canTagObject: false,
+ contentTags: contentTaxonomyTags.tags,
+ enabled: true,
+ exportId: contentTaxonomyTags.exportId,
+ id: contentTaxonomyTags.taxonomyId,
+ name: contentTaxonomyTags.name,
+ visibleToAuthors: true,
+ });
}
});
- return sortTaxonomies(taxonomiesList);
+ // Delete Language taxonomy if is empty
+ const filteredTaxonomies = taxonomiesList.filter(
+ (taxonomy) => taxonomy.exportId !== languageExportId
+ || taxonomy.contentTags.length !== 0,
+ );
+
+ return {
+ fechedTaxonomies: sortTaxonomies(filteredTaxonomies),
+ fechedOtherTaxonomies: otherTaxonomiesList,
+ };
}
- return [];
+ return {
+ fechedTaxonomies: [],
+ fechedOtherTaxonomies: [],
+ };
}, [taxonomyListData, contentTaxonomyTagsData]);
// Add a content tags to the staged tags for a taxonomy
@@ -201,6 +233,9 @@ const useContentTagsDrawerContext = (contentId) => {
fechedTaxonomies.forEach((taxonomy) => {
updatedState[taxonomy.id] = true;
});
+ fechedOtherTaxonomies.forEach((taxonomy) => {
+ updatedState[taxonomy.id] = true;
+ });
setColapsibleStates(updatedState);
}, [fechedTaxonomies, setColapsibleStates]);
@@ -211,6 +246,10 @@ const useContentTagsDrawerContext = (contentId) => {
// Taxonomy with content tags must be open
updatedState[taxonomy.id] = taxonomy.contentTags.length !== 0;
});
+ fechedOtherTaxonomies.forEach((taxonomy) => {
+ // Taxonomy with content tags must be open
+ updatedState[taxonomy.id] = taxonomy.contentTags.length !== 0;
+ });
setColapsibleStates(updatedState);
}, [fechedTaxonomies, setColapsibleStates]);
@@ -235,20 +274,33 @@ const useContentTagsDrawerContext = (contentId) => {
setCollapsibleToInitalState,
]);
- // Build toast message and show toast after save drawer.
+ // Count added and removed tags
/* istanbul ignore next */
- const showToastAfterSave = React.useCallback(() => {
+ const countTags = React.useCallback(() => {
const tagsAddedList = Object.values(globalStagedContentTags);
const tagsRemovedList = Object.values(globalStagedRemovedContentTags);
const tagsAdded = tagsAddedList.length === 1 ? tagsAddedList[0].length : tagsAddedList.reduce(
+ /* istanbul ignore next */
(acc, curr) => acc + curr.length,
0,
);
const tagsRemoved = tagsRemovedList.length === 1 ? tagsRemovedList[0].length : tagsRemovedList.reduce(
+ /* istanbul ignore next */
(acc, curr) => acc + curr.length,
0,
);
+ return {
+ tagsAdded,
+ tagsRemoved,
+ };
+ }, [globalStagedContentTags, globalStagedRemovedContentTags]);
+
+ // Build toast message and show toast after save drawer.
+ /* istanbul ignore next */
+ const showToastAfterSave = React.useCallback(() => {
+ const { tagsAdded, tagsRemoved } = countTags();
+
let message;
if (tagsAdded && tagsRemoved) {
message = `${intl.formatMessage(
@@ -273,7 +325,7 @@ const useContentTagsDrawerContext = (contentId) => {
);
}
setToastMessage(message);
- }, [globalStagedContentTags, globalStagedRemovedContentTags, setToastMessage]);
+ }, [setToastMessage, countTags]);
// Close the toast
const closeToast = React.useCallback(() => setToastMessage(undefined), [setToastMessage]);
@@ -294,6 +346,10 @@ const useContentTagsDrawerContext = (contentId) => {
{ ...acc, [obj.id]: obj }
), {});
+ const mergedOtherTaxonomies = cloneDeep(fechedOtherTaxonomies).reduce((acc, obj) => (
+ { ...acc, [obj.id]: obj }
+ ), {});
+
Object.keys(globalStagedContentTags).forEach((taxonomyId) => {
if (mergedTags[taxonomyId]) {
// TODO test this
@@ -313,6 +369,10 @@ const useContentTagsDrawerContext = (contentId) => {
mergedTags[taxonomyId].contentTags = mergedTags[taxonomyId].contentTags.filter(
(t) => !globalStagedRemovedContentTags[taxonomyId].includes(t.value),
);
+ } else if (mergedOtherTaxonomies[taxonomyId]) {
+ mergedOtherTaxonomies[taxonomyId].contentTags = mergedOtherTaxonomies[taxonomyId].contentTags.filter(
+ (t) => !globalStagedRemovedContentTags[taxonomyId].includes(t.value),
+ );
}
});
@@ -321,8 +381,35 @@ const useContentTagsDrawerContext = (contentId) => {
const mergedTagsArray = fechedTaxonomies.map(obj => mergedTags[obj.id]);
setTagsByTaxonomy(mergedTagsArray);
+ setOtherTaxonomies(Object.values(mergedOtherTaxonomies));
+
+ if (setBlockingSheet) {
+ const areChangesInTags = () => {
+ // It is calculated in this way, because there are cases in which
+ // there are keys in the map, but they contain empty lists
+ // (e.g. add a tag, and remove the same tag later).
+
+ const tagsAddedList = Object.values(globalStagedContentTags);
+ const tagsRemovedList = Object.values(globalStagedRemovedContentTags);
+
+ if (tagsAddedList.some(tags => tags.length > 0)) {
+ return true;
+ }
+ if (tagsRemovedList.some(tags => tags.length > 0)) {
+ return true;
+ }
+ return false;
+ };
+
+ if (areChangesInTags()) {
+ setBlockingSheet(true);
+ } else {
+ setBlockingSheet(false);
+ }
+ }
}, [
fechedTaxonomies,
+ fechedOtherTaxonomies,
globalStagedContentTags,
globalStagedRemovedContentTags,
]);
@@ -335,6 +422,12 @@ const useContentTagsDrawerContext = (contentId) => {
tags: tags.contentTags.map(t => t.value),
});
});
+ otherTaxonomies.forEach((tags) => {
+ tagsData.push({
+ taxonomy: tags.id,
+ tags: tags.contentTags.map(t => t.value),
+ });
+ });
// @ts-ignore
updateTags.mutate({ tagsData });
}, [tagsByTaxonomy]);
@@ -367,6 +460,7 @@ const useContentTagsDrawerContext = (contentId) => {
showToastAfterSave,
closeToast,
setCollapsibleToInitalState,
+ otherTaxonomies,
};
};
diff --git a/src/content-tags-drawer/ContentTagsDrawerSheet.jsx b/src/content-tags-drawer/ContentTagsDrawerSheet.jsx
new file mode 100644
index 0000000000..c37b7581f3
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsDrawerSheet.jsx
@@ -0,0 +1,44 @@
+// @ts-check
+import React, { useMemo, useState } from 'react';
+import { Sheet } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import ContentTagsDrawer from './ContentTagsDrawer';
+import { ContentTagsDrawerSheetContext } from './common/context';
+
+const ContentTagsDrawerSheet = ({ id, onClose, showSheet }) => {
+ const [blockingSheet, setBlockingSheet] = useState(false);
+
+ const context = useMemo(() => ({
+ blockingSheet, setBlockingSheet,
+ }), [blockingSheet, setBlockingSheet]);
+
+ return (
+
+
+
+
+
+ );
+};
+
+ContentTagsDrawerSheet.propTypes = {
+ id: PropTypes.string,
+ onClose: PropTypes.func,
+ showSheet: PropTypes.bool,
+};
+
+ContentTagsDrawerSheet.defaultProps = {
+ id: undefined,
+ onClose: undefined,
+ showSheet: false,
+};
+
+export default ContentTagsDrawerSheet;
diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
index 4960e30912..394ab6b56e 100644
--- a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
@@ -309,7 +309,7 @@ const ContentTagsDropDownSelector = ({
? (
)}
diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx
index 70d95187f2..08cc6e9bd5 100644
--- a/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx
@@ -282,4 +282,28 @@ describe('
', () => {
expect(getByText(message)).toBeInTheDocument();
});
});
+
+ it('should render "noTagsInTaxonomy" message if taxonomy is empty', async () => {
+ useTaxonomyTagsData.mockReturnValueOnce({
+ hasMorePages: false,
+ tagPages: {
+ isLoading: false,
+ isError: false,
+ isSuccess: true,
+ data: [],
+ },
+ });
+
+ const searchTerm = '';
+ await act(async () => {
+ const { getByText } = await getComponent({ ...data, searchTerm });
+
+ await waitFor(() => {
+ expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, searchTerm);
+ });
+
+ const message = 'No tags in this taxonomy yet';
+ expect(getByText(message)).toBeInTheDocument();
+ });
+ });
});
diff --git a/src/content-tags-drawer/common/context.js b/src/content-tags-drawer/common/context.js
index 966e276e4b..7aab97aa60 100644
--- a/src/content-tags-drawer/common/context.js
+++ b/src/content-tags-drawer/common/context.js
@@ -34,4 +34,16 @@ export const ContentTagsDrawerContext = React.createContext({
showToastAfterSave: /** @type{() => void} */ (() => {}),
closeToast: /** @type{() => void} */ (() => {}),
setCollapsibleToInitalState: /** @type{() => void} */ (() => {}),
+ otherTaxonomies: /** @type{TagsInTaxonomy[]} */ ([]),
+});
+
+// This context has not been added to ContentTagsDrawerContext because it has been
+// created one level higher to control the behavior of the Sheet that contatins the Drawer.
+// This logic is not used in legacy edx-platform screens. But it can be separated if we keep
+// the contexts separate.
+// TODO We can join both contexts when the Drawer is no longer used on edx-platform
+/* istanbul ignore next */
+export const ContentTagsDrawerSheetContext = React.createContext({
+ blockingSheet: /** @type{boolean} */ (false),
+ setBlockingSheet: /** @type{Function} */ (() => {}),
});
diff --git a/src/content-tags-drawer/data/apiHooks.jsx b/src/content-tags-drawer/data/apiHooks.jsx
index 7133caaf22..a9e09ae85e 100644
--- a/src/content-tags-drawer/data/apiHooks.jsx
+++ b/src/content-tags-drawer/data/apiHooks.jsx
@@ -1,5 +1,6 @@
// @ts-check
import { useMemo } from 'react';
+import { getConfig } from '@edx/frontend-platform';
import {
useQuery,
useQueries,
@@ -11,6 +12,7 @@ import {
getContentTaxonomyTagsData,
getContentData,
updateContentTaxonomyTags,
+ getContentTaxonomyTagsCount,
} from './api';
/** @typedef {import("../../taxonomy/tag-list/data/types.mjs").TagListData} TagListData */
@@ -145,5 +147,40 @@ export const useContentTaxonomyTagsUpdater = (contentId) => {
}
queryClient.invalidateQueries({ queryKey: ['contentTagsCount', contentPattern] });
},
+ onSuccess: /* istanbul ignore next */ () => {
+ /* istanbul ignore next */
+ if (window.top != null) {
+ // This send messages to the parent page if the drawer is called from a iframe.
+ // Is used on Studio to update tags data and counts.
+ // In the future, when the Course Outline Page and Unit Page are integrated into this MFE,
+ // they should just use React Query to load the tag counts, and React Query will automatically
+ // refresh those counts when the mutation invalidates them. So this postMessage is just a temporary
+ // feature to support the legacy Django template courseware page.
+
+ // Sends content tags.
+ getContentTaxonomyTagsData(contentId).then((data) => {
+ const contentData = {
+ contentId,
+ ...data,
+ };
+ window.top?.postMessage(
+ { type: 'authoring.events.tags.updated', data: contentData },
+ getConfig().STUDIO_BASE_URL,
+ );
+ });
+
+ // Sends tags count.
+ getContentTaxonomyTagsCount(contentId).then((data) => {
+ const contentData = {
+ contentId,
+ count: data,
+ };
+ window.top?.postMessage(
+ { type: 'authoring.events.tags.count.updated', data: contentData },
+ getConfig().STUDIO_BASE_URL,
+ );
+ });
+ }
+ },
});
};
diff --git a/src/content-tags-drawer/data/types.mjs b/src/content-tags-drawer/data/types.mjs
index 5a4c1bf665..42de8e3a23 100644
--- a/src/content-tags-drawer/data/types.mjs
+++ b/src/content-tags-drawer/data/types.mjs
@@ -14,6 +14,7 @@
* @property {number} taxonomyId
* @property {boolean} canTagObject
* @property {Tag[]} tags
+ * @property {string} exportId
*/
/**
diff --git a/src/content-tags-drawer/index.js b/src/content-tags-drawer/index.js
index 8b9a48e354..87f64a4f6b 100644
--- a/src/content-tags-drawer/index.js
+++ b/src/content-tags-drawer/index.js
@@ -1,2 +1,4 @@
// eslint-disable-next-line import/prefer-default-export
export { default as ContentTagsDrawer } from './ContentTagsDrawer';
+// eslint-disable-next-line import/prefer-default-export
+export { default as ContentTagsDrawerSheet } from './ContentTagsDrawerSheet';
diff --git a/src/content-tags-drawer/messages.js b/src/content-tags-drawer/messages.js
index ff7d168b6e..d461d32230 100644
--- a/src/content-tags-drawer/messages.js
+++ b/src/content-tags-drawer/messages.js
@@ -25,6 +25,11 @@ const messages = defineMessages({
id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.no-tags-found',
defaultMessage: 'No tags found with the search term "{searchTerm}"',
},
+ noTagsInTaxonomyMessage: {
+ id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.no-tags-in-taxonomy',
+ defaultMessage: 'No tags in this taxonomy yet',
+ description: 'Message when the user uses the tags dropdown selector of an empty taxonomy',
+ },
taxonomyTagChecked: {
id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.tag-checked',
defaultMessage: 'Checked',
@@ -63,6 +68,10 @@ const messages = defineMessages({
id: 'course-authoring.content-tags-drawer.content-tags-collapsible.custom-menu.placeholder-text',
defaultMessage: 'Add a tag',
},
+ collapsibleNoTagsAddedText: {
+ id: 'course-authoring.content-tags-drawer.content-tags-collapsible.custom-menu.no-tags-added-text',
+ defaultMessage: 'No tags added yet.',
+ },
collapsibleAddStagedTagsButtonText: {
id: 'course-authoring.content-tags-drawer.content-tags-collapsible.custom-menu.save-staged-tags',
defaultMessage: 'Add tags',
@@ -110,6 +119,26 @@ const messages = defineMessages({
defaultMessage: 'Delete',
description: 'Alt label for Delete tag button.',
},
+ otherTagsHeader: {
+ id: 'course-authoring.content-tags-drawer.other-tags.header',
+ defaultMessage: 'Other tags',
+ description: 'Header of "Other tags" subsection in tags drawer',
+ },
+ otherTagsDescription: {
+ id: 'course-authoring.content-tags-drawer.other-tags.description',
+ defaultMessage: 'These tags are already applied, but you can\'t add new ones as you don\'t have access to their taxonomies.',
+ description: 'Description of "Other tags" subsection in tags drawer',
+ },
+ emptyDrawerContent: {
+ id: 'course-authoring.content-tags-drawer.empty',
+ defaultMessage: 'To use tags, please {link} or contact your administrator.',
+ description: 'Message when there are no taxonomies.',
+ },
+ emptyDrawerContentLink: {
+ id: 'course-authoring.content-tags-drawer.empty-link',
+ defaultMessage: 'enable a taxonomy',
+ description: 'Message of the link used in empty drawer message.',
+ },
});
export default messages;
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx
index d4ee05c588..ca7659a17f 100644
--- a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx
+++ b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx
@@ -1,12 +1,12 @@
// @ts-check
import React, { useState, useMemo } from 'react';
import {
- Card, Stack, Button, Sheet, Collapsible, Icon,
+ Card, Stack, Button, Collapsible, Icon,
} from '@openedx/paragon';
import { ArrowDropDown, ArrowDropUp } from '@openedx/paragon/icons';
import { useIntl } from '@edx/frontend-platform/i18n';
import { useParams } from 'react-router-dom';
-import { ContentTagsDrawer } from '..';
+import { ContentTagsDrawerSheet } from '..';
import messages from '../messages';
import { useContentTaxonomyTagsData } from '../data/apiHooks';
@@ -93,16 +93,11 @@ const TagsSidebarBody = () => {
-
-
-
+ showSheet={showManageTags}
+ />
);
};
diff --git a/src/content-tags-drawer/utils.js b/src/content-tags-drawer/utils.js
index ac81f8dc48..06dd9f5784 100644
--- a/src/content-tags-drawer/utils.js
+++ b/src/content-tags-drawer/utils.js
@@ -1,2 +1,3 @@
// eslint-disable-next-line import/prefer-default-export
export const extractOrgFromContentId = (contentId) => contentId.split('+')[0].split(':')[1];
+export const languageExportId = 'languages-v1';
diff --git a/src/course-checklist/ChecklistSection/ChecklistItemComment.jsx b/src/course-checklist/ChecklistSection/ChecklistItemComment.jsx
index b254a79c16..92fb83ea32 100644
--- a/src/course-checklist/ChecklistSection/ChecklistItemComment.jsx
+++ b/src/course-checklist/ChecklistSection/ChecklistItemComment.jsx
@@ -79,10 +79,9 @@ const ChecklistItemComment = ({
{gradedAssignmentsOutsideDateRange.map(assignment => (
-
-
+
+ {assignment.displayName}
+
))}
diff --git a/src/course-checklist/ChecklistSection/utils/getValidatedValue.js b/src/course-checklist/ChecklistSection/utils/getValidatedValue.js
index 695ac602e0..f6b745e1e8 100644
--- a/src/course-checklist/ChecklistSection/utils/getValidatedValue.js
+++ b/src/course-checklist/ChecklistSection/utils/getValidatedValue.js
@@ -2,30 +2,30 @@ import * as healthValidators from './courseChecklistValidators';
const getValidatedValue = (data, id) => {
switch (id) {
- case 'welcomeMessage':
- return healthValidators.hasWelcomeMessage(data.updates);
- case 'gradingPolicy':
- return healthValidators.hasGradingPolicy(data.grades);
- case 'certificate':
- return healthValidators.hasCertificate(data.certificates);
- case 'courseDates':
- return healthValidators.hasDates(data.dates);
- case 'assignmentDeadlines':
- return healthValidators.hasAssignmentDeadlines(data.assignments, data.dates);
- case 'videoDuration':
- return healthValidators.hasShortVideoDuration(data.videos);
- case 'mobileFriendlyVideo':
- return healthValidators.hasMobileFriendlyVideos(data.videos);
- case 'diverseSequences':
- return healthValidators.hasDiverseSequences(data.subsections);
- case 'weeklyHighlights':
- return healthValidators.hasWeeklyHighlights(data.sections);
- case 'unitDepth':
- return healthValidators.hasShortUnitDepth(data.units);
- case 'proctoringEmail':
- return healthValidators.hasProctoringEscalationEmail(data.proctoring);
- default:
- throw new Error(`Unknown validator ${id}.`);
+ case 'welcomeMessage':
+ return healthValidators.hasWelcomeMessage(data.updates);
+ case 'gradingPolicy':
+ return healthValidators.hasGradingPolicy(data.grades);
+ case 'certificate':
+ return healthValidators.hasCertificate(data.certificates);
+ case 'courseDates':
+ return healthValidators.hasDates(data.dates);
+ case 'assignmentDeadlines':
+ return healthValidators.hasAssignmentDeadlines(data.assignments, data.dates);
+ case 'videoDuration':
+ return healthValidators.hasShortVideoDuration(data.videos);
+ case 'mobileFriendlyVideo':
+ return healthValidators.hasMobileFriendlyVideos(data.videos);
+ case 'diverseSequences':
+ return healthValidators.hasDiverseSequences(data.subsections);
+ case 'weeklyHighlights':
+ return healthValidators.hasWeeklyHighlights(data.sections);
+ case 'unitDepth':
+ return healthValidators.hasShortUnitDepth(data.units);
+ case 'proctoringEmail':
+ return healthValidators.hasProctoringEscalationEmail(data.proctoring);
+ default:
+ throw new Error(`Unknown validator ${id}.`);
}
};
diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index 0ebbdf3497..e7468e68fb 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -8,12 +8,12 @@ import {
Layout,
Row,
TransitionReplace,
+ Toast,
} from '@openedx/paragon';
import { Helmet } from 'react-helmet';
import {
Add as IconAdd,
CheckCircle as CheckCircleIcon,
- Warning as WarningIcon,
} from '@openedx/paragon/icons';
import { useSelector } from 'react-redux';
import {
@@ -21,6 +21,7 @@ import {
SortableContext,
verticalListSortingStrategy,
} from '@dnd-kit/sortable';
+import { useLocation } from 'react-router-dom';
import { LoadingSpinner } from '../generic/Loading';
import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
@@ -53,9 +54,11 @@ import {
} from '../generic/drag-helper/utils';
import { useCourseOutline } from './hooks';
import messages from './messages';
+import { getTagsExportFile } from './data/api';
const CourseOutline = ({ courseId }) => {
const intl = useIntl();
+ const location = useLocation();
const {
courseName,
@@ -66,7 +69,6 @@ const CourseOutline = ({ courseId }) => {
isCustomRelativeDatesActive,
isLoading,
isReIndexShow,
- showErrorAlert,
showSuccessAlert,
isSectionsExpanded,
isEnableHighlightsModalOpen,
@@ -116,8 +118,26 @@ const CourseOutline = ({ courseId }) => {
handleSectionDragAndDrop,
handleSubsectionDragAndDrop,
handleUnitDragAndDrop,
+ errors,
} = useCourseOutline({ courseId });
+ // Use `setToastMessage` to show the toast.
+ const [toastMessage, setToastMessage] = useState(/** @type{null|string} */ (null));
+
+ useEffect(() => {
+ if (location.hash === '#export-tags') {
+ setToastMessage(intl.formatMessage(messages.exportTagsCreatingToastMessage));
+ getTagsExportFile(courseId, courseName).then(() => {
+ setToastMessage(intl.formatMessage(messages.exportTagsSuccessToastMessage));
+ }).catch(() => {
+ setToastMessage(intl.formatMessage(messages.exportTagsErrorToastMessage));
+ });
+
+ // Delete `#export-tags` from location
+ window.location.href = '#';
+ }
+ }, [location]);
+
const [sections, setSections] = useState(sectionsList);
const restoreSectionList = () => {
@@ -231,6 +251,7 @@ const CourseOutline = ({ courseId }) => {
mfeProctoredExamSettingsUrl={mfeProctoredExamSettingsUrl}
advanceSettingsUrl={advanceSettingsUrl}
savingStatus={savingStatus}
+ errors={errors}
/>
{showSuccessAlert ? (
@@ -258,6 +279,7 @@ const CourseOutline = ({ courseId }) => {
isDisabledReindexButton={isDisabledReindexButton}
hasSections={Boolean(sectionsList.length)}
courseActions={courseActions}
+ errors={errors}
/>
)}
/>
@@ -279,132 +301,134 @@ const CourseOutline = ({ courseId }) => {
openEnableHighlightsModal={openEnableHighlightsModal}
handleVideoSharingOptionChange={handleVideoSharingOptionChange}
/>
-
- {sections.length ? (
- <>
-
-
+ {sections.length ? (
+ <>
+
- {sections.map((section, sectionIndex) => (
-
-
+ {sections.map((section, sectionIndex) => (
+
- {section.childInfo.children.map((subsection, subsectionIndex) => (
-
-
+ {section.childInfo.children.map((subsection, subsectionIndex) => (
+
- {subsection.childInfo.children.map((unit, unitIndex) => (
-
- ))}
-
-
- ))}
-
-
- ))}
-
-
- {courseActions.childAddable && (
-
- )}
-
- ) : (
-
- )}
-