@squiz/resource-browser 2.4.12 → 3.0.0-pre-alpha.0

package/src/Plugin/Plugin.spec.tsx

@@ -29,6 +29,8 @@ describe('Plugin', () => {
                 };
             },
             plugin: null,
+            pluginMode: null,
+            searchEnabled: false,
             source: null,
             sources: [],
             isLoading: false,

package/src/ResourceBrowserContext/ResourceBrowserContext.spec.tsx

@@ -19,6 +19,7 @@ describe('ResourceBrowserContext', () => {
         expect(defaultContext).toEqual({
             onRequestSources: expect.any(Function),
             plugins: [],
+            searchEnabled: false,
         });
         expect(() => defaultContext?.onRequestSources()).toThrow('onRequestSources has not been configured.');
     });
@@ -33,6 +34,7 @@ describe('ResourceBrowserContext', () => {
                 value={{
                     onRequestSources,
                     plugins: [],
+                    searchEnabled: false,
                 }}
             >
                 <ResourceBrowserContext.Consumer>
@@ -63,6 +65,7 @@ describe('ResourceBrowserContext', () => {
                 value={{
                     onRequestSources,
                     plugins: [],
+                    searchEnabled: false,
                 }}
             >
                 <ResourceBrowserContext.Consumer>

package/src/ResourceBrowserContext/ResourceBrowserContext.tsx

@@ -6,6 +6,7 @@ import ExpiryMap from 'expiry-map';
 
 export type ResourceBrowserContextProps = {
     onRequestSources: OnRequestSources;
+    searchEnabled: boolean;
     plugins: Array<ResourceBrowserPlugin>;
 };
 
@@ -17,6 +18,7 @@ export const ResourceBrowserContext = React.createContext<ResourceBrowserContext
     onRequestSources: () => {
         throw new Error('onRequestSources has not been configured.');
     },
+    searchEnabled: false,
     plugins: [],
 });
 

package/src/ResourceBrowserInput/ResourceBrowserInput.spec.tsx

@@ -25,6 +25,8 @@ describe('Resource browser input', () => {
                 useResource={mockUseResource}
                 onChange={mockChange}
                 plugin={null}
+                pluginMode={null}
+                searchEnabled={false}
                 source={null}
                 sources={[]}
                 isLoading={false}
@@ -149,6 +151,11 @@ describe('Resource browser input', () => {
                         return <></>;
                     };
                 },
+                sourceSearchComponent: () => {
+                    return () => {
+                        return <></>;
+                    };
+                },
             };
 
             renderComponent({ value: { sourceId: source.id, resourceId: '100' }, plugin: plugin as ResourceBrowserPlugin });

package/src/ResourceBrowserInput/ResourceBrowserInput.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import MainContainer from '../MainContainer/MainContainer';
 import { ResourcePicker } from '../ResourcePicker/ResourcePicker';
-import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserUnresolvedResource, ResourceBrowserResource } from '../types';
+import {
+    ResourceBrowserPlugin,
+    ResourceBrowserSource,
+    ResourceBrowserUnresolvedResource,
+    ResourceBrowserResource,
+    ResourceBrowserSourceWithPlugin,
+    PluginLaunchMode,
+} from '../types';
 
 export type ResourceBrowserInputProps = {
     modalTitle: string;
@@ -19,11 +26,13 @@ export type ResourceBrowserInputProps = {
     onChange(resource: ResourceBrowserResource | null): void;
     onClear?(): void;
     plugin: ResourceBrowserPlugin | null;
+    pluginMode: PluginLaunchMode | null;
+    searchEnabled: boolean;
     source: ResourceBrowserSource | null;
-    sources: ResourceBrowserSource[];
+    sources: ResourceBrowserSourceWithPlugin[];
     isLoading: boolean;
     error: Error | null;
-    setSource(source: ResourceBrowserSource | null): void;
+    setSource(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
     isModalOpen: boolean;
     onModalStateChange(isOpen: boolean): void;
 };
@@ -37,6 +46,8 @@ export const ResourceBrowserInput = ({
     isDisabled,
     onClear,
     plugin,
+    pluginMode,
+    searchEnabled,
     source,
     sources,
     isLoading,
@@ -68,6 +79,8 @@ export const ResourceBrowserInput = ({
                     sources={sources}
                     preselectedResource={resource}
                     plugin={plugin}
+                    pluginMode={pluginMode}
+                    searchEnabled={searchEnabled}
                     title={modalTitle}
                     titleAriaProps={titleProps}
                     allowedTypes={allowedTypes}

package/src/ResourceLauncher/ResourceLauncher.spec.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ResourceLauncher from './ResourceLauncher';
+import { PluginLaunchModeType } from '../types';
+
+import { mockPlugin, mockSourceWithPlugin, mockResource } from '../__mocks__/MockModels';
+
+describe('ResourceLauncher', () => {
+    const RenderResourceLauncher = jest.fn().mockReturnValue(<div>Resource Launcher UI</div>);
+    const defaultPlugin = mockPlugin({
+        renderResourceLauncher: () => {
+            return RenderResourceLauncher;
+        },
+    });
+
+    it('should render <li> for each provided source', () => {
+        const sources = [mockSourceWithPlugin({ plugin: defaultPlugin }), mockSourceWithPlugin({ id: '2', plugin: defaultPlugin })];
+        const onSourceSelect = jest.fn();
+        render(<ResourceLauncher sources={sources} onSourceSelect={onSourceSelect} />);
+
+        expect(screen.getByLabelText('sources list')).toBeInTheDocument();
+        expect(screen.getByLabelText('sources list').children.length).toEqual(2);
+        expect(screen.queryAllByText('Resource Launcher UI').length).toEqual(2);
+    });
+
+    it('onSourceSelect query', async () => {
+        const sources = [mockSourceWithPlugin({ plugin: defaultPlugin })];
+        const onSourceSelect = jest.fn();
+        render(<ResourceLauncher sources={sources} onSourceSelect={onSourceSelect} />);
+
+        // Get the first plugin function launcher components called props
+        const { onSearch } = (RenderResourceLauncher as jest.Mock).mock.calls[0][0];
+
+        // Invoke the onSearch handler
+        onSearch('test');
+        expect(onSourceSelect).toHaveBeenCalledWith(sources[0], { type: PluginLaunchModeType.Search, args: { query: 'test' } });
+    });
+
+    it('onSourceSelect browse', async () => {
+        const sources = [mockSourceWithPlugin({ plugin: defaultPlugin })];
+        const onSourceSelect = jest.fn();
+        render(<ResourceLauncher sources={sources} onSourceSelect={onSourceSelect} />);
+
+        // Get the first plugin function launcher components called props
+        const { onBrowse } = (RenderResourceLauncher as jest.Mock).mock.calls[0][0];
+
+        // Invoke the onBrowse handler
+        onBrowse();
+        expect(onSourceSelect).toHaveBeenCalledWith(sources[0], { type: PluginLaunchModeType.Browse, args: { browseTo: undefined } });
+    });
+
+    it('onSourceSelect browseTo', async () => {
+        const sources = [mockSourceWithPlugin({ plugin: defaultPlugin })];
+        const onSourceSelect = jest.fn();
+        render(<ResourceLauncher sources={sources} onSourceSelect={onSourceSelect} />);
+
+        // Get the first plugin function launcher components called props
+        const { onBrowse } = (RenderResourceLauncher as jest.Mock).mock.calls[0][0];
+
+        // Invoke the onBrowse handler
+        const browseTo = mockResource();
+        onBrowse(browseTo);
+        expect(onSourceSelect).toHaveBeenCalledWith(sources[0], { type: PluginLaunchModeType.Browse, args: { browseTo } });
+    });
+});

package/src/ResourceLauncher/ResourceLauncher.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ResourceBrowserSource, ResourceBrowserSourceWithPlugin, PluginLaunchMode, PluginLaunchModeType } from '../types';
+
+interface ResourceLauncherProps {
+    sources: ResourceBrowserSourceWithPlugin[];
+    onSourceSelect(source: ResourceBrowserSource, mode: PluginLaunchMode): void;
+}
+
+function ResourceLauncher({ sources, onSourceSelect }: ResourceLauncherProps) {
+    return (
+        <div className="overflow-y-scroll w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4">
+            <ul tabIndex={-1} aria-label={`sources list`} className="flex flex-col bg-gray-100 min-h-full focus-visible:outline-0">
+                {sources.map((source, index) => {
+                    const SourceLauncher = source.plugin.renderResourceLauncher();
+
+                    return (
+                        <li key={index} className="flex items-stretch relative">
+                            <SourceLauncher
+                                source={source}
+                                onSearch={(query) => onSourceSelect(source, { type: PluginLaunchModeType.Search, args: { query } })}
+                                onBrowse={(browseTo) => onSourceSelect(source, { type: PluginLaunchModeType.Browse, args: { browseTo } })}
+                            />
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>
+    );
+}
+
+export default ResourceLauncher;

package/src/SourceDropdown/SourceDropdown.stories.tsx

@@ -15,7 +15,7 @@ const Template: StoryFn<typeof SourceDropdown> = (props) => {
     const [selectedSource, setSelectedSource] = useState<ResourceBrowserSource>(sources[0]);
 
     return (
-        <div className="m-3">
+        <div className="m-3 w-[200px]">
             <SourceDropdown
                 selectedSource={selectedSource}
                 sources={sources}
@@ -26,5 +26,4 @@ const Template: StoryFn<typeof SourceDropdown> = (props) => {
 };
 
 export const Primary = Template.bind({});
-
 Primary.args = {};

package/src/SourceDropdown/SourceDropdown.tsx

@@ -1,8 +1,9 @@
 import React, { useRef, useState } from 'react';
 
-import { ResourceBrowserSource } from '../types';
+import { ResourceBrowserSource, PluginLaunchMode } from '../types';
 import { Icon, IconOptions, uuid } from '@squiz/generic-browser-lib';
 import { useFocusWithin, useKeyboard } from 'react-aria';
+import { ArrowDownIcon } from '../Icons/ArrowDownIcon';
 
 export default function SourceDropdown({
     sources,
@@ -11,7 +12,7 @@ export default function SourceDropdown({
 }: {
     sources: ResourceBrowserSource[];
     selectedSource: ResourceBrowserSource;
-    onSourceSelect(source: ResourceBrowserSource): void;
+    onSourceSelect(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
 }) {
     const [uniqueId] = useState(uuid());
     const buttonRef = useRef<HTMLButtonElement>(null);
@@ -45,7 +46,7 @@ export default function SourceDropdown({
     }
 
     return (
-        <div {...focusWithinProps} {...keyboardProps} className="relative w-72 border-2 rounded border-gray-300">
+        <div {...focusWithinProps} {...keyboardProps} className="relative w-full ">
             <button
                 ref={buttonRef}
                 type="button"
@@ -53,17 +54,16 @@ export default function SourceDropdown({
                 aria-expanded={isOpen}
                 aria-controls={`${uniqueId}-button-menu`}
                 onClick={() => setIsOpen(!isOpen)}
-                className="relative flex items-center text-sm font-semibold p-1.5 w-full"
+                className="relative flex items-center p-2 w-full rounded bg-blue-100 hover:bg-blue-150"
             >
                 <span className="sr-only">current source </span>
-                <Icon icon={selectedSource.type as IconOptions} aria-hidden className="mr-2.5 h-[20px] w-[20px]" />
-                <div className="truncate max-w-[200px]">{selectedSource.name}</div>
-                <Icon icon={'arrow-down' as IconOptions} aria-hidden className="absolute right-3" />
+                <div className="truncate max-w-[200px] text-md font-semibold text-blue-400">{selectedSource.name}</div>
+                <ArrowDownIcon aria-hidden className="absolute right-2 fill-blue-300" />
             </button>
             <ul
                 id={`${uniqueId}-button-menu`}
                 aria-hidden={!isOpen}
-                className={`absolute z-50 top-[calc(100%+5px)] -left-0.5 w-[calc(100%+4px)] bg-gray-100 border-1 shadow-md rounded border-gray-300 p-2 pb-0 overflow-y-scroll max-h-80 ${
+                className={`absolute z-50 top-[calc(100%+8px)] w-[100%] bg-gray-100 border-1 shadow-md rounded border-gray-300 p-2 pb-0 overflow-y-scroll max-h-80 ${
                     !isOpen ? 'hidden' : ''
                 }`}
             >

package/src/SourceDropdownContainer/SourceDropdownContainer.spec.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import SourceDropdownContainer from './SourceDropdownContainer';
+
+describe('SourceDropdownContainer', () => {
+    it('Render a dropdown container with child component(s)', async () => {
+        const children = <span id="dropdown-content">Hello world</span>;
+
+        const { baseElement } = render(
+            <SourceDropdownContainer isCollapsed={false} onExpand={jest.fn()}>
+                {children}
+            </SourceDropdownContainer>,
+        );
+
+        const content = baseElement.querySelector(`#dropdown-content`) as HTMLSpanElement;
+        expect(content).toBeTruthy();
+    });
+
+    it('Render collapsed state with single button to re-expand no children', async () => {
+        const children = <span id="dropdown-content">Hello world</span>;
+
+        const { baseElement } = render(
+            <SourceDropdownContainer isCollapsed={true} onExpand={jest.fn()}>
+                {children}
+            </SourceDropdownContainer>,
+        );
+
+        const content = baseElement.querySelector(`#dropdown-content`) as HTMLSpanElement;
+        expect(content).toBeFalsy();
+
+        const expandButton = screen.getByRole('button', { name: /Expand browse options/i });
+        expect(expandButton).toBeTruthy();
+    });
+
+    it('Will envoke onExpand callback function when expand button is pressed', async () => {
+        const onExpand = jest.fn();
+        const children = <span id="dropdown-content">Hello world</span>;
+
+        render(
+            <SourceDropdownContainer isCollapsed={true} onExpand={onExpand}>
+                {children}
+            </SourceDropdownContainer>,
+        );
+
+        const expandButton = screen.getByRole('button', { name: /Expand browse options/i });
+        fireEvent.click(expandButton);
+
+        expect(onExpand).toHaveBeenCalled();
+    });
+});

package/src/SourceDropdownContainer/SourceDropdownContainer.stories.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import SourceDropdownContainer from './SourceDropdownContainer';
+import sampleSources from '../__mocks__/sample-sources.json';
+import SourceDropdown from '../SourceDropdown/SourceDropdown';
+import { ResourceBrowserSource } from '../types';
+
+export default {
+    title: 'Source dropdown container',
+    component: SourceDropdownContainer,
+} as Meta<typeof SourceDropdownContainer>;
+
+const Template: StoryFn<typeof SourceDropdownContainer> = (props) => {
+    return (
+        <div className="m-3">
+            <SourceDropdownContainer {...props}>{props.children}</SourceDropdownContainer>
+        </div>
+    );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+    isCollapsed: false,
+    onExpand: () => {
+        console.log('expanded');
+    },
+    children: (
+        <div className="flex items-center h-[36px]">
+            <span className="mr-3">Child component</span>
+        </div>
+    ),
+};
+
+export const Collapsed = Template.bind({});
+Collapsed.args = {
+    isCollapsed: true,
+    onExpand: () => {
+        console.log('expanded');
+    },
+    children: (
+        <div className="flex items-center h-[36px]">
+            <span className="mr-3">Child component</span>
+        </div>
+    ),
+};
+
+export const DropdownExample = Template.bind({});
+DropdownExample.args = {
+    isCollapsed: false,
+    onExpand: () => {
+        console.log('expanded');
+    },
+    children: (
+        <div className="border-l border-blue-200 pl-1 w-[204px]">
+            <SourceDropdown
+                selectedSource={sampleSources[0] as ResourceBrowserSource}
+                sources={sampleSources as ResourceBrowserSource[]}
+                onSourceSelect={(source) => alert(`Source Select: ${source.name}`)}
+            />
+        </div>
+    ),
+};

package/src/SourceDropdownContainer/SourceDropdownContainer.tsx

@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react';
+import { AdsClickIcon } from '../Icons/AdsClickIcon';
+
+export default function SourceDropdownContainer({
+    children,
+    isCollapsed,
+    onExpand,
+}: PropsWithChildren<{ isCollapsed: boolean; onExpand: () => void }>) {
+    return (
+        <div className="inline-flex rounded-lg p-1 bg-blue-100 min-h-[44px]">
+            {isCollapsed && (
+                <button aria-label="Expand browse options" onClick={onExpand} className="flex items-center">
+                    <AdsClickIcon aria-hidden className="mx-2 fill-blue-300" />
+                </button>
+            )}
+            {!isCollapsed && (
+                <>
+                    <div className="flex items-center pr-1">
+                        <AdsClickIcon aria-hidden className="mx-2 fill-blue-300" />
+                        <span className="sr-only">Browse</span>
+                    </div>
+                    {children}
+                </>
+            )}
+        </div>
+    );
+}

package/src/__mocks__/MockModels.ts

@@ -1,4 +1,4 @@
-import { ResourceBrowserSource, ResourceBrowserResource, ResourceBrowserPlugin } from '../types';
+import { ResourceBrowserSource, ResourceBrowserResource, ResourceBrowserPlugin, ResourceBrowserSourceWithPlugin } from '../types';
 
 export type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Array<infer U>
@@ -8,7 +8,7 @@ export type DeepPartial<T> = {
           : DeepPartial<T[P]>;
 };
 
-export const mockSource = (properties: DeepPartial<ResourceBrowserSource> = {}): ResourceBrowserSource => {
+export const mockSource = (properties: Partial<ResourceBrowserSource> = {}): ResourceBrowserSource => {
     return {
         id: '1',
         name: 'Test source',
@@ -17,6 +17,16 @@ export const mockSource = (properties: DeepPartial<ResourceBrowserSource> = {}):
     };
 };
 
+export const mockSourceWithPlugin = (properties: Partial<ResourceBrowserSourceWithPlugin> = {}): ResourceBrowserSourceWithPlugin => {
+    return {
+        id: '1',
+        name: 'Test source',
+        type: 'dam',
+        plugin: mockPlugin(),
+        ...properties,
+    };
+};
+
 export const mockPlugin = (properties: DeepPartial<ResourceBrowserPlugin> = {}): ResourceBrowserPlugin => {
     return {
         type: 'dam',
@@ -26,6 +36,10 @@ export const mockPlugin = (properties: DeepPartial<ResourceBrowserPlugin> = {}):
         renderSelectedResource: jest.fn(),
         // @ts-ignore
         resolveResource: jest.fn(),
+        // @ts-ignore
+        sourceSearchComponent: jest.fn(),
+        // @ts-ignore
+        renderResourceLauncher: jest.fn(),
         ...properties,
     };
 };

package/src/__mocks__/PluginExample.tsx

@@ -94,5 +94,13 @@ export default (): ResourceBrowserPlugin => {
                 isLoading: false,
             };
         },
+
+        // TODO: as they are worked out
+        sourceSearchComponent: () => {
+            return () => <></>;
+        },
+        renderResourceLauncher: () => {
+            return () => <></>;
+        },
     };
 };

package/src/__mocks__/StorybookHelpers.tsx

@@ -22,7 +22,7 @@ export const createPlugins = (callbackWait: number, headerPortal = false): Resou
                 return (props) => {
                     return (
                         <div className="h-screen lg:h-[calc(100vh-9rem)] w-screen max-w-[52rem]">
-                            <div>THIS IS A {type} PLUGIN</div>
+                            <div>THIS IS A {type} BROWSE PLUGIN</div>
                             <button
                                 onClick={() => {
                                     props.onSelected({
@@ -38,6 +38,42 @@ export const createPlugins = (callbackWait: number, headerPortal = false): Resou
                     );
                 };
             },
+            sourceSearchComponent: () => {
+                return (props) => {
+                    return (
+                        <div className="h-screen lg:h-[calc(100vh-9rem)] w-screen max-w-[52rem]">
+                            <div>THIS IS A {type} SEARCH PLUGIN</div>
+                            <div>Received query: {props.query}</div>
+                            <button
+                                onClick={() => {
+                                    props.onSelected({
+                                        id: '1f7a25b4-380f-4540-9555-8be2dcab4019',
+                                        source: props.source,
+                                    } as ResourceBrowserResource);
+                                }}
+                            >
+                                Press to set resource
+                            </button>
+                            {headerPortal && props.headerPortal && createPortal(<div>HeadPortal</div>, props.headerPortal)}
+                        </div>
+                    );
+                };
+            },
+            renderResourceLauncher: () => {
+                return (props) => {
+                    const [query, setQuery] = useState<string>('');
+                    return (
+                        <div className="">
+                            <div>Search {type}</div>
+                            <form>
+                                <input onChange={(event) => setQuery(event.target.value)} />
+                                <button onClick={() => props.onSearch(query)}>Search</button>
+                            </form>
+                            <button onClick={props.onBrowse}>Browse</button>
+                        </div>
+                    );
+                };
+            },
             renderSelectedResource: (resource) => {
                 return new Promise((resolve, reject) => {
                     const fileSize = resource.squizImage?.imageVariations?.original?.byteSize;

package/src/__mocks__/renderWithContext.tsx

@@ -9,6 +9,7 @@ export const renderWithContext = (ui: ReactElement, context: Partial<ResourceBro
                 value={{
                     onRequestSources: jest.fn(),
                     plugins: [],
+                    searchEnabled: false,
                     ...context,
                 }}
             >