feat: tag sections, subsections, and the whole course (FC-0053)

src/content-tags-drawer/ContentTagsDrawer.jsx

@@ -76,6 +76,15 @@
   } = useContentTaxonomyTagsData(contentId);
   const { data: taxonomyListData, isSuccess: isTaxonomyListLoaded } = useTaxonomyList(org);
 
+  let contentName = '';
+  if (isContentDataLoaded) {
+    if ('displayName' in contentData) {
+      contentName = contentData.displayName;
+    } else {
+      contentName = contentData.courseDisplayNameWithDefault;
+    }
+  }
+
   let onCloseDrawer = onClose;
   if (onCloseDrawer === undefined) {
     onCloseDrawer = () => {
@@ -129,7 +138,7 @@
         <CloseButton onClick={() => onCloseDrawer()} data-testid="drawer-close-button" />
         <span>{intl.formatMessage(messages.headerSubtitle)}</span>
         { isContentDataLoaded
-          ? <h3>{ contentData.displayName }</h3>
+          ? <h3>{ contentName }</h3>
           : (
             <div className="d-flex justify-content-center align-items-center flex-column">
               <Spinner

src/content-tags-drawer/data/api.js

@@ -30,6 +30,7 @@
 };
 export const getContentTaxonomyTagsApiUrl = (contentId) => new URL(`api/content_tagging/v1/object_tags/${contentId}/`, getApiBaseUrl()).href;
 export const getXBlockContentDataApiURL = (contentId) => new URL(`/xblock/outline/${contentId}`, getApiBaseUrl()).href;
+export const getCourseContentDataApiURL = (contentId) => new URL(`/api/contentstore/v1/course_settings/${contentId}`, getApiBaseUrl()).href;
 export const getLibraryContentDataApiUrl = (contentId) => new URL(`/api/libraries/v2/blocks/${contentId}/`, getApiBaseUrl()).href;
 export const getContentTaxonomyTagsCountApiUrl = (contentId) => new URL(`api/content_tagging/v1/object_tag_counts/${contentId}/?count_implicit`, getApiBaseUrl()).href;
 
@@ -74,9 +75,14 @@
  * @returns {Promise<import("./types.mjs").ContentData>}
  */
 export async function getContentData(contentId) {
-  const url = contentId.startsWith('lb:')
-    ? getLibraryContentDataApiUrl(contentId)
-    : getXBlockContentDataApiURL(contentId);
+  let url;
+  if (contentId.startsWith('lb:')) {
+    url = getLibraryContentDataApiUrl(contentId);
+  } else if (contentId.startsWith('course-v1:')) {
+    url = getCourseContentDataApiURL(contentId);
+  } else {
+    url = getXBlockContentDataApiURL(contentId);
+  }
   const { data } = await getAuthenticatedHttpClient().get(url);
   return camelCaseObject(data);
 }

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,17 +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
- */
-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)
@@ -150,8 +138,15 @@ export const useContentTaxonomyTagsUpdater = (contentId, taxonomyId) => {
     onSettled: /* istanbul ignore next */ () => {
       queryClient.invalidateQueries({ queryKey: ['contentTaxonomyTags', contentId] });
       /// Invalidate query with pattern on course outline
-      queryClient.invalidateQueries({ queryKey: ['unitTagsCount'] });
-      queryClient.invalidateQueries({ queryKey: ['contentTaxonomyTagsCount', contentId] });
+      let contentPattern;
+      if (contentId.includes('course-v1')) {
+        contentPattern = contentId;
+      } else {
+        contentPattern = contentId.replace(/\+type@.*$/, '*');
+      }
+      queryClient.invalidateQueries({ queryKey: ['contentTagsCount', contentPattern] });
+      // FixMe: remove code below
+      // 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/data/types.mjs

@@ -30,7 +30,7 @@
  */
 
 /**
- * @typedef {Object} ContentData
+ * @typedef {Object} XBlockData
  * @property {string} id
  * @property {string} displayName
  * @property {string} category
@@ -58,3 +58,12 @@
  * @property {boolean} staffOnlyMessage
  * @property {boolean} hasPartitionGroupComponents
  */
+
+/**
+  * @typedef {Object} CourseData
+  * @property {string} courseDisplayNameWithDefault
+  */
+
+/**
+ * @typedef {XBlockData | CourseData} ContentData
+ */

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,39 @@
 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', () => {
+  it('should render count only after query is complete', async () => {
+    let resolvePromise;
+    mockGetTagsCount.mockReturnValueOnce(new Promise((resolve) => { resolvePromise = resolve; }));
     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,
-    });
-    render(<RootWrapper />);
-    expect(screen.getByRole('heading', { name: /unit tags/i })).toBeInTheDocument();
-    expect(screen.getByText('17')).toBeInTheDocument();
+    resolvePromise({ 123: 17 });
+    expect(await screen.findByText('17')).toBeInTheDocument();
   });
 });

