@squiz/resource-browser 1.69.1 → 2.1.8-rc.0

package/src/MainContainer/MainContainer.spec.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import { render, screen, waitFor, act, fireEvent } from '@testing-library/react';
+import MainContainer from './MainContainer';
+import { ResourceBrowserPlugin, ResourceBrowserSource } from '../types';
+
+import { mockSource, mockResource } from '../__mocks__/MockModels';
+
+import SourceList from '../SourceList/SourceList'; // Import Functional Component
+jest.mock('../SourceList/SourceList'); // Mock the Functional Component
+const ActualSourceList = jest.requireActual('../SourceList/SourceList').default; // Grab the real copy of it as normally we don't want the mock
+const MockSourceList = SourceList as jest.MockedFunction<typeof SourceList>; // Cast the mocked function so TS stops complaining
+MockSourceList.mockImplementation(ActualSourceList); // Return the actual function unless overridden
+
+import SourceDropdown from '../SourceDropdown/SourceDropdown'; // Import Functional Component
+jest.mock('../SourceDropdown/SourceDropdown'); // Mock the Functional Component
+const ActualSourceDropdown = jest.requireActual('../SourceDropdown/SourceDropdown').default; // Grab the real copy of it as normally we don't want the mock
+const MockSourceDropdown = SourceDropdown as jest.MockedFunction<typeof SourceDropdown>; // Cast the mocked function so TS stops complaining
+MockSourceDropdown.mockImplementation(ActualSourceDropdown); // Return the actual function unless overridden
+
+const mockSourceBrowserComponent = jest.fn();
+const defaultProps = {
+    title: '',
+    titleAriaProps: {},
+    allowedTypes: undefined,
+    sources: [],
+    selectedSource: null,
+    onSourceSelect: jest.fn(),
+    onChange: jest.fn(),
+    onClose: jest.fn(),
+    preselectedResource: null,
+    plugin: null,
+};
+
+describe('MainContainer', () => {
+    it('clicking close button should call the onClose callback', async () => {
+        const onClose = jest.fn();
+
+        render(<MainContainer {...defaultProps} title="Select Asset" onClose={onClose} />);
+
+        await act(() => fireEvent.click(screen.getByRole('button', { name: 'Close Select Asset dialog' })));
+        expect(onClose).toHaveBeenCalled();
+    });
+
+    describe('no source selected', () => {
+        it('should render Environment Selector title', () => {
+            render(<MainContainer {...defaultProps} title="Select MyAsset" />);
+            expect(screen.getByText('Environment Selector')).toBeInTheDocument();
+            expect(screen.queryByText('Select MyAsset')).not.toBeInTheDocument();
+        });
+
+        it('should not render source selector dropdown', () => {
+            render(<MainContainer {...defaultProps} />);
+            expect(MockSourceDropdown).not.toHaveBeenCalled();
+        });
+
+        it('should not render plugin UI', () => {
+            render(<MainContainer {...defaultProps} />);
+            expect(mockSourceBrowserComponent).not.toHaveBeenCalled();
+        });
+
+        it('should render source list using provided props', () => {
+            const sources: ResourceBrowserSource[] = [];
+            const onSourceSelect = jest.fn();
+            render(<MainContainer {...defaultProps} sources={sources} onSourceSelect={onSourceSelect} />);
+            expect(MockSourceList).toHaveBeenCalledWith({ sources, onSourceSelect }, {});
+        });
+    });
+
+    describe('source selected', () => {
+        const source = mockSource({ type: 'dam' });
+        const plugin = {
+            type: 'dam',
+            createHeaderPortal: false,
+            sourceBrowserComponent: mockSourceBrowserComponent,
+            renderSelectedResource: jest.fn(),
+            useResolveResource: jest.fn(),
+        } as ResourceBrowserPlugin;
+        it('should render Environment Selector title', () => {
+            render(<MainContainer {...defaultProps} title="Select MyAsset" selectedSource={source} plugin={plugin} />);
+            expect(screen.getByText('Select MyAsset')).toBeInTheDocument();
+            expect(screen.queryByText('Environment Selector')).not.toBeInTheDocument();
+        });
+
+        it('should render source selector dropdown if more than one source exists', () => {
+            const sources: ResourceBrowserSource[] = [mockSource(), mockSource()];
+            const onSourceSelect = jest.fn();
+            render(
+                <MainContainer
+                    {...defaultProps}
+                    sources={sources}
+                    selectedSource={source}
+                    plugin={plugin}
+                    onSourceSelect={onSourceSelect}
+                />,
+            );
+            expect(MockSourceDropdown).toHaveBeenCalledWith({ sources, selectedSource: source, onSourceSelect }, {});
+        });
+
+        it('should not render source selector dropdown if one source exists', () => {
+            const sources: ResourceBrowserSource[] = [mockSource()];
+            const onSourceSelect = jest.fn();
+            render(
+                <MainContainer
+                    {...defaultProps}
+                    sources={sources}
+                    selectedSource={source}
+                    plugin={plugin}
+                    onSourceSelect={onSourceSelect}
+                />,
+            );
+            expect(MockSourceDropdown).not.toHaveBeenCalled();
+        });
+
+        it('should create header portal for plugin', async () => {
+            const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source UI has been rendered</div>);
+            const mockSourceBrowserComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
+            const plugin = {
+                type: 'dam',
+                createHeaderPortal: true,
+                sourceBrowserComponent: mockSourceBrowserComponent,
+                renderSelectedResource: jest.fn(),
+                useResolveResource: jest.fn(),
+            } as ResourceBrowserPlugin;
+            render(<MainContainer {...defaultProps} selectedSource={source} plugin={plugin} />);
+            expect(mockSourceBrowserComponent).toHaveBeenCalled();
+
+            await waitFor(() => {
+                expect(mockFunctionalComponent).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        headerPortal: expect.any(Element),
+                    }),
+                    {},
+                );
+            });
+        });
+
+        it('should pass expected params to plugin UI generator functional component', async () => {
+            const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source UI has been rendered</div>);
+            const mockSourceBrowserComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
+            const plugin = {
+                type: 'dam',
+                createHeaderPortal: true,
+                sourceBrowserComponent: mockSourceBrowserComponent,
+                renderSelectedResource: jest.fn(),
+                useResolveResource: jest.fn(),
+            } as ResourceBrowserPlugin;
+
+            const resource = mockResource();
+            const props = {
+                allowedTypes: ['image'],
+                preselectedResource: resource,
+            };
+
+            render(<MainContainer {...defaultProps} selectedSource={source} plugin={plugin} {...props} />);
+            expect(mockSourceBrowserComponent).toHaveBeenCalled();
+
+            await waitFor(() => {
+                expect(mockFunctionalComponent).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        source: source,
+                        allowedTypes: props.allowedTypes,
+                        headerPortal: expect.any(Element),
+                        preselectedResource: resource,
+                    }),
+                    {},
+                );
+            });
+        });
+
+        it('should pass onSelected to plugin UI generator FC when invoked calls change and close functions', async () => {
+            const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source UI has been rendered</div>);
+            const mockSourceBrowserComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
+            const plugin = {
+                type: 'dam',
+                createHeaderPortal: true,
+                sourceBrowserComponent: mockSourceBrowserComponent,
+                renderSelectedResource: jest.fn(),
+                useResolveResource: jest.fn(),
+            } as ResourceBrowserPlugin;
+
+            const onChange = jest.fn();
+            const onClose = jest.fn();
+
+            render(<MainContainer {...defaultProps} selectedSource={source} plugin={plugin} onChange={onChange} onClose={onClose} />);
+            expect(mockSourceBrowserComponent).toHaveBeenCalled();
+
+            await waitFor(() => {
+                expect(mockFunctionalComponent).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        onSelected: expect.any(Function),
+                    }),
+                    {},
+                );
+            });
+
+            const resource = mockResource();
+            const { onSelected } = mockFunctionalComponent.mock.calls[0][0];
+            onSelected(resource);
+            expect(onChange).toHaveBeenCalledWith(resource);
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+});

