refactor: Use visibleTabs instead of showOnlyHomeTab

Author: ChrisChV

src/course-outline/subsection-card/SubsectionCard.jsx

@@ -26,6 +26,7 @@ import { ComponentPicker } from '../../library-authoring';
 import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import { ContainerType } from '../../generic/key-utils';
 import { useStudioHome } from '../../studio-home/hooks';
+import { ContentType } from '../../library-authoring/routes';
 
 const SubsectionCard = ({
   section,
@@ -302,7 +303,7 @@ const SubsectionCard = ({
           extraFilter={['block_type = "unit"']}
           componentPickerMode="single"
           onComponentSelected={handleSelectLibraryUnit}
-          showOnlyHomeTab
+          visibleTabs={[ContentType.units]}
         />
       </StandardModal>
     </>

src/library-authoring/LibraryAuthoringPage.tsx

@@ -43,7 +43,7 @@ import { LibrarySidebar } from './library-sidebar';
 import { useComponentPickerContext } from './common/context/ComponentPickerContext';
 import { useLibraryContext } from './common/context/LibraryContext';
 import { SidebarBodyComponentId, useSidebarContext } from './common/context/SidebarContext';
-import { ContentType, useLibraryRoutes } from './routes';
+import { allLibraryPageTabs, ContentType, useLibraryRoutes } from './routes';
 
 import messages from './messages';
 
@@ -129,10 +129,13 @@ export const SubHeaderTitle = ({ title }: { title: ReactNode }) => {
 
 interface LibraryAuthoringPageProps {
   returnToLibrarySelection?: () => void,
-  showOnlyHomeTab?: boolean,
+  visibleTabs?: ContentType[],
 }
 
-const LibraryAuthoringPage = ({ returnToLibrarySelection, showOnlyHomeTab = false }: LibraryAuthoringPageProps) => {
+const LibraryAuthoringPage = ({
+  returnToLibrarySelection,
+  visibleTabs = allLibraryPageTabs,
+}: LibraryAuthoringPageProps) => {
   const intl = useIntl();
 
   const {
@@ -164,7 +167,7 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection, showOnlyHomeTab = fals
   // The activeKey determines the currently selected tab.
   const getActiveKey = () => {
     if (componentPickerMode) {
-      return ContentType.home;
+      return visibleTabs[0];
     }
     if (insideCollections) {
       return ContentType.collections;
@@ -246,16 +249,15 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection, showOnlyHomeTab = fals
   // Disable filtering by block/problem type when viewing the Collections tab.
   const overrideTypesFilter = (insideCollections || insideUnits) ? new TypesFilterData() : undefined;
 
-  const visibleTabs = [
-    <Tab eventKey={ContentType.home} title={intl.formatMessage(messages.homeTab)} />,
-  ];
-  if (!showOnlyHomeTab) {
-    visibleTabs.push(
-      <Tab eventKey={ContentType.collections} title={intl.formatMessage(messages.collectionsTab)} />,
-      <Tab eventKey={ContentType.components} title={intl.formatMessage(messages.componentsTab)} />,
-      <Tab eventKey={ContentType.units} title={intl.formatMessage(messages.unitsTab)} />,
-    );
-  }
+  const tabTitles = {
+    [ContentType.home]: intl.formatMessage(messages.homeTab),
+    [ContentType.collections]: intl.formatMessage(messages.collectionsTab),
+    [ContentType.components]: intl.formatMessage(messages.componentsTab),
+    [ContentType.units]: intl.formatMessage(messages.unitsTab),
+  };
+  const visibleTabsToRender = visibleTabs.map((contentType) => (
+    <Tab eventKey={contentType} title={tabTitles[contentType]} />
+  ));
 
   return (
     <div className="d-flex">
@@ -291,7 +293,7 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection, showOnlyHomeTab = fals
               onSelect={handleTabChange}
               className="my-3"
             >
-              {visibleTabs}
+              {visibleTabsToRender}
             </Tabs>
             <ActionRow className="my-3">
               <SearchKeywordsField className="mr-3" />

src/library-authoring/component-picker/ComponentPicker.test.tsx

@@ -17,6 +17,7 @@ import {
 } from '../data/api.mocks';
 
 import { ComponentPicker } from './ComponentPicker';
+import { ContentType } from '../routes';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -278,7 +279,7 @@ describe('<ComponentPicker />', () => {
   });
 
   it('should display all tabs', async () => {
-    // Default `showOnlyHomeTab=false`
+    // Default `visibleTabs = allLibraryPageTabs`
     render(<ComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
@@ -290,15 +291,15 @@ describe('<ComponentPicker />', () => {
     expect(screen.getByRole('tab', { name: /units/i })).toBeInTheDocument();
   });
 
-  it('should display only home tab when `showOnlyHomeTab` is true', async () => {
-    render(<ComponentPicker showOnlyHomeTab />);
+  it('should display only unit tab', async () => {
+    render(<ComponentPicker visibleTabs={[ContentType.units]} />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
 
-    expect(await screen.findByRole('tab', { name: /all content/i })).toBeInTheDocument();
+    expect(await screen.findByRole('tab', { name: /units/i })).toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /all content/i })).not.toBeInTheDocument();
     expect(screen.queryByRole('tab', { name: /collections/i })).not.toBeInTheDocument();
     expect(screen.queryByRole('tab', { name: /components/i })).not.toBeInTheDocument();
-    expect(screen.queryByRole('tab', { name: /units/i })).not.toBeInTheDocument();
   });
 });

src/library-authoring/component-picker/ComponentPicker.tsx

@@ -14,15 +14,16 @@ import LibraryAuthoringPage from '../LibraryAuthoringPage';
 import LibraryCollectionPage from '../collections/LibraryCollectionPage';
 import SelectLibrary from './SelectLibrary';
 import messages from './messages';
+import { ContentType, allLibraryPageTabs } from '../routes';
 
 interface LibraryComponentPickerProps {
   returnToLibrarySelection: () => void;
-  showOnlyHomeTab: boolean;
+  visibleTabs: ContentType[],
 }
 
 const InnerComponentPicker: React.FC<LibraryComponentPickerProps> = ({
   returnToLibrarySelection,
-  showOnlyHomeTab,
+  visibleTabs,
 }) => {
   const { collectionId } = useLibraryContext();
 
@@ -32,7 +33,7 @@ const InnerComponentPicker: React.FC<LibraryComponentPickerProps> = ({
   return (
     <LibraryAuthoringPage
       returnToLibrarySelection={returnToLibrarySelection}
-      showOnlyHomeTab={showOnlyHomeTab}
+      visibleTabs={visibleTabs}
     />
   );
 };
@@ -51,7 +52,7 @@ type ComponentPickerProps = {
   libraryId?: string,
   showOnlyPublished?: boolean,
   extraFilter?: string[],
-  showOnlyHomeTab?: boolean,
+  visibleTabs?: ContentType[],
 } & (
   {
     componentPickerMode?: 'single',
@@ -70,7 +71,7 @@ export const ComponentPicker: React.FC<ComponentPickerProps> = ({
   showOnlyPublished,
   extraFilter,
   componentPickerMode = 'single',
-  showOnlyHomeTab = false,
+  visibleTabs = allLibraryPageTabs,
   /** This default callback is used to send the selected component back to the parent window,
    * when the component picker is used in an iframe.
    */
@@ -133,7 +134,7 @@ export const ComponentPicker: React.FC<ComponentPickerProps> = ({
                 )}
               <InnerComponentPicker
                 returnToLibrarySelection={returnToLibrarySelection}
-                showOnlyHomeTab={showOnlyHomeTab}
+                visibleTabs={visibleTabs}
               />
             </SidebarProvider>
           </LibraryProvider>

src/library-authoring/routes.ts

@@ -41,6 +41,8 @@ export enum ContentType {
   units = 'units',
 }
 
+export const allLibraryPageTabs: ContentType[] = Object.values(ContentType);
+
 export type NavigateToData = {
   componentId?: string,
   collectionId?: string,