@squiz/resource-browser 1.69.2 → 2.1.9-rc.0

package/src/ResourceBrowserContext/ResourceBrowserContext.tsx

@@ -1,12 +1,12 @@
 import React, { PropsWithChildren, useMemo } from 'react';
-import { OnRequestResource, OnRequestSources, OnRequestChildren } from '../types';
+import { OnRequestSources, ResourceBrowserPlugin } from '../types';
+
 import pMemoize from 'p-memoize';
 import ExpiryMap from 'expiry-map';
 
 export type ResourceBrowserContextProps = {
-  onRequestSources: OnRequestSources;
-  onRequestChildren: OnRequestChildren;
-  onRequestResource: OnRequestResource;
+    onRequestSources: OnRequestSources;
+    plugins: Array<ResourceBrowserPlugin>;
 };
 
 /**
@@ -14,43 +14,28 @@ export type ResourceBrowserContextProps = {
  * Please use ResourceBrowserContextProvider instead.
  */
 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.');
-  },
+    onRequestSources: () => {
+        throw new Error('onRequestSources has not been configured.');
+    },
+    plugins: [],
 });
 
 export const ResourceBrowserContextProvider = (props: PropsWithChildren<{ value: ResourceBrowserContextProps }>) => {
-  const CACHE_DURATION = 30000; // 30 seconds
-  const {
-    value: { onRequestSources, onRequestChildren, onRequestResource, ...other },
-    children,
-  } = props;
-  const cache = new ExpiryMap(CACHE_DURATION);
-  const memoized = useMemo(
-    () => ({
-      onRequestSources: pMemoize(onRequestSources, {
-        cache,
-        cacheKey: () => 'onRequestSources',
-      }),
-      onRequestChildren: pMemoize(onRequestChildren, {
-        cache,
-        cacheKey: ([source, resource]) => `onRequestChildren.${source.id}.${resource?.id}`,
-      }),
-      onRequestResource: pMemoize(onRequestResource, {
-        cache,
-        cacheKey: ([reference]) => `onRequestResource.${reference.source}.${reference.resource}`,
-      }),
-    }),
-    [onRequestSources, onRequestChildren, onRequestResource],
-  );
+    const CACHE_DURATION = 30000; // 30 seconds
+    const {
+        value: { onRequestSources, ...other },
+        children,
+    } = props;
+    const cache = new ExpiryMap(CACHE_DURATION);
+    const memoized = useMemo(
+        () => ({
+            onRequestSources: pMemoize(onRequestSources, {
+                cache,
+                cacheKey: () => 'onRequestSources',
+            }),
+        }),
+        [onRequestSources],
+    );
 
-  return (
-    <ResourceBrowserContext.Provider value={{ ...memoized, ...other }}>{children}</ResourceBrowserContext.Provider>
-  );
+    return <ResourceBrowserContext.Provider value={{ ...memoized, ...other }}>{children}</ResourceBrowserContext.Provider>;
 };

