[FC-0059] feat: Add content sidebar in library home

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/generic/toast-context/index.jsx

@@ -0,0 +1,50 @@
+/* eslint-disable react/prop-types */
+// @ts-check
+import { Toast } from '@openedx/paragon';
+import React from 'react';
+
+/**
+ * Global context to keep track of popup message(s) that appears to user after
+ * they take an action like creating or deleting something.
+ */
+export const ToastContext = React.createContext({
+  toastMessage: /** @type{null|string} */ (null),
+  showToast: /** @type{function} */ (() => {}),
+  closeToast: /** @type{function} */ (() => {}),
+});
+
+/**
+ * React component to provide `ToastContext` to the app
+ * @param {{children?: React.ReactNode}} props The components to wrap
+ */
+export const ToastProvider = (props) => {
+  // TODO, We can convert this to a queue of messages,
+  // see: https://github.com/open-craft/frontend-app-course-authoring/pull/38#discussion_r1638990647
+
+  const [toastMessage, setToastMessage] = React.useState(/** @type{null|string} */ (null));
+
+  React.useEffect(() => () => {
+    // Cleanup function to avoid updating state on unmounted component
+    setToastMessage(null);
+  }, []);
+
+  const showToast = React.useCallback((message) => setToastMessage(message), [setToastMessage]);
+  const closeToast = React.useCallback(() => setToastMessage(null), [setToastMessage]);
+
+  const context = React.useMemo(() => ({
+    toastMessage,
+    showToast,
+    closeToast,
+  }), [toastMessage, showToast, closeToast]);
+
+  return (
+    <ToastContext.Provider value={context}>
+      {props.children}
+      { toastMessage && (
+        <Toast show={toastMessage !== null} onClose={closeToast}>
+          {toastMessage}
+        </Toast>
+      )}
+    </ToastContext.Provider>
+  );
+};

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,15 +19,16 @@ import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 import { logError } from '@edx/frontend-platform/logging';
 import messages from './i18n';
 
+import { CreateLibrary, LibraryLayout } 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';
 import AccessibilityPage from './accessibility-page';
+import { ToastProvider } from './generic/toast-context';
 
 import 'react-datepicker/dist/react-datepicker.css';
 import './index.scss';
@@ -55,7 +56,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={<LibraryLayout />} />
         <Route path="/course/:courseId/*" element={<CourseAuthoringRoutes />} />
         <Route path="/course_rerun/:courseId" element={<CourseRerun />} />
         {getConfig().ENABLE_ACCESSIBILITY_PAGE === 'true' && (
@@ -84,10 +86,12 @@ const App = () => {
 
   return (
     <AppProvider store={initializeStore()} wrapWithRouter={false}>
-      <QueryClientProvider client={queryClient}>
-        <Head />
-        <RouterProvider router={router} />
-      </QueryClientProvider>
+      <ToastProvider>
+        <QueryClientProvider client={queryClient}>
+          <Head />
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      </ToastProvider>
     </AppProvider>
   );
 };

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,27 @@
+import React, { useContext } 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';
+import { LibraryContext } from './common/context';
+
+export const NoComponents = () => {
+  const { openAddContentSidebar } = useContext(LibraryContext);
+
+  return (
+    <Stack direction="horizontal" gap={3} className="mt-6 justify-content-center">
+      <FormattedMessage {...messages.noComponents} />
+      <Button iconBefore={Add} onClick={openAddContentSidebar}>
+        <FormattedMessage {...messages.addComponent} />
+      </Button>
+    </Stack>
+  );
+};
+
+export const NoSearchResults = () => (
+  <div className="d-flex mt-6 justify-content-center">
+    <FormattedMessage {...messages.noSearchResults} />
+  </div>
+);