package/src/MainContainer/MainContainer.stories.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import MainContainer from './MainContainer';
+import sampleSources from '../__mocks__/sample-sources.json';
+import { createPlugins } from '../__mocks__/StorybookHelpers';
+import { ResourceBrowserSource, ResourceBrowserPlugin } from '../types';
+
+export default {
+    title: 'Main container',
+    component: MainContainer,
+} as Meta<typeof MainContainer>;
+
+const Template: StoryFn<typeof MainContainer> = (props) => {
+    const sources = sampleSources as ResourceBrowserSource[];
+    const plugins: [ResourceBrowserPlugin] = createPlugins(0, true);
+
+    const [selectedSource, setSelectedSource] = useState<ResourceBrowserSource | null>(props.selectedSource ?? null);
+
+    return (
+        <div className="flex justify-center m-3">
+            <MainContainer
+                title={props.title}
+                titleAriaProps={props.titleAriaProps}
+                allowedTypes={props.allowedTypes}
+                sources={sources}
+                selectedSource={selectedSource}
+                onSourceSelect={(source) => setSelectedSource(source)}
+                onChange={(resource) => {
+                    if (resource) {
+                        console.log(`Resource ${resource?.name} / ${resource.id} was selected`);
+                    } else {
+                        console.log(`No resource was selected`);
+                    }
+                }}
+                onClose={() => {
+                    console.log('onClose called');
+                }}
+                plugin={plugins[0]}
+            ></MainContainer>
+        </div>
+    );
+};
+
+export const NoSourceSelected = Template.bind({});
+
+NoSourceSelected.args = {
+    title: 'Main Container',
+    titleAriaProps: {},
+    allowedTypes: [],
+    selectedSource: null,
+};
+
+export const SourceSelected = Template.bind({});
+SourceSelected.args = {
+    ...NoSourceSelected.args,
+    selectedSource: {
+        name: 'Bynder #1',
+        id: 'c90feac1-55f3-4e1f-9b56-c22829e3f510',
+        type: 'dam',
+        group: 'DAM',
+    },
+};

