@squiz/resource-browser 1.68.1 → 1.69.1

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()],
   },
 ];
 
@@ -107,9 +111,11 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={true}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -133,9 +139,11 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -160,9 +168,11 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -186,9 +196,11 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -219,9 +231,11 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={onSourceSelect}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -229,7 +243,7 @@ describe('SourceList', () => {
     );
 
     const user = userEvent.setup();
-    const itemButton = screen.getByRole('button', { name: 'Drill down to Node 1 children' });
+    const itemButton = screen.getByRole('button', { name: 'site Node 1' });
     user.click(itemButton);
 
     await waitFor(() => {
@@ -244,10 +258,11 @@ describe('SourceList', () => {
     });
   });
 
-  it('Renders error state when an error occurs loading source list', async () => {
+  it('Clicking node child count button triggers correct onSourceDrilldown', async () => {
+    const onSourceDrilldown = jest.fn();
     const reload = jest.fn();
 
-    const { getByText } = render(
+    render(
       <SourceListTestWrapper
         constructFunction={(previewModalState) => {
           return (
@@ -256,28 +271,34 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
-              error={new Error('Source list error!')}
+              onSourceDrilldown={onSourceDrilldown}
+              error={null}
               handleReload={reload}
               setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
       />,
     );
 
+    const user = userEvent.setup();
+    const itemButton = screen.getByRole('button', { name: 'Drill down to Node 1 children' });
+    user.click(itemButton);
+
     await waitFor(() => {
-      const errorMessage = getByText('Source list error!');
-      expect(errorMessage).toBeInTheDocument();
+      // Provides the item that was clicked and an id reference to the button that was clicked
+      expect(onSourceDrilldown).toHaveBeenCalledWith({
+        source: sources[0],
+        resource: sources[0].nodes[0],
+      });
     });
   });
 
-  it('Renders recent locations section when local storage has data present', async () => {
+  it('Renders error state when an error occurs loading source list', async () => {
     const reload = jest.fn();
-    const setSource = jest.fn();
-
-    localStorage.setItem('rb_recent_locations', JSON.stringify(mockLocalStorageData));
 
-    render(
+    const { getByText } = render(
       <SourceListTestWrapper
         constructFunction={(previewModalState) => {
           return (
@@ -286,9 +307,11 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
-              error={null}
+              onSourceDrilldown={() => {}}
+              error={new Error('Source list error!')}
               handleReload={reload}
-              setSource={setSource}
+              setSource={() => {}}
+              recentSources={mockRecentSources}
             />
           );
         }}
@@ -296,17 +319,15 @@ describe('SourceList', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByText('Recent locations')).toBeInTheDocument();
-      expect(screen.getByText('Test resource')).toBeInTheDocument();
+      const errorMessage = getByText('Source list error!');
+      expect(errorMessage).toBeInTheDocument();
     });
   });
 
-  it('Handles setSource on click of recent locations item', async () => {
+  it('Renders recent locations section when local storage has data present', async () => {
     const reload = jest.fn();
     const setSource = jest.fn();
 
-    localStorage.setItem('rb_recent_locations', JSON.stringify(mockLocalStorageData));
-
     render(
       <SourceListTestWrapper
         constructFunction={(previewModalState) => {
@@ -316,50 +337,27 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={setSource}
+              recentSources={mockRecentSources}
             />
           );
         }}
       />,
     );
 
-    const user = userEvent.setup();
-    const itemButton = screen.getByRole('button', { name: 'Drill down to Test resource children' });
-    user.click(itemButton);
-
     await waitFor(() => {
-      // 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,
-      );
+      expect(screen.getByText('Recent locations')).toBeInTheDocument();
+      expect(screen.getByText('Test resource')).toBeInTheDocument();
     });
   });
 
-  it('Uses source name if resource name is not available', async () => {
+  it('Handles setSource on click of recent locations item', async () => {
     const reload = jest.fn();
     const setSource = jest.fn();
 
-    localStorage.setItem(
-      'rb_recent_locations',
-      JSON.stringify([
-        {
-          path: [],
-          source: {
-            id: '1',
-            name: 'Test source',
-            nodes: [],
-          },
-          rootNode: null,
-        },
-      ]),
-    );
-
     render(
       <SourceListTestWrapper
         constructFunction={(previewModalState) => {
@@ -369,18 +367,82 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={setSource}
+              recentSources={mockRecentSources}
             />
           );
         }}
       />,
     );
 
+    const user = userEvent.setup();
+    const itemButton = screen.getByRole('button', { name: 'Drill down to Test resource children' });
+    user.click(itemButton);
+
     await waitFor(() => {
-      expect(screen.getByText('Recent locations')).toBeInTheDocument();
-      expect(screen.getByText('Test source')).toBeInTheDocument();
+      // Provides the item that was clicked and an id reference to the button that was clicked
+      expect(setSource).toHaveBeenCalledWith(
+        {
+          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: [],
+              },
+            ],
+          },
+        },
+        [],
+      );
     });
   });
 });

package/src/SourceList/SourceList.stories.tsx

@@ -10,7 +10,7 @@ export default {
   component: SourceList,
 } as Meta<typeof SourceList>;
 
-const Template: StoryFn<typeof SourceList> = ({ sources, isLoading, allowedTypes }) => {
+const Template: StoryFn<typeof SourceList> = ({ sources, isLoading }) => {
   const previewModalState = useOverlayTriggerState({});
 
   return (
@@ -18,9 +18,19 @@ const Template: StoryFn<typeof SourceList> = ({ sources, isLoading, allowedTypes
       sources={sources}
       previewModalState={previewModalState}
       isLoading={isLoading}
-      onSourceSelect={({ source, id }) => alert(`Source Select: ${source} - ${id}`)}
-      onSourceDrillDown={({ source, id }) => alert(`Child Drill Down: ${source} - ${id}`)}
-      allowedTypes={allowedTypes}
+      onSourceSelect={({ source, resource }) =>
+        alert(`Resource Select: ${source.name} - ${resource?.name}[${resource?.id}]`)
+      }
+      onSourceDrilldown={({ source, resource }) =>
+        alert(`Child Drill Down: ${source.name} - ${resource?.name}[${resource?.id}]`)
+      }
+      handleReload={() => {
+        console.log('Handle reload');
+      }}
+      setSource={() => {
+        alert(`Recent Location Selected`);
+      }}
+      error={null}
     />
   );
 };
@@ -29,12 +39,10 @@ export const Primary = Template.bind({});
 Primary.args = {
   sources: sampleSources,
   isLoading: false,
-  allowedTypes: ['site', 'image'],
 };
 
 export const Loading = Template.bind({});
 Loading.args = {
   ...Primary.args,
   isLoading: true,
-  allowedTypes: ['site', 'image'],
 };

package/src/SourceList/SourceList.tsx

@@ -6,31 +6,37 @@ 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[];
+  selectedResource?: Resource | null;
   previewModalState: OverlayTriggerState;
   isLoading: boolean;
   onSourceSelect: (node: ScopedSource, overlayProps: DOMAttributes<FocusableElement>) => void;
+  onSourceDrilldown: (source: ScopedSource) => void;
   handleReload: () => void;
   setSource: (source: ScopedSource | null, path?: Resource[]) => void;
+  recentSources: RecentResourcesPaths[];
   error: Error | null;
 }
 
 const SourceList = function ({
   sources,
+  selectedResource,
   previewModalState,
   isLoading,
   onSourceSelect,
+  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) {
@@ -58,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">
@@ -67,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>
@@ -103,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">
@@ -112,14 +121,31 @@ const SourceList = function ({
               {sources.length > 0 && (
                 <ul aria-label={`${label} nodes`} className="flex flex-col">
                   {sources.map(({ source, resource }) => {
+                    if (!resource || resource.childCount === 0) {
+                      return (
+                        <ResourceItem
+                          key={`${source.id}-${resource?.id}`}
+                          item={{ source, resource }}
+                          label={resource?.name || source.name}
+                          type={resource?.type.code || 'folder'}
+                          previewModalState={previewModalState}
+                          onSelect={onSourceDrilldown}
+                          className="mt-3 rounded-lg"
+                          showChevron
+                        />
+                      );
+                    }
                     return (
                       <ResourceItem
                         key={`${source.id}-${resource?.id}`}
                         item={{ source, resource }}
+                        selected={resource?.id == selectedResource?.id && resource != null}
                         label={resource?.name || source.name}
                         type={resource?.type.code || 'folder'}
+                        childCount={resource?.childCount || undefined}
                         previewModalState={previewModalState}
                         onSelect={onSourceSelect}
+                        onDrillDown={onSourceDrilldown}
                         className="mt-3 rounded-lg"
                         showChevron
                       />

package/src/SourceList/sample-sources.json

@@ -41,6 +41,19 @@
         },
         "name": "Images",
         "childCount": 100
+      },
+      {
+        "id": "9999",
+        "type": {
+          "code": "site",
+          "name": "Site"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "name": "Another very unique id site",
+        "childCount": 100
       }
     ]
   },
@@ -49,7 +62,7 @@
     "name": "Acme internal system",
     "nodes": [
       {
-        "id": "30",
+        "id": "32",
         "type": {
           "code": "site",
           "name": "Site"
@@ -62,7 +75,7 @@
         "childCount": 15
       },
       {
-        "id": "1",
+        "id": "33",
         "type": {
           "code": "site",
           "name": "Site"
@@ -215,5 +228,24 @@
     "id": "30",
     "name": "Unsplash image library 27",
     "nodes": []
+  },
+  {
+    "id": "31",
+    "name": "Acme no children",
+    "nodes": [
+      {
+        "id": "3",
+        "type": {
+          "code": "site",
+          "name": "Site"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "name": "What Children?",
+        "childCount": 0
+      }
+    ]
   }
 ]

package/src/__mocks__/StorybookHelpers.ts

@@ -9,6 +9,29 @@ type CreateCallbacksProps = Partial<{
   error?: string;
 }>;
 
+const indexSources = (sources: Source[]) => {
+  const indexed: Record<string, Resource> = {};
+  const pending: Resource[] = [];
+
+  sources.forEach((source) => {
+    if (source && 'nodes' in source) {
+      pending.push(...source.nodes);
+    }
+  });
+
+  while (pending.length > 0) {
+    const resource = pending.shift();
+
+    if (!resource) {
+      continue;
+    }
+
+    indexed[resource.id] = resource;
+  }
+
+  return indexed;
+};
+
 const indexResources = (resources: Resource[]) => {
   const indexed: Record<string, Resource> = {};
   const pending = [...resources];
@@ -36,6 +59,7 @@ export const createResourceBrowserCallbacks = ({
   resourceIsLoading = false,
   error,
 }: CreateCallbacksProps = {}) => {
+  const indexSourceResources = indexSources(sampleSources as Source[]);
   const indexedResources = indexResources(sampleResources as Resource[]);
 
   return {
@@ -78,7 +102,12 @@ export const createResourceBrowserCallbacks = ({
             if (error && Math.random() > 0.5) {
               reject(new Error(error));
             } else {
-              resolve(indexedResources[reference.resource]);
+              const foundResource = indexedResources[reference.resource];
+              const foundSourceResource = indexSourceResources[reference.resource];
+              if (foundResource) {
+                resolve(foundResource);
+              }
+              resolve(foundSourceResource);
             }
           }, delay);
         }

package/src/index.stories.tsx

@@ -33,8 +33,14 @@ Primary.args = {
   error: '',
 };
 
-export const Selected = Template.bind({});
-Selected.args = {
+export const SourceSelected = Template.bind({});
+SourceSelected.args = {
+  ...Primary.args,
+  value: { resource: '9999', source: '1' },
+};
+
+export const ResourceSelected = Template.bind({});
+ResourceSelected.args = {
   ...Primary.args,
   value: { resource: '33', source: '1' },
 };