@squiz/resource-browser 1.66.3 → 1.67.1

package/src/index.spec.tsx

@@ -1,31 +1,40 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ResourceBrowserInput } from './index';
-
-const mockRequestSources = jest.fn();
-const mockRequestChildren = jest.fn();
-const mockRequestResource = jest.fn();
-const mockChange = jest.fn();
-
-const defaultProps: any = {
-  modalTitle: 'Asset Picker',
-  allowedTypes: ['site', 'image', 'physical_file'],
-  onRequestSources: mockRequestSources,
-  onRequestChildren: mockRequestChildren,
-  onRequestResource: mockRequestResource,
-  onChange: mockChange,
-};
-
-describe('Related Asset Picker', () => {
+import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { ResourceBrowserInput, ResourceBrowserInputProps, ResourceReference } from './index';
+import { mockResource } from './__mocks__/MockModels';
+import { renderWithContext } from './__mocks__/renderWithContext';
+
+describe('Resource browser input', () => {
+  const mockRequestSources = jest.fn().mockResolvedValue([]);
+  const mockRequestChildren = jest.fn().mockResolvedValue([]);
+  const mockRequestResource = jest.fn();
+  const mockChange = jest.fn();
+  const renderComponent = (props: Partial<ResourceBrowserInputProps> = {}) => {
+    return renderWithContext(
+      <ResourceBrowserInput
+        modalTitle="Asset picker"
+        allowedTypes={['site', 'image', 'physical_file']}
+        onChange={mockChange}
+        value={null}
+        {...props}
+      />,
+      {
+        onRequestSources: mockRequestSources,
+        onRequestChildren: mockRequestChildren,
+        onRequestResource: mockRequestResource,
+      },
+    );
+  };
+
   it('should render the related asset picker with the default label', () => {
-    render(<ResourceBrowserInput {...defaultProps} />);
+    renderComponent();
     const pickerLabel = screen.getByText('Choose asset');
 
     expect(pickerLabel).toBeInTheDocument();
   });
 
   it('should display the generic asset picking icon', () => {
-    render(<ResourceBrowserInput {...defaultProps} />);
+    renderComponent();
     const pickerLabel = screen.getByText('Choose asset');
     const pickerIcon = screen.getByTestId('AdsClickRoundedIcon');
 
@@ -34,11 +43,62 @@ describe('Related Asset Picker', () => {
   });
 
   it('should display the image icon when only images are allowed', () => {
-    render(<ResourceBrowserInput {...defaultProps} allowedTypes={['image']} />);
+    renderComponent({ allowedTypes: ['image'] });
     const pickerLabel = screen.getByText('Choose image');
     const pickerIcon = screen.getByTestId('PhotoLibraryRoundedIcon');
 
     expect(pickerLabel).toBeInTheDocument();
     expect(pickerIcon).toBeInTheDocument();
   });
+
+  it('should disallow removing and replacing selection if the input is disabled', async () => {
+    mockRequestResource.mockResolvedValue(
+      mockResource({
+        id: '100',
+        name: 'Mocked resource',
+      }),
+    );
+    renderComponent({ value: { source: '1', resource: '100' }, isDisabled: true });
+
+    await waitFor(() => expect(screen.queryByLabelText('Loading selection')).not.toBeInTheDocument());
+
+    expect(screen.getByRole('button', { name: 'Remove selection' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Replace selection' })).toBeDisabled();
+  });
+
+  it('clicking the replace selection button should open the resource browser', async () => {
+    mockRequestResource.mockResolvedValue(
+      mockResource({
+        id: '100',
+        name: 'Mocked resource',
+      }),
+    );
+    renderComponent({ value: { source: '1', resource: '100' } });
+
+    await waitFor(() => expect(screen.queryByLabelText('Loading selection')).not.toBeInTheDocument());
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Replace selection' })));
+    expect(screen.getByRole('button', { name: 'Close Asset picker dialog' })).toBeInTheDocument();
+  });
+
+  it.each([
+    ['resource selected', { source: '1', resource: '100' }, 1],
+    ['resource not selected', null, 0],
+  ])(
+    'should only display the "replace" button if a resource has already been selected - %s',
+    async (description: string, value: ResourceReference | null, expectedReplaceSelectionButtons: number) => {
+      mockRequestResource.mockResolvedValue(
+        mockResource({
+          id: '100',
+          name: 'Mocked resource',
+        }),
+      );
+      renderComponent({ value });
+
+      await waitFor(() => expect(screen.queryByLabelText('Loading selection')).not.toBeInTheDocument());
+
+      expect(screen.queryAllByRole('button', { name: 'Replace selection' })).toHaveLength(
+        expectedReplaceSelectionButtons,
+      );
+    },
+  );
 });

package/src/index.stories.tsx

@@ -1,5 +1,5 @@
 import { StoryFn, Meta } from '@storybook/react';
-import { ResourceBrowserInput, ResourceBrowserContext } from './index';
+import { ResourceBrowserInput, ResourceBrowserContextProvider } from './index';
 import { createResourceBrowserCallbacks } from './__mocks__/StorybookHelpers';
 
 export default {
@@ -17,9 +17,9 @@ const Template: StoryFn<typeof ResourceBrowserInput> = (props) => {
 
   return (
     <div className="w-[400px] m-3">
-      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+      <ResourceBrowserContextProvider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
         <ResourceBrowserInput {...other} onChange={onChange} />
-      </ResourceBrowserContext.Provider>
+      </ResourceBrowserContextProvider>
     </div>
   );
 };
@@ -36,7 +36,7 @@ Primary.args = {
 export const Selected = Template.bind({});
 Selected.args = {
   ...Primary.args,
-  value: { resource: '1', source: '2' },
+  value: { resource: '33', source: '1' },
 };
 
 export const ImagesOnly = Template.bind({});

package/src/index.tsx

@@ -1,12 +1,16 @@
 import React, { useContext } from 'react';
 import ResourcePickerContainer from './ResourcePickerContainer/ResourcePickerContainer';
 import { HydratedResourceReference, Resource, ResourceReference, Source } from './types';
-import { ResourceBrowserContext, ResourceBrowserContextProps } from './ResourceBrowserContext/ResourceBrowserContext';
+import {
+  ResourceBrowserContext,
+  ResourceBrowserContextProvider,
+  ResourceBrowserContextProps,
+} from './ResourceBrowserContext/ResourceBrowserContext';
 import ResourcePicker from './ResourcePicker/ResourcePicker';
 import { useResource } from './Hooks/useResource';
 
 export type { HydratedResourceReference, Resource, ResourceReference, Source, ResourceBrowserContextProps };
-export { ResourceBrowserContext };
+export { ResourceBrowserContext, ResourceBrowserContextProvider };
 
 export type ResourceBrowserInputProps = {
   modalTitle: string;
@@ -29,6 +33,7 @@ export const ResourceBrowserInput = ({
   const { data: resource, error, isLoading } = useResource({ onRequestResource, reference: value });
   const defaultOnClear = () => onChange(null);
   const onClearFunction = onClear ?? defaultOnClear;
+
   return (
     <div className="squiz-rb-scope">
       <ResourcePicker
@@ -41,11 +46,14 @@ export const ResourceBrowserInput = ({
       >
         {(onClose, titleProps) => (
           <ResourcePickerContainer
+            preselectedSourceId={value?.source}
+            preselectedResource={resource}
             title={modalTitle}
             titleAriaProps={titleProps}
             allowedTypes={allowedTypes}
             onClose={onClose}
             onRequestSources={onRequestSources}
+            onRequestResource={onRequestResource}
             onRequestChildren={onRequestChildren}
             onChange={onChange}
           />

package/src/types.ts

@@ -19,6 +19,11 @@ export type Resource = {
   urls: string[];
   childCount: number;
   squizImage?: SquizImageType['__shape__'];
+  lineages?: ResourceLineage[];
+};
+
+export type ResourceLineage = {
+  resourceIds: string[];
 };
 
 /**
@@ -70,3 +75,7 @@ export type DeepPartial<T> = {
     ? ReadonlyArray<DeepPartial<U>>
     : DeepPartial<T[P]>;
 };
+
+export type OnRequestSources = () => Promise<Source[]>;
+export type OnRequestResource = (reference: ResourceReference) => Promise<Resource>;
+export type OnRequestChildren = (source: Source, resource: Resource | null) => Promise<Resource[]>;

package/src/utils/findBestMatchLineage.spec.ts

@@ -0,0 +1,81 @@
+import { Resource } from '../types';
+import { findBestMatchLineage } from './findBestMatchLineage';
+import { mockResource, mockSource } from '../__mocks__/MockModels';
+
+describe('findBestMatchLineage', () => {
+  it.each([
+    [
+      'Resource lineage is not returned',
+      mockResource({
+        lineages: undefined,
+      }),
+      [],
+    ],
+    [
+      'Resource has no lineages',
+      mockResource({
+        lineages: [],
+      }),
+      [],
+    ],
+    [
+      'Resource does not have lineage which is beneath a configured root node',
+      mockResource({
+        id: '3000',
+        lineages: [{ resourceIds: ['1', '30', '300', '3000'] }],
+      }),
+      [],
+    ],
+    [
+      'Resource has a lineage under one of the root nodes',
+      mockResource({
+        id: '100',
+        lineages: [{ resourceIds: ['1', '20', '200', '2000'] }],
+      }),
+      ['20', '200', '2000'],
+    ],
+    [
+      'Resource has a lineage beneath multiple of the root nodes',
+      mockResource({
+        id: '1000',
+        lineages: [{ resourceIds: ['1', '10', '100', '1000'] }, { resourceIds: ['1', '20', '200', '1000'] }],
+      }),
+      // first match is returned.
+      ['10', '100', '1000'],
+    ],
+    [
+      'Resource has multiple lineages under a single configured root node',
+      mockResource({
+        id: '1000',
+        lineages: [{ resourceIds: ['1', '10', '100', '1000'] }, { resourceIds: ['1', '10', '101', '1000'] }],
+      }),
+      // first match is returned.
+      ['10', '100', '1000'],
+    ],
+    [
+      'Resource ID is a configured root node',
+      mockResource({
+        id: '10',
+        lineages: [{ resourceIds: ['1', '10'] }],
+      }),
+      [],
+    ],
+    [
+      'Resource ID is a configured root node and also nested under a root node',
+      mockResource({
+        id: '10',
+        lineages: [{ resourceIds: ['1', '10'] }, { resourceIds: ['1', '20', '10'] }],
+      }),
+      ['20', '10'],
+    ],
+  ])(
+    'Returns best match lineage which can be identified from provided source - %s',
+    (description: string, resource: Resource, expected: string[]) => {
+      const source = mockSource({
+        nodes: [mockResource({ id: '10' }), mockResource({ id: '20' })],
+      });
+
+      expect(findBestMatchLineage(source, resource)).toEqual(expected);
+    },
+  );
+});

package/src/utils/findBestMatchLineage.ts

@@ -0,0 +1,30 @@
+import { Source, Resource } from '../types';
+
+export const findBestMatchLineage = (source: Source, resource: Resource): string[] => {
+  if (resource.lineages) {
+    for (const lineage of resource.lineages) {
+      // Lineage must:
+      // 1. Appear beneath the root node.
+      // 2. Not be the root node itself (root nodes can't be selected, to be changed in FEAAS-760).
+      // TODO: FEAAS-760 update as necessary so the lineage will be returned even if it ends at the root node, eg:
+      // const rootNode = source.nodes.find(node => lineage.resourceIds.includes(node.id));
+      const rootNode = source.nodes.find((node) => {
+        const index = lineage.resourceIds.indexOf(node.id);
+
+        return index >= 0 && index < lineage.resourceIds.length - 1;
+      });
+
+      if (rootNode) {
+        const rootNodeIndex = lineage.resourceIds.indexOf(rootNode.id);
+
+        // Return the lineage starting from the root node. eg.
+        // * Full lineage is: 1 > 10 > 100 > 1000 > 10000
+        // * The source has a node with an ID of: 100
+        // * The returned lineage will be: 100 > 1000 > 10000
+        return lineage.resourceIds.slice(rootNodeIndex);
+      }
+    }
+  }
+
+  return [];
+};

package/src/ResourceBrowserContext/ResourceBrowserContext.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Resource, ResourceReference, Source } from '../types';
-
-export type ResourceBrowserContextProps = {
-  onRequestSources: () => Promise<Source[]>;
-  onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
-  onRequestResource(reference: ResourceReference): Promise<Resource | null>;
-};
-
-export const ResourceBrowserContext = React.createContext<ResourceBrowserContextProps>({
-  onRequestSources: () => {
-    throw new Error('onRequestSources has not been configured.');
-  },
-  onRequestChildren: () => {
-    throw new Error('onRequestChildren has not been configured.');
-  },
-  onRequestResource: () => {
-    throw new Error('onRequestResource has not been configured.');
-  },
-});