package/src/MainContainer/MainContainer.tsx

@@ -0,0 +1,101 @@
+import React, { useCallback, useState } from 'react';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+
+import SourceDropdown from '../SourceDropdown/SourceDropdown';
+import SourceList from '../SourceList/SourceList';
+import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserResource } from '../types';
+
+interface MainContainerProps {
+    title: string;
+    titleAriaProps: DOMAttributes<FocusableElement>;
+    allowedTypes: string[] | undefined;
+    sources: ResourceBrowserSource[];
+    selectedSource: ResourceBrowserSource | null;
+    onSourceSelect(source: ResourceBrowserSource | null): void;
+    onChange(resource: ResourceBrowserResource | null): void;
+    onClose: () => void;
+    preselectedResource?: ResourceBrowserResource | null;
+    plugin: ResourceBrowserPlugin | null;
+}
+
+function MainContainer({
+    title,
+    titleAriaProps,
+    allowedTypes,
+    sources,
+    selectedSource,
+    onSourceSelect,
+    onChange,
+    onClose,
+    preselectedResource,
+    plugin,
+}: MainContainerProps) {
+    const [headerPortal, setHeaderPortal] = useState<HTMLDivElement | null>(null);
+    const SourceBrowser = plugin?.sourceBrowserComponent();
+
+    // Can't use a useRef as it wont update on change when a source is selected, so need to use a ref callback to store in state
+    const setHeaderPortalRef = useCallback(
+        (node: HTMLDivElement) => {
+            if (node !== null) {
+                setHeaderPortal(node);
+            }
+        },
+        [setHeaderPortal],
+    );
+
+    // MainContainer will either render the source list view if no source is set or the plugins UI if a source has been selected
+    return (
+        <div className="relative flex flex-col h-full text-gray-800">
+            <div className="flex items-center p-4.5">
+                <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
+                    {!plugin && 'Environment Selector'}
+                    {plugin && title}
+                </h2>
+
+                {plugin && selectedSource && (
+                    <>
+                        {sources.length > 1 && (
+                            <div className="px-3 border-l border-gray-300 w-300px">
+                                <SourceDropdown sources={sources} selectedSource={selectedSource} onSourceSelect={onSourceSelect} />
+                            </div>
+                        )}
+                        {plugin.createHeaderPortal && (
+                            <div ref={setHeaderPortalRef} className="px-3 border-l border-gray-300 w-300px"></div>
+                        )}
+                    </>
+                )}
+
+                <button
+                    type="button"
+                    aria-label={`Close ${title} dialog`}
+                    onClick={onClose}
+                    className="absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100"
+                >
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z"
+                            fill="currentColor"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div className="border-t border-gray-300 h-[calc(100%-72px)]">
+                {plugin && selectedSource && SourceBrowser && (
+                    <SourceBrowser
+                        source={selectedSource}
+                        allowedTypes={allowedTypes}
+                        headerPortal={plugin.createHeaderPortal && headerPortal ? headerPortal : undefined}
+                        preselectedResource={preselectedResource || undefined}
+                        onSelected={(resource: ResourceBrowserResource) => {
+                            onChange(resource);
+                            onClose();
+                        }}
+                    />
+                )}
+                {!selectedSource && <SourceList sources={sources} onSourceSelect={onSourceSelect} />}
+            </div>
+        </div>
+    );
+}
+
+export default MainContainer;

