@squiz/resource-browser 1.68.0 → 1.69.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @squiz/resource-browser
 
+## 1.69.0
+
+### Minor Changes
+
+- b642152: updates to source list node selection
+
+## 1.68.1
+
+### Patch Changes
+
+- 7c324d7: Fixed useChildResources to ignore previous data (race condition bug)
+- Updated dependencies [7c324d7]
+  - @squiz/generic-browser-lib@1.67.0
+
 ## 1.68.0
 
 ### Minor Changes

package/lib/Hooks/useChildResources.js

@@ -8,5 +8,6 @@ const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const useChildResources = ({ source, currentResource, onRequestChildren }) => (0, generic_browser_lib_1.useAsync)({
     callback: () => (source ? onRequestChildren(source.source, currentResource || source.resource) : []),
     defaultValue: [],
+    ignorePrevious: true,
 }, [source, currentResource]);
 exports.useChildResources = useChildResources;

package/lib/Hooks/usePreselectedResourcePath.js

@@ -14,9 +14,14 @@ const usePreselectedResourcePath = ({ sourceId, resource, onRequestResource, onR
             }
             if (sourceId && source && resource) {
                 const bestMatchLineage = (0, findBestMatchLineage_1.findBestMatchLineage)(source, resource);
-                path = await Promise.all(bestMatchLineage.map(async (resourceId) => {
-                    return onRequestResource({ source: sourceId, resource: resourceId });
-                }));
+                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 };
         },

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -40,6 +40,7 @@ const usePreselectedResourcePath_1 = require("../Hooks/usePreselectedResourcePat
 const useRecentLocations_1 = require("../Hooks/useRecentLocations");
 function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestResource, onRequestChildren, onChange, onClose, preselectedSourceId, preselectedResource, }) {
     const previewModalState = (0, react_stately_1.useOverlayTriggerState)({});
+    const [selectedSource, setSelectedSource] = (0, react_1.useState)(null);
     const [selectedResourceId, setSelectedResourceId] = (0, react_1.useState)(null);
     const [previewModalOverlayProps, setPreviewModalOverlayProps] = (0, react_1.useState)({});
     const { source, currentResource, hierarchy, setSource, push, popUntil } = (0, useResourcePath_1.useResourcePath)();
@@ -52,43 +53,63 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
         onRequestResource,
         onRequestSources,
     });
-    const selectedResource = (0, react_1.useMemo)(() => resources.find((resource) => resource.id === selectedResourceId) || null, [selectedResourceId, resources]);
+    const selectedResource = (0, react_1.useMemo)(() => {
+        if (selectedSource) {
+            return selectedSource?.nodes.find((resource) => resource.id === selectedResourceId) || null;
+        }
+        return resources.find((resource) => resource.id === selectedResourceId) || null;
+    }, [selectedResourceId, resources, selectedSource]);
     const handleResourceDrillDown = (0, react_1.useCallback)((resource) => {
         push(resource);
     }, [push]);
     const handleResourceSelected = (0, react_1.useCallback)((resource, overlayProps) => {
         setPreviewModalOverlayProps(overlayProps);
+        setSelectedSource(null);
         setSelectedResourceId(resource.id);
     }, []);
     const handleSourceDrilldown = (0, react_1.useCallback)((source) => {
+        setSelectedSource(null);
+        setSelectedResourceId(null);
         setSource(source);
     }, [setSource]);
+    const handleSourceSelected = (0, react_1.useCallback)((node, overlayProps) => {
+        const { source, resource } = node;
+        setPreviewModalOverlayProps(overlayProps);
+        setSelectedSource(source || null);
+        setSelectedResourceId(resource?.id || null);
+    }, []);
     const handleReturnToRoot = (0, react_1.useCallback)(() => {
+        setSelectedSource(null);
+        setSelectedResourceId(null);
         setSource(null);
     }, [setSource]);
     const handleDetailSelect = (0, react_1.useCallback)((resource) => {
-        onChange({ resource, source: source?.source });
+        onChange({ resource, source: selectedSource ?? source?.source });
         // Find the path that got them to where they are
         const selectedPath = hierarchy.map((path) => {
             const pathNode = path.node;
             return 'resource' in pathNode ? pathNode.resource : pathNode;
         });
         const [rootNode, ...path] = selectedPath;
-        // Update the recent locations in local storage
-        addRecentLocation({
-            rootNode,
-            path: path,
-            source: source?.source,
-        });
+        if (rootNode) {
+            // Update the recent locations in local storage
+            addRecentLocation({
+                rootNode,
+                path: path,
+                source: selectedSource ?? source?.source,
+            });
+        }
         onClose();
-    }, [source, currentResource]);
+    }, [selectedSource, source, currentResource]);
     const handleDetailClose = (0, react_1.useCallback)(() => {
+        setSelectedSource(null);
         setSelectedResourceId(null);
     }, []);
     // Clear the selected resource if it no longer exists in the list of resources
     // (eg. due to navigating up/down the tree).
     (0, react_1.useEffect)(() => {
         if (resources.length > 0 && selectedResourceId && !selectedResource) {
+            setSelectedSource(null);
             setSelectedResourceId(null);
         }
     }, [resources, selectedResourceId, selectedResource]);
