refactor: merge useContentTaxonomyTagsCount and useContentTagsCount

src/content-tags-drawer/data/apiHooks.jsx

@@ -11,7 +11,6 @@ import {
   getContentTaxonomyTagsData,
   getContentData,
   updateContentTaxonomyTags,
-  getContentTaxonomyTagsCount,
 } from './api';
 
 /** @typedef {import("../../taxonomy/tag-list/data/types.mjs").TagListData} TagListData */
@@ -106,18 +105,6 @@ export const useContentTaxonomyTagsData = (contentId) => (
   })
 );
 
-/**
- * Build the query to get the count og taxonomy tags applied to the content object
- * @param {string} contentId The ID of the content object to fetch the count of the applied tags for
- */
-// FixMe: remove
-// export const useContentTaxonomyTagsCount = (contentId) => (
-//   useQuery({
-//     queryKey: ['contentTaxonomyTagsCount', contentId],
-//     queryFn: () => getContentTaxonomyTagsCount(contentId),
-//   })
-// );
-
 /**
  * Builds the query to get meta data about the content object
  * @param {string} contentId The id of the content object (unit/component)
@@ -159,7 +146,6 @@ export const useContentTaxonomyTagsUpdater = (contentId, taxonomyId) => {
       }
       queryClient.invalidateQueries({ queryKey: ['contentTagsCount', contentPattern] });
       // FixMe: remove code below
-      // queryClient.invalidateQueries({ queryKey: ['unitTagsCount'] });
       // queryClient.invalidateQueries({ queryKey: ['contentTaxonomyTagsCount', contentId] });
     },
   });

src/content-tags-drawer/data/apiHooks.test.jsx

@@ -6,7 +6,6 @@ import {
   useContentTaxonomyTagsData,
   useContentData,
   useContentTaxonomyTagsUpdater,
-  useContentTaxonomyTagsCount,
 } from './apiHooks';
 
 import { updateContentTaxonomyTags } from './api';
@@ -135,24 +134,6 @@ describe('useContentTaxonomyTagsData', () => {
   });
 });
 
-describe('useContentTaxonomyTagsCount', () => {
-  it('should return success response', () => {
-    useQuery.mockReturnValueOnce({ isSuccess: true, data: 'data' });
-    const contentId = '123';
-    const result = useContentTaxonomyTagsCount(contentId);
-
-    expect(result).toEqual({ isSuccess: true, data: 'data' });
-  });
-
-  it('should return failure response', () => {
-    useQuery.mockReturnValueOnce({ isSuccess: false });
-    const contentId = '123';
-    const result = useContentTaxonomyTagsCount(contentId);
-
-    expect(result).toEqual({ isSuccess: false });
-  });
-});
-
 describe('useContentData', () => {
   it('should return success response', () => {
     useQuery.mockReturnValueOnce({ isSuccess: true, data: 'data' });

src/content-tags-drawer/tags-sidebar-controls/TagsSidebarHeader.jsx

@@ -4,18 +4,18 @@ import { Stack } from '@openedx/paragon';
 import { useParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
+import { useContentTagsCount } from '../../generic/data/apiHooks';
 import messages from '../messages';
-import { useContentTaxonomyTagsCount } from '../data/apiHooks';
 import TagCount from '../../generic/tag-count';
 
 const TagsSidebarHeader = () => {
   const intl = useIntl();
   const contentId = useParams().blockId;
 
   const {
-    data: contentTaxonomyTagsCount,
-    isSuccess: isContentTaxonomyTagsCountLoaded,
-  } = useContentTaxonomyTagsCount(contentId || '');
+    data: contentTagsCount,
+    isSuccess: isContentTagsCountLoaded,
+  } = useContentTagsCount(contentId || '');
 
   return (
     <Stack
@@ -25,8 +25,8 @@ const TagsSidebarHeader = () => {
       <h3 className="course-unit-sidebar-header-title m-0">
         {intl.formatMessage(messages.tagsSidebarTitle)}
       </h3>
-      { isContentTaxonomyTagsCountLoaded
-        && <TagCount count={contentTaxonomyTagsCount} />}
+      { isContentTagsCountLoaded
+        && <TagCount count={contentTagsCount} />}
     </Stack>
   );
 };

src/content-tags-drawer/tags-sidebar-controls/TagsSidebarHeader.test.jsx

@@ -1,36 +1,43 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import TagsSidebarHeader from './TagsSidebarHeader';
-import { useContentTaxonomyTagsCount } from '../data/apiHooks';
 
-jest.mock('../data/apiHooks', () => ({
-  useContentTaxonomyTagsCount: jest.fn(() => ({
-    isSuccess: false,
-    data: 17,
-  })),
+const mockGetTagsCount = jest.fn();
+
+jest.mock('../../generic/data/api', () => ({
+  ...jest.requireActual('../../generic/data/api'),
+  getTagsCount: () => mockGetTagsCount(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ blockId: '123' }),
 }));
 
+const queryClient = new QueryClient();
+
 const RootWrapper = () => (
   <IntlProvider locale="en" messages={{}}>
-    <TagsSidebarHeader />
+    <QueryClientProvider client={queryClient}>
+      <TagsSidebarHeader />
+    </QueryClientProvider>
   </IntlProvider>
 );
 
 describe('<TagsSidebarHeader>', () => {
   it('should not render count on loading', () => {
+    mockGetTagsCount.mockReturnValue(new Promise(() => {})); // never resolves
     render(<RootWrapper />);
     expect(screen.getByRole('heading', { name: /unit tags/i })).toBeInTheDocument();
     expect(screen.queryByText('17')).not.toBeInTheDocument();
   });
 
-  it('should render count after query is complete', () => {
-    useContentTaxonomyTagsCount.mockReturnValue({
-      isSuccess: true,
-      data: 17,
-    });
+  it('should render count after query is complete', async () => {
+    mockGetTagsCount.mockResolvedValue({ 123: 17 });
     render(<RootWrapper />);
     expect(screen.getByRole('heading', { name: /unit tags/i })).toBeInTheDocument();
-    expect(screen.getByText('17')).toBeInTheDocument();
+    expect(await screen.findByText('17')).toBeInTheDocument();
   });
 });

src/course-outline/__mocks__/index.js

@@ -4,4 +4,3 @@ export { default as courseBestPracticesMock } from './courseBestPractices';
 export { default as courseLaunchMock } from './courseLaunch';
 export { default as courseSectionMock } from './courseSection';
 export { default as courseSubsectionMock } from './courseSubsection';
-export { default as contentTagsCountMock } from './contentTagsCount';

src/course-outline/card-header/CardHeader.jsx

@@ -18,7 +18,7 @@ import {
   EditOutline as EditIcon,
 } from '@openedx/paragon/icons';
 
-import { useContentTagsCount } from '../data/apiHooks';
+import { useContentTagsCount } from '../../generic/data/apiHooks';
 import { ContentTagsDrawer } from '../../content-tags-drawer';
 import TagCount from '../../generic/tag-count';
 import { useEscapeClick } from '../../hooks';

src/course-outline/card-header/CardHeader.test.jsx

@@ -24,8 +24,8 @@ const closeFormMock = jest.fn();
 
 const mockGetTagsCount = jest.fn();
 
-jest.mock('../data/api', () => ({
-  ...jest.requireActual('../data/api'),
+jest.mock('../../generic/data/api', () => ({
+  ...jest.requireActual('../../generic/data/api'),
   getTagsCount: () => mockGetTagsCount(),
 }));
 

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<Object>}
-*/
-export async function getTagsCount(contentPattern) {
-  if (contentPattern) {
-    const { data } = await getAuthenticatedHttpClient()
-      .get(getTagsCountApiUrl(contentPattern));
-
-    return data;
-  }
-  return null;
-}