package/src/Plugin/Plugin.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+
+import { PluginRender } from './Plugin';
+import * as RBI from '../ResourceBrowserInput/ResourceBrowserInput';
+jest.spyOn(RBI, 'ResourceBrowserInput');
+
+describe('Plugin', () => {
+    it('Does not render ResourceBrowserInput if render is false', async () => {
+        //@ts-ignore
+        render(<PluginRender render={false} />);
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).not.toHaveBeenCalled();
+        });
+    });
+
+    it('Does render ResourceBrowserInput if render is true', async () => {
+        const props = {
+            modalTitle: 'Asset picker',
+            value: null,
+            onChange: jest.fn(),
+            onClear: jest.fn(),
+            useResource: () => {
+                return {
+                    data: null,
+                    error: null,
+                    isLoading: false,
+                };
+            },
+            plugin: null,
+            source: null,
+            sources: [],
+            isLoading: false,
+            error: null,
+            setSource: () => {},
+            isModalOpen: false,
+            onModalStateChange: () => {},
+        };
+        render(<PluginRender render={true} {...props} />);
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(props, {});
+        });
+    });
+});

package/src/Plugin/Plugin.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ResourceBrowserInput, ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
+
+/**
+ *  This plugin component exsits to deal with React rules of Hooks stupidity.
+ *
+ *  For it to not freak out when we want to change from one plugin to another we have to render
+ *  something to the ReactDom for each plugin and 'activate' that component when that plugin
+ *  needs to render its UI etc.
+ */
+export type PluginRenderType = ResourceBrowserInputProps & {
+    render: boolean;
+};
+export const PluginRender = ({ render, ...props }: PluginRenderType) => {
+    if (render) {
+        return <ResourceBrowserInput {...props} />;
+    } else {
+        return <></>;
+    }
+};

package/src/ResourceBrowserContext/ResourceBrowserContext.spec.tsx