@@ -96,13 +117,17 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
         if (preselectedSource && preselectedPath?.length) {
             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]);
     return (react_1.default.createElement("div", { className: "relative flex flex-col h-full text-gray-800" },
@@ -117,7 +142,7 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
             react_1.default.createElement("div", { className: "overflow-y-scroll flex-1 grow-[3] border-r border-gray-300" },
                 react_1.default.createElement("h3", { className: "sr-only" }, "Resource List"),
                 hierarchy.length > 0 && (react_1.default.createElement(ResourceBreadcrumb_1.default, { hierarchy: hierarchy, onBreadcrumbSelect: popUntil, onReturnToRoot: handleReturnToRoot })),
-                !source && (react_1.default.createElement(SourceList_1.default, { sources: sources, previewModalState: previewModalState, isLoading: isSourceLoading || isPreselectedResourcePathLoading, onSourceSelect: handleSourceDrilldown, handleReload: handleSourceReload, setSource: setSource, error: sourceError })),
+                !source && (react_1.default.createElement(SourceList_1.default, { sources: sources, selectedResource: selectedResource, previewModalState: previewModalState, isLoading: isSourceLoading || isPreselectedResourcePathLoading, onSourceSelect: handleSourceSelected, onSourceDrilldown: handleSourceDrilldown, handleReload: handleSourceReload, setSource: setSource, error: sourceError })),
                 source && (react_1.default.createElement(ResourceList_1.default, { previewModalState: previewModalState, resources: resources, selectedResource: selectedResource, isLoading: isResourcesLoading, onResourceSelect: handleResourceSelected, onResourceDrillDown: handleResourceDrillDown, allowedTypes: allowedTypes, handleReturnToRoot: handleReturnToRoot, handleReload: handleResourceReload, error: resourceError }))),
             react_1.default.createElement("div", { className: "sm:overflow-y-scroll sm:flex-1 sm:grow-[2] bg-white" },
                 react_1.default.createElement(PreviewPanel_1.default, { resource: isResourcesLoading ? null : selectedResource, modalState: previewModalState, previewModalOverlayProps: previewModalOverlayProps, allowedTypes: allowedTypes, onSelect: handleDetailSelect, onClose: handleDetailClose })))));

package/lib/SourceList/SourceList.d.ts

@@ -4,12 +4,14 @@ import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Source, ScopedSource, Resource } from '../types';
 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;
     error: Error | null;
 }
-declare const SourceList: ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, setSource, error, }: SourceListProps) => React.JSX.Element;
+declare const SourceList: ({ sources, selectedResource, previewModalState, isLoading, onSourceSelect, onSourceDrilldown, handleReload, setSource, error, }: SourceListProps) => React.JSX.Element;
 export default SourceList;

package/lib/SourceList/SourceList.js

@@ -32,7 +32,7 @@ const clsx_1 = __importDefault(require("clsx"));
 const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
 const useRecentLocations_1 = require("../Hooks/useRecentLocations");
 const HistoryIcon_1 = require("../Icons/HistoryIcon");
