@squiz/resource-browser 1.68.1 → 1.69.1

package/src/SourceDropdown/SourceDropdown.spec.tsx

@@ -5,31 +5,35 @@ import userEvent from '@testing-library/user-event';
 import SourceDropdown from './SourceDropdown';
 import { Source } from '../types';
 import { mockScopedSource, mockSource, mockResource } from '../__mocks__/MockModels';
+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()],
   },
 ];
 
@@ -95,6 +99,7 @@ describe('SourceDropdown', () => {
         onSourceSelect={() => {}}
         setSource={() => {}}
         currentResource={mockResource()}
+        recentSources={mockRecentSources}
       />,
     );
 
@@ -115,6 +120,7 @@ describe('SourceDropdown', () => {
         onSourceSelect={() => {}}
         setSource={() => {}}
         currentResource={mockResource()}
+        recentSources={mockRecentSources}
       />,
     );
 
@@ -140,6 +146,7 @@ describe('SourceDropdown', () => {
         onSourceSelect={() => {}}
         setSource={() => {}}
         currentResource={mockResource()}
+        recentSources={mockRecentSources}
       />,
     );
 
@@ -160,6 +167,7 @@ describe('SourceDropdown', () => {
         onSourceSelect={() => {}}
         setSource={() => {}}
         currentResource={mockResource()}
+        recentSources={mockRecentSources}
       />,
     );
 
@@ -186,6 +194,7 @@ describe('SourceDropdown', () => {
           onSourceSelect={() => {}}
           setSource={() => {}}
           currentResource={mockResource()}
+          recentSources={mockRecentSources}
         />
         <input />
       </div>,
@@ -229,6 +238,7 @@ describe('SourceDropdown', () => {
           onSourceSelect={() => {}}
           setSource={() => {}}
           currentResource={mockResource()}
+          recentSources={mockRecentSources}
         />
         <input />
       </div>,
@@ -273,6 +283,7 @@ describe('SourceDropdown', () => {
         onSourceSelect={() => {}}
         setSource={() => {}}
         currentResource={mockResource()}
+        recentSources={mockRecentSources}
       />,
     );
 
@@ -298,6 +309,7 @@ describe('SourceDropdown', () => {
         onSourceSelect={onSourceSelect}
         setSource={() => {}}
         currentResource={mockResource()}
+        recentSources={mockRecentSources}
       />,
     );
 
@@ -312,8 +324,6 @@ describe('SourceDropdown', () => {
   });
 
   it('Recent location sources are rendered when dropdown clicked', async () => {
-    localStorage.setItem('rb_recent_locations', JSON.stringify(mockLocalStorageData));
-
     render(
       <SourceDropdown
         sources={sources}
@@ -323,6 +333,7 @@ describe('SourceDropdown', () => {
         onSourceSelect={() => {}}
         setSource={() => {}}
         currentResource={mockResource()}
+        recentSources={mockRecentSources}
       />,
     );
 
@@ -347,6 +358,7 @@ describe('SourceDropdown', () => {
         onSourceSelect={onSourceSelect}
         setSource={setSource}
         currentResource={mockResource()}
+        recentSources={mockRecentSources}
       />,
     );
 
@@ -357,11 +369,64 @@ describe('SourceDropdown', () => {
     await waitFor(() => {
       expect(setSource).toHaveBeenCalledWith(
         {
-          source: mockLocalStorageData[0].source,
-          resource: mockLocalStorageData[0].rootNode,
+          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: '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: [],
+              },
+            ],
+          },
         },
-        mockLocalStorageData[0].path,
+        [],
       );
+
       expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
     });
   });

package/src/SourceDropdown/SourceDropdown.tsx

@@ -6,8 +6,8 @@ import type { Source, ScopedSource, Resource } from '../types';
 
 import uuid from '../utils/uuid';
 import { useCategorisedSources } from '../Hooks/useCategorisedSources';
-import { useRecentLocations, RecentLocation } from '../Hooks/useRecentLocations';
 import { HistoryIcon } from '../Icons/HistoryIcon';
+import { RecentResourcesPaths } from '../Hooks/useRecentResourcesPaths';
 
 export default function SourceDropdown({
   sources,
@@ -17,6 +17,7 @@ export default function SourceDropdown({
   onSourceSelect,
   setSource,
   currentResource,
+  recentSources,
 }: {
   sources: Source[];
   selectedSource: ScopedSource | null;
@@ -25,10 +26,11 @@ export default function SourceDropdown({
   onSourceSelect: (source: ScopedSource) => void;
   setSource: (source: ScopedSource | null, path?: Resource[]) => void;
   currentResource: Resource | null;
+  recentSources: RecentResourcesPaths[];
 }) {
   const categorisedSources = useCategorisedSources(sources);
-  const { recentLocations } = useRecentLocations();
-  const [recentLocationSelection, setRecentLocationSelection] = useState<RecentLocation | null>();
+  const filteredRecentSources = recentSources.filter((item) => item.path?.length);
+  const [recentLocationSelection, setRecentLocationSelection] = useState<RecentResourcesPaths | null>();
 
   const [uniqueId] = useState(uuid());
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -65,25 +67,31 @@ export default function SourceDropdown({
     onRootSelect();
   };
 
-  const handleRecentLocationClick = (location: RecentLocation) => {
+  const handleRecentLocationClick = (location: RecentResourcesPaths) => {
     setIsOpen(false);
     setRecentLocationSelection(location);
     buttonRef.current?.focus();
-    setSource(
-      {
-        source: location.source as Source,
-        resource: location.rootNode,
-      },
-      location.path,
-    );
+
+    if (location.path) {
+      const [rootNode, ...path] = location.path;
+      setSource(
+        {
+          source: location.source as Source,
+          resource: rootNode,
+        },
+        path,
+      );
+    }
   };
 
   useEffect(() => {
-    const lastResource = recentLocationSelection?.path[recentLocationSelection.path.length - 1];
-    // If the current resource selected in the resource browser is no longer the item selected in the
-    // recent locations section dropdown then we set the selection to null to prevent active statuses.
-    if (currentResource?.id !== lastResource?.id) {
-      setRecentLocationSelection(null);
+    if (recentLocationSelection?.path) {
+      const lastResource = recentLocationSelection.path[recentLocationSelection.path.length - 1];
+      // If the current resource selected in the resource browser is no longer the item selected in the
+      // recent locations section dropdown then we set the selection to null to prevent active statuses.
+      if (currentResource && currentResource.id !== lastResource?.id) {
+        setRecentLocationSelection(null);
+      }
     }
   }, [recentLocationSelection, currentResource]);
 
@@ -161,7 +169,7 @@ export default function SourceDropdown({
           </li>
         )}
 
-        {!isLoading && recentLocations.length > 0 && (
+        {!isLoading && 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">
@@ -170,17 +178,15 @@ export default function SourceDropdown({
               </span>
             </div>
             <ul aria-label="recent location nodes" className="flex flex-col mt-2">
-              {recentLocations.map((item, index) => {
-                const lastResource = item.path[item.path.length - 1];
+              {filteredRecentSources.map((item, index) => {
+                const lastResource = item.path && item.path[item.path.length - 1];
                 const isSelectedSource =
                   item.source?.id === selectedSource?.source.id &&
-                  item.rootNode?.id === selectedSource?.resource?.id &&
-                  lastResource?.id === currentResource?.id &&
-                  recentLocationSelection;
+                  lastResource?.id === recentLocationSelection?.path?.[recentLocationSelection.path?.length - 1]?.id;
 
                 return (
                   <li
-                    key={`${index}-${item.source?.id}-${item.rootNode?.id}`}
+                    key={`${index}-${item.source?.id}-${lastResource?.id}`}
                     className="flex items-center bg-white border border-b-0 last:border-b border-grey-200 first:rounded-t last:rounded-b"
                   >
                     <button
@@ -189,14 +195,12 @@ export default function SourceDropdown({
                       className={`relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100`}
                     >
                       <Icon
-                        icon={(lastResource?.type.code || item.rootNode?.type.code || 'folder') as IconOptions}
+                        icon={(lastResource?.type.code || 'folder') as IconOptions}
                         resourceSource="matrix"
-                        aria-label={lastResource?.name || item.rootNode?.name || item.source?.name}
+                        aria-label={lastResource?.name || item.source?.name}
                         className="shrink-0 mr-2.5"
                       />
-                      <span className="text-left mr-7">
-                        {lastResource?.name || item.rootNode?.name || item.source?.name}
-                      </span>
+                      <span className="text-left mr-7">{lastResource?.name || item.source?.name}</span>
                       {isSelectedSource && (
                         <Icon icon={'selected' as IconOptions} aria-label="selected" className="absolute right-4" />
                       )}
@@ -214,7 +218,7 @@ export default function SourceDropdown({
               <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">