[FC-0059] Components tab

src/CourseAuthoringPage.jsx

@@ -15,29 +15,6 @@ import { getCourseAppsApiStatus } from './pages-and-resources/data/selectors';
 import { RequestStatus } from './data/constants';
 import Loading from './generic/Loading';
 
-const AppHeader = ({
-  courseNumber, courseOrg, courseTitle, courseId,
-}) => (
-  <Header
-    courseNumber={courseNumber}
-    courseOrg={courseOrg}
-    courseTitle={courseTitle}
-    courseId={courseId}
-  />
-);
-
-AppHeader.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  courseNumber: PropTypes.string,
-  courseOrg: PropTypes.string,
-  courseTitle: PropTypes.string.isRequired,
-};
-
-AppHeader.defaultProps = {
-  courseNumber: null,
-  courseOrg: null,
-};
-
 const CourseAuthoringPage = ({ courseId, children }) => {
   const dispatch = useDispatch();
 
@@ -74,11 +51,11 @@ const CourseAuthoringPage = ({ courseId, children }) => {
       This functionality will be removed in TNL-9591 */}
       {inProgress ? !isEditor && <Loading />
         : (!isEditor && (
-          <AppHeader
-            courseNumber={courseNumber}
-            courseOrg={courseOrg}
-            courseTitle={courseTitle}
-            courseId={courseId}
+          <Header
+            number={courseNumber}
+            org={courseOrg}
+            title={courseTitle}
+            contentId={courseId}
           />
         )
         )}

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.ReactElement> = {
+  video: VideoCameraIcon,
+  other: BookOpenIcon,
+  vertical: FormatListBulletedIcon,
+  problem: EditIcon,
+  lock: LockIcon,
+};
+
+export const COMPONENT_TYPE_ICON_MAP: Record<string, React.ReactElement> = {
+  [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.ReactElement> = {
+  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.ReactElement {
+  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/header/Header.jsx

@@ -6,57 +6,58 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { StudioHeader } from '@edx/frontend-component-header';
 import { useToggle } from '@openedx/paragon';
 
-import SearchModal from '../search-modal/SearchModal';
+import { SearchModal } from '../search-modal';
 import { getContentMenuItems, getSettingMenuItems, getToolsMenuItems } from './utils';
 import messages from './messages';
 
 const Header = ({
-  courseId,
-  courseOrg,
-  courseNumber,
-  courseTitle,
+  contentId,
+  org,
+  number,
+  title,
   isHiddenMainMenu,
+  isLibrary,
 }) => {
   const intl = useIntl();
 
   const [isShowSearchModalOpen, openSearchModal, closeSearchModal] = useToggle(false);
 
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
   const meiliSearchEnabled = [true, 'true'].includes(getConfig().MEILISEARCH_ENABLED);
-  const mainMenuDropdowns = [
+  const mainMenuDropdowns = !isLibrary ? [
     {
       id: `${intl.formatMessage(messages['header.links.content'])}-dropdown-menu`,
       buttonTitle: intl.formatMessage(messages['header.links.content']),
-      items: getContentMenuItems({ studioBaseUrl, courseId, intl }),
+      items: getContentMenuItems({ studioBaseUrl, courseId: contentId, intl }),
     },
     {
       id: `${intl.formatMessage(messages['header.links.settings'])}-dropdown-menu`,
       buttonTitle: intl.formatMessage(messages['header.links.settings']),
-      items: getSettingMenuItems({ studioBaseUrl, courseId, intl }),
+      items: getSettingMenuItems({ studioBaseUrl, courseId: contentId, intl }),
     },
     {
       id: `${intl.formatMessage(messages['header.links.tools'])}-dropdown-menu`,
       buttonTitle: intl.formatMessage(messages['header.links.tools']),
-      items: getToolsMenuItems({ studioBaseUrl, courseId, intl }),
+      items: getToolsMenuItems({ studioBaseUrl, courseId: contentId, intl }),
     },
-  ];
-  const outlineLink = `${studioBaseUrl}/course/${courseId}`;
+  ] : [];
+  const outlineLink = !isLibrary ? `${studioBaseUrl}/course/${contentId}` : `/course-authoring/library/${contentId}`;
 
   return (
     <>
       <StudioHeader
-        org={courseOrg}
-        number={courseNumber}
-        title={courseTitle}
+        org={org}
+        number={number}
+        title={title}
         isHiddenMainMenu={isHiddenMainMenu}
         mainMenuDropdowns={mainMenuDropdowns}
         outlineLink={outlineLink}
-        searchButtonAction={meiliSearchEnabled && openSearchModal}
+        searchButtonAction={meiliSearchEnabled ? openSearchModal : undefined}
       />
       { meiliSearchEnabled && (
         <SearchModal
           isOpen={isShowSearchModalOpen}
-          courseId={courseId}
+          courseId={isLibrary ? undefined : contentId}
           onClose={closeSearchModal}
         />
       )}
@@ -65,19 +66,21 @@ const Header = ({
 };
 
 Header.propTypes = {
-  courseId: PropTypes.string,
-  courseNumber: PropTypes.string,
-  courseOrg: PropTypes.string,
-  courseTitle: PropTypes.string,
+  contentId: PropTypes.string,
+  number: PropTypes.string,
+  org: PropTypes.string,
+  title: PropTypes.string,
   isHiddenMainMenu: PropTypes.bool,
+  isLibrary: PropTypes.bool,
 };
 
 Header.defaultProps = {
-  courseId: '',
-  courseNumber: '',
-  courseOrg: '',
-  courseTitle: '',
+  contentId: '',
+  number: '',
+  org: '',
+  title: '',
   isHiddenMainMenu: false,
+  isLibrary: false,
 };
 
 export default Header;

src/index.jsx

@@ -19,11 +19,11 @@ import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 import { logError } from '@edx/frontend-platform/logging';
 import messages from './i18n';
 
+import { CreateLibrary, LibraryAuthoringPage } from './library-authoring';
 import initializeStore from './store';
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';
 import Head from './head/Head';
 import { StudioHome } from './studio-home';
-import LibraryV2Placeholder from './studio-home/tabs-section/LibraryV2Placeholder';
 import CourseRerun from './course-rerun';
 import { TaxonomyLayout, TaxonomyDetailPage, TaxonomyListPage } from './taxonomy';
 import { ContentTagsDrawer } from './content-tags-drawer';
@@ -55,7 +55,8 @@ const App = () => {
         <Route path="/home" element={<StudioHome />} />
         <Route path="/libraries" element={<StudioHome />} />
         <Route path="/libraries-v1" element={<StudioHome />} />
-        <Route path="/library/:libraryId" element={<LibraryV2Placeholder />} />
+        <Route path="/library/create" element={<CreateLibrary />} />
+        <Route path="/library/:libraryId/*" element={<LibraryAuthoringPage />} />
         <Route path="/course/:courseId/*" element={<CourseAuthoringRoutes />} />
         <Route path="/course_rerun/:courseId" element={<CourseRerun />} />
         {getConfig().ENABLE_ACCESSIBILITY_PAGE === 'true' && (

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) {