-const SourceList = function ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, setSource, error, }) {
+const SourceList = function ({ sources, selectedResource, previewModalState, isLoading, onSourceSelect, onSourceDrilldown, handleReload, setSource, error, }) {
     const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);
     const listRef = (0, react_1.useRef)(null);
     const { recentLocations } = (0, useRecentLocations_1.useRecentLocations)();
@@ -70,7 +70,10 @@ const SourceList = function ({ sources, previewModalState, isLoading, onSourceSe
                     react_1.default.createElement("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" },
                         react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5" }, label)),
                     sources.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${label} nodes`, className: "flex flex-col" }, sources.map(({ source, resource }) => {
-                        return (react_1.default.createElement(generic_browser_lib_1.ResourceItem, { key: `${source.id}-${resource?.id}`, item: { source, resource }, label: resource?.name || source.name, type: resource?.type.code || 'folder', previewModalState: previewModalState, onSelect: onSourceSelect, className: "mt-3 rounded-lg", showChevron: true }));
+                        if (!resource || resource.childCount === 0) {
+                            return (react_1.default.createElement(generic_browser_lib_1.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: true }));
+                        }
+                        return (react_1.default.createElement(generic_browser_lib_1.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: true }));
                     })))));
             })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.68.0",
+  "version": "1.69.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -20,7 +20,7 @@
   "dependencies": {
     "@mui/icons-material": "5.11.16",
     "@squiz/dx-json-schema-lib": "^1.67.0",
-    "@squiz/generic-browser-lib": "^1.66.0",
+    "@squiz/generic-browser-lib": "^1.67.0",
     "expiry-map": "^2.0.0",
     "p-memoize": "^4.0.4",
     "pretty-bytes": "5.6.0",

package/src/Hooks/useChildResources.ts

@@ -15,6 +15,7 @@ export const useChildResources = ({ source, currentResource, onRequestChildren }
     {
       callback: () => (source ? onRequestChildren(source.source, currentResource || source.resource) : []),
       defaultValue: [],
+      ignorePrevious: true,
     },
     [source, currentResource],
   );

package/src/Hooks/usePreselectedResourcePath.ts

@@ -34,11 +34,15 @@ export const usePreselectedResourcePath = ({
         if (sourceId && source && resource) {
           const bestMatchLineage = findBestMatchLineage(source, resource);
 
-          path = await Promise.all(
-            bestMatchLineage.map(async (resourceId) => {
-              return onRequestResource({ source: sourceId, resource: resourceId });
-            }),
-          );
+          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 };

package/src/ResourcePickerContainer/ResourcePickerContainer.spec.tsx

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

@@ -47,6 +47,7 @@ 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();
@@ -73,10 +74,12 @@ 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,23 +90,35 @@ 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 });
+      onChange({ resource, source: selectedSource ?? (source?.source as Source) });
 
       // Find the path that got them to where they are
       const selectedPath = hierarchy.map((path) => {
@@ -113,19 +128,22 @@ function ResourcePickerContainer({
 
       const [rootNode, ...path] = selectedPath;
 
-      // Update the recent locations in local storage
-      addRecentLocation({
-        rootNode,
-        path: path as Resource[],
-        source: source?.source as Source,
-      });
+      if (rootNode) {
+        // Update the recent locations in local storage
+        addRecentLocation({
+          rootNode,
+          path: path as Resource[],
+          source: selectedSource ?? (source?.source as Source),
+        });
+      }
 
       onClose();
     },
-    [source, currentResource],
+    [selectedSource, source, currentResource],
   );
 
   const handleDetailClose = useCallback(() => {
+    setSelectedSource(null);
     setSelectedResourceId(null);
   }, []);
 
@@ -133,6 +151,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 +161,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]);
@@ -200,9 +222,11 @@ function ResourcePickerContainer({
           {!source && (
             <SourceList
               sources={sources}
+              selectedResource={selectedResource}
               previewModalState={previewModalState}
               isLoading={isSourceLoading || isPreselectedResourcePathLoading}
-              onSourceSelect={handleSourceDrilldown}
+              onSourceSelect={handleSourceSelected}
+              onSourceDrilldown={handleSourceDrilldown}
               handleReload={handleSourceReload}
               setSource={setSource}
               error={sourceError}

package/src/SourceList/SourceList.spec.tsx

@@ -107,6 +107,7 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={true}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={() => {}}
@@ -133,6 +134,7 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={() => {}}
@@ -160,6 +162,7 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={() => {}}
@@ -186,6 +189,7 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={() => {}}
@@ -219,6 +223,7 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={onSourceSelect}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={() => {}}
@@ -229,7 +234,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,6 +249,42 @@ describe('SourceList', () => {
     });
   });
 
+  it('Clicking node child count button triggers correct onSourceDrilldown', async () => {
+    const onSourceDrilldown = jest.fn();
+    const reload = jest.fn();
+
+    render(
+      <SourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <SourceList
+              sources={sources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onSourceSelect={() => {}}
+              onSourceDrilldown={onSourceDrilldown}
+              error={null}
+              handleReload={reload}
+              setSource={() => {}}
+            />
+          );
+        }}
+      />,
+    );
+
+    const user = userEvent.setup();
+    const itemButton = screen.getByRole('button', { name: 'Drill down to Node 1 children' });
+    user.click(itemButton);
+
+    await waitFor(() => {
+      // 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 error state when an error occurs loading source list', async () => {
     const reload = jest.fn();
 
@@ -256,6 +297,7 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={new Error('Source list error!')}
               handleReload={reload}
               setSource={() => {}}
@@ -286,6 +328,7 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={setSource}
@@ -316,6 +359,7 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={setSource}
@@ -369,6 +413,7 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
+              onSourceDrilldown={() => {}}
               error={null}
               handleReload={reload}
               setSource={setSource}

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

@@ -11,9 +11,11 @@ import { HistoryIcon } from '../Icons/HistoryIcon';
 
 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;
   error: Error | null;
@@ -21,9 +23,11 @@ export interface SourceListProps {
 
 const SourceList = function ({
   sources,
+  selectedResource,
   previewModalState,
   isLoading,
   onSourceSelect,
+  onSourceDrilldown,
   handleReload,
   setSource,
   error,
@@ -112,14 +116,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' },
 };