@squiz/resource-browser 1.66.3 → 1.67.0

package/src/ResourcePicker/ResourcePicker.tsx

@@ -59,7 +59,14 @@ const ResourcePicker = ({
           <div className="resource-picker-info__layout">
             {isLoading && <LoadingState />}
             {error && <ErrorState error={error} isDisabled={isDisabled} onClear={onClear} />}
-            {resource && <SelectedState resource={resource} isDisabled={isDisabled} onClear={onClear} />}
+            {resource && (
+              <SelectedState
+                resource={resource}
+                isDisabled={isDisabled}
+                onClear={onClear}
+                resourcePickerContainer={children}
+              />
+            )}
           </div>
         </div>
       )}

package/src/ResourcePicker/States/Selected.tsx

@@ -1,24 +1,41 @@
 import React from 'react';
 import prettyBytes from 'pretty-bytes';
-import { Icon, IconOptions, ResetButton } from '@squiz/generic-browser-lib';
+import { Icon, IconOptions, ModalTrigger, ResetButton } from '@squiz/generic-browser-lib';
 
 import { Resource } from '../../types';
 import StatusIndicator from '../../StatusIndicator/StatusIndicator';
+import { CircledLoopIcon } from '../../Icons/CircledLoopIcon';
 
 export type SelectedStateProps = {
   resource: Resource;
   isDisabled?: boolean;
   onClear: () => void;
+  resourcePickerContainer: any;
 };
 
 export const SelectedState = ({
   resource: { id, type, name, status, squizImage, url },
   isDisabled,
   onClear,
+  resourcePickerContainer,
 }: SelectedStateProps) => {
   const fileSize = squizImage?.imageVariations?.original?.byteSize;
   const fileWidth = squizImage?.imageVariations?.original?.width;
   const fileHeight = squizImage?.imageVariations?.original?.height;
+
+  const replaceAsset = (
+    <ModalTrigger
+      showLabel={false}
+      label="Replace selection"
+      containerClasses="text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed"
+      icon={<CircledLoopIcon aria-hidden className="m-1" />}
+      isDisabled={isDisabled}
+      scope="squiz-rb-scope"
+    >
+      {resourcePickerContainer}
+    </ModalTrigger>
+  );
+
   return (
     <>
       {/* Left column */}
@@ -29,7 +46,7 @@ export const SelectedState = ({
       ) : (
         <Icon icon={type.code as IconOptions} resourceSource="matrix" className="w-4 h-4 mt-1 flex self-start" />
       )}
-      {/* Center column */}
+      {/* Center columns */}
       <div className="justify-self-start self-center w-full overflow-hidden break-words">
         <span>{name}</span>
         <dl className="col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm">
@@ -58,7 +75,10 @@ export const SelectedState = ({
         )}
       </div>
       {/* End column */}
-      <ResetButton isDisabled={isDisabled} onClick={onClear} />
+      <div className="flex">
+        {replaceAsset}
+        <ResetButton isDisabled={isDisabled} onClick={onClear} />
+      </div>
     </>
   );
 };

package/src/ResourcePicker/resource-picker.scss

@@ -6,7 +6,7 @@
     @apply w-full p-2 bg-gray-100 rounded-md;
     @apply text-gray-900 text-base text-md font-semibold;
     &__layout {
-      @apply grid grid-cols-[auto_1fr_24px] gap-2;
+      @apply grid grid-cols-[auto_1fr_auto] gap-2;
       @apply justify-items-center;
     }
   }

