@squiz/resource-browser 3.3.9 → 3.3.10

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 3.3.10
+
+### Patch Changes
+
+-   8d3c8e0: source alias support
+-   Updated dependencies [8d3c8e0]
+    -   @squiz/resource-browser-ui-lib@1.2.6
+
 ## 3.3.9
 
 ### Patch Changes

package/lib/index.js

@@ -64,6 +64,23 @@ exports.ResourceBrowser = react_1.default.forwardRef((props, forwardRef) => {
     const [mode, setMode] = (0, react_1.useState)(null);
     const { data: sources, isLoading, error: sourcesError, reload: reloadSources } = (0, useSources_1.useSources)({ onRequestSources, plugins });
     const plugin = source?.plugin || null;
+    // Find source by its id or alias
+    const findSourceById = (value, sources) => {
+        let newSource = sources.find((source) => source.id === value?.sourceId) || null;
+        if (!newSource) {
+            newSource =
+                sources.find((source) => {
+                    if (!source.aliases)
+                        return false;
+                    return source.aliases.includes(value.sourceId);
+                }) || null;
+        }
+        return newSource;
+    };
+    // Check if the value is for the source
+    const isValueForSource = (value, source) => {
+        return value?.sourceId === source.id || (source.aliases && source.aliases.includes(value?.sourceId));
+    };
     // 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) => {
         setSource(source);
@@ -79,7 +96,7 @@ exports.ResourceBrowser = react_1.default.forwardRef((props, forwardRef) => {
         // If there is a provided value try to use its source
         if (value) {
             // Search the sources for it matching against the value.source property
-            newSource = sources.find((source) => source.id === value?.sourceId) || null;
+            newSource = findSourceById(value, sources);
             // If the source is null and we arent loading the sources
             if (newSource === null && !isLoading) {
                 // Set an error as the passed in value's source wasnt returned by onRequestSources
@@ -110,8 +127,7 @@ exports.ResourceBrowser = react_1.default.forwardRef((props, forwardRef) => {
             setMode(null);
             // If there is a value passed in, reset the source so the preselected asset preview renders correctly
             if (value && value.sourceId !== source?.id) {
-                const source = sources.find((source) => source.id === value?.sourceId) || null;
-                setSource(source);
+                setSource(findSourceById(value, sources));
             }
         }
     }, [sources, isModalOpen]);
@@ -129,6 +145,6 @@ exports.ResourceBrowser = react_1.default.forwardRef((props, forwardRef) => {
                 };
             }, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange, onRetry: handleReset }),
         plugins.map((thisPlugin) => {
-            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, ref: forwardRef, type: thisPlugin.type, render: thisPlugin.type === plugin?.type, inline: !!inline, inlineType: inlineType, ...props, value: value && source ? (value.sourceId === source.id ? value : null) : null, isOtherSourceValue: value && source ? (value.sourceId !== source.id ? true : false) : false, 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 }));
+            return (react_1.default.createElement(Plugin_1.PluginRender, { key: thisPlugin.type, ref: forwardRef, type: thisPlugin.type, render: thisPlugin.type === plugin?.type, inline: !!inline, inlineType: inlineType, ...props, value: value && source ? (isValueForSource(value, source) ? value : null) : null, isOtherSourceValue: value && source ? (!isValueForSource(value, source) ? true : false) : false, 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 }));
         })));
 });

package/lib/types.d.ts

@@ -13,6 +13,7 @@ export interface ResourceBrowserSource {
     name?: string;
     id: string;
     type: ResourceBrowserPluginType;
+    aliases?: string[];
 }
 export interface ResourceBrowserSourceWithPlugin extends ResourceBrowserSource {
     plugin: ResourceBrowserPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.3.9",
+    "version": "3.3.10",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,
@@ -28,7 +28,7 @@
         "@react-types/shared": "^3.23.1",
         "@squiz/dx-json-schema-lib": "^1.67.0",
         "@squiz/generic-browser-lib": "^1.67.5",
-        "@squiz/resource-browser-ui-lib": "^1.2.5",
+        "@squiz/resource-browser-ui-lib": "^1.2.6",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",

package/src/__mocks__/sample-sources.json

@@ -3,7 +3,8 @@
         "name": "Bynder #1",
         "id": "c90feac1-55f3-4e1f-9b56-c22829e3f510",
         "type": "dam",
-        "group": "DAM"
+        "group": "DAM",
+        "aliases": ["bynder-789"]
     },
     {
         "name": "Bynder #2",

package/src/index.spec.tsx

@@ -141,6 +141,24 @@ describe('Resource browser input', () => {
         });
     });
 