src/course-outline/status-bar/StatusBar.jsx

@@ -12,7 +12,7 @@ import { ContentTagsDrawer } from '../../content-tags-drawer';
 import TagCount from '../../generic/tag-count';
 import { useHelpUrls } from '../../help-urls/hooks';
 import { VIDEO_SHARING_OPTIONS } from '../constants';
-import { useContentTagsCount } from '../data/apiHooks';
+import { useContentTagsCount } from '../../generic/data/apiHooks';
 import messages from './messages';
 import { getVideoSharingOptionText } from '../utils';
 

src/course-outline/status-bar/StatusBar.test.jsx

@@ -25,8 +25,8 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-jest.mock('../data/api', () => ({
-  ...jest.requireActual('../data/api'),
+jest.mock('../../generic/data/api', () => ({
+  ...jest.requireActual('../../generic/data/api'),
   getTagsCount: jest.fn().mockResolvedValue({ 'course-v1:123': 17 }),
 }));
 

src/course-unit/CourseUnit.test.jsx

@@ -69,7 +69,7 @@ jest.mock('@tanstack/react-query', () => ({
         },
         isSuccess: true,
       };
-    } if (queryKey[0] === 'contentTaxonomyTagsCount') {
+    } if (queryKey[0] === 'contentTagsCount') {
       return {
         data: 17,
         isSuccess: true,

src/course-outline/__mocks__/contentTagsCount.js → src/generic/__mocks__/contentTagsCount.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb01': 10,
   'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb02': 11,
   'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb03': 12,

src/generic/__mocks__/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as contentTagsCountMock } from './contentTagsCount';

src/generic/data/api.js

@@ -8,6 +8,7 @@ export const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
 export const getCreateOrRerunCourseUrl = () => new URL('course/', getApiBaseUrl()).href;
 export const getCourseRerunUrl = (courseId) => new URL(`/api/contentstore/v1/course_rerun/${courseId}`, getApiBaseUrl()).href;
 export const getOrganizationsUrl = () => new URL('organizations', getApiBaseUrl()).href;
+export const getTagsCountApiUrl = (contentPattern) => new URL(`api/content_tagging/v1/object_tag_counts/${contentPattern}/?count_implicit`, getApiBaseUrl()).href;
 
 /**
  * Get's organizations data. Returns list of organization names.
@@ -43,3 +44,18 @@ export async function createOrRerunCourse(courseData) {
   );
   return camelCaseObject(data);
 }
+
+/**
+ * Gets the tags count of multiple content by id separated by commas or a pattern using a '*' wildcard.
+ * @param {string} contentPattern
+ * @returns {Promise<Object>}
+*/
+export async function getTagsCount(contentPattern) {
+  if (contentPattern) {
+    const { data } = await getAuthenticatedHttpClient()
+      .get(getTagsCountApiUrl(contentPattern));
+
+    return data;
+  }
+  return null;
+}

src/generic/data/api.test.js

@@ -2,13 +2,16 @@ import MockAdapter from 'axios-mock-adapter';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
+import { contentTagsCountMock } from '../__mocks__';
 import {
   createOrRerunCourse,
   getApiBaseUrl,
   getOrganizations,
   getCreateOrRerunCourseUrl,
   getCourseRerunUrl,
   getCourseRerun,
+  getTagsCount,
+  getTagsCountApiUrl,
 } from './api';
 
 let axiosMock;
@@ -72,4 +75,19 @@ describe('generic api calls', () => {
     expect(axiosMock.history.post[0].url).toEqual(getCreateOrRerunCourseUrl());
     expect(result).toEqual(courseRerunData);
   });
+
+  it('should get tags count', async () => {
+    const pattern = 'this,is,a,pattern';
+    const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb06';
+    axiosMock.onGet().reply(200, contentTagsCountMock);
+    const result = await getTagsCount(pattern);
+    expect(axiosMock.history.get[0].url).toEqual(getTagsCountApiUrl(pattern));
+    expect(result).toEqual(contentTagsCountMock);
+    expect(contentTagsCountMock[contentId]).toEqual(15);
+  });
+
+  it('should get null on empty pattern', async () => {
+    const result = await getTagsCount('');
+    expect(result).toEqual(null);
+  });
 });