package/src/ResourcePickerContainer/ResourcePickerContainer.spec.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { screen, render, waitFor, within, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { mockResource, mockSource } from '../__mocks__/MockModels';
-import { Resource, Source, Hierarchy } from '../types';
+import { Resource, Source, Hierarchy, ResourceReference } from '../types';
 import { Context as ResponsiveContext } from 'react-responsive';
 import { OverlayTriggerState } from 'react-stately';
 
@@ -38,39 +38,36 @@ const baseProps = {
   titleAriaProps: {},
   allowedTypes: undefined,
   onClose: jest.fn(),
-  onRequestSources: () => {
-    return Promise.resolve([
-      mockSource({
-        id: '1',
-        name: 'Test system',
-        nodes: [
-          {
-            id: '1',
-            type: {
-              code: 'site',
-              name: 'Site',
-            },
-            name: 'Test Website',
-            childCount: 21,
+  onRequestSources: jest.fn().mockResolvedValue([
+    mockSource({
+      id: '1',
+      name: 'Test system',
+      nodes: [
+        {
+          id: '1',
+          type: {
+            code: 'site',
+            name: 'Site',
           },
-        ],
-      }),
-    ]);
-  },
-  onRequestChildren: () => {
-    return Promise.resolve([
-      mockResource({
-        id: '123',
-        type: {
-          code: 'page',
-          name: 'Mocked Page',
+          name: 'Test Website',
+          childCount: 21,
         },
-        name: 'Test Page',
-        childCount: 0,
-      }),
-    ]);
-  },
-  onChange: () => {},
+      ],
+    }),
+  ]),
+  onRequestResource: jest.fn().mockRejectedValue(new Error('onRequestResource has not been mocked.')),
+  onRequestChildren: jest.fn().mockResolvedValue([
+    mockResource({
+      id: '123',
+      type: {
+        code: 'page',
+        name: 'Mocked Page',
+      },
+      name: 'Test Page',
+      childCount: 0,
+    }),
+  ]),
+  onChange: jest.fn(),
 };
 
 describe('ResourcePickerContainer', () => {
@@ -146,6 +143,123 @@ describe('ResourcePickerContainer', () => {
     });
   });
 
+  it('The preselected resource is selected', async () => {
+    const resources: Record<string, Resource> = {
+      1: mockResource({ id: '1', name: 'Root Folder' }),
+      100: mockResource({ id: '100', name: 'Source root node #1' }),
+      200: mockResource({ id: '200', name: 'Source root node #2' }),
+      201: mockResource({ id: '201', name: 'Child #1' }),
+      202: mockResource({ id: '202', name: 'Child #2' }),
+      203: mockResource({
+        id: '203',
+        name: 'Leaf',
+        lineages: [
+          {
+            resourceIds: ['1', '200', '201', '202', '203'],
+          },
+        ],
+      }),
+      204: mockResource({ id: '204', name: 'Another leaf' }),
+      300: mockResource({ id: '300', name: 'Source root node #3' }),
+    };
+    const sources: Record<string, Source> = {
+      1: mockSource({
+        id: '1',
+        name: 'Test system 1',
+        nodes: [resources[100]],
+      }),
+      2: mockSource({
+        id: '2',
+        name: 'Test system 2',
+        nodes: [resources[200], resources[300]],
+      }),
+    };
+
+    const onRequestSources = jest.fn().mockResolvedValue(Object.values(sources));
+    const onRequestResource = jest.fn((reference: ResourceReference) => Promise.resolve(resources[reference.resource]));
+    const onRequestChildren = jest.fn().mockResolvedValue([resources[203], resources[204]]);
+    const preselectedSourceId = '2';
+    const preselectedResource = resources[203];
+
+    render(
+      <ResourcePickerContainer
+        {...baseProps}
+        onRequestSources={onRequestSources}
+        onRequestResource={onRequestResource}
+        onRequestChildren={onRequestChildren}
+        preselectedSourceId={preselectedSourceId}
+        preselectedResource={preselectedResource}
+      />,
+    );
+
+    await waitFor(() => expect(screen.getByRole('button', { name: 'folder Leaf selected' })).toBeInTheDocument());
+
+    const breadcrumbs = within(screen.getByLabelText('Resource breadcrumb')).getAllByRole('listitem');
+
+    // Breadcrumbs should be populated, source should be populated.
+    // "Leaf" resource should be selected, "Another leaf" resource should not be selected.
+    expect(breadcrumbs.map((item) => item.textContent)).toEqual(['', 'Source root node #2', 'Child #1', 'Child #2']);
+    expect(screen.getByLabelText('Source quick select')).toHaveTextContent(/Source root node #2/);
+    expect(screen.getByRole('button', { name: 'folder Leaf selected' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'folder Another leaf' })).toBeInTheDocument();
+  });
+
+  it.each([
+    ['the preselected resource is a root node', 10],
+    ['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) => {
+    const resources: Record<string, Resource> = {
+      10: mockResource({
+        id: '100',
+        name: 'Source root node #1',
+        lineages: [{ resourceIds: ['1', '10'] }],
+      }),
+      100: mockResource({
+        id: '100',
+        name: 'Resource without lineages',
+        lineages: undefined,
+      }),
+      200: mockResource({
+        id: '200',
+        name: 'Resource not available under a root node',
+        lineages: [{ resourceIds: ['1', '20', '200'] }],
+      }),
+    };
+    const sources: Record<string, Source> = {
+      1: mockSource({
+        id: '1',
+        name: 'Test system 1',
+        nodes: [resources[10]],
+      }),
+    };
+
+    const onRequestSources = jest.fn().mockResolvedValue(Object.values(sources));
+    const onRequestResource = jest.fn((reference: ResourceReference) => Promise.resolve(resources[reference.resource]));
+    const onRequestChildren = jest.fn().mockResolvedValue([]);
+    const preselectedSourceId = '1';
+    const preselectedResource = resources[preselectedResourceId];
+
+    render(
+      <ResourcePickerContainer
+        {...baseProps}
+        onRequestSources={onRequestSources}
+        onRequestResource={onRequestResource}
+        onRequestChildren={onRequestChildren}
+        preselectedSourceId={preselectedSourceId}
+        preselectedResource={preselectedResource}
+      />,
+    );
+
+    await waitFor(() => expect(screen.queryByRole('list', { name: 'Source list' })).toBeInTheDocument());
+
+    // 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();
+  });
+
   it('Selecting a child count drills down', async () => {
     const onRequestChildren = jest.fn(() => {
       return Promise.resolve([]);

package/src/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -1,26 +1,36 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { useOverlayTriggerState } from 'react-stately';
-import { useAsync } from '@squiz/generic-browser-lib';
-
 import SourceList from '../SourceList/SourceList';
 import ResourceList from '../ResourceList/ResourceList';
 import ResourceBreadcrumb from '../ResourceBreadcrumb/ResourceBreadcrumb';
 import PreviewPanel from '../PreviewPanel/PreviewPanel';
 import SourceDropdown from '../SourceDropdown/SourceDropdown';
-
-import { Source, Resource, HydratedResourceReference, ScopedSource } from '../types';
+import {
+  Source,
+  Resource,
+  HydratedResourceReference,
+  ScopedSource,
+  OnRequestSources,
+  OnRequestChildren,
+  OnRequestResource,
+} from '../types';
 import { useResourcePath } from '../Hooks/useResourcePath';
 import { useChildResources } from '../Hooks/useChildResources';
+import { useSources } from '../Hooks/useSources';
+import { usePreselectedResourcePath } from '../Hooks/usePreselectedResourcePath';
 
 interface ResourcePickerContainerProps {
   title: string;
   titleAriaProps: DOMAttributes<FocusableElement>;
   allowedTypes: string[] | undefined;
-  onRequestSources: () => Promise<Source[]>;
-  onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
+  onRequestSources: OnRequestSources;
+  onRequestResource: OnRequestResource;
+  onRequestChildren: OnRequestChildren;
   onChange(resource: HydratedResourceReference | null): void;
   onClose: () => void;
+  preselectedSourceId?: string;
+  preselectedResource?: Resource | null;
 }
 
 function ResourcePickerContainer({
@@ -28,28 +38,42 @@ function ResourcePickerContainer({
   titleAriaProps,
   allowedTypes,
   onRequestSources,
+  onRequestResource,
   onRequestChildren,
   onChange,
   onClose,
+  preselectedSourceId,
+  preselectedResource,
 }: ResourcePickerContainerProps) {
   const previewModalState = useOverlayTriggerState({});
-  const [selectedResource, setSelectedResource] = useState<Resource | null>(null);
+  const [selectedResourceId, setSelectedResourceId] = useState<string | null>(null);
   const [previewModalOverlayProps, setPreviewModalOverlayProps] = useState<DOMAttributes>({});
   const { source, currentResource, hierarchy, setSource, push, popUntil } = useResourcePath();
-
   const {
     data: sources,
     isLoading: isSourceLoading,
     reload: handleSourceReload,
     error: sourceError,
-  } = useAsync({ callback: onRequestSources, defaultValue: [] }, []);
-
+  } = useSources({ onRequestSources });
   const {
     data: resources,
     isLoading: isResourcesLoading,
     reload: handleResourceReload,
     error: resourceError,
   } = useChildResources({ source, currentResource, onRequestChildren });
+  const {
+    data: { source: preselectedSource, path: preselectedPath },
+    isLoading: isPreselectedResourcePathLoading,
+  } = usePreselectedResourcePath({
+    sourceId: preselectedSourceId,
+    resource: preselectedResource,
+    onRequestResource,
+    onRequestSources,
+  });
+  const selectedResource = useMemo(
+    () => resources.find((resource) => resource.id === selectedResourceId) || null,
+    [selectedResourceId, resources],
+  );
 
   const handleResourceDrillDown = useCallback(
     (resource: Resource) => {
@@ -60,7 +84,7 @@ function ResourcePickerContainer({
 
   const handleResourceSelected = useCallback((resource: Resource, overlayProps: DOMAttributes) => {
     setPreviewModalOverlayProps(overlayProps);
-    setSelectedResource(resource);
+    setSelectedResourceId(resource.id);
   }, []);
 
   const handleSourceDrilldown = useCallback(
@@ -83,13 +107,35 @@ function ResourcePickerContainer({
   );
 
   const handleDetailClose = useCallback(() => {
-    setSelectedResource(null);
+    setSelectedResourceId(null);
   }, []);
 
-  // When the active node changes clear the selected resource
+  // Clear the selected resource if it no longer exists in the list of resources
+  // (eg. due to navigating up/down the tree).
+  useEffect(() => {
+    if (resources.length > 0 && selectedResourceId && !selectedResource) {
+      setSelectedResourceId(null);
+    }
+  }, [resources, selectedResourceId, selectedResource]);
+
   useEffect(() => {
-    setSelectedResource(null);
-  }, [hierarchy]);
+    if (preselectedSource && preselectedPath?.length) {
+      const [rootNode, ...path] = preselectedPath;
+      const leaf = path.pop();
+
+      setSource(
+        {
+          source: preselectedSource,
+          resource: rootNode,
+        },
+        path,
+      );
+
+      if (leaf) {
+        setSelectedResourceId(leaf.id);
+      }
+    }
+  }, [preselectedSource, preselectedSource]);
 
   return (
     <div className="relative flex flex-col h-full text-gray-800">
@@ -134,7 +180,7 @@ function ResourcePickerContainer({
             <SourceList
               sources={sources}
               previewModalState={previewModalState}
-              isLoading={isSourceLoading}
+              isLoading={isSourceLoading || isPreselectedResourcePathLoading}
               onSourceSelect={handleSourceDrilldown}
               handleReload={handleSourceReload}
               error={sourceError}
@@ -157,7 +203,7 @@ function ResourcePickerContainer({
         </div>
         <div className="sm:overflow-y-scroll sm:flex-1 sm:grow-[2] bg-white">
           <PreviewPanel
-            resource={selectedResource}
+            resource={isResourcesLoading ? null : selectedResource}
             modalState={previewModalState}
             previewModalOverlayProps={previewModalOverlayProps}
             allowedTypes={allowedTypes}

package/src/SourceDropdown/SourceDropdown.tsx

@@ -4,7 +4,7 @@ import { Icon, IconOptions, Spinner } from '@squiz/generic-browser-lib';
 
 import type { Source, ScopedSource } from '../types';
 
-import uuid from '../uuid';
+import uuid from '../utils/uuid';
 import { useCategorisedSources } from '../Hooks/useCategorisedSources';
 
 export default function SourceDropdown({

package/src/SourceList/sample-sources.json

@@ -17,7 +17,7 @@
         "childCount": 21
       },
       {
-        "id": "2",
+        "id": "10",
         "type": {
           "code": "site",
           "name": "Site"
@@ -30,7 +30,7 @@
         "childCount": 135877
       },
       {
-        "id": "3",
+        "id": "20",
         "type": {
           "code": "folder",
           "name": "Folder"
@@ -49,7 +49,7 @@
     "name": "Acme internal system",
     "nodes": [
       {
-        "id": "4",
+        "id": "30",
         "type": {
           "code": "site",
           "name": "Site"
@@ -62,7 +62,7 @@
         "childCount": 15
       },
       {
-        "id": "5",
+        "id": "1",
         "type": {
           "code": "site",
           "name": "Site"

package/src/__mocks__/MockModels.ts

@@ -18,6 +18,7 @@ export const mockResource = (properties: Partial<Resource> = {}): Resource => {
     url: 'https://no-where.com',
     urls: [],
     childCount: 0,
+    lineages: [],
     ...properties,
   };
 };

package/src/__mocks__/StorybookHelpers.ts

@@ -1,5 +1,5 @@
 import sampleSources from '../SourceList/sample-sources.json';
-import { HydratedResourceReference, Resource, Source } from '../types';
+import { HydratedResourceReference, Resource, ResourceReference, Source } from '../types';
 import sampleResources from '../ResourceList/sample-resources.json';
 
 type CreateCallbacksProps = Partial<{
@@ -9,14 +9,39 @@ type CreateCallbacksProps = Partial<{
   error?: string;
 }>;
 
+const indexResources = (resources: Resource[]) => {
+  const indexed: Record<string, Resource> = {};
+  const pending = [...resources];
+
+  while (pending.length > 0) {
+    const resource = pending.shift();
+
+    if (!resource) {
+      continue;
+    }
+
+    indexed[resource.id] = resource;
+
+    if (resource && '_children' in resource) {
+      pending.push(...(resource._children as Resource[]));
+    }
+  }
+
+  return indexed;
+};
+
 export const createResourceBrowserCallbacks = ({
   delay = 500,
   sourceIsLoading = false,
   resourceIsLoading = false,
   error,
 }: CreateCallbacksProps = {}) => {
+  const indexedResources = indexResources(sampleResources as Resource[]);
+
   return {
     onRequestSources: () => {
+      console.log('onRequestSources');
+
       return new Promise((resolve, reject) => {
         if (!sourceIsLoading) {
           setTimeout(() => {
@@ -30,26 +55,30 @@ export const createResourceBrowserCallbacks = ({
       });
     },
     onRequestChildren: (source: Source, resource: Resource | null) => {
+      console.log('onRequestChildren', source, resource);
+
       return new Promise((resolve, reject) => {
         if (!resourceIsLoading) {
           setTimeout(() => {
             if (error && Math.random() > 0.5) {
               reject(new Error(error));
             } else {
-              resolve(((resource as any)?._children || sampleResources) as Resource[] | undefined);
+              resolve(resource ? (indexedResources[resource.id] as any)?._children || [] : sampleResources);
             }
           }, delay);
         }
       });
     },
-    onRequestResource: () => {
+    onRequestResource: (reference: ResourceReference) => {
+      console.log('onRequestResource', reference);
+
       return new Promise((resolve, reject) => {
         if (!resourceIsLoading) {
           setTimeout(() => {
             if (error && Math.random() > 0.5) {
               reject(new Error(error));
             } else {
-              resolve(sampleResources[0]);
+              resolve(indexedResources[reference.resource]);
             }
           }, delay);
         }

package/src/__mocks__/renderWithContext.tsx

@@ -0,0 +1,23 @@
+import React, { ReactElement, ReactNode } from 'react';
+import {
+  ResourceBrowserContextProps,
+  ResourceBrowserContextProvider,
+} from '../ResourceBrowserContext/ResourceBrowserContext';
+import { render } from '@testing-library/react';
+
+export const renderWithContext = (ui: ReactElement, context: Partial<ResourceBrowserContextProps> = {}) => {
+  return render(ui, {
+    wrapper: ({ children }: { children: ReactNode }): ReactElement => (
+      <ResourceBrowserContextProvider
+        value={{
+          onRequestSources: jest.fn(),
+          onRequestChildren: jest.fn(),
+          onRequestResource: jest.fn(),
+          ...context,
+        }}
+      >
+        {children}
+      </ResourceBrowserContextProvider>
+    ),
+  });
+};