@squiz/resource-browser 3.2.0 → 3.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.2.1
+
+### Patch Changes
+
+-   a64f8ae: Derive plugin synchronously from source to avoid stale state
+
 ## 3.2.0
 
 ### Minor Changes

package/lib/index.js

@@ -55,7 +55,7 @@ const ResourceBrowser = (props) => {
     const [source, setSource] = (0, react_1.useState)(null);
     const [mode, setMode] = (0, react_1.useState)(null);
     const { data: sources, isLoading, error: sourcesError, reload: reloadSources } = (0, useSources_1.useSources)({ onRequestSources, plugins });
-    const [plugin, setPlugin] = (0, react_1.useState)(null);
+    const plugin = source?.plugin || 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) => {
         setSource(source);
@@ -82,16 +82,6 @@ const ResourceBrowser = (props) => {
         setSource(source);
         setMode(null); // Passed in resource will always use the default mode
     }, [value, isLoading, sources, setSource, setError]);
-    // When a source is selected update our plugin reference to match (legacy support)
-    // the plugin is now attached to the source directly when fetched from the context so use that instead when possible
-    (0, react_1.useEffect)(() => {
-        if (source?.plugin) {
-            setPlugin(source.plugin);
-        }
-        else {
-            setPlugin(null);
-        }
-    }, [plugins, source]);
     // The modal has some control over it own open/closed state (for WCAG reasons) so keep this in sync with our state
     const handleModalStateChange = (0, react_1.useCallback)((isOpen) => {
         setIsModalOpen(isOpen);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.2.0",
+    "version": "3.2.1",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,

package/src/index.spec.tsx

@@ -666,5 +666,53 @@ describe('Resource browser input', () => {
                 );
             });
         });
+
+        it('switching source updates plugin and does not use the old plugin', async () => {
+            const damSource = mockSource({ type: 'dam', id: '1' });
+            const matrixSource = mockSource({ type: 'matrix', id: '2' });
+
+            const pluginA = { ...mockDamPlugin, type: 'dam' };
+            const pluginB = { ...mockDamPlugin, type: 'matrix' };
+
+            mockRequestSources.mockResolvedValueOnce([damSource, matrixSource]);
+
+            renderComponent();
+
+            const { setSource } = (RBI.ResourceBrowserInput as jest.Mock).mock.calls[0][0];
+
+            act(() => {
+                setSource({ ...damSource, plugin: pluginA });
+            });
+
+            await waitFor(() => {
+                expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        plugin: pluginA,
+                    }),
+                    expect.any(Object),
+                );
+            });
+
+            (Plugin.PluginRender as jest.Mock).mockClear();
+
+            act(() => {
+                setSource({ ...matrixSource, plugin: pluginB });
+            });
+
+            await waitFor(() => {
+                expect(Plugin.PluginRender).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        plugin: pluginB,
+                    }),
+                    expect.any(Object),
+                );
+                expect(Plugin.PluginRender).not.toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        plugin: pluginA,
+                    }),
+                    expect.any(Object),
+                );
+            });
+        });
     });
 });

package/src/index.tsx

@@ -6,7 +6,6 @@ import {
     PluginLaunchMode,
     ResourceBrowserUnresolvedResource,
     ResourceBrowserResource,
-    ResourceBrowserPlugin,
     ResourceBrowserSourceWithPlugin,
 } from './types';
 import { useSources } from './Hooks/useSources';
@@ -49,7 +48,7 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
     const [source, setSource] = useState<ResourceBrowserSourceWithPlugin | null>(null);
     const [mode, setMode] = useState<PluginLaunchMode | null>(null);
     const { data: sources, isLoading, error: sourcesError, reload: reloadSources } = useSources({ onRequestSources, plugins });
-    const [plugin, setPlugin] = useState<ResourceBrowserPlugin | null>(null);
+    const plugin = source?.plugin || 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 = useCallback(
@@ -83,16 +82,6 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
         setMode(null); // Passed in resource will always use the default mode
     }, [value, isLoading, sources, setSource, setError]);
 
-    // When a source is selected update our plugin reference to match (legacy support)
-    // the plugin is now attached to the source directly when fetched from the context so use that instead when possible
-    useEffect(() => {
-        if (source?.plugin) {
-            setPlugin(source.plugin);
-        } else {
-            setPlugin(null);
-        }
-    }, [plugins, source]);
-
     // The modal has some control over it own open/closed state (for WCAG reasons) so keep this in sync with our state
     const handleModalStateChange = useCallback(
         (isOpen: boolean) => {