package/src/ResourceBrowserInput/ResourceBrowserInput.spec.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import { render, act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { ResourceBrowserInput, ResourceBrowserInputProps } from './ResourceBrowserInput';
+import { mockSource, mockResource } from '../__mocks__/MockModels';
+import { ResourceBrowserPlugin, ResourceBrowserUnresolvedResource } from '../types';
+
+import * as RP from '../ResourcePicker/ResourcePicker';
+jest.spyOn(RP, 'ResourcePicker');
+
+describe('Resource browser input', () => {
+    const mockUseResource = jest.fn().mockReturnValue({
+        data: null,
+        error: null,
+        isLoading: false,
+        reload: () => {},
+    });
+    const mockChange = jest.fn();
+    const mockSetSource = jest.fn();
+    const mockOnModalStateChange = jest.fn();
+    const renderComponent = (props: Partial<ResourceBrowserInputProps> = {}) => {
+        render(
+            <ResourceBrowserInput
+                modalTitle="Asset picker"
+                value={null}
+                useResource={mockUseResource}
+                onChange={mockChange}
+                plugin={null}
+                source={null}
+                sources={[]}
+                isLoading={false}
+                error={null}
+                setSource={mockSetSource}
+                isModalOpen={false}
+                onModalStateChange={mockOnModalStateChange}
+                {...props}
+            />,
+        );
+    };
+
+    it('If onClear function is provided passes through to ResourcePicker', async () => {
+        const myOnClear = jest.fn();
+        renderComponent({ onClear: myOnClear });
+
+        await waitFor(() => {
+            expect(RP.ResourcePicker).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    onClear: myOnClear,
+                }),
+                {},
+            );
+        });
+    });
+
+    it('If onClear function is not provided creates one which nulls change', async () => {
+        renderComponent();
+
+        await waitFor(() => {
+            expect(RP.ResourcePicker).toHaveBeenCalled();
+        });
+        expect(mockChange).not.toHaveBeenCalled();
+
+        // Invoke modal close callback
+        const { onClear } = (RP.ResourcePicker as unknown as jest.SpyInstance).mock.calls[0][0];
+        onClear();
+        expect(mockChange).toHaveBeenCalledWith(null);
+    });
+
+    /*
+        These tests dont actually belong in this component as they do not control these items directly
+        and never have but were tested here when this was originally written.
+    */
+    describe('Legacy tests', () => {
+        it('should render the related asset picker with the default label', async () => {
+            renderComponent();
+
+            await waitFor(() => {
+                expect(screen.getByText('Choose asset')).toBeInTheDocument();
+            });
+        });
+
+        it('should display the generic asset picking icon', async () => {
+            renderComponent();
+
+            await waitFor(() => {
+                expect(screen.getByText('Choose asset')).toBeInTheDocument();
+                expect(screen.getByTestId('AdsClickRoundedIcon')).toBeInTheDocument();
+            });
+        });
+
+        it('should display the image icon when only images are allowed', async () => {
+            renderComponent({ allowedTypes: ['image'] });
+
+            await waitFor(() => {
+                expect(screen.getByText('Choose image')).toBeInTheDocument();
+                expect(screen.getByTestId('PhotoLibraryRoundedIcon')).toBeInTheDocument();
+            });
+        });
+
+        it('should disallow removing and replacing selection if the input is disabled', async () => {
+            const source = mockSource();
+            const resource = mockResource({ source: source });
+            mockUseResource.mockReturnValueOnce({
+                data: resource,
+                error: null,
+                isLoading: false,
+                reload: () => {},
+            });
+            const plugin: Partial<ResourceBrowserPlugin> = {
+                renderSelectedResource: () => {
+                    return Promise.resolve({
+                        icon: <div>IconGoesHere</div>,
+                        label: 'Products',
+                        description: [],
+                    });
+                },
+            };
+
+            renderComponent({
+                value: { sourceId: source.id, resourceId: '100' },
+                isDisabled: true,
+                plugin: plugin as ResourceBrowserPlugin,
+            });
+
+            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 () => {
+            const source = mockSource();
+            const resource = mockResource({ source: source });
+            mockUseResource.mockReturnValueOnce({
+                data: resource,
+                error: null,
+                isLoading: false,
+                reload: () => {},
+            });
+            const plugin: Partial<ResourceBrowserPlugin> = {
+                renderSelectedResource: () => {
+                    return Promise.resolve({
+                        icon: <div>IconGoesHere</div>,
+                        label: 'Products',
+                        description: [],
+                    });
+                },
+                sourceBrowserComponent: () => {
+                    return () => {
+                        return <></>;
+                    };
+                },
+            };
+
+            renderComponent({ value: { sourceId: source.id, resourceId: '100' }, plugin: plugin as ResourceBrowserPlugin });
+
+            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', { sourceId: mockSource().id, resourceId: '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: ResourceBrowserUnresolvedResource | null, expectedReplaceSelectionButtons: number) => {
+                const source = mockSource();
+                const resource = mockResource({ source: source });
+                mockUseResource.mockReturnValueOnce({
+                    data: value,
+                    error: null,
+                    isLoading: false,
+                    reload: () => {},
+                });
+                const plugin: Partial<ResourceBrowserPlugin> = {
+                    renderSelectedResource: () => {
+                        return Promise.resolve({
+                            icon: <div>IconGoesHere</div>,
+                            label: 'Products',
+                            description: [],
+                        });
+                    },
+                };
+                renderComponent({ value, plugin: plugin as ResourceBrowserPlugin });
+
+                await waitFor(() => expect(screen.queryByLabelText('Loading selection')).not.toBeInTheDocument());
+
+                expect(screen.queryAllByRole('button', { name: 'Replace selection' })).toHaveLength(expectedReplaceSelectionButtons);
+            },
+        );
+    });
+});

