- {isFormOpen ? (
-
- e && e.focus()}
- value={titleValue}
- name="displayName"
- onChange={(e) => setTitleValue(e.target.value)}
- aria-label="edit field"
- onBlur={() => onEditSubmit(titleValue)}
- onKeyDown={(e) => {
- if (e.key === 'Enter') {
- onEditSubmit(titleValue);
- }
- }}
- disabled={isDisabledEditField}
- />
-
- ) : (
- <>
- {titleComponent}
-
-
- )}
-
- {(isVertical || isSequential) && (
-
+ <>
+
+ {isFormOpen ? (
+
+ e && e.focus()}
+ value={titleValue}
+ name="displayName"
+ onChange={(e) => setTitleValue(e.target.value)}
+ aria-label="edit field"
+ onBlur={() => onEditSubmit(titleValue)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ onEditSubmit(titleValue);
+ }
+ }}
+ disabled={isDisabledEditField}
+ />
+
+ ) : (
+ <>
+ {titleComponent}
+
+
)}
- { tagsCount > 0 &&
}
-
-
-
- {isSequential && proctoringExamConfigurationLink && (
+
+ {(isVertical || isSequential) && (
+
+ )}
+ { getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && contentTagCount > 0 && (
+
+ )}
+
+
+
+ {isSequential && proctoringExamConfigurationLink && (
+
+ {intl.formatMessage(messages.menuProctoringLinkText)}
+
+ )}
- {intl.formatMessage(messages.menuProctoringLinkText)}
+ {intl.formatMessage(messages.menuPublish)}
- )}
-
- {intl.formatMessage(messages.menuPublish)}
-
-
- {intl.formatMessage(messages.menuConfigure)}
-
- {onClickManageTags && (
- {intl.formatMessage(messages.menuManageTags)}
+ {intl.formatMessage(messages.menuConfigure)}
- )}
+ {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
+
+ {intl.formatMessage(messages.menuManageTags)}
+
+ )}
- {isVertical && enableCopyPasteUnits && (
-
- {intl.formatMessage(messages.menuCopy)}
-
- )}
- {actions.duplicable && (
-
- {intl.formatMessage(messages.menuDuplicate)}
-
- )}
- {actions.draggable && (
- <>
+ {isVertical && enableCopyPasteUnits && (
+
+ {intl.formatMessage(messages.menuCopy)}
+
+ )}
+ {actions.duplicable && (
- {intl.formatMessage(messages.menuMoveUp)}
+ {intl.formatMessage(messages.menuDuplicate)}
+ )}
+ {actions.draggable && (
+ <>
+
+ {intl.formatMessage(messages.menuMoveUp)}
+
+
+ {intl.formatMessage(messages.menuMoveDown)}
+
+
+ )}
+ {actions.deletable && (
- {intl.formatMessage(messages.menuMoveDown)}
+ {intl.formatMessage(messages.menuDelete)}
-
- )}
- {actions.deletable && (
-
- {intl.formatMessage(messages.menuDelete)}
-
- )}
-
-
+ )}
+
+
+
-
+
closeManageTagsDrawer()}
+ >
+ closeManageTagsDrawer()}
+ />
+
+
);
};
@@ -231,8 +252,6 @@ CardHeader.defaultProps = {
discussionEnabled: false,
discussionsSettings: {},
parentInfo: {},
- onClickManageTags: null,
- tagsCount: undefined,
cardId: '',
};
@@ -243,7 +262,6 @@ CardHeader.propTypes = {
hasChanges: PropTypes.bool.isRequired,
onClickPublish: PropTypes.func.isRequired,
onClickConfigure: PropTypes.func.isRequired,
- onClickManageTags: PropTypes.func,
onClickMenuButton: PropTypes.func.isRequired,
onClickEdit: PropTypes.func.isRequired,
isFormOpen: PropTypes.bool.isRequired,
@@ -278,7 +296,6 @@ CardHeader.propTypes = {
isTimeLimited: PropTypes.bool,
graded: PropTypes.bool,
}),
- tagsCount: PropTypes.number,
};
export default CardHeader;
diff --git a/src/course-outline/card-header/CardHeader.test.jsx b/src/course-outline/card-header/CardHeader.test.jsx
index d6bd769200..0e40058c3f 100644
--- a/src/course-outline/card-header/CardHeader.test.jsx
+++ b/src/course-outline/card-header/CardHeader.test.jsx
@@ -2,7 +2,9 @@ import { MemoryRouter } from 'react-router-dom';
import {
act, render, fireEvent, waitFor, screen,
} from '@testing-library/react';
+import { setConfig, getConfig } from '@edx/frontend-platform';
import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { ITEM_BADGE_STATUS } from '../constants';
import CardHeader from './CardHeader';
@@ -18,9 +20,15 @@ const onClickDuplicateMock = jest.fn();
const onClickConfigureMock = jest.fn();
const onClickMoveUpMock = jest.fn();
const onClickMoveDownMock = jest.fn();
-const onClickManageTagsMock = jest.fn();
const closeFormMock = jest.fn();
+const mockGetTagsCount = jest.fn();
+
+jest.mock('../../generic/data/api', () => ({
+ ...jest.requireActual('../../generic/data/api'),
+ getTagsCount: () => mockGetTagsCount(),
+}));
+
const cardHeaderProps = {
title: 'Some title',
status: ITEM_BADGE_STATUS.live,
@@ -29,7 +37,6 @@ const cardHeaderProps = {
onClickMenuButton: onClickMenuButtonMock,
onClickPublish: onClickPublishMock,
onClickEdit: onClickEditMock,
- onClickManageTags: onClickManageTagsMock,
isFormOpen: false,
onEditSubmit: jest.fn(),
closeForm: closeFormMock,
@@ -49,6 +56,8 @@ const cardHeaderProps = {
},
};
+const queryClient = new QueryClient();
+
const renderComponent = (props, entry = '/') => {
const titleComponent = (
{
return render(
-
-
- ,
+
+
+
+
+
,
);
};
@@ -170,14 +181,32 @@ describe('', () => {
expect(onClickPublishMock).toHaveBeenCalled();
});
- it('calls onClickManageTags when the menu is clicked', async () => {
+ it('only shows Manage tags menu if the waffle flag is enabled', async () => {
+ setConfig({
+ ...getConfig(),
+ ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
+ });
+ renderComponent();
+ const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
+ fireEvent.click(menuButton);
+
+ expect(screen.queryByText(messages.menuManageTags.defaultMessage)).not.toBeInTheDocument();
+ });
+
+ it('shows ContentTagsDrawer when the menu is clicked', async () => {
+ setConfig({
+ ...getConfig(),
+ ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+ });
renderComponent();
const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
fireEvent.click(menuButton);
const manageTagsMenuItem = await screen.findByText(messages.menuManageTags.defaultMessage);
- await act(async () => fireEvent.click(manageTagsMenuItem));
- expect(onClickManageTagsMock).toHaveBeenCalled();
+ fireEvent.click(manageTagsMenuItem);
+
+ // Check if the drawer is open
+ expect(screen.getByTestId('drawer-close-button')).toBeInTheDocument();
});
it('calls onClickEdit when the button is clicked', async () => {
@@ -264,19 +293,33 @@ describe('', () => {
expect(queryByText(messages.discussionEnabledBadgeText.defaultMessage)).toBeInTheDocument();
});
- it('should render tag count if is not zero', () => {
- renderComponent({
- ...cardHeaderProps,
- tagsCount: 17,
+ it('should render tag count if is not zero and the waffle flag is enabled', async () => {
+ setConfig({
+ ...getConfig(),
+ ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+ });
+ mockGetTagsCount.mockResolvedValue({ 12345: 17 });
+ renderComponent();
+ expect(await screen.findByText('17')).toBeInTheDocument();
+ });
+
+ it('shouldn render tag count if the waffle flag is disabled', async () => {
+ setConfig({
+ ...getConfig(),
+ ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
});
- expect(screen.getByText('17')).toBeInTheDocument();
+ mockGetTagsCount.mockResolvedValue({ 12345: 17 });
+ renderComponent();
+ expect(screen.queryByText('17')).not.toBeInTheDocument();
});
it('should not render tag count if is zero', () => {
- renderComponent({
- ...cardHeaderProps,
- tagsCount: 0,
+ setConfig({
+ ...getConfig(),
+ ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
});
+ mockGetTagsCount.mockResolvedValue({ 12345: 0 });
+ renderComponent();
expect(screen.queryByText('0')).not.toBeInTheDocument();
});
});
diff --git a/src/course-outline/data/api.js b/src/course-outline/data/api.js
index be053668f2..6b12cf62d1 100644
--- a/src/course-outline/data/api.js
+++ b/src/course-outline/data/api.js
@@ -29,7 +29,6 @@ export const getXBlockBaseApiUrl = () => `${getApiBaseUrl()}/xblock/`;
export const getCourseItemApiUrl = (itemId) => `${getXBlockBaseApiUrl()}${itemId}`;
export const getXBlockApiUrl = (blockId) => `${getXBlockBaseApiUrl()}outline/${blockId}`;
export const getClipboardUrl = () => `${getApiBaseUrl()}/api/content-staging/v1/clipboard/`;
-export const getTagsCountApiUrl = (contentPattern) => new URL(`api/content_tagging/v1/object_tag_counts/${contentPattern}/?count_implicit`, getApiBaseUrl()).href;
/**
* @typedef {Object} courseOutline
@@ -473,18 +472,3 @@ export async function dismissNotification(url) {
await getAuthenticatedHttpClient()
.delete(url);
}
-
-/**
- * Gets the tags count of multiple content by id separated by commas.
- * @param {string} contentPattern
- * @returns {Promise