@@ -1,122 +1,81 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import {
-  ResourceBrowserContext,
-  ResourceBrowserContextProps,
-  ResourceBrowserContextProvider,
-} from './ResourceBrowserContext';
-import { mockResource, mockSource } from '../__mocks__/MockModels';
+import { ResourceBrowserContext, ResourceBrowserContextProps, ResourceBrowserContextProvider } from './ResourceBrowserContext';
+import { mockSource } from '../__mocks__/MockModels';
 
 describe('ResourceBrowserContext', () => {
-  it('Should render with expected default value', () => {
-    let defaultContext: ResourceBrowserContextProps | undefined;
+    it('Should render with expected default value', () => {
+        let defaultContext: ResourceBrowserContextProps | undefined;
 
-    render(
-      <ResourceBrowserContext.Consumer>
-        {(value) => {
-          defaultContext = value;
-          return null;
-        }}
-      </ResourceBrowserContext.Consumer>,
-    );
+        render(
+            <ResourceBrowserContext.Consumer>
+                {(value) => {
+                    defaultContext = value;
+                    return null;
+                }}
+            </ResourceBrowserContext.Consumer>,
+        );
 
-    expect(defaultContext).toEqual({
-      onRequestChildren: expect.any(Function),
-      onRequestResource: expect.any(Function),
-      onRequestSources: expect.any(Function),
+        expect(defaultContext).toEqual({
+            onRequestSources: expect.any(Function),
+            plugins: [],
+        });
+        expect(() => defaultContext?.onRequestSources()).toThrow('onRequestSources has not been configured.');
     });
-    expect(() => defaultContext?.onRequestChildren(mockSource(), null)).toThrow(
-      'onRequestChildren has not been configured.',
-    );
-    expect(() => defaultContext?.onRequestResource({ source: 'source-id', resource: 'resource-id' })).toThrow(
-      'onRequestResource has not been configured.',
-    );
-    expect(() => defaultContext?.onRequestSources()).toThrow('onRequestSources has not been configured.');
-  });
 
-  it('Should add memoization to data fetching functions', async () => {
-    let context: ResourceBrowserContextProps | undefined;
-    const sources = [mockSource({ id: '10' }), mockSource({ id: '20' })];
-    const resources = [mockResource({ id: '100' }), mockResource({ id: '200' })];
-    const onRequestSources = jest.fn().mockResolvedValue(sources);
-    const onRequestResource = jest.fn().mockResolvedValue(resources[0]);
-    const onRequestChildren = jest.fn().mockResolvedValue(resources);
+    it('Should add memoization to data fetching functions', async () => {
+        let context: ResourceBrowserContextProps | undefined;
+        const sources = [mockSource({ id: '10', type: 'dam' }), mockSource({ id: '20', type: 'dam' })];
+        const onRequestSources = jest.fn().mockResolvedValue(sources);
 
-    render(
-      <ResourceBrowserContextProvider
-        value={{
-          onRequestSources,
-          onRequestResource,
-          onRequestChildren,
-        }}
-      >
-        <ResourceBrowserContext.Consumer>
-          {(value) => {
-            context = value;
-            return null;
-          }}
-        </ResourceBrowserContext.Consumer>
-      </ResourceBrowserContextProvider>,
-    );
+        render(
+            <ResourceBrowserContextProvider
+                value={{
+                    onRequestSources,
+                    plugins: [],
+                }}
+            >
+                <ResourceBrowserContext.Consumer>
+                    {(value) => {
+                        context = value;
+                        return null;
+                    }}
+                </ResourceBrowserContext.Consumer>
+            </ResourceBrowserContextProvider>,
+        );
 
-    const result = await Promise.all([
-      context?.onRequestSources?.(),
-      context?.onRequestSources?.(),
-      context?.onRequestResource?.({ resource: '100', source: '10' }),
-      context?.onRequestResource?.({ resource: '100', source: '10' }),
-      context?.onRequestResource?.({ resource: '200', source: '20' }),
-      context?.onRequestChildren?.(sources[0], null),
-      context?.onRequestChildren?.(sources[0], null),
-      context?.onRequestChildren?.(sources[1], null),
-    ]);
+        const result = await Promise.all([context?.onRequestSources?.(), context?.onRequestSources?.()]);
 
-    // mocked data should be returned for all invocations of memoized function
-    expect(result).toEqual([
-      sources,
-      sources,
-      resources[0],
-      resources[0],
-      resources[0],
-      resources,
-      resources,
-      resources,
-    ]);
+        // mocked data should be returned for all invocations of memoized function
+        expect(result).toEqual([sources, sources]);
 
-    // memoized function should only be called when different arguments are provided
-    expect(onRequestSources).toBeCalledTimes(1);
-    expect(onRequestResource).toBeCalledTimes(2);
-    expect(onRequestChildren).toBeCalledTimes(2);
-  });
+        // memoized function should only be called when different arguments are provided
+        expect(onRequestSources).toHaveBeenCalledTimes(1);
+    });
 
-  it('Should not cache failures from data fetching functions', async () => {
-    let context: ResourceBrowserContextProps | undefined;
-    const sources = [mockSource({ id: '10' })];
-    const onRequestSources = jest
-      .fn()
-      .mockRejectedValueOnce(new Error('Cannot fetch sources.'))
-      .mockResolvedValueOnce(sources);
-    const onRequestResource = jest.fn();
-    const onRequestChildren = jest.fn();
+    it('Should not cache failures from data fetching functions', async () => {
+        let context: ResourceBrowserContextProps | undefined;
+        const sources = [mockSource({ id: '10' })];
+        const onRequestSources = jest.fn().mockRejectedValueOnce(new Error('Cannot fetch sources.')).mockResolvedValueOnce(sources);
 
-    render(
-      <ResourceBrowserContextProvider
-        value={{
-          onRequestSources,
-          onRequestResource,
-          onRequestChildren,
-        }}
-      >
-        <ResourceBrowserContext.Consumer>
-          {(value) => {
-            context = value;
-            return null;
-          }}
-        </ResourceBrowserContext.Consumer>
-      </ResourceBrowserContextProvider>,
-    );
+        render(
+            <ResourceBrowserContextProvider
+                value={{
+                    onRequestSources,
+                    plugins: [],
+                }}
+            >
+                <ResourceBrowserContext.Consumer>
+                    {(value) => {
+                        context = value;
+                        return null;
+                    }}
+                </ResourceBrowserContext.Consumer>
+            </ResourceBrowserContextProvider>,
+        );
 
-    await expect(context?.onRequestSources?.()).rejects.toThrow(new Error('Cannot fetch sources.'));
-    await expect(context?.onRequestSources?.()).resolves.toEqual(sources);
-    expect(onRequestSources).toBeCalledTimes(2);
-  });
+        await expect(context?.onRequestSources?.()).rejects.toThrow(new Error('Cannot fetch sources.'));
+        await expect(context?.onRequestSources?.()).resolves.toEqual(sources);
+        expect(onRequestSources).toHaveBeenCalledTimes(2);
+    });
 });