package/src/ResourceBrowserInput/ResourceBrowserInput.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import MainContainer from '../MainContainer/MainContainer';
+import { ResourcePicker } from '../ResourcePicker/ResourcePicker';
+import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserUnresolvedResource, ResourceBrowserResource } from '../types';
+
+export type ResourceBrowserInputProps = {
+    modalTitle: string;
+    allowedTypes?: string[];
+    isDisabled?: boolean;
+    value: ResourceBrowserUnresolvedResource | null;
+    useResource(
+        referenceId: string | null,
+        source: ResourceBrowserSource | null,
+    ): {
+        data: ResourceBrowserResource | null;
+        error: Error | null;
+        isLoading: boolean;
+    };
+    onChange(resource: ResourceBrowserResource | null): void;
+    onClear?(): void;
+    plugin: ResourceBrowserPlugin | null;
+    source: ResourceBrowserSource | null;
+    sources: ResourceBrowserSource[];
+    isLoading: boolean;
+    error: Error | null;
+    setSource(source: ResourceBrowserSource | null): void;
+    isModalOpen: boolean;
+    onModalStateChange(isOpen: boolean): void;
+};
+
+export const ResourceBrowserInput = ({
+    modalTitle,
+    allowedTypes,
+    onChange,
+    value,
+    useResource,
+    isDisabled,
+    onClear,
+    plugin,
+    source,
+    sources,
+    isLoading,
+    error,
+    setSource,
+    isModalOpen,
+    onModalStateChange,
+}: ResourceBrowserInputProps) => {
+    const { data: resource, error: resourceError, isLoading: isResourceLoading } = useResource(value?.resourceId || null, source);
+
+    const defaultOnClear = () => onChange(null);
+    const onClearFunction = onClear ?? defaultOnClear;
+
+    return (
+        <ResourcePicker
+            resource={resource}
+            plugin={plugin}
+            allowedTypes={allowedTypes}
+            error={resourceError || error}
+            isLoading={isResourceLoading || isLoading}
+            isDisabled={isDisabled}
+            onClear={onClearFunction}
+            isModalOpen={isModalOpen}
+            onModalStateChange={onModalStateChange}
+        >
+            {(onClose, titleProps) => (
+                <MainContainer
+                    selectedSource={source}
+                    sources={sources}
+                    preselectedResource={resource}
+                    plugin={plugin}
+                    title={modalTitle}
+                    titleAriaProps={titleProps}
+                    allowedTypes={allowedTypes}
+                    onSourceSelect={setSource}
+                    onClose={onClose}
+                    onChange={onChange}
+                />
+            )}
+        </ResourcePicker>
+    );
+};

package/src/ResourcePicker/ResourcePicker.spec.tsx