+    it('If an aliased resource is provided will default to its true Source and Plugin to match', async () => {
+        const source = mockSource({ type: 'dam', aliases: ['alias-source-id'] });
+        mockRequestSources.mockResolvedValueOnce([source, mockSource({ type: 'matrix' })]);
+        mockResolveResource.mockResolvedValueOnce(mockResource({ source }));
+        renderComponent({ value: { sourceId: 'alias-source-id', resourceId: '100' } });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: calculateExpectedSource(source),
+                    plugin: mockDamPlugin,
+                    pluginMode: null,
+                }),
+                {},
+            );
+        });
+    });
+
     it('If a resource is provided but its Source cannot be found it will error', async () => {
         const source = mockSource({ type: 'dam' });
         mockRequestSources.mockResolvedValueOnce([source, mockSource({ type: 'matrix' })]);
@@ -510,6 +528,73 @@ describe('Resource browser input', () => {
         });
     });
 
+    it('onModalStateChange called with false will reset the Source and Plugin to the aliases true source if the value uses an alias', async () => {
+        const originalSource = mockSource({
+            id: 'original-source-id',
+            name: 'Original Source',
+            type: 'dam',
+            aliases: ['alias-source-id'],
+        });
+        const aliasSourceId = 'alias-source-id';
+        const valueWithAlias = {
+            sourceId: aliasSourceId,
+            resourceId: '123456',
+        };
+
+        const sourcesInput = [originalSource, mockSource({ id: '2' })];
+        const calculatedSources = sourcesInput.map((source) => calculateExpectedSource(source));
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
+
+        renderComponent({ value: valueWithAlias });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    value: valueWithAlias,
+                    sources: calculatedSources,
+                    source: calculatedSources[0],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+
+        const { onModalStateChange, setSource } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        // Invoke open and close the modal
+        act(() => {
+            onModalStateChange(true);
+        });
+
+        // Change the source
+        act(() => {
+            setSource(calculatedSources[1]);
+        });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: calculatedSources[1],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+
+        act(() => {
+            onModalStateChange(false);
+        });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenLastCalledWith(
+                expect.objectContaining({
+                    source: calculatedSources[0],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+    });
+
     it('onModalStateChange called with false will reset the Mode', async () => {
         const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
         mockRequestSources.mockResolvedValueOnce(sourcesInput);
@@ -780,5 +865,49 @@ describe('Resource browser input', () => {
                 );
             });
         });
+
+        it('When resource browser is called with a value containing an alias source, Plugin is called with the original source not the alias value', async () => {
+            const originalSource = mockSource({
+                id: 'original-source-id',
+                name: 'Original Source',
+                type: 'dam',
+                aliases: ['alias-source-id'],
+            });
+            const aliasSourceId = 'alias-source-id';
+
+            mockRequestSources.mockResolvedValueOnce([originalSource]);
+
+            // Create a value that uses the alias source ID
+            const valueWithAlias = {
+                sourceId: aliasSourceId,
+                resourceId: '123456',
+            };
+
+            renderComponent({ value: valueWithAlias });
+
+            await waitFor(() => {
+                expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        value: valueWithAlias,
+                        source: calculateExpectedSource(originalSource), // Should be the original source, not alias
+                        plugin: mockDamPlugin,
+                    }),
+                    {},
+                );
+            });
+
+            // Verify that the PluginRender is called with the original source
+            await waitFor(() => {
+                expect(PluginRenderSpy).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        render: true,
+                        type: 'dam',
+                        source: calculateExpectedSource(originalSource), // Should be the original source
+                        isOtherSourceValue: false,
+                    }),
+                    null,
+                );
+            });
+        });
     });
 });

