feat: create library form (TEMP)

.env

@@ -43,3 +43,4 @@ AI_TRANSLATIONS_BASE_URL=''
 ENABLE_HOME_PAGE_COURSE_API_V2=false
 ENABLE_CHECKLIST_QUALITY=''
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
+LIBRARY_MODE="v1 only"

.env.development

@@ -46,3 +46,4 @@ AI_TRANSLATIONS_BASE_URL='http://localhost:18760'
 ENABLE_HOME_PAGE_COURSE_API_V2=false
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
+LIBRARY_MODE="mixed"

.env.test

@@ -37,3 +37,4 @@ INVITE_STUDENTS_EMAIL_TO="[email protected]"
 ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
+LIBRARY_MODE="mixed"

README.rst

@@ -264,6 +264,22 @@ In additional to the standard settings, the following local configuration items
 Tagging/Taxonomy functionality.
 
 
+Feature: Libraries V2/Legacy Tabs
+=================================
+
+.. image:: ./docs/readme-images/feature-v2-and-legacy-libs.png
+
+Configuration
+-------------
+
+In additional to the standard settings, the following local configurations can be set to switch between different library modes:
+
+* ``LIBRARY_MODE``: can be set to ``mixed`` (default for development), ``v1 only`` (default for production) and ``v2 only``.
+
+  * ``mixed``: Shows 2 tabs, "Libraries" that lists the v2 libraries and "Legacy Libraries" that lists the v1 libraries. When creating a new library in this mode it will create a new v2 library.
+  * ``v1 only``: Shows only 1 tab, "Libraries" that lists v1 libraries only. When creating a new library in this mode it will create a new v1 library.
+  * ``v2 only``: Shows only 1 tab, "Libraries" that lists v2 libraries only. When creating a new library in this mode it will create a new v2 library.
+
 Developing
 **********
 

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/data/apiHooks.js

@@ -8,7 +8,7 @@ import { getOrganizations, getTagsCount } from './api';
 export const useOrganizationListData = () => (
   useQuery({
     queryKey: ['organizationList'],
-    queryFn: () => getOrganizations(),
+    queryFn: getOrganizations,
   })
 );
 

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}` : `${studioBaseUrl}/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,6 +19,7 @@ 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';
@@ -52,6 +53,10 @@ const App = () => {
     createRoutesFromElements(
       <Route>
         <Route path="/home" element={<StudioHome />} />
+        <Route path="/libraries" element={<StudioHome />} />
+        <Route path="/libraries-v1" element={<StudioHome />} />
+        <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' && (
@@ -125,6 +130,7 @@ initialize({
         ENABLE_HOME_PAGE_COURSE_API_V2: process.env.ENABLE_HOME_PAGE_COURSE_API_V2 === 'true',
         ENABLE_CHECKLIST_QUALITY: process.env.ENABLE_CHECKLIST_QUALITY || 'true',
         ENABLE_GRADING_METHOD_IN_PROBLEMS: process.env.ENABLE_GRADING_METHOD_IN_PROBLEMS === 'true',
+        LIBRARY_MODE: process.env.LIBRARY_MODE || 'v1 only',
       }, 'CourseAuthoringConfig');
     },
   },

src/library-authoring/EmptyStates.jsx

@@ -0,0 +1,24 @@
+// @ts-check
+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>
+);

src/library-authoring/LibraryAuthoringPage.jsx

@@ -0,0 +1,139 @@
+// @ts-check
+/* eslint-disable react/prop-types */
+import React, { useEffect } from 'react';
+import { StudioFooter } from '@edx/frontend-component-footer';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Container, Icon, IconButton, SearchField, Tab, Tabs,
+} from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
+import {
+  Routes, Route, useLocation, useNavigate, useParams,
+} from 'react-router-dom';
+
+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 LibraryCollections from './LibraryCollections';
+import LibraryHome from './LibraryHome';
+import { useContentLibrary } from './data/apiHook';
+import messages from './messages';
+
+const TAB_LIST = {
+  home: '',
+  components: 'components',
+  collections: 'collections',
+};
+
+const SubHeaderTitle = ({ title }) => {
+  const intl = useIntl();
+  return (
+    <>
+      {title}
+      <IconButton
+        src={InfoOutline}
+        iconAs={Icon}
+        alt={intl.formatMessage(messages.headingInfoAlt)}
+        className="mr-2"
+      />
+    </>
+  );
+};
+
+/**
+ * @type {React.FC}
+ */
+const LibraryAuthoringPage = () => {
+  const intl = useIntl();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [tabKey, setTabKey] = React.useState(TAB_LIST.home);
+  const [searchKeywords, setSearchKeywords] = React.useState('');
+
+  const { libraryId } = useParams();
+
+  const { data: libraryData, isLoading } = useContentLibrary(libraryId);
+
+  useEffect(() => {
+    const currentPath = location.pathname.split('/').pop();
+    if (currentPath && Object.values(TAB_LIST).includes(currentPath)) {
+      setTabKey(currentPath);
+    } else {
+      setTabKey(TAB_LIST.home);
+    }
+  }, [location]);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (!libraryId || !libraryData) {
+    return <NotFoundAlert />;
+  }
+
+  /** Handle tab change
+    * @param {string} key
+    */
+  const handleTabChange = (key) => {
+    setTabKey(key);
+    navigate(key);
+  };
+
+  return (
+    <>
+      <Header
+        number={libraryData.version.toString()}
+        title={libraryData.title}
+        org={libraryData.org}
+        contentId={libraryId}
+        isLibrary
+      />
+      <Container size="xl" className="p-4 mt-3">
+        <SubHeader
+          title={<SubHeaderTitle title={libraryData.title} />}
+          subtitle={intl.formatMessage(messages.headingSubtitle)}
+        />
+        <SearchField
+          value={searchKeywords}
+          placeholder={intl.formatMessage(messages.searchPlaceholder)}
+          onChange={(value) => setSearchKeywords(value)}
+          onSubmit={() => {}}
+          className="w-50"
+        />
+        <Tabs
+          variant="tabs"
+          activeKey={tabKey}
+          onSelect={handleTabChange}
+          className="my-3"
+        >
+          <Tab eventKey={TAB_LIST.home} title="Home" />
+          <Tab eventKey={TAB_LIST.components} title="Components" />
+          <Tab eventKey={TAB_LIST.collections} title="Collections" />
+        </Tabs>
+        <Routes>
+          <Route
+            path={TAB_LIST.home}
+            element={<LibraryHome libraryId={libraryId} filter={{ searchKeywords }} />}
+          />
+          <Route
+            path={TAB_LIST.components}
+            element={<LibraryComponents libraryId={libraryId} filter={{ searchKeywords }} />}
+          />
+          <Route
+            path={TAB_LIST.collections}
+            element={<LibraryCollections />}
+          />
+          <Route
+            path="*"
+            element={<NotFoundAlert />}
+          />
+        </Routes>
+      </Container>
+      <StudioFooter />
+    </>
+  );
+};
+
+export default LibraryAuthoringPage;