feat: library home page ("bare bones") (#1076)

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}
+            contextId={courseId}
           />
         )
         )}

src/header/Header.jsx → src/header/Header.tsx

@@ -1,83 +1,80 @@
-// @ts-check
+/* eslint-disable react/require-default-props */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { StudioHeader } from '@edx/frontend-component-header';
 import { useToggle } from '@openedx/paragon';
+import { generatePath, useHref } from 'react-router-dom';
 
-import SearchModal from '../search-modal/SearchModal';
+import { SearchModal } from '../search-modal';
 import { getContentMenuItems, getSettingMenuItems, getToolsMenuItems } from './utils';
 import messages from './messages';
 
+interface HeaderProps {
+  contextId?: string,
+  number?: string,
+  org?: string,
+  title?: string,
+  isHiddenMainMenu?: boolean,
+  isLibrary?: boolean,
+}
+
 const Header = ({
-  courseId,
-  courseOrg,
-  courseNumber,
-  courseTitle,
-  isHiddenMainMenu,
-}) => {
+  contextId = '',
+  org = '',
+  number = '',
+  title = '',
+  isHiddenMainMenu = false,
+  isLibrary = false,
+}: HeaderProps) => {
   const intl = useIntl();
+  const libraryHref = useHref('/library/:libraryId');
 
   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: contextId, 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: contextId, 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: contextId, intl }),
     },
-  ];
-  const outlineLink = `${studioBaseUrl}/course/${courseId}`;
+  ] : [];
+  const outlineLink = !isLibrary
+    ? `${studioBaseUrl}/course/${contextId}`
+    : generatePath(libraryHref, { libraryId: contextId });
 
   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 : contextId}
           onClose={closeSearchModal}
         />
       )}
     </>
   );
 };
 
-Header.propTypes = {
-  courseId: PropTypes.string,
-  courseNumber: PropTypes.string,
-  courseOrg: PropTypes.string,
-  courseTitle: PropTypes.string,
-  isHiddenMainMenu: PropTypes.bool,
-};
-
-Header.defaultProps = {
-  courseId: '',
-  courseNumber: '',
-  courseOrg: '',
-  courseTitle: '',
-  isHiddenMainMenu: false,
-};
-
 export default Header;

src/index.jsx

@@ -16,11 +16,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';
@@ -52,7 +52,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/library-authoring/CreateLibrary.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Container } from '@openedx/paragon';
+
+import Header from '../header';
+import SubHeader from '../generic/sub-header/SubHeader';
+
+import messages from './messages';
+
+/* istanbul ignore next This is only a placeholder component */
+const CreateLibrary = () => (
+  <>
+    <Header isHiddenMainMenu />
+    <Container size="xl" className="p-4 mt-3">
+      <SubHeader
+        title={<FormattedMessage {...messages.createLibrary} />}
+      />
+      <div className="d-flex my-6 justify-content-center">
+        <FormattedMessage
+          {...messages.createLibraryTempPlaceholder}
+        />
+      </div>
+    </Container>
+  </>
+);
+
+export default CreateLibrary;

src/library-authoring/EmptyStates.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  Button, Stack,
+} from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
+
+import messages from './messages';
+
+export const NoComponents = () => (
+  <Stack direction="horizontal" gap={3} className="mt-6 justify-content-center">
+    <FormattedMessage {...messages.noComponents} />
+    <Button iconBefore={Add}>
+      <FormattedMessage {...messages.addComponent} />
+    </Button>
+  </Stack>
+);
+
+export const NoSearchResults = () => (
+  <div className="d-flex mt-6 justify-content-center">
+    <FormattedMessage {...messages.noSearchResults} />
+  </div>
+);