@squiz/resource-browser 3.0.1-rc.6 → 3.0.1-rc.7

package/lib/index.js

@@ -54,7 +54,7 @@ const ResourceBrowser = (props) => {
     const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
     const [source, setSource] = (0, react_1.useState)(null);
     const [mode, setMode] = (0, react_1.useState)(null);
-    const { data: sources, isLoading, error: sourcesError } = (0, useSources_1.useSources)({ onRequestSources, plugins });
+    const { data: sources, isLoading, error: sourcesError, reload: reloadSources } = (0, useSources_1.useSources)({ onRequestSources, plugins });
     const [plugin, setPlugin] = (0, react_1.useState)(null);
     // MainContainer will render a list of sources of one is not provided to it, callback to allow it to set the source once a user selects
     const handleSourceSelect = (0, react_1.useCallback)((source, mode) => {
@@ -103,6 +103,10 @@ const ResourceBrowser = (props) => {
             setMode(null);
         }
     }, [sources, isModalOpen]);
+    // Reset function to allow user manual reload if sources fail in inline usage
+    const handleReset = (0, react_1.useCallback)(() => {
+        reloadSources();
+    }, [reloadSources]);
     // Render a default "plugin" and one for each item in the plugins array. They are conditionally rendered based on what is selected
     return (react_1.default.createElement("div", { className: "squiz-rb-scope" },
         react_1.default.createElement(Plugin_1.PluginRender, { key: "default", render: plugin === null, inline: !!inline, inlineType: inlineType, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: () => {
@@ -111,9 +115,9 @@ const ResourceBrowser = (props) => {
                     error: null,
                     isLoading: false,
                 };
-            }, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }),
+            }, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange, onRetry: handleReset }),
         plugins.map((thisPlugin) => {
-            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, render: thisPlugin === plugin, inline: !!inline, inlineType: inlineType, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }));
+            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, render: thisPlugin === plugin, inline: !!inline, inlineType: inlineType, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange, onRetry: handleReset }));
         })));
 };
 exports.ResourceBrowser = ResourceBrowser;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.0.1-rc.6",
+    "version": "3.0.1-rc.7",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,
@@ -28,7 +28,8 @@
         "@react-types/shared": "^3.23.1",
         "@squiz/dx-json-schema-lib": "^1.67.0",
         "@squiz/generic-browser-lib": "1.67.2",
-        "@squiz/resource-browser-ui-lib": "^1.0.0-rc.5",
+        "@squiz/resource-browser-ui-lib": "^1.0.0-rc.6",
+        "@squiz/sds": "^1.3.1",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",
@@ -88,5 +89,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "0488272dbc1a564329403dec744efb6fc958d3b2"
+    "gitHead": "b1ca30987b9284691e8d455792e65f13a32fdceb"
 }

package/src/Plugin/Plugin.spec.tsx