package/src/index.stories.tsx

@@ -103,6 +103,15 @@ RestrictedSource.args = {
     searchEnabled: true,
 };
 
+export const SourceByAlias = Template.bind({});
+SourceByAlias.args = {
+    ...Primary.args,
+    value: {
+        resourceId: '1f7a25b4-380f-4540-9555-8be2dcab4019',
+        sourceId: 'bynder-789',
+    },
+};
+
 export const SearchEnabled = Template.bind({});
 SearchEnabled.args = {
     ...Primary.args,

package/src/index.tsx

@@ -60,6 +60,24 @@ export const ResourceBrowser = React.forwardRef<HTMLButtonElement, ResourceBrows
     const { data: sources, isLoading, error: sourcesError, reload: reloadSources } = useSources({ onRequestSources, plugins });
     const plugin = source?.plugin || null;
 
+    // Find source by its id or alias
+    const findSourceById = (value: ResourceBrowserUnresolvedResource, sources: ResourceBrowserSourceWithPlugin[]) => {
+        let newSource = sources.find((source) => source.id === value?.sourceId) || null;
+        if (!newSource) {
+            newSource =
+                sources.find((source) => {
+                    if (!source.aliases) return false;
+                    return source.aliases.includes(value.sourceId);
+                }) || null;
+        }
+        return newSource;
+    };
+
+    // Check if the value is for the source
+    const isValueForSource = (value: ResourceBrowserUnresolvedResource, source: ResourceBrowserSourceWithPlugin) => {
+        return value?.sourceId === source.id || (source.aliases && source.aliases.includes(value?.sourceId));
+    };
+
     // 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 = useCallback(
         (source: ResourceBrowserSourceWithPlugin, mode?: PluginLaunchMode) => {
@@ -80,7 +98,8 @@ export const ResourceBrowser = React.forwardRef<HTMLButtonElement, ResourceBrows
         // If there is a provided value try to use its source
         if (value) {
             // Search the sources for it matching against the value.source property
-            newSource = sources.find((source) => source.id === value?.sourceId) || null;
+            newSource = findSourceById(value, sources);
+
             // If the source is null and we arent loading the sources
             if (newSource === null && !isLoading) {
                 // Set an error as the passed in value's source wasnt returned by onRequestSources
@@ -116,8 +135,7 @@ export const ResourceBrowser = React.forwardRef<HTMLButtonElement, ResourceBrows
 
             // If there is a value passed in, reset the source so the preselected asset preview renders correctly
             if (value && value.sourceId !== source?.id) {
-                const source = sources.find((source) => source.id === value?.sourceId) || null;
-                setSource(source);
+                setSource(findSourceById(value, sources));
             }
         }
     }, [sources, isModalOpen]);
@@ -168,8 +186,8 @@ export const ResourceBrowser = React.forwardRef<HTMLButtonElement, ResourceBrows
                         inline={!!inline}
                         inlineType={inlineType}
                         {...props}
-                        value={value && source ? (value.sourceId === source.id ? value : null) : null} // Don't pass value if value isn't for selected source
-                        isOtherSourceValue={value && source ? (value.sourceId !== source.id ? true : false) : false} // Block render of existing asset if not from this source
+                        value={value && source ? (isValueForSource(value, source) ? value : null) : null} // Don't pass value if value isn't for selected source
+                        isOtherSourceValue={value && source ? (!isValueForSource(value, source) ? true : false) : false} // Block render of existing asset if not from this source
                         source={source}
                         sources={sources}
                         setSource={handleSourceSelect}

package/src/types.ts

@@ -19,6 +19,9 @@ export interface ResourceBrowserSource {
     id: string;
     // Source type e.g. Matrix, DAM etc determines what plugin will be used for resource selection
     type: ResourceBrowserPluginType;
+
+    //alias' for the source to identify plugin to use for the source
+    aliases?: string[];
 }
 
 export interface ResourceBrowserSourceWithPlugin extends ResourceBrowserSource {