@squiz/resource-browser 1.69.0 → 1.69.2

package/src/SourceList/SourceList.spec.tsx

@@ -2,35 +2,39 @@
 import React from 'react';
 import { screen, render, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { mockSource } from '../__mocks__/MockModels';
+import { mockResource, mockSource } from '../__mocks__/MockModels';
 import { useOverlayTriggerState, OverlayTriggerState } from 'react-stately';
 import SourceList from './SourceList';
 import { Source } from '../types';
+import { RecentResourcesPaths } from '../Hooks/useRecentResourcesPaths';
 
-const mockLocalStorageData = [
+const mockRecentSources: RecentResourcesPaths[] = [
   {
-    path: [],
-    source: {
+    source: mockSource({
       id: '1',
-      name: 'Test source',
-      nodes: [],
-    },
-    rootNode: {
-      childCount: 0,
-      id: '1',
-      lineages: [],
-      name: 'Test resource',
-      status: {
-        code: 'live',
-        name: 'Live',
-      },
-      type: {
-        code: 'folder',
-        name: 'Folder',
-      },
-      url: 'https://no-where.com',
-      urls: [],
-    },
+      name: 'Source 1',
+      nodes: [
+        {
+          id: '1',
+          type: {
+            code: 'site',
+            name: 'Site',
+          },
+          name: 'Node 1',
+          childCount: 21,
+        },
+        {
+          id: '2',
+          type: {
+            code: 'site',
+            name: 'Site',
+          },
+          name: 'Node 2',
+          childCount: 13,
+        },
+      ],
+    }),
+    path: [mockResource()],
   },
 ];
 
@@ -111,6 +115,7 @@ describe('SourceList', () => {
               error={null}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -138,6 +143,7 @@ describe('SourceList', () => {
               error={null}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -166,6 +172,7 @@ describe('SourceList', () => {
               error={null}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -193,6 +200,7 @@ describe('SourceList', () => {
               error={null}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -227,6 +235,7 @@ describe('SourceList', () => {
               error={null}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -266,6 +275,7 @@ describe('SourceList', () => {
               error={null}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -301,6 +311,7 @@ describe('SourceList', () => {
               error={new Error('Source list error!')}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -317,8 +328,6 @@ describe('SourceList', () => {
     const reload = jest.fn();
     const setSource = jest.fn();
 
-    localStorage.setItem('rb_recent_locations', JSON.stringify(mockLocalStorageData));
-
     render(
       <SourceListTestWrapper
         constructFunction={(previewModalState) => {
@@ -332,6 +341,7 @@ describe('SourceList', () => {
               error={null}
               handleReload={reload}
               setSource={setSource}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -348,8 +358,6 @@ describe('SourceList', () => {
     const reload = jest.fn();
     const setSource = jest.fn();
 
-    localStorage.setItem('rb_recent_locations', JSON.stringify(mockLocalStorageData));
-
     render(
       <SourceListTestWrapper
         constructFunction={(previewModalState) => {
@@ -363,6 +371,7 @@ describe('SourceList', () => {
               error={null}
               handleReload={reload}
               setSource={setSource}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -377,55 +386,63 @@ describe('SourceList', () => {
       // Provides the item that was clicked and an id reference to the button that was clicked
       expect(setSource).toHaveBeenCalledWith(
         {
-          source: mockLocalStorageData[0].source,
-          resource: mockLocalStorageData[0].rootNode,
-        },
-        mockLocalStorageData[0].path,
-      );
-    });
-  });
-
-  it('Uses source name if resource name is not available', async () => {
-    const reload = jest.fn();
-    const setSource = jest.fn();
-
-    localStorage.setItem(
-      'rb_recent_locations',
-      JSON.stringify([
-        {
-          path: [],
+          resource: {
+            childCount: 0,
+            id: '1',
+            lineages: [],
+            name: 'Test resource',
+            status: {
+              code: 'live',
+              name: 'Live',
+            },
+            type: {
+              code: 'folder',
+              name: 'Folder',
+            },
+            url: 'https://no-where.com',
+            urls: [],
+          },
           source: {
             id: '1',
-            name: 'Test source',
-            nodes: [],
+            name: 'Source 1',
+            nodes: [
+              {
+                childCount: 21,
+                id: '1',
+                lineages: [],
+                name: 'Node 1',
+                status: {
+                  code: 'live',
+                  name: 'Live',
+                },
+                type: {
+                  code: 'site',
+                  name: 'Site',
+                },
+                url: 'https://no-where.com',
+                urls: [],
+              },
+              {
+                childCount: 13,
+                id: '2',
+                lineages: [],
+                name: 'Node 2',
+                status: {
+                  code: 'live',
+                  name: 'Live',
+                },
+                type: {
+                  code: 'site',
+                  name: 'Site',
+                },
+                url: 'https://no-where.com',
+                urls: [],
+              },
+            ],
           },
-          rootNode: null,
         },
-      ]),
-    );
-
-    render(
-      <SourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <SourceList
-              sources={sources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onSourceSelect={() => {}}
-              onSourceDrilldown={() => {}}
-              error={null}
-              handleReload={reload}
-              setSource={setSource}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Recent locations')).toBeInTheDocument();
-      expect(screen.getByText('Test source')).toBeInTheDocument();
+        [],
+      );
     });
   });
 });

package/src/SourceList/SourceList.tsx

@@ -6,8 +6,8 @@ import clsx from 'clsx';
 
 import { Source, ScopedSource, Resource } from '../types';
 import { useCategorisedSources } from '../Hooks/useCategorisedSources';
-import { useRecentLocations } from '../Hooks/useRecentLocations';
 import { HistoryIcon } from '../Icons/HistoryIcon';
+import { RecentResourcesPaths } from '../Hooks/useRecentResourcesPaths';
 
 export interface SourceListProps {
   sources: Source[];
@@ -18,6 +18,7 @@ export interface SourceListProps {
   onSourceDrilldown: (source: ScopedSource) => void;
   handleReload: () => void;
   setSource: (source: ScopedSource | null, path?: Resource[]) => void;
+  recentSources: RecentResourcesPaths[];
   error: Error | null;
 }
 
@@ -30,11 +31,12 @@ const SourceList = function ({
   onSourceDrilldown,
   handleReload,
   setSource,
+  recentSources,
   error,
 }: SourceListProps) {
   const categorisedSources = useCategorisedSources(sources);
   const listRef = useRef<HTMLUListElement>(null);
-  const { recentLocations } = useRecentLocations();
+  const filteredRecentSources = recentSources.filter((item) => item.path?.length);
 
   useEffect(() => {
     if (listRef.current) {
@@ -62,7 +64,7 @@ const SourceList = function ({
     >
       {error && <ResourceState state="error" message={error.message} handleReload={handleReload} />}
 
-      {!error && recentLocations.length > 0 && (
+      {!error && filteredRecentSources.length > 0 && (
         <li className={`flex flex-col text-sm font-semibold text-grey-800`}>
           <div className="relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0">
             <span className="z-10 bg-gray-100 px-2.5 flex gap-1 items-center">
@@ -71,31 +73,34 @@ const SourceList = function ({
             </span>
           </div>
           <ul aria-label={`recent location nodes`} className="flex flex-col">
-            {recentLocations.map((item, index) => {
-              const lastResource = item.path[item.path.length - 1];
-              return (
-                <ResourceItem
-                  key={`${index}-${item.source?.id}-${item.rootNode?.id}`}
-                  item={{ source: item.source, resource: item.rootNode }}
-                  label={lastResource?.name || item.rootNode?.name || item?.source.name}
-                  type={lastResource?.type?.code || item.rootNode?.type?.code || 'folder'}
-                  previewModalState={previewModalState}
-                  onSelect={() => {
-                    setSource(
-                      {
-                        source: item.source as Source,
-                        resource: item.rootNode,
-                      },
-                      item.path,
-                    );
-                  }}
-                  className={clsx(
-                    index === 0 && 'rounded-t-lg mt-3',
-                    index === recentLocations.length - 1 && 'rounded-b-lg',
-                  )}
-                  showChevron
-                />
-              );
+            {filteredRecentSources.map((item, index) => {
+              if (item.path) {
+                const lastResource = item.path[item.path.length - 1];
+                const [rootNode, ...path] = item.path;
+                return (
+                  <ResourceItem
+                    key={`${index}-${item.source?.id}-${lastResource?.id}`}
+                    item={{ source: item.source, resource: lastResource }}
+                    label={lastResource?.name || item.source?.name || ''}
+                    type={lastResource?.type?.code || 'folder'}
+                    previewModalState={previewModalState}
+                    onSelect={() => {
+                      setSource(
+                        {
+                          source: item.source as Source,
+                          resource: rootNode,
+                        },
+                        path,
+                      );
+                    }}
+                    className={clsx(
+                      index === 0 && 'rounded-t-lg mt-3',
+                      index === filteredRecentSources.length - 1 && 'rounded-b-lg',
+                    )}
+                    showChevron
+                  />
+                );
+              }
             })}
           </ul>
         </li>
@@ -107,7 +112,7 @@ const SourceList = function ({
             <li
               key={key}
               className={`flex flex-col text-sm font-semibold text-grey-800 ${
-                index > 0 || recentLocations.length > 0 ? 'mt-3' : ''
+                index > 0 || filteredRecentSources.length > 0 ? 'mt-3' : ''
               }`}
             >
               <div className="relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0">