Merge branch 'rpenido/fal-3753-library-home-page-bare-bones' into rpe…

…nido/fal-3768-create-new-library-form

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

@@ -1,6 +1,5 @@
-// @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';
@@ -10,14 +9,23 @@ import { SearchModal } from '../search-modal';
 import { getContentMenuItems, getSettingMenuItems, getToolsMenuItems } from './utils';
 import messages from './messages';
 
+interface HeaderProps {
+  contentId?: string,
+  number?: string,
+  org?: string,
+  title?: string,
+  isHiddenMainMenu?: boolean,
+  isLibrary?: boolean,
+}
+
 const Header = ({
-  contentId,
-  org,
-  number,
-  title,
-  isHiddenMainMenu,
-  isLibrary,
-}) => {
+  contentId = '',
+  org = '',
+  number = '',
+  title = '',
+  isHiddenMainMenu = false,
+  isLibrary = false,
+}: HeaderProps) => {
   const intl = useIntl();
 
   const [isShowSearchModalOpen, openSearchModal, closeSearchModal] = useToggle(false);
@@ -65,22 +73,4 @@ const Header = ({
   );
 };
 
-Header.propTypes = {
-  contentId: PropTypes.string,
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  isHiddenMainMenu: PropTypes.bool,
-  isLibrary: PropTypes.bool,
-};
-
-Header.defaultProps = {
-  contentId: '',
-  number: '',
-  org: '',
-  title: '',
-  isHiddenMainMenu: false,
-  isLibrary: false,
-};
-
 export default Header;

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/LibraryAuthoringPage.tsx

@@ -100,9 +100,9 @@ const LibraryAuthoringPage = () => {
           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" />
+          <Tab eventKey={TAB_LIST.home} title={intl.formatMessage(messages.homeTab)} />
+          <Tab eventKey={TAB_LIST.components} title={intl.formatMessage(messages.componentsTab)} />
+          <Tab eventKey={TAB_LIST.collections} title={intl.formatMessage(messages.collectionsTab)} />
         </Tabs>
         <Routes>
           <Route

src/library-authoring/messages.ts

@@ -1,4 +1,8 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
+import { defineMessages as _defineMessages } from '@edx/frontend-platform/i18n';
+import type { defineMessages as defineMessagesType } from 'react-intl';
+
+// frontend-platform currently doesn't provide types... do it ourselves.
+const defineMessages = _defineMessages as typeof defineMessagesType;
 
 const messages = defineMessages({
   headingSubtitle: {
@@ -31,6 +35,21 @@ const messages = defineMessages({
     defaultMessage: 'Add component',
     description: 'Button text to add a new component',
   },
+  homeTab: {
+    id: 'course-authoring.library-authoring.home-tab',
+    defaultMessage: 'Home',
+    description: 'Tab label for the home tab',
+  },
+  componentsTab: {
+    id: 'course-authoring.library-authoring.components-tab',
+    defaultMessage: 'Components',
+    description: 'Tab label for the components tab',
+  },
+  collectionsTab: {
+    id: 'course-authoring.library-authoring.collections-tab',
+    defaultMessage: 'Collections',
+    description: 'Tab label for the collections tab',
+  },
   componentsTempPlaceholder: {
     id: 'course-authoring.library-authoring.components-temp-placeholder',
     defaultMessage: 'There are {componentCount} components in this library',

src/search-modal/SearchModal.tsx

@@ -5,7 +5,8 @@ import { ModalDialog } from '@openedx/paragon';
 import messages from './messages';
 import SearchUI from './SearchUI';
 
-const SearchModal: React.FC<{ courseId: string, isOpen: boolean, onClose: () => void }> = ({ courseId, ...props }) => {
+// eslint-disable-next-line react/require-default-props
+const SearchModal: React.FC<{ courseId?: string, isOpen: boolean, onClose: () => void }> = ({ courseId, ...props }) => {
   const intl = useIntl();
   const title = intl.formatMessage(messages.title);
 

src/search-modal/SearchUI.tsx

@@ -18,7 +18,7 @@ import Stats from './Stats';
 import { SearchContextProvider } from './manager/SearchManager';
 import messages from './messages';
 
-const SearchUI: React.FC<{ courseId: string, closeSearchModal?: () => void }> = (props) => {
+const SearchUI: React.FC<{ courseId?: string, closeSearchModal?: () => void }> = (props) => {
   const hasCourseId = Boolean(props.courseId);
   const [searchThisCourseEnabled, setSearchThisCourse] = React.useState(hasCourseId);
   const switchToThisCourse = React.useCallback(() => setSearchThisCourse(true), []);