src/course-outline/CourseOutline.jsx

@@ -1,4 +1,5 @@
-import { useState, useEffect, useMemo } from 'react';
+// @ts-check
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -52,7 +53,6 @@ import {
 } from './drag-helper/utils';
 import { useCourseOutline } from './hooks';
 import messages from './messages';
-import useUnitTagsCount from './data/apiHooks';
 
 const CourseOutline = ({ courseId }) => {
   const intl = useIntl();
@@ -113,7 +113,6 @@ const CourseOutline = ({ courseId }) => {
     mfeProctoredExamSettingsUrl,
     handleDismissNotification,
     advanceSettingsUrl,
-    prevContainerInfo,
     handleSectionDragAndDrop,
     handleSubsectionDragAndDrop,
     handleUnitDragAndDrop,
@@ -133,27 +132,6 @@ const CourseOutline = ({ courseId }) => {
   const { category } = useSelector(getCurrentItem);
   const deleteCategory = COURSE_BLOCK_NAMES[category]?.name.toLowerCase();
 
-  const unitsIdPattern = useMemo(() => {
-    let pattern = '';
-    sections.forEach((section) => {
-      section.childInfo.children.forEach((subsection) => {
-        subsection.childInfo.children.forEach((unit) => {
-          if (pattern !== '') {
-            pattern += `,${unit.id}`;
-          } else {
-            pattern += unit.id;
-          }
-        });
-      });
-    });
-    return pattern;
-  }, [sections]);
-
-  const {
-    data: unitsTagCounts,
-    isSuccess: isUnitsTagCountsLoaded,
-  } = useUnitTagsCount(unitsIdPattern);
-
   /**
    * Move section to new index
    * @param {any} currentIndex
@@ -268,7 +246,6 @@ const CourseOutline = ({ courseId }) => {
             ) : null}
           </TransitionReplace>
           <SubHeader
-            className="mt-5"
             title={intl.formatMessage(messages.headingTitle)}
             subtitle={intl.formatMessage(messages.headingSubtitle)}
             headerActions={(
@@ -307,7 +284,6 @@ const CourseOutline = ({ courseId }) => {
                             items={sections}
                             setSections={setSections}
                             restoreSectionList={restoreSectionList}
-                            prevContainerInfo={prevContainerInfo}
                             handleSectionDragAndDrop={handleSectionDragAndDrop}
                             handleSubsectionDragAndDrop={handleSubsectionDragAndDrop}
                             handleUnitDragAndDrop={handleUnitDragAndDrop}
@@ -319,7 +295,6 @@ const CourseOutline = ({ courseId }) => {
                             >
                               {sections.map((section, sectionIndex) => (
                                 <SectionCard
-                                  id={section.id}
                                   key={section.id}
                                   section={section}
                                   index={sectionIndex}
@@ -398,7 +373,6 @@ const CourseOutline = ({ courseId }) => {
                                               onOrderChange={updateUnitOrderByIndex}
                                               onCopyToClipboardClick={handleCopyToClipboardClick}
                                               discussionsSettings={discussionsSettings}
-                                              tagsCount={isUnitsTagCountsLoaded ? unitsTagCounts[unit.id] : 0}
                                             />
                                           ))}
                                         </SortableContext>
@@ -482,6 +456,7 @@ const CourseOutline = ({ courseId }) => {
             variant="danger"
             icon={WarningIcon}
             title={intl.formatMessage(messages.alertErrorTitle)}
+            description=""
             aria-hidden="true"
           />
         )}

src/course-outline/CourseOutline.test.jsx

@@ -6,6 +6,7 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp } from '@edx/frontend-platform';
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { cloneDeep } from 'lodash';
 import { closestCorners } from '@dnd-kit/core';
 
@@ -85,11 +86,13 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   }),
 }));
 
-jest.mock('./data/apiHooks', () => () => ({
-  data: {},
-  isSuccess: true,
+jest.mock('./data/api', () => ({
+  ...jest.requireActual('./data/api'),
+  getTagsCount: () => jest.fn().mockResolvedValue({}),
 }));
 
+const queryClient = new QueryClient();
+
 jest.mock('@dnd-kit/core', () => ({
   ...jest.requireActual('@dnd-kit/core'),
   // Since jsdom (used by jest) does not support getBoundingClientRect function
@@ -104,9 +107,11 @@ const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 const RootWrapper = () => (
   <AppProvider store={store}>
-    <IntlProvider locale="en">
-      <CourseOutline courseId={courseId} />
-    </IntlProvider>
+    <QueryClientProvider client={queryClient}>
+      <IntlProvider locale="en">
+        <CourseOutline courseId={courseId} />
+      </IntlProvider>
+    </QueryClientProvider>
   </AppProvider>
 );
 

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';