[FC-0059] Components tab

src/course-unit/add-component/AddComponent.jsx

@@ -5,7 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useToggle } from '@openedx/paragon';
 
 import { getCourseSectionVertical } from '../data/selectors';
-import { COMPONENT_TYPES } from '../constants';
+import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import ComponentModalView from './add-component-modals/ComponentModalView';
 import AddComponentButton from './add-component-btn';
 import messages from './messages';

src/course-unit/add-component/AddComponent.test.jsx

@@ -14,7 +14,7 @@ import { executeThunk } from '../../utils';
 import { fetchCourseSectionVerticalData } from '../data/thunk';
 import { getCourseSectionVerticalApiUrl } from '../data/api';
 import { courseSectionVerticalMock } from '../__mocks__';
-import { COMPONENT_TYPES } from '../constants';
+import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import AddComponent from './AddComponent';
 import messages from './messages';
 

src/course-unit/add-component/add-component-btn/AddComponentIcon.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { Icon } from '@openedx/paragon';
 import { EditNote as EditNoteIcon } from '@openedx/paragon/icons';
 
-import { COMPONENT_TYPES, COMPONENT_TYPE_ICON_MAP } from '../../constants';
+import { COMPONENT_TYPES, COMPONENT_TYPE_ICON_MAP } from '../../../generic/block-type-utils/constants';
 
 const AddComponentIcon = ({ type }) => {
   const icon = COMPONENT_TYPE_ICON_MAP[type] || EditNoteIcon;

src/course-unit/constants.js

@@ -1,53 +1,6 @@
-import {
-  BackHand as BackHandIcon,
-  BookOpen as BookOpenIcon,
-  Edit as EditIcon,
-  EditNote as EditNoteIcon,
-  FormatListBulleted as FormatListBulletedIcon,
-  HelpOutline as HelpOutlineIcon,
-  LibraryAdd as LibraryIcon,
-  Lock as LockIcon,
-  QuestionAnswerOutline as QuestionAnswerOutlineIcon,
-  Science as ScienceIcon,
-  TextFields as TextFieldsIcon,
-  VideoCamera as VideoCameraIcon,
-} from '@openedx/paragon/icons';
-
 import messages from './sidebar/messages';
 import addComponentMessages from './add-component/messages';
 
-export const UNIT_ICON_TYPES = ['video', 'other', 'vertical', 'problem', 'lock'];
-
-export const COMPONENT_TYPES = {
-  advanced: 'advanced',
-  discussion: 'discussion',
-  library: 'library',
-  html: 'html',
-  openassessment: 'openassessment',
-  problem: 'problem',
-  video: 'video',
-  dragAndDrop: 'drag-and-drop-v2',
-};
-
-export const TYPE_ICONS_MAP = {
-  video: VideoCameraIcon,
-  other: BookOpenIcon,
-  vertical: FormatListBulletedIcon,
-  problem: EditIcon,
-  lock: LockIcon,
-};
-
-export const COMPONENT_TYPE_ICON_MAP = {
-  [COMPONENT_TYPES.advanced]: ScienceIcon,
-  [COMPONENT_TYPES.discussion]: QuestionAnswerOutlineIcon,
-  [COMPONENT_TYPES.library]: LibraryIcon,
-  [COMPONENT_TYPES.html]: TextFieldsIcon,
-  [COMPONENT_TYPES.openassessment]: EditNoteIcon,
-  [COMPONENT_TYPES.problem]: HelpOutlineIcon,
-  [COMPONENT_TYPES.video]: VideoCameraIcon,
-  [COMPONENT_TYPES.dragAndDrop]: BackHandIcon,
-};
-
 export const getUnitReleaseStatus = (intl) => ({
   release: intl.formatMessage(messages.releaseStatusTitle),
   released: intl.formatMessage(messages.releasedStatusTitle),

src/course-unit/course-sequence/sequence-navigation/UnitIcon.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { Icon } from '@openedx/paragon';
 import { BookOpen as BookOpenIcon } from '@openedx/paragon/icons';
 
-import { TYPE_ICONS_MAP, UNIT_ICON_TYPES } from '../../constants';
+import { TYPE_ICONS_MAP, UNIT_ICON_TYPES } from '../../../generic/block-type-utils/constants';
 
 const UnitIcon = ({ type }) => {
   const icon = TYPE_ICONS_MAP[type] || BookOpenIcon;

src/course-unit/course-xblock/CourseXBlock.jsx

@@ -16,7 +16,7 @@ import SortableItem from '../../generic/drag-helper/SortableItem';
 import { scrollToElement } from '../../course-outline/utils';
 import { COURSE_BLOCK_NAMES } from '../../constants';
 import { copyToClipboard } from '../../generic/data/thunks';
-import { COMPONENT_TYPES } from '../constants';
+import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import XBlockMessages from './xblock-messages/XBlockMessages';
 import messages from './messages';
 

src/course-unit/course-xblock/CourseXBlock.test.jsx

@@ -16,7 +16,8 @@ import { getCourseSectionVerticalApiUrl, getXBlockBaseApiUrl } from '../data/api
 import { fetchCourseSectionVerticalData } from '../data/thunk';
 import { executeThunk } from '../../utils';
 import { getCourseId } from '../data/selectors';
-import { PUBLISH_TYPES, COMPONENT_TYPES } from '../constants';
+import { PUBLISH_TYPES } from '../constants';
+import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import { courseSectionVerticalMock, courseVerticalChildrenMock } from '../__mocks__';
 import CourseXBlock from './CourseXBlock';
 import messages from './messages';

src/generic/block-type-utils/constants.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  BackHand as BackHandIcon,
+  BookOpen as BookOpenIcon,
+  Edit as EditIcon,
+  EditNote as EditNoteIcon,
+  FormatListBulleted as FormatListBulletedIcon,
+  HelpOutline as HelpOutlineIcon,
+  LibraryAdd as LibraryIcon,
+  Lock as LockIcon,
+  QuestionAnswerOutline as QuestionAnswerOutlineIcon,
+  Science as ScienceIcon,
+  TextFields as TextFieldsIcon,
+  VideoCamera as VideoCameraIcon,
+  Folder,
+} from '@openedx/paragon/icons';
+
+export const UNIT_ICON_TYPES = ['video', 'other', 'vertical', 'problem', 'lock'];
+
+export const COMPONENT_TYPES = {
+  advanced: 'advanced',
+  discussion: 'discussion',
+  library: 'library',
+  html: 'html',
+  openassessment: 'openassessment',
+  problem: 'problem',
+  video: 'video',
+  dragAndDrop: 'drag-and-drop-v2',
+};
+
+export const TYPE_ICONS_MAP: Record<string, React.ComponentType> = {
+  video: VideoCameraIcon,
+  other: BookOpenIcon,
+  vertical: FormatListBulletedIcon,
+  problem: EditIcon,
+  lock: LockIcon,
+};
+
+export const COMPONENT_TYPE_ICON_MAP: Record<string, React.ComponentType> = {
+  [COMPONENT_TYPES.advanced]: ScienceIcon,
+  [COMPONENT_TYPES.discussion]: QuestionAnswerOutlineIcon,
+  [COMPONENT_TYPES.library]: LibraryIcon,
+  [COMPONENT_TYPES.html]: TextFieldsIcon,
+  [COMPONENT_TYPES.openassessment]: EditNoteIcon,
+  [COMPONENT_TYPES.problem]: HelpOutlineIcon,
+  [COMPONENT_TYPES.video]: VideoCameraIcon,
+  [COMPONENT_TYPES.dragAndDrop]: BackHandIcon,
+};
+
+export const STRUCTURAL_TYPE_ICONS: Record<string, React.ComponentType> = {
+  vertical: TYPE_ICONS_MAP.vertical,
+  sequential: Folder,
+  chapter: Folder,
+};
+
+export const COMPONENT_TYPE_COLOR_MAP = {
+  [COMPONENT_TYPES.advanced]: 'bg-other',
+  [COMPONENT_TYPES.discussion]: 'bg-component',
+  [COMPONENT_TYPES.library]: 'bg-component',
+  [COMPONENT_TYPES.html]: 'bg-html',
+  [COMPONENT_TYPES.openassessment]: 'bg-component',
+  [COMPONENT_TYPES.problem]: 'bg-component',
+  [COMPONENT_TYPES.video]: 'bg-video',
+  [COMPONENT_TYPES.dragAndDrop]: 'bg-component',
+  vertical: 'bg-vertical',
+  sequential: 'bg-component',
+  chapter: 'bg-component',
+  collection: 'bg-collection',
+};

src/generic/block-type-utils/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Article } from '@openedx/paragon/icons';
+import {
+  COMPONENT_TYPE_ICON_MAP,
+  STRUCTURAL_TYPE_ICONS,
+  COMPONENT_TYPE_COLOR_MAP,
+} from './constants';
+
+export function getItemIcon(blockType: string): React.ComponentType {
+  return STRUCTURAL_TYPE_ICONS[blockType] ?? COMPONENT_TYPE_ICON_MAP[blockType] ?? Article;
+}
+
+export function getComponentColor(blockType: string): string {
+  return COMPONENT_TYPE_COLOR_MAP[blockType] ?? 'bg-component';
+}

src/index.scss

@@ -29,6 +29,7 @@
 @import "search-modal/SearchModal";
 @import "certificates/scss/Certificates";
 @import "group-configurations/GroupConfigurations";
+@import "library-authoring";
 
 // To apply the glow effect to the selected Section/Subsection, in the Course Outline
 div.row:has(> div > div.highlight) {

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -149,7 +149,7 @@ describe('<LibraryAuthoringPage />', () => {
     axiosMock.onGet(getContentLibraryApiUrl(libraryData.id)).reply(200, libraryData);
 
     const {
-      getByRole, getByText, queryByText,
+      getByRole, getByText, queryByText, findByText,
     } = render(<RootWrapper />);
 
     // Ensure the search endpoint is called
@@ -163,14 +163,13 @@ describe('<LibraryAuthoringPage />', () => {
     expect(getByText('Recently Modified')).toBeInTheDocument();
     expect(getByText('Collections (0)')).toBeInTheDocument();
     expect(getByText('Components (6)')).toBeInTheDocument();
-    expect(getByText('There are 6 components in this library')).toBeInTheDocument();
+    expect(await findByText('Test HTML Block')).toBeInTheDocument();
 
     // Navigate to the components tab
     fireEvent.click(getByRole('tab', { name: 'Components' }));
     expect(queryByText('Recently Modified')).not.toBeInTheDocument();
     expect(queryByText('Collections (0)')).not.toBeInTheDocument();
     expect(queryByText('Components (6)')).not.toBeInTheDocument();
-    expect(getByText('There are 6 components in this library')).toBeInTheDocument();
 
     // Navigate to the collections tab
     fireEvent.click(getByRole('tab', { name: 'Collections' }));
@@ -186,7 +185,6 @@ describe('<LibraryAuthoringPage />', () => {
     expect(getByText('Recently Modified')).toBeInTheDocument();
     expect(getByText('Collections (0)')).toBeInTheDocument();
     expect(getByText('Components (6)')).toBeInTheDocument();
-    expect(getByText('There are 6 components in this library')).toBeInTheDocument();
   });
 
   it('show library without components', async () => {

src/library-authoring/LibraryAuthoringPage.tsx

@@ -13,7 +13,7 @@ import Loading from '../generic/Loading';
 import SubHeader from '../generic/sub-header/SubHeader';
 import Header from '../header';
 import NotFoundAlert from '../generic/NotFoundAlert';
-import LibraryComponents from './LibraryComponents';
+import LibraryComponents from './components/LibraryComponents';
 import LibraryCollections from './LibraryCollections';
 import LibraryHome from './LibraryHome';
 import { useContentLibrary } from './data/apiHook';
@@ -104,7 +104,7 @@ const LibraryAuthoringPage = () => {
           />
           <Route
             path={TabList.components}
-            element={<LibraryComponents libraryId={libraryId} filter={{ searchKeywords }} />}
+            element={<LibraryComponents libraryId={libraryId} filter={{ searchKeywords }} variant="full" />}
           />
           <Route
             path={TabList.collections}

src/library-authoring/LibraryHome.tsx

@@ -6,7 +6,7 @@ import {
 
 import { NoComponents, NoSearchResults } from './EmptyStates';
 import LibraryCollections from './LibraryCollections';
-import LibraryComponents from './LibraryComponents';
+import LibraryComponents from './components/LibraryComponents';
 import { useLibraryComponentCount } from './data/apiHook';
 import messages from './messages';
 
@@ -45,8 +45,8 @@ const LibraryHome = ({ libraryId, filter } : LibraryHomeProps) => {
       <Section title={intl.formatMessage(messages.collectionsTitle, { collectionCount })}>
         <LibraryCollections />
       </Section>
-      <Section title={intl.formatMessage(messages.componentsTitle, { componentCount })}>
-        <LibraryComponents libraryId={libraryId} filter={filter} />
+      <Section title={`Components (${componentCount})`}>
+        <LibraryComponents libraryId={libraryId} filter={filter} variant="preview" />
       </Section>
     </Stack>
   );

src/library-authoring/__mocks__/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as libraryComponentsMock } from './libraryComponentsMock';

src/library-authoring/__mocks__/libraryComponentsMock.js

@@ -0,0 +1,74 @@
+module.exports = [
+  {
+    id: '1',
+    displayName: 'Text',
+    formatted: {
+      content: {
+        htmlContent: 'This is a text: ID=1',
+      },
+    },
+    tags: {
+      level0: ['1', '2', '3'],
+    },
+    blockType: 'text',
+  },
+  {
+    id: '2',
+    displayName: 'Text',
+    formatted: {
+      content: {
+        htmlContent: 'This is a text: ID=2',
+      },
+    },
+    tags: {
+      level0: ['1', '2', '3'],
+    },
+    blockType: 'text',
+  },
+  {
+    id: '3',
+    displayName: 'Video',
+    formatted: {
+      content: {
+        htmlContent: 'This is a video: ID=3',
+      },
+    },
+    tags: {
+      level0: ['1', '2'],
+    },
+    blockType: 'video',
+  },
+  {
+    id: '4',
+    displayName: 'Video',
+    formatted: {
+      content: {
+        htmlContent: 'This is a video: ID=4',
+      },
+    },
+    tags: {
+      level0: ['1', '2'],
+    },
+    blockType: 'text',
+  },
+  {
+    id: '5',
+    displayName: 'Problem',
+    formatted: {
+      content: {
+        htmlContent: 'This is a problem: ID=5',
+      },
+    },
+    blockType: 'problem',
+  },
+  {
+    id: '6',
+    displayName: 'Problem',
+    formatted: {
+      content: {
+        htmlContent: 'This is a problem: ID=6',
+      },
+    },
+    blockType: 'problem',
+  },
+];