@squiz/resource-browser 1.32.1-alpha.14 → 1.32.1-alpha.16

package/src/ResourcePickerContainer/ResourcePickerContainer.stories.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
-
-import { NodeIdentifier } from '../index';
 import ResourcePickerContainer from './ResourcePickerContainer';
-import sampleSources from '../SourceList/sample-sources.json';
-import sampleResources from '../ResourceList/sample-resources.json';
+import { createResourceBrowserCallbacks } from '../__mocks__/StorybookHelpers';
 
 export default {
   title: 'Resource Picker',
@@ -12,36 +9,17 @@ export default {
 } as Meta<typeof ResourcePickerContainer>;
 
 const Template: StoryFn<typeof ResourcePickerContainer> = ({ title }) => {
+  const { onRequestSources, onRequestChildren, onRequestResource, onChange } = createResourceBrowserCallbacks();
+
   return (
     <ResourcePickerContainer
       title={title}
       titleAriaProps={{}}
       allowedTypes={undefined}
-      onRequestSources={() => {
-        return new Promise((resolve) => {
-          setTimeout(resolve, 500, sampleSources);
-        });
-      }}
-      onRequestChildren={() => {
-        return new Promise((resolve) => {
-          setTimeout(resolve, 500, sampleResources);
-        });
-      }}
-      onRequestResource={() => {
-        return new Promise((resolve) => {
-          setTimeout(resolve, 500, {
-            type: 'page',
-            name: 'Products',
-            properties: new Map([
-              ['assetId', '12345'],
-              ['status', 'UnderConstruction'],
-            ]),
-          });
-        });
-      }}
-      onChange={(nodeId: NodeIdentifier) => {
-        alert(`Resource Browser has selected ${nodeId.source} ${nodeId.id}`);
-      }}
+      onRequestSources={onRequestSources}
+      onRequestChildren={onRequestChildren}
+      onRequestResource={onRequestResource}
+      onChange={onChange}
       onClose={() => {
         alert('Resource Browser closed');
       }}

package/src/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -8,16 +8,18 @@ import ResourceBreadcrumb from '../ResourceBreadcrumb/ResourceBreadcrumb';
 import PreviewPanel from '../PreviewPanel/PreviewPanel';
 import SourceDropdown from '../SourceDropdown/SourceDropdown';
 
-import { NodeIdentifier, Source, Resource, ResourceDetail, Hierarchy } from '../index';
+import { Source, Resource, HydratedResourceReference, ScopedSource } from '../types';
+import { useResourcePath } from '../Hooks/useResourcePath';
+import { useChildResources } from '../Hooks/useChildResources';
+import { useSources } from '../Hooks/useSources';
 
 interface ResourcePickerContainerProps {
   title: string;
   titleAriaProps: DOMAttributes<FocusableElement>;
   allowedTypes: string[] | undefined;
   onRequestSources: () => Promise<Source[]>;
-  onRequestChildren(id: NodeIdentifier): Promise<Resource[]>;
-  onRequestResource(id: NodeIdentifier): Promise<ResourceDetail | null>;
-  onChange(resource: NodeIdentifier | null): void;
+  onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
+  onChange(resource: HydratedResourceReference | null): void;
   onClose: () => void;
 }
 
@@ -27,123 +29,59 @@ function ResourcePickerContainer({
   allowedTypes,
   onRequestSources,
   onRequestChildren,
-  onRequestResource,
   onChange,
   onClose,
 }: ResourcePickerContainerProps) {
   const previewModalState = useOverlayTriggerState({});
+  const [selectedResource, setSelectedResource] = useState<Resource | null>(null);
+  const [previewModalOverlayProps, setPreviewModalOverlayProps] = useState<DOMAttributes>({});
+  const { source, currentResource, hierarchy, setSource, push, popUntil } = useResourcePath();
+  const { isLoading: isSourceLoading, sources } = useSources({ onRequestSources });
+  const { isLoading: isResourcesLoading, resources } = useChildResources({
+    source,
+    currentResource,
+    onRequestChildren,
+  });
 
-  const [isSourceLoading, setIsSourceLoading] = useState<boolean>(false);
-  const [isMainLoading, setIsMainLoading] = useState<boolean>(false);
-  const [isSecondaryLoading, setIsSecondaryLoading] = useState<boolean>(false);
-
-  const [currentNode, setCurrentNode] = useState<NodeIdentifier | null>(null);
-  const [selectedId, setSelectedId] = useState<NodeIdentifier | null>(null);
-  const [previewModalOverlayProps, setPreviewModalOverlayProps] = useState<DOMAttributes<FocusableElement>>({});
-  const [hierarchy, setHierarchy] = useState<Array<Hierarchy>>([]);
-
-  const [sources, setSources] = useState<Array<Source>>([]);
-  const [resources, setResources] = useState<Array<Resource>>([]);
-  const [selectedNodeDetails, setSelectedNodeDetails] = useState<ResourceDetail | null>(null);
-
-  const adjustHierarchy = (node: NodeIdentifier, resetHierarchy: boolean) => {
-    const isInHierarchy = hierarchy.find((hNode) => hNode.id === node);
-    let newHierarchy: Array<Hierarchy> = [];
-
-    // If the node is already in the hierarchy we need to 'jump' back to it
-    if (isInHierarchy) {
-      let reachedNode = false;
-      // Read though the hierarchy and add any nodes before and including the current to the array
-      hierarchy.forEach((hNode) => {
-        if (reachedNode === false) {
-          newHierarchy.push(hNode);
-          if (hNode.id === node) {
-            reachedNode = true;
-          }
-        }
-      });
-    } else {
-      let label: string = resources.find((resource) => resource.id === node)?.label || '';
-
-      // Might be a source
-      if (!label) {
-        const source = sources.find((source) => source.id === node.source);
-        if (source) {
-          label = source.nodes.find((resource) => resource.id === node)?.label || '';
-        }
-      }
-
-      // If we are jumping to a complete other spot and the container knows it, it can request a complete reset
-      if (!resetHierarchy) {
-        newHierarchy = hierarchy.slice();
-      }
-
-      newHierarchy.push({
-        id: node,
-        label,
-      });
-    }
-
-    setHierarchy(newHierarchy);
-  };
+  const handleResourceDrillDown = useCallback(
+    (resource: Resource) => {
+      push(resource);
+    },
+    [push],
+  );
 
-  const handleResourceSelected = useCallback((node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => {
+  const handleResourceSelected = useCallback((resource: Resource, overlayProps: DOMAttributes) => {
     setPreviewModalOverlayProps(overlayProps);
-    setIsSecondaryLoading(true);
-    setSelectedId(node);
-
-    setSelectedNodeDetails(null);
-
-    onRequestResource(node).then((detail: ResourceDetail | null) => {
-      setSelectedNodeDetails(detail);
-      setIsSecondaryLoading(false);
-    });
+    setSelectedResource(resource);
   }, []);
 
-  const handleResourceDrillDown = useCallback(
-    (node: NodeIdentifier, resetHierarchy?: boolean) => {
-      setIsMainLoading(true);
-      setCurrentNode(node);
-      adjustHierarchy(node, resetHierarchy || false);
-
-      setSelectedId(null);
-      setSelectedNodeDetails(null);
-      setResources([]);
-
-      onRequestChildren(node).then((resources: Array<Resource>) => {
-        setResources(resources);
-        setIsMainLoading(false);
-      });
+  const handleSourceDrilldown = useCallback(
+    (source: ScopedSource) => {
+      setSource(source);
     },
-    [resources, sources],
+    [setSource],
   );
 
   const handleReturnToRoot = useCallback(() => {
-    setCurrentNode(null);
-    setSelectedId(null);
-    setResources([]);
-    setHierarchy([]);
-
-    setSelectedNodeDetails(null);
-  }, []);
+    setSource(null);
+  }, [setSource]);
 
-  const handleDetailSelect = useCallback((node: NodeIdentifier) => {
-    onChange(node);
-    onClose();
-  }, []);
+  const handleDetailSelect = useCallback(
+    (resource: Resource) => {
+      onChange({ resource, source: source?.source as Source });
+      onClose();
+    },
+    [source],
+  );
 
   const handleDetailClose = useCallback(() => {
-    setSelectedId(null);
+    setSelectedResource(null);
   }, []);
 
-  // On load of component fetch the list of sources
+  // When the active node changes clear the selected resource
   useEffect(() => {
-    setIsSourceLoading(true);
-    onRequestSources().then((sources: Array<Source>) => {
-      setSources(sources);
-      setIsSourceLoading(false);
-    });
-  }, []);
+    setSelectedResource(null);
+  }, [hierarchy]);
 
   return (
     <div className="relative flex flex-col h-full">
@@ -154,9 +92,9 @@ function ResourcePickerContainer({
         <div className="px-3 border-l border-grey-300 w-300px">
           <SourceDropdown
             sources={sources}
-            currentSource={hierarchy[0]?.id}
+            selectedSource={source}
             isLoading={isSourceLoading}
-            onSourceSelect={handleResourceDrillDown}
+            onSourceSelect={handleSourceDrilldown}
             onRootSelect={handleReturnToRoot}
           />
         </div>
@@ -177,40 +115,38 @@ function ResourcePickerContainer({
       <div className="flex border-t border-grey-300 h-[calc(100%-92px)]">
         <div className="overflow-y-scroll flex-1 grow-[3] border-r border-gray-300">
           <h3 className="sr-only">Resource List</h3>
-          {currentNode === null && (
+          {hierarchy.length > 0 && (
+            <ResourceBreadcrumb
+              hierarchy={hierarchy}
+              onBreadcrumbSelect={popUntil}
+              onReturnToRoot={handleReturnToRoot}
+            />
+          )}
+          {!source && (
             <SourceList
               sources={sources}
               previewModalState={previewModalState}
               isLoading={isSourceLoading}
-              onSourceSelect={handleResourceSelected}
-              onSourceDrillDown={handleResourceDrillDown}
+              onSourceSelect={handleSourceDrilldown}
+              onSourceDrillDown={handleSourceDrilldown}
               allowedTypes={allowedTypes}
             />
           )}
-
-          {currentNode && (
-            <>
-              <ResourceBreadcrumb
-                hierarchy={hierarchy}
-                onBreadcrumbSelect={handleResourceDrillDown}
-                onReturnToRoot={handleReturnToRoot}
-              />
-              <ResourceList
-                previewModalState={previewModalState}
-                resources={resources}
-                isLoading={isMainLoading}
-                onResourceSelect={handleResourceSelected}
-                onResourceDrillDown={handleResourceDrillDown}
-                allowedTypes={allowedTypes}
-              />
-            </>
+          {source && (
+            <ResourceList
+              previewModalState={previewModalState}
+              resources={resources}
+              selectedResource={selectedResource}
+              isLoading={isResourcesLoading}
+              onResourceSelect={handleResourceSelected}
+              onResourceDrillDown={handleResourceDrillDown}
+              allowedTypes={allowedTypes}
+            />
           )}
         </div>
         <PreviewPanel
-          node={selectedId}
-          resourceDetail={selectedNodeDetails}
+          resource={selectedResource}
           modalState={previewModalState}
-          isLoading={isSecondaryLoading}
           previewModalOverlayProps={previewModalOverlayProps}
           allowedTypes={allowedTypes}
           onSelect={handleDetailSelect}

package/src/SourceDropdown/SourceDropdown.spec.tsx

@@ -2,62 +2,59 @@
 import React from 'react';
 import { screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
 import SourceDropdown from './SourceDropdown';
+import { Source } from '../types';
+import { mockScopedSource, mockSource } from '../__mocks__/MockModels';
 
-const sources = [
-  {
+const sources: Source[] = [
+  mockSource({
     id: '1',
     name: 'Source 1',
     nodes: [
       {
-        id: {
-          id: '1',
-          source: '1',
+        id: '1',
+        type: {
+          code: 'site',
+          name: 'Site',
         },
-        type: 'site',
-        selected: false,
-        label: 'Node 1',
+        name: 'Node 1',
         childCount: 21,
       },
       {
-        id: {
-          id: '2',
-          source: '1',
+        id: '2',
+        type: {
+          code: 'site',
+          name: 'Site',
         },
-        type: 'site',
-        selected: false,
-        label: 'Node 2',
+        name: 'Node 2',
         childCount: 13,
       },
     ],
-  },
-  {
+  }),
+  mockSource({
     id: '2',
     name: 'Source 2',
     nodes: [
       {
-        id: {
-          id: '1',
-          source: '2',
+        id: '3',
+        type: {
+          code: 'site',
+          name: 'Site',
         },
-        type: 'site',
-        selected: false,
-        label: 'Node 3',
+        name: 'Node 3',
         childCount: 15,
       },
       {
-        id: {
-          id: '2',
-          source: '2',
+        id: '4',
+        type: {
+          code: 'site',
+          name: 'Site',
         },
-        type: 'site',
-        selected: false,
-        label: 'Node 4',
+        name: 'Node 4',
         childCount: 10,
       },
     ],
-  },
+  }),
 ];
 
 describe('SourceDropdown', () => {
@@ -65,7 +62,7 @@ describe('SourceDropdown', () => {
     render(
       <SourceDropdown
         sources={sources}
-        currentSource={null}
+        selectedSource={null}
         isLoading={false}
         onRootSelect={() => {}}
         onSourceSelect={() => {}}
@@ -83,7 +80,7 @@ describe('SourceDropdown', () => {
     render(
       <SourceDropdown
         sources={sources}
-        currentSource={null}
+        selectedSource={null}
         isLoading={true}
         onRootSelect={() => {}}
         onSourceSelect={() => {}}
@@ -99,10 +96,14 @@ describe('SourceDropdown', () => {
     render(
       <SourceDropdown
         sources={sources}
-        currentSource={{
-          id: '2',
-          source: '2',
-        }}
+        selectedSource={mockScopedSource({
+          source: {
+            name: 'Active source',
+          },
+          resource: {
+            name: 'Active scoped resource',
+          },
+        })}
         isLoading={false}
         onRootSelect={() => {}}
         onSourceSelect={() => {}}
@@ -110,7 +111,9 @@ describe('SourceDropdown', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Source quick select' })).toHaveTextContent('current source Node 4');
+      expect(screen.getByRole('button', { name: 'Source quick select' })).toHaveTextContent(
+        'current source Active scoped resource',
+      );
     });
   });
 
@@ -118,7 +121,7 @@ describe('SourceDropdown', () => {
     render(
       <SourceDropdown
         sources={sources}
-        currentSource={null}
+        selectedSource={null}
         isLoading={false}
         onRootSelect={() => {}}
         onSourceSelect={() => {}}
@@ -130,10 +133,10 @@ describe('SourceDropdown', () => {
 
     await waitFor(() => {
       expect(screen.getByRole('button', { name: 'All available sources' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'site Node 1' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'site Node 2' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'site Node 3' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'site Node 4' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Site Node 1' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Site Node 2' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Site Node 3' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Site Node 4' })).toBeTruthy();
     });
   });
 
@@ -142,7 +145,7 @@ describe('SourceDropdown', () => {
       <div>
         <SourceDropdown
           sources={sources}
-          currentSource={null}
+          selectedSource={null}
           isLoading={false}
           onRootSelect={() => {}}
           onSourceSelect={() => {}}
@@ -157,10 +160,10 @@ describe('SourceDropdown', () => {
 
     await waitFor(() => {
       expect(screen.getByRole('button', { name: 'All available sources' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'site Node 1' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'site Node 2' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'site Node 3' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'site Node 4' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Site Node 1' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Site Node 2' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Site Node 3' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Site Node 4' })).toBeTruthy();
     });
 
     user.type(buttonDropdown, '{tab}');
@@ -183,7 +186,7 @@ describe('SourceDropdown', () => {
       <div>
         <SourceDropdown
           sources={sources}
-          currentSource={null}
+          selectedSource={null}
           isLoading={false}
           onRootSelect={() => {}}
           onSourceSelect={() => {}}
@@ -198,20 +201,20 @@ describe('SourceDropdown', () => {
 
     await waitFor(() => {
       expect(screen.getByRole('button', { name: 'All available sources' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'site Node 1' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'site Node 2' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'site Node 3' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'site Node 4' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Site Node 1' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Site Node 2' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Site Node 3' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'Site Node 4' })).toBeTruthy();
     });
 
     user.type(buttonDropdown, '{escape}');
 
     await waitFor(() => {
       expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
-      expect(screen.queryByRole('button', { name: 'site Node 1' })).toBeFalsy();
-      expect(screen.queryByRole('button', { name: 'site Node 2' })).toBeFalsy();
-      expect(screen.queryByRole('button', { name: 'site Node 3' })).toBeFalsy();
-      expect(screen.queryByRole('button', { name: 'site Node 4' })).toBeFalsy();
+      expect(screen.queryByRole('button', { name: 'Site Node 1' })).toBeFalsy();
+      expect(screen.queryByRole('button', { name: 'Site Node 2' })).toBeFalsy();
+      expect(screen.queryByRole('button', { name: 'Site Node 3' })).toBeFalsy();
+      expect(screen.queryByRole('button', { name: 'Site Node 4' })).toBeFalsy();
     });
   });
 
@@ -221,7 +224,7 @@ describe('SourceDropdown', () => {
     render(
       <SourceDropdown
         sources={sources}
-        currentSource={null}
+        selectedSource={null}
         isLoading={false}
         onRootSelect={onRootSelect}
         onSourceSelect={() => {}}
@@ -244,7 +247,7 @@ describe('SourceDropdown', () => {
     render(
       <SourceDropdown
         sources={sources}
-        currentSource={null}
+        selectedSource={null}
         isLoading={false}
         onRootSelect={() => {}}
         onSourceSelect={onSourceSelect}
@@ -253,10 +256,10 @@ describe('SourceDropdown', () => {
 
     const user = userEvent.setup();
     await user.click(screen.getByRole('button', { name: 'Source quick select' }));
-    await user.click(screen.getByRole('button', { name: 'site Node 1' }));
+    await user.click(screen.getByRole('button', { name: 'Site Node 1' }));
 
     await waitFor(() => {
-      expect(onSourceSelect).toHaveBeenCalledWith({ id: '1', source: '1' }, true);
+      expect(onSourceSelect).toHaveBeenCalledWith({ source: sources[0], resource: sources[0].nodes[0] });
       expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
     });
   });

package/src/SourceDropdown/SourceDropdown.stories.tsx

@@ -2,17 +2,17 @@ import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
 import SourceDropdown from './SourceDropdown';
-import sampleSources from './sample-sources.json';
+import sampleSources from '../SourceList/sample-sources.json';
 
 export default {
   title: 'Source Dropdown',
   component: SourceDropdown,
 } as Meta<typeof SourceDropdown>;
 
-const Template: StoryFn<typeof SourceDropdown> = ({ sources, currentSource, isLoading }) => (
+const Template: StoryFn<typeof SourceDropdown> = ({ sources, selectedSource, isLoading }) => (
   <SourceDropdown
     sources={sources}
-    currentSource={currentSource}
+    selectedSource={selectedSource}
     isLoading={isLoading}
     onSourceSelect={({ source, id }) => alert(`Source Select: ${source} - ${id}`)}
     onRootSelect={() => alert(`Root Select`)}
@@ -22,10 +22,7 @@ const Template: StoryFn<typeof SourceDropdown> = ({ sources, currentSource, isLo
 export const Primary = Template.bind({});
 Primary.args = {
   sources: sampleSources,
-  currentSource: {
-    id: '1',
-    source: '1',
-  },
+  selectedSource: { source: sampleSources[0], resource: sampleSources[0].nodes[0] },
   isLoading: false,
 };