@@ -1,123 +1,166 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import ResourcePicker from './ResourcePicker';
-import mockResource from './mock-resource.json';
-import mockImageResource from './mock-image-resource.json';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ResourcePicker } from './ResourcePicker';
+
+import { ResourceBrowserPlugin } from '../types';
+import { mockResource } from '../__mocks__/MockModels';
 
 const defaultProps: any = {
-  resource: null,
-  allowedTypes: undefined,
-  isLoading: false,
-  isError: false,
+    resource: null,
+    allowedTypes: undefined,
+    isLoading: false,
+    isError: false,
 };
 
 describe('Resource picker', () => {
-  it('should render the initial state with the default label', () => {
-    render(<ResourcePicker {...defaultProps} />);
-    const pickerLabel = screen.getByText('Choose asset');
-
-    expect(pickerLabel).toBeInTheDocument();
-  });
-
-  it('should render the initial state with the image label if it s an image picker', () => {
-    render(<ResourcePicker {...defaultProps} allowedTypes={['image']} />);
-    const pickerLabel = screen.getByText('Choose image');
-
-    expect(pickerLabel).toBeInTheDocument();
-  });
-
-  it('should render the loading state if set to true', () => {
-    render(<ResourcePicker {...defaultProps} isLoading={true} />);
-    const pickerLabel = screen.queryByText('Choose image');
-    const loadingLabel = screen.queryByLabelText('Loading selection');
-
-    expect(pickerLabel).not.toBeInTheDocument();
-    expect(loadingLabel).toBeInTheDocument();
-  });
-
-  it('should render the error state if set to true', () => {
-    const errorMessage = 'Failed to retrieve asset info due to a Component Service API key problem.';
-
-    render(<ResourcePicker {...defaultProps} error={new Error(errorMessage)} />);
-    const pickerLabel = screen.queryByText('Choose image');
-    const errorLabel = screen.queryByText(errorMessage);
-
-    expect(pickerLabel).not.toBeInTheDocument();
-    expect(errorLabel).toBeInTheDocument();
-  });
-
-  it('should render the selected state if there is a resource returned', () => {
-    render(<ResourcePicker {...defaultProps} resource={mockResource} />);
-    const pickerLabel = screen.queryByText('Choose image');
-    const resourceName = screen.queryByText('Products');
-
-    expect(pickerLabel).not.toBeInTheDocument();
-    expect(resourceName).toBeInTheDocument();
-  });
-
-  it('should render the selected image if there is an image resource returned', () => {
-    render(<ResourcePicker {...defaultProps} resource={mockImageResource} />);
-
-    const resourceImage = screen.getByAltText(mockImageResource.name);
-    expect(resourceImage.getAttribute('src')).toBe(mockImageResource.url);
-  });
-
-  it('should display the reset button in selected state', () => {
-    render(<ResourcePicker {...defaultProps} resource={mockResource} />);
-    const resourceName = screen.queryByText('Products');
-    const removeButton = screen.queryByLabelText('Remove selection');
-
-    expect(resourceName).toBeInTheDocument();
-    expect(removeButton).toBeInTheDocument();
-  });
-
-  it('should display disabled reset button in selected + disabled state', () => {
-    render(<ResourcePicker {...defaultProps} isDisabled={true} resource={mockResource} />);
-
-    expect(screen.queryByLabelText('Remove selection')).toBeDisabled();
-  });
-
-  it('should display the reset button in error state', () => {
-    const errorMessage = 'Failed to fetch resource.';
-
-    render(<ResourcePicker {...defaultProps} error={new Error(errorMessage)} />);
-    const errorLabel = screen.queryByText(errorMessage);
-    const removeButton = screen.queryByLabelText('Remove selection');
-
-    expect(errorLabel).toBeInTheDocument();
-    expect(removeButton).toBeInTheDocument();
-  });
-
-  it('should display disabled reset button in error + disabled state', () => {
-    render(<ResourcePicker {...defaultProps} isDisabled={true} error={new Error('Failed to fetch resource.')} />);
-
-    expect(screen.queryByLabelText('Remove selection')).toBeDisabled();
-  });
-
-  it('should not display the reset button in the empty state', () => {
-    render(<ResourcePicker {...defaultProps} />);
-    const pickerLabel = screen.getByText('Choose asset');
-    const removeButton = screen.queryByLabelText('Remove selection');
-
-    expect(pickerLabel).toBeInTheDocument();
-    expect(removeButton).not.toBeInTheDocument();
-  });
-
-  it('should display a default status if an unsupported status is found for resource', () => {
-    render(
-      <ResourcePicker
-        {...defaultProps}
-        resource={{
-          ...mockResource,
-          status: {
-            code: 'this_is_not_real',
-            name: 'This is not real',
-          },
-        }}
-      />,
-    );
-
-    const item = screen.getByTitle('This is not real');
-    expect(item?.style.backgroundColor).toEqual('rgb(255, 0, 0)');
-  });
+    it('should render the initial state with the default label', () => {
+        render(<ResourcePicker {...defaultProps} />);
+        const pickerLabel = screen.getByText('Choose asset');
+
+        expect(pickerLabel).toBeInTheDocument();
+    });
+
+    it("should render the initial state with the image label if it's an image picker", () => {
+        render(<ResourcePicker {...defaultProps} allowedTypes={['image']} />);
+        const pickerLabel = screen.getByText('Choose image');
+
+        expect(pickerLabel).toBeInTheDocument();
+    });
+
+    it('should render the loading state if set to true', () => {
+        render(<ResourcePicker {...defaultProps} isLoading={true} />);
+        const pickerLabel = screen.queryByText('Choose image');
+        const loadingLabel = screen.queryByLabelText('Loading selection');
+
+        expect(pickerLabel).not.toBeInTheDocument();
+        expect(loadingLabel).toBeInTheDocument();
+    });
+
+    it('should render the error state if set to true', () => {
+        const errorMessage = 'Failed to retrieve asset info due to a Component Service API key problem.';
+
+        render(<ResourcePicker {...defaultProps} error={new Error(errorMessage)} />);
+        const pickerLabel = screen.queryByText('Choose image');
+        const errorLabel = screen.queryByText(errorMessage);
+
+        expect(pickerLabel).not.toBeInTheDocument();
+        expect(errorLabel).toBeInTheDocument();
+    });
+
+    it('should render the selected state if there is a resource returned (icon)', async () => {
+        const resource = mockResource();
+        const plugin: Partial<ResourceBrowserPlugin> = {
+            type: 'dam',
+            renderSelectedResource: jest.fn().mockResolvedValue({
+                showThumbnail: false,
+                icon: <div>IconGoesHere</div>,
+                label: 'Products',
+                description: [<div key="1">DescriptionFirstLine</div>, <div key="2">DescriptionSecondLine</div>],
+            }),
+        };
+
+        render(<ResourcePicker {...defaultProps} plugin={plugin as ResourceBrowserPlugin} resource={resource} />);
+        const pickerLabel = screen.queryByText('Choose image');
+
+        expect(pickerLabel).not.toBeInTheDocument();
+
+        // Includes the plugin response in the document
+        await waitFor(() => {
+            expect(screen.queryByText('Products')).toBeInTheDocument();
+            expect(screen.queryByText('IconGoesHere')).toBeInTheDocument();
+            expect(screen.queryByText('DescriptionFirstLine')).toBeInTheDocument();
+            expect(screen.queryByText('DescriptionSecondLine')).toBeInTheDocument();
+        });
+    });
+
+    it('should render the selected state if there is a resource returned (thumbnail)', async () => {
+        const resource = mockResource();
+        const plugin: Partial<ResourceBrowserPlugin> = {
+            type: 'dam',
+            renderSelectedResource: jest.fn().mockResolvedValue({
+                showThumbnail: true,
+                icon: <div>IconGoesHere</div>,
+                label: 'Products',
+                description: [<div key="1">DescriptionFirstLine</div>, <div key="2">DescriptionSecondLine</div>],
+            }),
+        };
+
+        render(<ResourcePicker {...defaultProps} plugin={plugin as ResourceBrowserPlugin} resource={resource} />);
+        const pickerLabel = screen.queryByText('Choose image');
+
+        expect(pickerLabel).not.toBeInTheDocument();
+
+        // Includes the plugin response in the document
+        await waitFor(() => {
+            expect(screen.queryByText('Products')).toBeInTheDocument();
+            expect(screen.queryByAltText('an-image-name')).toBeInTheDocument();
+            expect(screen.queryByText('DescriptionFirstLine')).toBeInTheDocument();
+            expect(screen.queryByText('DescriptionSecondLine')).toBeInTheDocument();
+        });
+    });
+
+    it('should display the reset button in selected state', async () => {
+        const resource = mockResource();
+        const plugin: Partial<ResourceBrowserPlugin> = {
+            type: 'dam',
+            renderSelectedResource: jest.fn().mockResolvedValue({
+                icon: <></>,
+                label: 'Products',
+                description: [],
+            }),
+        };
+
+        render(<ResourcePicker {...defaultProps} plugin={plugin as ResourceBrowserPlugin} resource={resource} />);
+
+        await waitFor(() => {
+            const resourceName = screen.queryByText('Products');
+            const removeButton = screen.queryByLabelText('Remove selection');
+
+            expect(resourceName).toBeInTheDocument();
+            expect(removeButton).toBeInTheDocument();
+        });
+    });
+
+    it('should display disabled reset button in selected + disabled state', async () => {
+        const plugin: Partial<ResourceBrowserPlugin> = {
+            type: 'dam',
+            renderSelectedResource: jest.fn().mockResolvedValue({
+                icon: <></>,
+                label: 'Products',
+                description: [],
+            }),
+        };
+        const resource = mockResource();
+        render(<ResourcePicker {...defaultProps} isDisabled={true} plugin={plugin as ResourceBrowserPlugin} resource={resource} />);
+
+        await waitFor(() => {
+            expect(screen.queryByLabelText('Remove selection')).toBeDisabled();
+        });
+    });
+
+    it('should display the reset button in error state', () => {
+        const errorMessage = 'Failed to fetch resource.';
+
+        render(<ResourcePicker {...defaultProps} error={new Error(errorMessage)} />);
+        const errorLabel = screen.queryByText(errorMessage);
+        const removeButton = screen.queryByLabelText('Remove selection');
+
+        expect(errorLabel).toBeInTheDocument();
+        expect(removeButton).toBeInTheDocument();
+    });
+
+    it('should display disabled reset button in error + disabled state', () => {
+        render(<ResourcePicker {...defaultProps} isDisabled={true} error={new Error('Failed to fetch resource.')} />);
+
+        expect(screen.queryByLabelText('Remove selection')).toBeDisabled();
+    });
+
+    it('should not display the reset button in the empty state', () => {
+        render(<ResourcePicker {...defaultProps} />);
+        const pickerLabel = screen.getByText('Choose asset');
+        const removeButton = screen.queryByLabelText('Remove selection');
+
+        expect(pickerLabel).toBeInTheDocument();
+        expect(removeButton).not.toBeInTheDocument();
+    });
 });