feat: migration filter and search bar in legacy libraries tab [FC-0097] (#2421)

Adds search bar and migration filter in legacy libraries tab

Author: navinkarkera

src/generic/key-utils.test.ts

@@ -6,6 +6,7 @@ import {
   isLibraryKey,
   isLibraryV1Key,
   normalizeContainerType,
+  parseLibraryKey,
 } from './key-utils';
 
 describe('component utils', () => {
@@ -69,6 +70,30 @@ describe('component utils', () => {
     }
   });
 
+  describe('parseLibraryKey', () => {
+    for (const [input, expected] of [
+      ['lib:org:lib', { org: 'org', lib: 'lib' }],
+      ['lib:OpenCraftX:ALPHA', { org: 'OpenCraftX', lib: 'ALPHA' }],
+    ] as const) {
+      it(`returns '${JSON.stringify(expected)}' for learning context key '${input}'`, () => {
+        expect(parseLibraryKey(input)).toStrictEqual(expected);
+      });
+    }
+
+    for (const input of [
+      '',
+      undefined,
+      null,
+      'not a key',
+      'lb:foo',
+      'lb:org:lib:html:id',
+    ]) {
+      it(`throws an exception for library key '${input}'`, () => {
+        expect(() => parseLibraryKey(input as any)).toThrow(`Invalid libraryKey: ${input}`);
+      });
+    }
+  });
+
   describe('isLibraryV1Key', () => {
     for (const [input, expected] of [
       ['library-v1:AximX+L1', true],

src/generic/key-utils.ts

@@ -17,7 +17,11 @@ export function getBlockType(usageKey: string): string {
  * Parses a library key and returns the organization and library name as an object.
  */
 export function parseLibraryKey(libraryKey: string): { org: string, lib: string } {
-  const [, org, lib] = libraryKey?.split(':') || [];
+  const splitKey = libraryKey?.split(':') || [];
+  if (splitKey.length !== 3) {
+    throw new Error(`Invalid libraryKey: ${libraryKey}`);
+  }
+  const [, org, lib] = splitKey;
   if (org && lib) {
     return { org, lib };
   }

src/search-manager/SearchFilterWidget.tsx

@@ -12,7 +12,7 @@ import messages from './messages';
 
 /**
  * A button that represents a filter on the search.
- * If the filter is active, the button displays the currently applied values.
+ * If the filter is active and skipLabelUpdate is not true, the button displays the currently applied values.
  * So when no filter is active it may look like:
  *  [ Type ▼ ]
  * Or when a filter is active and limited to two values, it may look like:
@@ -27,6 +27,7 @@ const SearchFilterWidget: React.FC<{
   children: React.ReactNode;
   clearFilter: () => void,
   icon: React.ComponentType;
+  skipLabelUpdate?: boolean;
 }> = ({ appliedFilters, ...props }) => {
   const intl = useIntl();
   const [isOpen, open, close] = useToggle(false);
@@ -49,8 +50,10 @@ const SearchFilterWidget: React.FC<{
           iconAfter={ArrowDropDown}
         >
           {props.label}
-          {appliedFilters.length >= 1 ? <>: {appliedFilters[0].label}</> : null}
-          {appliedFilters.length > 1 ? <>,&nbsp;<Badge variant="secondary">+{appliedFilters.length - 1}</Badge></> : null}
+          {!props.skipLabelUpdate && appliedFilters.length >= 1 ? <>: {appliedFilters[0].label}</> : null}
+          {!props.skipLabelUpdate && appliedFilters.length > 1 ? (
+            <>,&nbsp;<Badge variant="secondary">+{appliedFilters.length - 1}</Badge></>
+          ) : null}
         </Button>
       </div>
       <ModalPopup

src/studio-home/card-item/index.tsx

@@ -30,7 +30,7 @@ interface BaseProps {
   isMigrated?: boolean;
   migratedToKey?: string;
   migratedToTitle?: string;
-  migratedToCollectionKey?: string;
+  migratedToCollectionKey?: string | null;
 }
 
 type Props = BaseProps & (

src/studio-home/factories/mockApiResponses.tsx

@@ -103,6 +103,15 @@ export const generateGetStudioHomeLibrariesApiResponse = () => ({
       migratedToCollectionKey: 'imported-content',
       migratedToCollectionTitle: 'Imported content',
     },
+    {
+      displayName: 'MBA 1',
+      libraryKey: 'library-v1:MBA+1234',
+      url: '/library/library-v1:MBA+1234',
+      org: 'Cambridge',
+      number: '1234',
+      canEdit: true,
+      isMigrated: false,
+    },
   ],
 });
 

src/studio-home/tabs-section/TabsSection.test.tsx

@@ -12,6 +12,7 @@ import {
   fireEvent,
   screen,
   act,
+  within,
 } from '@src/testUtils';
 import messages from '../messages';
 import tabMessages from './messages';
@@ -269,7 +270,7 @@ describe('<TabsSection />', () => {
     beforeEach(async () => {
       await axiosMock.onGet(courseApiLinkV2).reply(200, generateGetStudioCoursesApiResponseV2());
     });
-    it('should switch to Legacy Libraries tab and render specific v1 library details', async () => {
+    it('should switch to Legacy Libraries tab and render - search and filter should work as expected', async () => {
       await axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
       await axiosMock.onGet(libraryApiLink).reply(200, generateGetStudioHomeLibrariesApiResponse());
       render();
@@ -280,12 +281,70 @@ describe('<TabsSection />', () => {
       await user.click(librariesTab);
 
       expect(librariesTab).toHaveClass('active');
+      const panel = await screen.findByRole('tabpanel', { hidden: false });
 
       expect(await screen.findByText(studioHomeMock.libraries[0].displayName)).toBeVisible();
 
       expect(
         await screen.findByText(`${studioHomeMock.libraries[0].org} / ${studioHomeMock.libraries[0].number}`),
       ).toBeVisible();
+
+      // Migration info should be displayed
+      const migratedContent = generateGetStudioHomeLibrariesApiResponse().libraries[1];
+      expect(await screen.findByText(migratedContent.displayName)).toBeVisible();
+      const newTitleElement = await screen.findAllByText(migratedContent.migratedToTitle!);
+      expect(newTitleElement[0]).toBeVisible();
+      expect(newTitleElement[0]).toHaveAttribute('href', `/library/${migratedContent.migratedToKey}`);
+      expect(newTitleElement[1]).toHaveAttribute(
+        'href',
+        `/library/${migratedContent.migratedToKey}/collection/${migratedContent.migratedToCollectionKey}`,
+      );
+
+      // Check total count display
+      expect(await within(panel).findByText('Showing 3 of 3')).toBeInTheDocument();
+
+      // Test search functionality
+      const searchField = await within(panel).findByPlaceholderText('Search');
+
+      fireEvent.change(searchField, { target: { value: 'Legacy' } });
+      // Should only show 1 result i.e. migratedContent.displayName
+      expect(await within(panel).findByText('Showing 1 of 3')).toBeInTheDocument();
+      expect(await within(panel).findByText(migratedContent.displayName)).toBeVisible();
+      // Should not show other items.
+      expect(within(panel).queryByText(
+        generateGetStudioHomeLibrariesApiResponse().libraries[0].displayName,
+      )).not.toBeInTheDocument();
+      // reset search
+      fireEvent.change(searchField, { target: { value: '' } });
+
+      // Test migration filter
+      const filter = await within(panel).findByRole('button', { name: 'Any Migration Status' });
+      await user.click(filter);
+      let migratedOption = await within(panel).findByRole('checkbox', { name: 'Migrated' });
+      // This should uncheck Migrated option as all options are selected by default
+      await user.click(migratedOption);
+      // Should only show 2 result i.e. unmigrated libraries
+      expect(await within(panel).findByText('Showing 2 of 3')).toBeInTheDocument();
+      // test clearing filter
+      const clearFilter = await within(panel).findByRole('button', { name: 'Clear Filter' });
+      await user.click(clearFilter);
+      // Should show all 3 results
+      expect(await within(panel).findByText('Showing 3 of 3')).toBeInTheDocument();
+      // Open the filter again
+      await user.click(filter);
+      // Reload migratedOption as clearing and opening the filter again creates a new modal
+      migratedOption = await within(panel).findByRole('checkbox', { name: 'Migrated' });
+      const unmigratedOption = await within(panel).findByRole('checkbox', { name: 'Unmigrated' });
+      // both options should be selected by default - even after clearing
+      expect(migratedOption).toBeChecked();
+      expect(unmigratedOption).toBeChecked();
+      // Un-checking both options should reset the state to both checked.
+      await user.click(unmigratedOption);
+      await user.click(migratedOption);
+      expect(migratedOption).toBeChecked();
+      expect(unmigratedOption).toBeChecked();
+      // Should show all 3 results
+      expect(await within(panel).findByText('Showing 3 of 3')).toBeInTheDocument();
     });
 
     it('should switch to Libraries tab and render specific v2 library details', async () => {
@@ -331,17 +390,6 @@ describe('<TabsSection />', () => {
       expect(
         await screen.findByText(`${studioHomeMock.libraries[0].org} / ${studioHomeMock.libraries[0].number}`),
       ).toBeVisible();
-
-      // Migration info should be displayed
-      const migratedContent = generateGetStudioHomeLibrariesApiResponse().libraries[1];
-      expect(await screen.findByText(migratedContent.displayName)).toBeVisible();
-      const newTitleElement = await screen.findAllByText(migratedContent.migratedToTitle!);
-      expect(newTitleElement[0]).toBeVisible();
-      expect(newTitleElement[0]).toHaveAttribute('href', `/library/${migratedContent.migratedToKey}`);
-      expect(newTitleElement[1]).toHaveAttribute(
-        'href',
-        `/library/${migratedContent.migratedToKey}/collection/${migratedContent.migratedToCollectionKey}`,
-      );
     });
 
     it('should switch to Libraries tab and render specific v2 library details ("v2 only" mode)', async () => {
@@ -402,10 +450,11 @@ describe('<TabsSection />', () => {
       await axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
       await axiosMock.onGet(libraryApiLink).reply(404);
       render();
+      const user = userEvent.setup();
       await executeThunk(fetchStudioHomeData(), store.dispatch);
 
       const librariesTab = await screen.findByText(tabMessages.legacyLibrariesTabTitle.defaultMessage);
-      fireEvent.click(librariesTab);
+      await user.click(librariesTab);
 
       expect(librariesTab).toHaveClass('active');