@squiz/resource-browser 3.2.2 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 3.3.0
+
+### Minor Changes
+
+-   9e6268d: Allow users to restrict plugin usage
+
+## 3.2.3
+
+### Patch Changes
+
+-   fe57830: fix for refresh token clering by other plugins
+
 ## 3.2.2
 
 ### Patch Changes

package/lib/Plugin/Plugin.js

@@ -9,11 +9,10 @@ const ResourceBrowserInput_1 = require("../ResourceBrowserInput/ResourceBrowserI
 const ResourceBrowserInlineButton_1 = require("../ResourceBrowserInlineButton/ResourceBrowserInlineButton");
 const AuthProvider_1 = require("../ResourceBrowserContext/AuthProvider");
 const PluginRender = ({ render, inline, inlineType, ...props }) => {
-    if (render) {
-        return (react_1.default.createElement(AuthProvider_1.AuthProvider, { authConfig: props.source }, inline && inlineType ? (react_1.default.createElement(ResourceBrowserInlineButton_1.ResourceBrowserInlineButton, { inlineType: inlineType, ...props })) : (react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props }))));
-    }
-    else {
+    if (!render)
         return react_1.default.createElement(react_1.default.Fragment, null);
-    }
+    const requiresAuth = Boolean(props.source?.configuration?.authUrl);
+    const content = inline && inlineType ? react_1.default.createElement(ResourceBrowserInlineButton_1.ResourceBrowserInlineButton, { inlineType: inlineType, ...props }) : react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props });
+    return requiresAuth ? react_1.default.createElement(AuthProvider_1.AuthProvider, { authConfig: props.source }, content) : content;
 };
 exports.PluginRender = PluginRender;

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
-import { InlineType, ResourceBrowserUnresolvedResource, ResourceBrowserResource } from './types';
+import { InlineType, ResourceBrowserUnresolvedResource, ResourceBrowserResource, ResourceBrowserPluginType } from './types';
 import { AuthProvider, useAuthContext, AuthContext } from './ResourceBrowserContext/AuthProvider';
 import BrowseToSource from './BrowseToSource/BrowseToSource';
 import SourceDropdown from './SourceDropdown/SourceDropdown';
