diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx index 50eb2c79b..57e2eff97 100644 --- a/src/content-tags-drawer/ContentTagsCollapsible.jsx +++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx @@ -240,12 +240,14 @@ const ContentTagsCollapsible = ({ const selectCancelRef = React.useRef(/** @type {HTMLSelectElement | null} */(null)); const selectAddRef = React.useRef(/** @type {HTMLSelectElement | null} */(null)); const selectInlineAddRef = React.useRef(/** @type {HTMLSelectElement | null} */(null)); + const selectInlineEditModeRef = React.useRef(/** @type {HTMLSelectElement | null} */(null)); const selectRef = React.useRef(/** @type {HTMLSelectElement | null} */(null)); const [selectMenuIsOpen, setSelectMenuIsOpen] = React.useState(false); const { isEditMode, + toEditMode, setStagedTags, openCollapsible, closeCollapsible, @@ -386,6 +388,23 @@ const ContentTagsCollapsible = ({ + { Object.keys(appliedContentTagsTree).length === 0 && !isEditMode + && ( +
+

{intl.formatMessage(messages.collapsibleNoTagsAddedText)} + +

+
+ )} { Object.keys(appliedContentTagsTree).length !== 0 && (
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx index 6d921df16..b3e086c92 100644 --- a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx +++ b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx @@ -132,6 +132,7 @@ const data = { globalStagedRemovedContentTags: {}, setGlobalStagedContentTags: jest.fn(), isEditMode: true, + toEditMode: jest.fn(), collapsibleState: true, openCollapsible: jest.fn(), closeCollapsible: jest.fn(), @@ -151,6 +152,7 @@ const ContentTagsCollapsibleComponent = ({ globalStagedRemovedContentTags, setGlobalStagedContentTags, isEditMode, + toEditMode, collapsibleState, openCollapsible, closeCollapsible, @@ -166,6 +168,7 @@ const ContentTagsCollapsibleComponent = ({ globalStagedRemovedContentTags, setGlobalStagedContentTags, isEditMode, + toEditMode, openCollapsible, closeCollapsible, }), []); @@ -216,6 +219,7 @@ describe('', () => { globalStagedRemovedContentTags={componentData.globalStagedRemovedContentTags} setGlobalStagedContentTags={componentData.setGlobalStagedContentTags} isEditMode={componentData.isEditMode} + toEditMode={componentData.toEditMode} collapsibleState={componentData.collapsibleState} openCollapsible={componentData.openCollapsible} closeCollapsible={componentData.closeCollapsible} @@ -250,6 +254,32 @@ describe('', () => { expect(screen.getByText(/add a tag/i)).toBeInTheDocument(); }); + it('should render "no tags added yet" when expanded in read mode', async () => { + await getComponent({ + ...data, + isEditMode: false, + taxonomyAndTagsData: { + id: 123, + name: 'Taxonomy 1', + canTagObject: true, + contentTags: [], + }, + }); + + const expandToggle = screen.getByRole('button', { + name: /taxonomy 1/i, + }); + fireEvent.click(expandToggle); + expect(screen.queryByText(/no tags added yet/i)).toBeInTheDocument(); + + const addTags = screen.getByRole('button', { + name: /add tags/i, + }); + expect(addTags).toBeInTheDocument(); + fireEvent.click(addTags); + expect(data.toEditMode).toHaveBeenCalledTimes(1); + }); + it('should call `openCollapsible` when click in the collapsible', async () => { await getComponent({ ...data, @@ -263,6 +293,7 @@ describe('', () => { expect(data.openCollapsible).toHaveBeenCalledTimes(1); expect(data.closeCollapsible).toHaveBeenCalledTimes(0); + expect(screen.queryByText(/no tags added yet/i)).not.toBeInTheDocument(); }); it('should call `closeCollapsible` when click in the collapsible', async () => { diff --git a/src/content-tags-drawer/messages.js b/src/content-tags-drawer/messages.js index ff7d168b6..a316bcc54 100644 --- a/src/content-tags-drawer/messages.js +++ b/src/content-tags-drawer/messages.js @@ -63,6 +63,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.placeholder-text', + defaultMessage: 'No tags added yet.', + }, collapsibleAddStagedTagsButtonText: { id: 'course-authoring.content-tags-drawer.content-tags-collapsible.custom-menu.save-staged-tags', defaultMessage: 'Add tags',