@squiz/resource-browser 1.69.0 → 1.69.1

package/src/Hooks/useResource.spec.ts

@@ -1,6 +1,6 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import { mockResource } from '../__mocks__/MockModels';
-import { useResource } from './useResource';
+import { useResource, useResources } from './useResource';
 
 describe('useResource', () => {
   it('Should load the resource', async () => {
@@ -30,3 +30,32 @@ describe('useResource', () => {
     expect(onRequestResource).not.toBeCalled();
   });
 });
+
+describe('useResources', () => {
+  it('Should load the resources', async () => {
+    const resources = mockResource();
+    const references = [{ source: 'source-id', resource: 'resource-id' }];
+    const onRequestResource = jest.fn().mockResolvedValue(resources);
+    const { result } = renderHook(() => useResources({ onRequestResource, references }));
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.error).toBe(null);
+    expect(result.current.data).toEqual(null);
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.data).toStrictEqual([resources]);
+  });
+
+  it('Should not load the resources if no references are provided', async () => {
+    const references = null;
+    const onRequestResource = jest.fn();
+    const { result } = renderHook(() => useResources({ onRequestResource, references }));
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBe(null);
+    expect(result.current.data).toEqual(null);
+    expect(onRequestResource).not.toBeCalled();
+  });
+});

package/src/Hooks/useResource.ts

@@ -6,6 +6,11 @@ type UseResourceProps = {
   reference?: ResourceReference | null;
 };
 
+type UseResourcesProps = {
+  onRequestResource: (reference: ResourceReference) => Promise<Resource | null>;
+  references?: ResourceReference[] | null;
+};
+
 /**
  * Loads the resource indicated by the provided reference.
  */
@@ -17,3 +22,17 @@ export const useResource = ({ onRequestResource, reference }: UseResourceProps)
     },
     [reference?.source, reference?.resource],
   );
+
+/**
+ * Loads the resources indicated by the provided reference.
+ */
+export const useResources = ({ onRequestResource, references }: UseResourcesProps) => {
+  const callbackArray = references?.map((item) => () => onRequestResource(item));
+  return useAsync(
+    {
+      callback: callbackArray ? callbackArray : () => null,
+      defaultValue: null,
+    },
+    [],
+  );
+};

package/src/ResourcePicker/ResourcePicker.spec.tsx

@@ -102,4 +102,22 @@ describe('Resource picker', () => {
     expect(pickerLabel).toBeInTheDocument();
     expect(removeButton).not.toBeInTheDocument();
   });
+
+  it('should display a default status if an unsupported status is found for resource', () => {
+    render(
+      <ResourcePicker
+        {...defaultProps}
+        resource={{
+          ...mockResource,
+          status: {
+            code: 'this_is_not_real',
+            name: 'This is not real',
+          },
+        }}
+      />,
+    );
+
+    const item = screen.getByTitle('This is not real');
+    expect(item?.style.backgroundColor).toEqual('rgb(255, 0, 0)');
+  });
 });

package/src/ResourcePickerContainer/ResourcePickerContainer.spec.tsx