@@ -10,6 +10,7 @@ export * from './types';
 export type ResourceBrowserProps = {
     modalTitle: string;
     allowedTypes?: string[];
+    allowedPlugins?: ResourceBrowserPluginType[];
     isDisabled?: boolean;
     value: ResourceBrowserUnresolvedResource | null;
     inline?: boolean;

package/lib/index.js

@@ -48,11 +48,19 @@ const SourceDropdownContainer_1 = __importDefault(require("./SourceDropdownConta
 exports.SourceDropdownContainer = SourceDropdownContainer_1.default;
 __exportStar(require("./types"), exports);
 const ResourceBrowser = (props) => {
-    const { value, inline, inlineType } = props;
+    const { value, inline, inlineType, allowedPlugins } = props;
     const [error, setError] = (0, react_1.useState)(null);
-    const { onRequestSources, searchEnabled, plugins } = (0, react_1.useContext)(ResourceBrowserContext_1.ResourceBrowserContext);
+    const { onRequestSources, searchEnabled, plugins: allPlugins } = (0, react_1.useContext)(ResourceBrowserContext_1.ResourceBrowserContext);
     const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
     const [source, setSource] = (0, react_1.useState)(null);
+    const plugins = (0, react_1.useMemo)(() => {
+        // Allow some usages e.g. plugin specific like MatrixAssetWidget restrict what plugins show
+        if (!allowedPlugins)
+            return allPlugins; // No restrictions, return all
+        return allPlugins.filter((plugin) => {
+            return allowedPlugins.includes(plugin.type); // Restrict based on plugin type
+        });
+    }, [allowedPlugins, allPlugins]);
     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;

package/package.json

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

package/src/Plugin/Plugin.spec.tsx

@@ -2,10 +2,35 @@ import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 
 import { PluginRender } from './Plugin';
+import { ResourceBrowserPluginType } from '../types';
 import * as RBI from '../ResourceBrowserInput/ResourceBrowserInput';
 import * as RBInlineButton from '../ResourceBrowserInlineButton/ResourceBrowserInlineButton';
+import * as AuthContext from '../ResourceBrowserContext/AuthProvider';
+
 jest.spyOn(RBI, 'ResourceBrowserInput');
 jest.spyOn(RBInlineButton, 'ResourceBrowserInlineButton');
+jest.spyOn(AuthContext, 'AuthProvider');
+
+const baseProps = {
+    type: null,
+    modalTitle: 'Asset picker',
+    value: null,
+    isOtherSourceValue: false,
+    onChange: jest.fn(),
+    onClear: jest.fn(),
+    useResource: () => ({ data: null, error: null, isLoading: false }),
+    plugin: null,
+    pluginMode: null,
+    searchEnabled: false,
+    source: null,
+    sources: [],
+    isLoading: false,
+    error: null,
+    setSource: jest.fn(),
+    isModalOpen: false,
+    onModalStateChange: jest.fn(),
+    onRetry: jest.fn(),
+};
 
 describe('Plugin', () => {
     it('Does not render ResourceBrowserInput if render is false', async () => {
@@ -18,32 +43,7 @@ describe('Plugin', () => {
     });
 
     it('Does render ResourceBrowserInput if render is true', async () => {
-        const props = {
-            type: null,
-            modalTitle: 'Asset picker',
-            value: null,
-            isOtherSourceValue: false,
-            onChange: jest.fn(),
-            onClear: jest.fn(),
-            useResource: () => {
-                return {
-                    data: null,
-                    error: null,
-                    isLoading: false,
-                };
-            },
-            plugin: null,
-            pluginMode: null,
-            searchEnabled: false,
-            source: null,
-            sources: [],
-            isLoading: false,
-            error: null,
-            setSource: () => {},
-            isModalOpen: false,
-            onModalStateChange: () => {},
-            onRetry: () => {},
-        };
+        const props = baseProps;
         render(<PluginRender render={true} inline={false} {...props} />);
 
         await waitFor(() => {
@@ -52,36 +52,31 @@ describe('Plugin', () => {
     });
 
     it('Does render ResourceBrowserInlineButton if inline is true', async () => {
-        const props = {
-            type: null,
-            modalTitle: 'Asset picker',
-            value: null,
-            isOtherSourceValue: false,
-            onChange: jest.fn(),
-            onClear: jest.fn(),
-            useResource: () => {
-                return {
-                    data: null,
-                    error: null,
-                    isLoading: false,
-                };
-            },
-            plugin: null,
-            pluginMode: null,
-            searchEnabled: false,
-            source: null,
-            sources: [],
-            isLoading: false,
-            error: null,
-            setSource: () => {},
-            isModalOpen: false,
-            onModalStateChange: () => {},
-            onRetry: () => {},
-        };
+        const props = baseProps;
         render(<PluginRender render={true} inline={true} inlineType="image" {...props} />);
 
         await waitFor(() => {
             expect(RBInlineButton.ResourceBrowserInlineButton).toHaveBeenCalledWith({ ...props, inlineType: 'image' }, {});
         });
     });
+
+    it('Wraps content in AuthProvider when source requires auth', async () => {
+        const sourceWithAuth = {
+            id: '123',
+            type: 'dam' as ResourceBrowserPluginType,
+            configuration: {
+                authUrl: 'https://example.com/auth',
+                redirectUrl: 'https://example.com/redirect',
+                clientId: 'abc123',
+                scope: 'scope1',
+            },
+        };
+
+        const props = { ...baseProps, source: sourceWithAuth };
+        render(<PluginRender render={true} inline={false} {...props} />);
+
+        await waitFor(() => {
+            expect(AuthContext.AuthProvider).toHaveBeenCalledWith({ authConfig: sourceWithAuth, children: expect.anything() }, {});
+        });
+    });
 });

package/src/Plugin/Plugin.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { PluginRender, PluginRenderType } from './Plugin';
+
+export default {
+    title: 'Plugin renderer',
+    component: PluginRender,
+} as Meta<typeof PluginRender>;
+
+const noop = () => {};
+
+const Template: StoryFn<PluginRenderType> = (args) => <PluginRender {...args} />;
+
+export const WithoutAuth = Template.bind({});
+WithoutAuth.args = {
+    render: true,
+    inline: false,
+    type: null,
+    modalTitle: 'Test Plugin (No Auth)',
+    onRetry: noop,
+    useResource: () => ({ data: null, error: null, isLoading: false }),
+    source: {
+        id: 'source-no-auth',
+        type: 'dummy',
+        configuration: {},
+    },
+};
+
+export const WithAuth = Template.bind({});
+WithAuth.args = {
+    render: true,
+    inline: false,
+    type: null,
+    modalTitle: 'Test Plugin (With Auth)',
+    onRetry: noop,
+    useResource: () => ({ data: null, error: null, isLoading: false }),
+    source: {
+        id: 'source-with-auth',
+        type: 'dummy',
+        configuration: {
+            authUrl: 'https://example.com/auth',
+            redirectUrl: 'https://example.com/redirect',
+            clientId: 'client123',
+            scope: 'scope1 scope2',
+        },
+    },
+};
+
+export const InlineWithoutAuth = Template.bind({});
+InlineWithoutAuth.args = {
+    render: true,
+    inline: true,
+    inlineType: 'image',
+    type: null,
+    modalTitle: 'Test Inline Plugin (No Auth)',
+    onRetry: noop,
+    useResource: () => ({ data: null, error: null, isLoading: false }),
+    source: {
+        id: 'inline-source-no-auth',
+        type: 'dummy',
+        configuration: {},
+    },
+};
+
+export const InlineWithAuth = Template.bind({});
+InlineWithAuth.args = {
+    render: true,
+    inline: true,
+    inlineType: 'image',
+    type: null,
+    modalTitle: 'Test Inline Plugin (With Auth)',
+    onRetry: noop,
+    useResource: () => ({ data: null, error: null, isLoading: false }),
+    source: {
+        id: 'inline-source-with-auth',
+        type: 'dummy',
+        configuration: {
+            authUrl: 'https://example.com/auth',
+            redirectUrl: 'https://example.com/redirect',
+            clientId: 'client123',
+            scope: 'scope1 scope2',
+        },
+    },
+};
+
+export const NotRendered = Template.bind({});
+NotRendered.args = {
+    render: false,
+    inline: false,
+    type: null,
+    modalTitle: 'Should Not Render',
+    onRetry: noop,
+    source: null,
+};

package/src/Plugin/Plugin.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ResourceBrowserInput, ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
 import { ResourceBrowserInlineButton } from '../ResourceBrowserInlineButton/ResourceBrowserInlineButton';
 import { AuthProvider } from '../ResourceBrowserContext/AuthProvider';
-import { ResourceBrowserPluginType, InlineType } from '../types';
+import { ResourceBrowserPluginType, InlineType, ResourceBrowserSourceWithConfig } from '../types';
 
 /**
  *  This plugin component exsits to deal with React rules of Hooks stupidity.
@@ -19,17 +19,12 @@ export type PluginRenderType = ResourceBrowserInputProps & {
     onRetry: () => void;
 };
 export const PluginRender = ({ render, inline, inlineType, ...props }: PluginRenderType) => {
-    if (render) {
-        return (
-            <AuthProvider authConfig={props.source}>
-                {inline && inlineType ? (
-                    <ResourceBrowserInlineButton inlineType={inlineType} {...props} />
-                ) : (
-                    <ResourceBrowserInput {...props} />
-                )}
-            </AuthProvider>
-        );
-    } else {
-        return <></>;
-    }
+    if (!render) return <></>;
+
+    const requiresAuth = Boolean((props.source as ResourceBrowserSourceWithConfig)?.configuration?.authUrl);
+
+    const content =
+        inline && inlineType ? <ResourceBrowserInlineButton inlineType={inlineType} {...props} /> : <ResourceBrowserInput {...props} />;
+
+    return requiresAuth ? <AuthProvider authConfig={props.source}>{content}</AuthProvider> : content;
 };

package/src/index.spec.tsx

@@ -10,6 +10,9 @@ jest.spyOn(RBI, 'ResourceBrowserInput');
 
 import * as Plugin from './Plugin/Plugin';
 
+import * as useSources from './Hooks/useSources';
+jest.spyOn(useSources, 'useSources');
+
 var useSourceReloadMock = jest.fn();
 jest.mock('./Hooks/useSources', () => {
     const actual = jest.requireActual('./Hooks/useSources');
@@ -57,12 +60,14 @@ describe('Resource browser input', () => {
         renderResourceLauncher: jest.fn(),
     } as ResourceBrowserPlugin;
 
+    const plugins = [mockMatrixPlugin, mockDamPlugin];
+
     const renderComponent = (props: Partial<ResourceBrowserProps> = {}, searchEnabled?: boolean) => {
         return renderWithContext(
             <ResourceBrowser modalTitle="Asset picker" value={null} onChange={mockChange} onClear={mockOnClear} {...props} />,
             {
                 onRequestSources: mockRequestSources,
-                plugins: [mockMatrixPlugin, mockDamPlugin],
+                plugins,
                 searchEnabled: !!searchEnabled,
             },
         );
@@ -76,6 +81,32 @@ describe('Resource browser input', () => {
         };
     };
 
+    it('allowedPlugins will restrict which plugins are used', async () => {
+        // Works as expected with no restriction
+        (useSources.useSources as jest.Mock).mockClear();
+        renderComponent();
+        let expectedPlugins = plugins;
+        await waitFor(() => {
+            expect(useSources.useSources).toHaveBeenLastCalledWith(
+                expect.objectContaining({
+                    plugins: expectedPlugins,
+                }),
+            );
+        });
+
+        // Works as expected with restrictions
+        (useSources.useSources as jest.Mock).mockClear();
+        renderComponent({ allowedPlugins: ['matrix'] });
+        expectedPlugins = plugins.filter((plugin) => plugin.type === 'matrix');
+        await waitFor(() => {
+            expect(useSources.useSources).toHaveBeenLastCalledWith(
+                expect.objectContaining({
+                    plugins: expectedPlugins,
+                }),
+            );
+        });
+    });
+
     it('If only one valid source is provided will default to its Source and Plugin', async () => {
         const source = mockSource({ type: 'dam' });
         mockRequestSources.mockResolvedValueOnce([source]);

package/src/index.stories.tsx

@@ -86,6 +86,13 @@ SingleSource.args = {
     singleSource: true,
 };
 
+export const RestrictedSource = Template.bind({});
+RestrictedSource.args = {
+    ...Primary.args,
+    allowedPlugins: ['matrix'],
+    searchEnabled: true,
+};
+
 export const SearchEnabled = Template.bind({});
 SearchEnabled.args = {
     ...Primary.args,

package/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect, useCallback } from 'react';
+import React, { useState, useContext, useEffect, useCallback, useMemo } from 'react';
 
 import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
 import {
@@ -7,6 +7,7 @@ import {
     ResourceBrowserUnresolvedResource,
     ResourceBrowserResource,
     ResourceBrowserSourceWithPlugin,
+    ResourceBrowserPluginType,
 } from './types';
 import { useSources } from './Hooks/useSources';
 import { PluginRender } from './Plugin/Plugin';
@@ -31,6 +32,7 @@ export * from './types';
 export type ResourceBrowserProps = {
     modalTitle: string;
     allowedTypes?: string[];
+    allowedPlugins?: ResourceBrowserPluginType[];
     isDisabled?: boolean;
     value: ResourceBrowserUnresolvedResource | null;
     inline?: boolean; // Will render open button only, no input / showing of existing selection
@@ -40,12 +42,19 @@ export type ResourceBrowserProps = {
 };
 
 export const ResourceBrowser = (props: ResourceBrowserProps) => {
-    const { value, inline, inlineType } = props;
+    const { value, inline, inlineType, allowedPlugins } = props;
     const [error, setError] = useState<Error | null>(null);
-    const { onRequestSources, searchEnabled, plugins } = useContext(ResourceBrowserContext);
+    const { onRequestSources, searchEnabled, plugins: allPlugins } = useContext(ResourceBrowserContext);
 
     const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
     const [source, setSource] = useState<ResourceBrowserSourceWithPlugin | null>(null);
+    const plugins = useMemo(() => {
+        // Allow some usages e.g. plugin specific like MatrixAssetWidget restrict what plugins show
+        if (!allowedPlugins) return allPlugins; // No restrictions, return all
+        return allPlugins.filter((plugin) => {
+            return allowedPlugins.includes(plugin.type); // Restrict based on plugin type
+        });
+    }, [allowedPlugins, allPlugins]);
     const [mode, setMode] = useState<PluginLaunchMode | null>(null);
     const { data: sources, isLoading, error: sourcesError, reload: reloadSources } = useSources({ onRequestSources, plugins });
     const plugin = source?.plugin || null;