@@ -40,6 +40,7 @@ describe('Plugin', () => {
             setSource: () => {},
             isModalOpen: false,
             onModalStateChange: () => {},
+            onRetry: () => {},
         };
         render(<PluginRender render={true} inline={false} {...props} />);
 
@@ -71,6 +72,7 @@ describe('Plugin', () => {
             setSource: () => {},
             isModalOpen: false,
             onModalStateChange: () => {},
+            onRetry: () => {},
         };
         render(<PluginRender render={true} inline={true} inlineType="image" {...props} />);
 

package/src/Plugin/Plugin.tsx

@@ -15,6 +15,7 @@ export type PluginRenderType = ResourceBrowserInputProps & {
     render: boolean;
     inline: boolean;
     inlineType?: InlineType;
+    onRetry: () => void;
 };
 export const PluginRender = ({ render, inline, inlineType, ...props }: PluginRenderType) => {
     if (render) {

package/src/ResourceBrowserInlineButton/InlineLoadingErrorState/InlineLoadingErrorState.spec.tsx

@@ -0,0 +1,47 @@
+import React, { act } from 'react';
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
+import { Error } from '@squiz/resource-browser-ui-lib';
+import { InlineLoadingErrorState } from './InlineLoadingErrorState';
+
+jest.mock('@squiz/resource-browser-ui-lib', () => {
+    return {
+        ...jest.requireActual('@squiz/resource-browser-ui-lib'),
+        Error: jest.fn(() => <div></div>),
+    };
+});
+
+describe('InlineLoadingErrorState', () => {
+    const defaultProps = {
+        isLoading: false,
+        error: undefined,
+    };
+
+    it('clicking close button should call the onClose callback', async () => {
+        const onClose = jest.fn();
+
+        //@ts-ignore
+        render(<InlineLoadingErrorState {...defaultProps} title="Select Asset" onClose={onClose} />);
+
+        await act(() => fireEvent.click(screen.getByRole('button', { name: 'Close Select Asset dialog' })));
+        expect(onClose).toHaveBeenCalled();
+    });
+
+    it('Will render loading on isLoading === true', async () => {
+        //@ts-ignore
+        render(<InlineLoadingErrorState {...defaultProps} isLoading={true} />);
+
+        await waitFor(() => {
+            expect(screen.getByText('Loading...')).toBeTruthy();
+        });
+    });
+
+    it('Will render error on error !== null', async () => {
+        const onRetry = jest.fn();
+        //@ts-ignore
+        render(<InlineLoadingErrorState {...defaultProps} onRetry={onRetry} error={new Error('test')} />);
+
+        await waitFor(() => {
+            expect(Error).toHaveBeenCalledWith(expect.objectContaining({ onReset: onRetry }), {});
+        });
+    });
+});

package/src/ResourceBrowserInlineButton/InlineLoadingErrorState/InlineLoadingErrorState.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { Error } from '@squiz/resource-browser-ui-lib';
+import { Spinner } from '@squiz/sds';
+
+export type InlineLoadingErrorStateProps = {
+    title: string;
+    titleAriaProps: DOMAttributes<FocusableElement>;
+    onClose: () => void;
+    onRetry: () => void;
+
+    isLoading: boolean;
+    error: Error | null;
+};
+
+export const InlineLoadingErrorState = ({ title, titleAriaProps, onClose, onRetry, isLoading, error }: InlineLoadingErrorStateProps) => {
+    return (
+        <div className="relative flex flex-col h-full text-gray-800">
+            <div className="flex items-center py-3 pl-6 pr-10 min-h-[68px]">
+                <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
+                    {title}
+                </h2>
+                <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 overflow-y-hidden">
+                <div className="w-screen max-w-[400px] min-h-[320px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4 flex justify-center items-center text-gray-500">
+                    {isLoading && <Spinner type="lg" />}
+
+                    {!isLoading && error && (
+                        <Error
+                            onReset={onRetry}
+                            infoText={
+                                'There was a problem loading this feature. If this problem persists, contact your administrator or support team.'
+                            }
+                            buttonText={'Try again'}
+                        />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/ResourceBrowserInlineButton/ResourceBrowserInlineButton.spec.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
-import { render, waitFor, screen } from '@testing-library/react';
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
 
 import { ResourceBrowserInlineButton } from './ResourceBrowserInlineButton';
 
+import * as ILES from './InlineLoadingErrorState/InlineLoadingErrorState';
+jest.spyOn(ILES, 'InlineLoadingErrorState');
+
 describe('ResourceBrowserInlineButton', () => {
     const defaultProps = {
+        isLoading: false,
+        error: undefined,
         useResource: () => {
             return {
                 data: null,
@@ -30,4 +35,44 @@ describe('ResourceBrowserInlineButton', () => {
             expect(screen.getByLabelText('change link')).toBeTruthy();
         });
     });
+
+    it('On trigger press render loading if still awaiting external data', async () => {
+        //@ts-ignore
+        render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'image'} isLoading={true} />);
+
+        const button = screen.getByRole('button');
+        fireEvent.click(button);
+
+        await waitFor(() => {
+            expect(ILES.InlineLoadingErrorState).toHaveBeenCalledWith(expect.objectContaining({ isLoading: true }), {});
+        });
+    });
+
+    it('On trigger press render error if external error provided', async () => {
+        const error = new Error('test');
+        //@ts-ignore
+        render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'image'} error={error} />);
+
+        const button = screen.getByRole('button');
+        fireEvent.click(button);
+
+        await waitFor(() => {
+            expect(ILES.InlineLoadingErrorState).toHaveBeenCalledWith(expect.objectContaining({ error }), {});
+        });
+    });
+
+    it('On trigger press render loading if still awaiting resource data', async () => {
+        const useResource = () => {
+            return { data: null, isLoading: true };
+        };
+        //@ts-ignore
+        render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'image'} useResource={useResource} />);
+
+        const button = screen.getByRole('button');
+        fireEvent.click(button);
+
+        await waitFor(() => {
+            expect(ILES.InlineLoadingErrorState).toHaveBeenCalledWith(expect.objectContaining({ isLoading: true }), {});
+        });
+    });
 });

package/src/ResourceBrowserInlineButton/ResourceBrowserInlineButton.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import MainContainer from '../MainContainer/MainContainer';
 import { ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
 import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
+import { InlineLoadingErrorState } from './InlineLoadingErrorState/InlineLoadingErrorState';
 import { ImageInline } from '../Icons/ImageInline';
 import { LinkInline } from '../Icons/LinkInline';
 import { InlineType } from '../types';
 
 export type ResourceBrowserInlineButtonProps = ResourceBrowserInputProps & {
     inlineType: InlineType;
+    onRetry: () => void;
 };
 
 export const ResourceBrowserInlineButton = ({
@@ -15,6 +17,7 @@ export const ResourceBrowserInlineButton = ({
     modalTitle,
     allowedTypes,
     onChange,
+    onRetry,
     value,
     useResource,
     isDisabled,
@@ -29,7 +32,8 @@ export const ResourceBrowserInlineButton = ({
     isModalOpen,
     onModalStateChange,
 }: ResourceBrowserInlineButtonProps) => {
-    const { data: resource, error: resourceError, isLoading: isResourceLoading } = useResource(value?.resourceId || null, source);
+    // If an error happens loading the resource the inline browser just opens without it as if no preselectedResource is provided
+    const { data: resource, isLoading: isResourceLoading } = useResource(value?.resourceId || null, source);
 
     const isImagePicker = inlineType === 'image';
 
@@ -48,20 +52,34 @@ export const ResourceBrowserInlineButton = ({
                 containerClasses="inline-launch-button__button"
             >
                 {(onClose, titleProps) => (
-                    <MainContainer
-                        selectedSource={source}
-                        sources={sources}
-                        preselectedResource={resource}
-                        plugin={plugin}
-                        pluginMode={pluginMode}
-                        searchEnabled={searchEnabled}
-                        title={modalTitle}
-                        titleAriaProps={titleProps}
-                        allowedTypes={allowedTypes}
-                        onSourceSelect={setSource}
-                        onClose={onClose}
-                        onChange={onChange}
-                    />
+                    <>
+                        {(isLoading || isResourceLoading || error) && (
+                            <InlineLoadingErrorState
+                                title={modalTitle}
+                                titleAriaProps={titleProps}
+                                onClose={onClose}
+                                onRetry={onRetry}
+                                isLoading={isLoading || isResourceLoading}
+                                error={error}
+                            />
+                        )}
+                        {!(isLoading || isResourceLoading) && !error && (
+                            <MainContainer
+                                selectedSource={source}
+                                sources={sources}
+                                preselectedResource={resource}
+                                plugin={plugin}
+                                pluginMode={pluginMode}
+                                searchEnabled={searchEnabled}
+                                title={modalTitle}
+                                titleAriaProps={titleProps}
+                                allowedTypes={allowedTypes}
+                                onSourceSelect={setSource}
+                                onClose={onClose}
+                                onChange={onChange}
+                            />
+                        )}
+                    </>
                 )}
             </ModalTrigger>
             <div className="inline-launch-button__label">{isImagePicker ? `Change image` : `Change link`}</div>

package/src/__mocks__/StorybookHelpers.tsx

@@ -11,7 +11,7 @@ type CreateCallbacksProps = Partial<{
     error?: string;
 }>;
 
-export const createPlugins = (callbackWait: number, headerPortal = false): ResourceBrowserPlugin[] => {
+export const createPlugins = (callbackWait: number, headerPortal = false, resourceError?: boolean): ResourceBrowserPlugin[] => {
     const types = ['dam', 'matrix'];
     return types.map((type): ResourceBrowserPlugin => {
         return {
@@ -20,6 +20,7 @@ export const createPlugins = (callbackWait: number, headerPortal = false): Resou
             createHeaderPortal: headerPortal,
             sourceBrowserComponent: () => {
                 return (props) => {
+                    console.log('sourceBrowserComponent invoked with', props);
                     return (
                         <div className="h-screen lg:h-[calc(100vh-9rem)] w-screen max-w-[52rem]">
                             <div>THIS IS A {type} BROWSE PLUGIN</div>
@@ -40,6 +41,7 @@ export const createPlugins = (callbackWait: number, headerPortal = false): Resou
             },
             sourceSearchComponent: () => {
                 return (props) => {
+                    console.log('sourceSearchComponent invoked with', props);
                     return (
                         <div className="h-screen lg:h-[calc(100vh-9rem)] w-screen max-w-[52rem]">
                             <div>THIS IS A {type} SEARCH PLUGIN</div>
@@ -108,9 +110,14 @@ export const createPlugins = (callbackWait: number, headerPortal = false): Resou
             },
             useResolveResource: (unresolvedResource) => {
                 const [resource, setResource] = useState<ResourceBrowserResource | null>(null);
-                const [error, setError] = useState<Error | null>(null);
+                const [error, setError] = useState<Error | null>(
+                    resourceError ? new Error(`Error loading: ${JSON.stringify(unresolvedResource)}`) : null,
+                );
                 const [isLoading, setIsLoading] = useState<boolean>(false);
 
+                if (resourceError) {
+                    console.log('useResolveResource has returned an error');
+                }
                 useEffect(() => {
                     if (unresolvedResource !== null) {
                         setTimeout(() => {
@@ -144,7 +151,7 @@ export const createPlugins = (callbackWait: number, headerPortal = false): Resou
                 }, [unresolvedResource, setResource, setIsLoading]);
 
                 return {
-                    data: resource,
+                    data: !error ? resource : null,
                     error: error,
                     isLoading: isLoading,
                 };
@@ -161,10 +168,11 @@ export const createResourceBrowserCallbacks = ({
 }: CreateCallbacksProps = {}) => {
     return {
         onRequestSources: () => {
+            console.log(`onRequestSources invoked`);
             return new Promise((resolve, reject) => {
                 if (!sourceIsLoading) {
                     setTimeout(() => {
-                        if (error && Math.random() > 0.5) {
+                        if (error) {
                             reject(new Error(error));
                         } else {
                             resolve(singleSource ? [sampleSources[0]] : sampleSources);

package/src/index.scss

@@ -3,7 +3,9 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import '@squiz/sds/lib/package.css';
 @import '@squiz/sds/lib/styles/_imports.scss';
+@import '@squiz/resource-browser-ui-lib/src/index';
 
 // Components
 @import './ResourcePicker/resource-picker';

package/src/index.stories.tsx

@@ -11,8 +11,9 @@ export default {
 const Template: StoryFn<typeof ResourceBrowser> = (props) => {
     const [resource, setResource] = useState<ResourceBrowserUnresolvedResource | null>(props?.value || null);
     const { onRequestSources } = createResourceBrowserCallbacks({
-        sourceIsLoading: false,
+        sourceIsLoading: props.sourceIsLoading || false,
         singleSource: props.singleSource,
+        error: props.sourceError ? 'Error' : undefined,
     });
 
     const onChange = (resource: ResourceBrowserResource | null) => {
@@ -32,7 +33,7 @@ const Template: StoryFn<typeof ResourceBrowser> = (props) => {
         }
     };
 
-    const plugins: ResourceBrowserPlugin[] = createPlugins(props.callbackWait, props.headerPortal);
+    const plugins: ResourceBrowserPlugin[] = createPlugins(props.callbackWait, props.headerPortal, props.resourceError);
 
     return (
         <div className="w-[400px] m-3">
@@ -54,6 +55,7 @@ export const Primary = Template.bind({});
 Primary.args = {
     modalTitle: 'Choose asset',
     sourceIsLoading: false,
+    sourceIsError: false,
     resourceIsLoading: false,
     error: '',
     callbackWait: 0,
@@ -100,3 +102,21 @@ InlineEditSelected.args = {
         sourceId: 'c90feac1-55f3-4e1f-9b56-c22829e3f510',
     },
 };
+
+export const InlineEditLoading = Template.bind({});
+InlineEditLoading.args = {
+    ...InlineEditSelected.args,
+    sourceIsLoading: true,
+};
+
+export const InlineEditError = Template.bind({});
+InlineEditError.args = {
+    ...InlineEditSelected.args,
+    sourceError: true,
+};
+
+export const InlineEditResourceError = Template.bind({});
+InlineEditResourceError.args = {
+    ...InlineEditSelected.args,
+    resourceError: true,
+};

package/src/index.tsx

@@ -48,7 +48,7 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
     const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
     const [source, setSource] = useState<ResourceBrowserSourceWithPlugin | null>(null);
     const [mode, setMode] = useState<PluginLaunchMode | null>(null);
-    const { data: sources, isLoading, error: sourcesError } = useSources({ onRequestSources, plugins });
+    const { data: sources, isLoading, error: sourcesError, reload: reloadSources } = useSources({ onRequestSources, plugins });
     const [plugin, setPlugin] = useState<ResourceBrowserPlugin | null>(null);
 
     // MainContainer will render a list of sources of one is not provided to it, callback to allow it to set the source once a user selects
@@ -109,6 +109,11 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
         }
     }, [sources, isModalOpen]);
 
+    // Reset function to allow user manual reload if sources fail in inline usage
+    const handleReset = useCallback(() => {
+        reloadSources();
+    }, [reloadSources]);
+
     // Render a default "plugin" and one for each item in the plugins array. They are conditionally rendered based on what is selected
     return (
         <div className="squiz-rb-scope">
@@ -135,6 +140,7 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
                 }}
                 isModalOpen={isModalOpen}
                 onModalStateChange={handleModalStateChange}
+                onRetry={handleReset}
             />
             {plugins.map((thisPlugin) => {
                 return (
@@ -148,13 +154,14 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
                         sources={sources}
                         setSource={handleSourceSelect}
                         isLoading={isLoading}
-                        error={error}
+                        error={sourcesError || error}
                         plugin={plugin}
                         pluginMode={mode}
                         searchEnabled={searchEnabled}
                         useResource={thisPlugin.useResolveResource}
                         isModalOpen={isModalOpen}
                         onModalStateChange={handleModalStateChange}
+                        onRetry={handleReset}
                     />
                 );
             })}