@squiz/resource-browser 1.68.1 → 1.69.1

package/src/Hooks/useRecentLocations.spec.ts

@@ -1,35 +1,8 @@
 import { act, renderHook } from '@testing-library/react';
 import { useRecentLocations } from './useRecentLocations';
 
-import { mockResource, mockSource } from '../__mocks__/MockModels';
-
 describe('useRecentLocations', () => {
-  const mockLocalStorageData = [
-    {
-      path: [],
-      source: {
-        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: [],
-      },
-    },
-  ];
+  const mockLocalStorageData = [{ resource: '20', source: '1' }];
 
   beforeEach(() => {
     localStorage.clear();
@@ -45,13 +18,17 @@ describe('useRecentLocations', () => {
 
     act(() => {
       result.current.addRecentLocation({
-        path: [],
-        source: mockSource(),
-        rootNode: mockResource(),
+        source: '1',
+        resource: '32',
       });
     });
 
-    expect(result.current.recentLocations).toEqual(mockLocalStorageData);
+    expect(result.current.recentLocations).toEqual([
+      {
+        source: '1',
+        resource: '32',
+      },
+    ]);
   });
 
   it('should not add duplicate recent locations', () => {
@@ -59,20 +36,31 @@ describe('useRecentLocations', () => {
 
     act(() => {
       result.current.addRecentLocation({
-        path: [],
-        source: mockSource(),
-        rootNode: mockResource(),
+        source: '1',
+        resource: '55',
       });
+    });
+
+    expect(result.current.recentLocations).toEqual([
+      {
+        source: '1',
+        resource: '55',
+      },
+    ]);
 
-      // Add duplicate
+    act(() => {
       result.current.addRecentLocation({
-        path: [],
-        source: mockSource(),
-        rootNode: mockResource(),
+        source: '1',
+        resource: '55',
       });
     });
 
-    expect(result.current.recentLocations).toEqual(mockLocalStorageData);
+    expect(result.current.recentLocations).toEqual([
+      {
+        source: '1',
+        resource: '55',
+      },
+    ]);
   });
 
   it('should load recent locations from local storage on mount', () => {
@@ -82,4 +70,12 @@ describe('useRecentLocations', () => {
 
     expect(result.current.recentLocations).toEqual(mockLocalStorageData);
   });
+
+  it('should handle local storage recent locations not being in the correct format', () => {
+    localStorage.setItem('rb_recent_locations', JSON.stringify({}));
+
+    const { result } = renderHook(() => useRecentLocations());
+
+    expect(result.current.recentLocations).toEqual([]);
+  });
 });

package/src/Hooks/useRecentLocations.ts

@@ -1,14 +1,8 @@
 import { useState } from 'react';
-import { Resource, Source } from '../types';
-
-export interface RecentLocation {
-  rootNode: Resource | null;
-  source: Source;
-  path: Array<Resource>;
-}
+import { ResourceReference } from '../types';
 
 export const useRecentLocations = (maxLocations = 3, storageKey = 'rb_recent_locations') => {
-  let initialRecentLocations = [];
+  let initialRecentLocations: Array<ResourceReference> = [];
 
   try {
     initialRecentLocations = JSON.parse(localStorage.getItem(storageKey) ?? '[]');
@@ -21,11 +15,16 @@ export const useRecentLocations = (maxLocations = 3, storageKey = 'rb_recent_loc
     initialRecentLocations = [];
   }
 
-  const [recentLocations, setRecentLocations] = useState<Array<RecentLocation>>(initialRecentLocations);
+  // Check if any item in the current recent locations is not the right format, if so, we reset it
+  if (initialRecentLocations.find((item) => !(item?.resource?.length && item?.source?.length))) {
+    initialRecentLocations = [];
+  }
+
+  const [recentLocations, setRecentLocations] = useState<Array<ResourceReference>>(initialRecentLocations);
 
-  const addRecentLocation = (newLocation: RecentLocation) => {
+  const addRecentLocation = (newLocation: ResourceReference) => {
     // Check if the new location to make sure we don't already have a recent location for this
-    if (JSON.stringify(recentLocations).indexOf(JSON.stringify(newLocation)) > -1) {
+    if (recentLocations.find((item) => item.resource === newLocation.resource && item.source === newLocation.source)) {
       return;
     }
 

package/src/Hooks/useRecentResourcesPaths.ts

@@ -0,0 +1,54 @@
+import { Resource, OnRequestResource, OnRequestSources, Source } from '../types';
+import { useAsync } from '@squiz/generic-browser-lib';
+import { findBestMatchLineage } from '../utils/findBestMatchLineage';
+
+export type RecentResourcesPathsProps = {
+  sourceIds?: string[];
+  resources?: Resource | null | (Resource | null)[];
+  onRequestResource: OnRequestResource;
+  onRequestSources: OnRequestSources;
+};
+
+export type RecentResourcesPaths = {
+  source?: Source;
+  path?: Resource[];
+};
+
+export const useRecentResourcesPaths = ({
+  sourceIds,
+  resources,
+  onRequestResource,
+  onRequestSources,
+}: RecentResourcesPathsProps) => {
+  const callbackArray = sourceIds?.map((sourceId, index) => async () => {
+    let path: Resource[] | undefined;
+
+    const sources = await onRequestSources();
+    const source = sources.find((source) => source.id === sourceId);
+    const resource = Array.isArray(resources) ? resources[index] : null;
+
+    if (sourceId && source && resource) {
+      const bestMatchLineage = findBestMatchLineage(source, resource);
+
+      if (Array.isArray(bestMatchLineage) && bestMatchLineage.length > 0) {
+        path = await Promise.all(
+          bestMatchLineage.map(async (resourceId) => {
+            return onRequestResource({ source: sourceId, resource: resourceId });
+          }),
+        );
+      } else {
+        path = [resource];
+      }
+    }
+
+    return { source, path };
+  });
+
+  return useAsync(
+    {
+      callback: callbackArray ? callbackArray : () => null,
+      defaultValue: [] as RecentResourcesPaths[],
+    },
+    [JSON.stringify(sourceIds), resources],
+  );
+};

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 () => {
@@ -708,31 +722,59 @@ describe('ResourcePickerContainer', () => {
     ]);
   });
 
-  it('handleDetailSelect() works', async () => {
-    const onChangeMock = jest.fn();
-    const onCloseMock = jest.fn();
-    const { getAllByText } = render(
-      <ResourcePickerContainer {...baseProps} onChange={onChangeMock} onClose={onCloseMock} />,
-    );
+  describe('handleDetailSelect() tests', () => {
+    it('Source select works', async () => {
+      const onChangeMock = jest.fn();
+      const onCloseMock = jest.fn();
+      const { getAllByText } = render(
+        <ResourcePickerContainer {...baseProps} onChange={onChangeMock} onClose={onCloseMock} />,
+      );
 
-    await waitFor(() => {
-      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+      await waitFor(() => {
+        expect(getAllByText('Test system')[0]).toBeInTheDocument();
+      });
+
+      const user = userEvent.setup();
+
+      // Select the resource
+      user.click(screen.getByRole('button', { name: 'site Test Website' }));
+
+      // Wait for the preview panel to open
+      await waitFor(() => expect(screen.getByText('Site')).toBeInTheDocument());
+      await waitFor(() => expect(screen.getByText('#1')).toBeInTheDocument());
+
+      user.click(screen.getByRole('button', { name: 'Select' }));
+
+      await waitFor(() => expect(onChangeMock).toHaveBeenCalled());
+      await waitFor(() => expect(onCloseMock).toHaveBeenCalled());
     });
 
-    const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
-    await waitFor(() => expect(screen.getByRole('button', { name: 'page Test Page' })).toBeInTheDocument());
+    it('Resource select works', async () => {
+      const onChangeMock = jest.fn();
+      const onCloseMock = jest.fn();
+      const { getAllByText } = render(
+        <ResourcePickerContainer {...baseProps} onChange={onChangeMock} onClose={onCloseMock} />,
+      );
 
-    // Select the resource
-    user.click(screen.getByRole('button', { name: 'page Test Page' }));
+      await waitFor(() => {
+        expect(getAllByText('Test system')[0]).toBeInTheDocument();
+      });
 
-    // Wait for the preview panel to open
-    await waitFor(() => expect(screen.getByText('Mocked Page')).toBeInTheDocument());
-    await waitFor(() => expect(screen.getByText('#123')).toBeInTheDocument());
+      const user = userEvent.setup();
+      user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
+      await waitFor(() => expect(screen.getByRole('button', { name: 'page Test Page' })).toBeInTheDocument());
 
-    user.click(screen.getByRole('button', { name: 'Select' }));
+      // Select the resource
+      user.click(screen.getByRole('button', { name: 'page Test Page' }));
+
+      // Wait for the preview panel to open
+      await waitFor(() => expect(screen.getByText('Mocked Page')).toBeInTheDocument());
+      await waitFor(() => expect(screen.getByText('#123')).toBeInTheDocument());
 
-    await waitFor(() => expect(onChangeMock).toHaveBeenCalled());
-    await waitFor(() => expect(onCloseMock).toHaveBeenCalled());
+      user.click(screen.getByRole('button', { name: 'Select' }));
+
+      await waitFor(() => expect(onChangeMock).toHaveBeenCalled());
+      await waitFor(() => expect(onCloseMock).toHaveBeenCalled());
+    });
   });
 });

package/src/ResourcePickerContainer/ResourcePickerContainer.stories.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 import ResourcePickerContainer from './ResourcePickerContainer';
 import { createResourceBrowserCallbacks } from '../__mocks__/StorybookHelpers';
+import sampleSources from '../SourceList/sample-sources.json';
 
 export default {
   title: 'Resource Picker container',
   component: ResourcePickerContainer,
 } as Meta<typeof ResourcePickerContainer>;
 
-const Template: StoryFn<typeof ResourcePickerContainer> = ({ title }) => {
+const Template: StoryFn<typeof ResourcePickerContainer> = ({ title, preselectedSourceId, preselectedResource }) => {
   const { onRequestSources, onRequestChildren, onRequestResource, onChange } = createResourceBrowserCallbacks();
 
   return (
@@ -19,6 +20,8 @@ const Template: StoryFn<typeof ResourcePickerContainer> = ({ title }) => {
       onRequestSources={onRequestSources}
       onRequestChildren={onRequestChildren}
       onRequestResource={onRequestResource}
+      preselectedSourceId={preselectedSourceId}
+      preselectedResource={preselectedResource}
       onChange={onChange}
       onClose={() => {
         alert('Resource Browser closed');
@@ -32,3 +35,11 @@ export const Primary = Template.bind({});
 Primary.args = {
   title: 'Asset Picker',
 };
+
+export const SourceListResourceSelected = Template.bind({});
+// SourceList root node is selected
+SourceListResourceSelected.args = {
+  title: 'Asset Picker',
+  preselectedSourceId: sampleSources[0].id,
+  preselectedResource: sampleSources[0].nodes[1],
+};

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;
@@ -47,10 +49,29 @@ function ResourcePickerContainer({
   preselectedResource,
 }: ResourcePickerContainerProps) {
   const previewModalState = useOverlayTriggerState({});
+  const [selectedSource, setSelectedSource] = useState<Source | null>(null);
   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,
@@ -58,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,
@@ -73,10 +96,13 @@ function ResourcePickerContainer({
     onRequestResource,
     onRequestSources,
   });
-  const selectedResource = useMemo(
-    () => resources.find((resource) => resource.id === selectedResourceId) || null,
-    [selectedResourceId, resources],
-  );
+
+  const selectedResource = useMemo(() => {
+    if (selectedSource) {
+      return selectedSource?.nodes.find((resource: Resource) => resource.id === selectedResourceId) || null;
+    }
+    return resources.find((resource: Resource) => resource.id === selectedResourceId) || null;
+  }, [selectedResourceId, resources, selectedSource]);
 
   const handleResourceDrillDown = useCallback(
     (resource: Resource) => {
@@ -87,45 +113,55 @@ function ResourcePickerContainer({
 
   const handleResourceSelected = useCallback((resource: Resource, overlayProps: DOMAttributes) => {
     setPreviewModalOverlayProps(overlayProps);
+    setSelectedSource(null);
     setSelectedResourceId(resource.id);
   }, []);
 
   const handleSourceDrilldown = useCallback(
     (source: ScopedSource) => {
+      setSelectedSource(null);
+      setSelectedResourceId(null);
       setSource(source);
     },
     [setSource],
   );
 
+  const handleSourceSelected = useCallback((node: ScopedSource, overlayProps: DOMAttributes) => {
+    const { source, resource } = node;
+    setPreviewModalOverlayProps(overlayProps);
+    setSelectedSource(source || null);
+    setSelectedResourceId(resource?.id || null);
+  }, []);
+
   const handleReturnToRoot = useCallback(() => {
+    setSelectedSource(null);
+    setSelectedResourceId(null);
     setSource(null);
   }, [setSource]);
 
   const handleDetailSelect = useCallback(
     (resource: Resource) => {
-      onChange({ resource, source: 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;
 
-      // Update the recent locations in local storage
-      addRecentLocation({
-        rootNode,
-        path: path as Resource[],
-        source: source?.source as Source,
-      });
+      if (lastPathResource) {
+        addRecentLocation({
+          resource: lastPathResource.id,
+          source: detailSelectedSource.id,
+        });
+      }
 
       onClose();
     },
-    [source, currentResource],
+    [selectedSource, source, currentResource],
   );
 
   const handleDetailClose = useCallback(() => {
+    setSelectedSource(null);
     setSelectedResourceId(null);
   }, []);
 
@@ -133,6 +169,7 @@ function ResourcePickerContainer({
   // (eg. due to navigating up/down the tree).
   useEffect(() => {
     if (resources.length > 0 && selectedResourceId && !selectedResource) {
+      setSelectedSource(null);
       setSelectedResourceId(null);
     }
   }, [resources, selectedResourceId, selectedResource]);
@@ -142,16 +179,19 @@ function ResourcePickerContainer({
       const [rootNode, ...path] = preselectedPath;
       const leaf = path.pop();
 
-      setSource(
-        {
-          source: preselectedSource,
-          resource: rootNode,
-        },
-        path,
-      );
-
       if (leaf) {
+        setSource(
+          {
+            source: preselectedSource,
+            resource: rootNode,
+          },
+          path,
+        );
+
         setSelectedResourceId(leaf.id);
+      } else {
+        setSelectedSource(preselectedSource);
+        setSelectedResourceId(rootNode.id);
       }
     }
   }, [preselectedSource, preselectedSource]);
@@ -166,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
@@ -200,11 +241,19 @@ function ResourcePickerContainer({
           {!source && (
             <SourceList
               sources={sources}
+              selectedResource={selectedResource}
               previewModalState={previewModalState}
-              isLoading={isSourceLoading || isPreselectedResourcePathLoading}
-              onSourceSelect={handleSourceDrilldown}
+              isLoading={
+                isSourceLoading ||
+                isPreselectedResourcePathLoading ||
+                recentLocationsLoading ||
+                recentLocationsResourcesLoading
+              }
+              onSourceSelect={handleSourceSelected}
+              onSourceDrilldown={handleSourceDrilldown}
               handleReload={handleSourceReload}
               setSource={setSource}
+              recentSources={recentSources}
               error={sourceError}
             />
           )}