@@ -71,6 +71,16 @@ const baseProps = {
 };
 
 describe('ResourcePickerContainer', () => {
+  beforeEach(() => {
+    localStorage.setItem(
+      'rb_recent_locations',
+      JSON.stringify([
+        { resource: '32', source: '1' },
+        { resource: '20', source: '1' },
+      ]),
+    );
+  });
+
   it('Queries onRequestSources for source list on startup', async () => {
     const onRequestSources = jest.fn(() => {
       return Promise.resolve([]);
@@ -209,6 +219,8 @@ describe('ResourcePickerContainer', () => {
     ['the preselected resource lineage does not exist under a root node', 100],
     ['the preselected resource lineage does not appear under a root node', 200],
   ])('The source list is displayed if %s', async (description: string, preselectedResourceId: number) => {
+    localStorage.clear();
+
     const resources: Record<string, Resource> = {
       10: mockResource({
         id: '100',
@@ -256,8 +268,10 @@ describe('ResourcePickerContainer', () => {
     // Breadcrumbs should not be displayed.
     // Source list should be displayed.
     // "Leaf" resource should be selected, "Another leaf" resource should not be selected.
-    expect(screen.queryByLabelText('Resource breadcrumb')).not.toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Drill down to Source root node #1 children' })).toBeInTheDocument();
+    await waitFor(() => expect(screen.queryByLabelText('Resource breadcrumb')).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Drill down to Source root node #1 children' })).toBeInTheDocument(),
+    );
   });
 
   it('Selecting a child count drills down', async () => {
@@ -734,6 +748,7 @@ describe('ResourcePickerContainer', () => {
       await waitFor(() => expect(onChangeMock).toHaveBeenCalled());
       await waitFor(() => expect(onCloseMock).toHaveBeenCalled());
     });
+
     it('Resource select works', async () => {
       const onChangeMock = jest.fn();
       const onCloseMock = jest.fn();

package/src/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -20,6 +20,8 @@ import { useChildResources } from '../Hooks/useChildResources';
 import { useSources } from '../Hooks/useSources';
 import { usePreselectedResourcePath } from '../Hooks/usePreselectedResourcePath';
 import { useRecentLocations } from '../Hooks/useRecentLocations';
+import { useResources } from '../Hooks/useResource';
+import { RecentResourcesPaths, useRecentResourcesPaths } from '../Hooks/useRecentResourcesPaths';
 
 interface ResourcePickerContainerProps {
   title: string;
@@ -51,7 +53,25 @@ function ResourcePickerContainer({
   const [selectedResourceId, setSelectedResourceId] = useState<string | null>(null);
   const [previewModalOverlayProps, setPreviewModalOverlayProps] = useState<DOMAttributes>({});
   const { source, currentResource, hierarchy, setSource, push, popUntil } = useResourcePath();
-  const { addRecentLocation } = useRecentLocations();
+
+  // Recent locations relevant data
+  const { addRecentLocation, recentLocations } = useRecentLocations();
+
+  const { data: recentLocationsResources, isLoading: recentLocationsResourcesLoading } = useResources({
+    onRequestResource,
+    references: recentLocations,
+  });
+
+  const { data: recentLocationsSources, isLoading: recentLocationsLoading } = useRecentResourcesPaths({
+    sourceIds: recentLocations.map((item) => item.source),
+    resources: recentLocationsResources,
+    onRequestResource,
+    onRequestSources,
+  });
+
+  // Type check the returned values from recent locations requests
+  let recentSources: RecentResourcesPaths[] = [];
+  if (Array.isArray(recentLocationsSources)) recentSources = recentLocationsSources;
 
   const {
     data: sources,
@@ -59,12 +79,14 @@ function ResourcePickerContainer({
     reload: handleSourceReload,
     error: sourceError,
   } = useSources({ onRequestSources });
+
   const {
     data: resources,
     isLoading: isResourcesLoading,
     reload: handleResourceReload,
     error: resourceError,
   } = useChildResources({ source, currentResource, onRequestChildren });
+
   const {
     data: { source: preselectedSource, path: preselectedPath },
     isLoading: isPreselectedResourcePathLoading,
@@ -74,6 +96,7 @@ function ResourcePickerContainer({
     onRequestResource,
     onRequestSources,
   });
+
   const selectedResource = useMemo(() => {
     if (selectedSource) {
       return selectedSource?.nodes.find((resource: Resource) => resource.id === selectedResourceId) || null;
@@ -118,22 +141,17 @@ function ResourcePickerContainer({
 
   const handleDetailSelect = useCallback(
     (resource: Resource) => {
-      onChange({ resource, source: selectedSource ?? (source?.source as Source) });
+      const detailSelectedSource = selectedSource ?? (source?.source as Source);
+      onChange({ resource, source: detailSelectedSource });
 
       // Find the path that got them to where they are
-      const selectedPath = hierarchy.map((path) => {
-        const pathNode = path.node as ScopedSource;
-        return 'resource' in pathNode ? pathNode.resource : pathNode;
-      });
-
-      const [rootNode, ...path] = selectedPath;
+      const lastPathItem = hierarchy[hierarchy.length - 1]?.node as ScopedSource;
+      const lastPathResource = lastPathItem && 'resource' in lastPathItem ? lastPathItem?.resource : lastPathItem;
 
-      if (rootNode) {
-        // Update the recent locations in local storage
+      if (lastPathResource) {
         addRecentLocation({
-          rootNode,
-          path: path as Resource[],
-          source: selectedSource ?? (source?.source as Source),
+          resource: lastPathResource.id,
+          source: detailSelectedSource.id,
         });
       }
 
@@ -188,11 +206,12 @@ function ResourcePickerContainer({
           <SourceDropdown
             sources={sources}
             selectedSource={source}
-            isLoading={isSourceLoading}
+            isLoading={isSourceLoading || recentLocationsLoading || recentLocationsResourcesLoading}
             onSourceSelect={handleSourceDrilldown}
             onRootSelect={handleReturnToRoot}
             setSource={setSource}
             currentResource={currentResource}
+            recentSources={recentSources}
           />
         </div>
         <button
@@ -224,11 +243,17 @@ function ResourcePickerContainer({
               sources={sources}
               selectedResource={selectedResource}
               previewModalState={previewModalState}
-              isLoading={isSourceLoading || isPreselectedResourcePathLoading}
+              isLoading={
+                isSourceLoading ||
+                isPreselectedResourcePathLoading ||
+                recentLocationsLoading ||
+                recentLocationsResourcesLoading
+              }
               onSourceSelect={handleSourceSelected}
               onSourceDrilldown={handleSourceDrilldown}
               handleReload={handleSourceReload}
               setSource={setSource}
+              recentSources={recentSources}
               error={sourceError}
             />
           )}

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">