@squiz/resource-browser 3.2.3 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 3.3.1
+
+### Patch Changes
+
+-   c8240b6: Minor styling updates
+-   Updated dependencies [c8240b6]
+    -   @squiz/resource-browser-ui-lib@1.2.1
+
+## 3.3.0
+
+### Minor Changes
+
+-   9e6268d: Allow users to restrict plugin usage
+
 ## 3.2.3
 
 ### Patch Changes

package/lib/ResourceLauncher/ResourceLauncher.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const sds_1 = require("@squiz/sds");
 const types_1 = require("../types");
 function ResourceLauncher({ sources, onSourceSelect }) {
     return (react_1.default.createElement("div", { className: "overflow-y-auto 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" },
@@ -11,7 +12,9 @@ function ResourceLauncher({ sources, onSourceSelect }) {
             const SourceLauncher = source.plugin.renderResourceLauncher();
             return (react_1.default.createElement("li", { key: index, className: "flex items-stretch relative" },
                 react_1.default.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${source.plugin?.type} w-full` },
-                    react_1.default.createElement(SourceLauncher, { source: source, onSearch: (query) => onSourceSelect(source, { type: types_1.PluginLaunchModeType.Search, args: { query } }), onBrowse: (browseTo) => onSourceSelect(source, { type: types_1.PluginLaunchModeType.Browse, args: { browseTo } }) }))));
+                    react_1.default.createElement(SourceLauncher, { source: source, onSearch: (query) => onSourceSelect(source, { type: types_1.PluginLaunchModeType.Search, args: { query } }), onBrowse: (browseTo) => onSourceSelect(source, { type: types_1.PluginLaunchModeType.Browse, args: { browseTo } }) }),
+                    sources.length > 1 && index < sources.length - 1 && (react_1.default.createElement("div", { className: "pt-3 pb-3" },
+                        react_1.default.createElement(sds_1.Divider, null))))));
         }))));
 }
 exports.default = ResourceLauncher;

package/lib/index.css

@@ -5201,6 +5201,9 @@
 .squiz-rb-scope .rounded-lg:not(.squiz-rb-plugin *) {
   border-radius: 0.5rem;
 }
+.squiz-rb-scope .border:not(.squiz-rb-plugin *) {
+  border-width: 1px;
+}
 .squiz-rb-scope .border-0:not(.squiz-rb-plugin *) {
   border-width: 0px;
 }
@@ -5364,6 +5367,9 @@
 .squiz-rb-scope .pb-0:not(.squiz-rb-plugin *) {
   padding-bottom: 0px;
 }
+.squiz-rb-scope .pb-3:not(.squiz-rb-plugin *) {
+  padding-bottom: 0.75rem;
+}
 .squiz-rb-scope .pb-4:not(.squiz-rb-plugin *) {
   padding-bottom: 1rem;
 }
@@ -5893,7 +5899,12 @@
   width: 48px;
 }
 .squiz-rb-scope .sourceLauncher:not(.squiz-rb-plugin *) {
-  position: relative;
+  margin-bottom: 0.5rem;
+}
+.squiz-rb-scope .sourceLauncher__top-row:not(.squiz-rb-plugin *) {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
   margin-bottom: 0.5rem;
 }
 .squiz-rb-scope .sourceLauncher__title:not(.squiz-rb-plugin *) {
@@ -5904,10 +5915,8 @@
   color: #4f4f4f;
 }
 .squiz-rb-scope .sourceLauncher__browse-group:not(.squiz-rb-plugin *) {
-  position: absolute;
-  right: 0;
-  top: 0;
   display: flex;
+  align-items: center;
 }
 .squiz-rb-scope .sourceLauncher__or:not(.squiz-rb-plugin *) {
   display: flex;

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.3",
+    "version": "3.3.1",
     "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.2",
-        "@squiz/resource-browser-ui-lib": "^1.0.0",
+        "@squiz/resource-browser-ui-lib": "^1.2.1",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",

package/src/ResourceLauncher/ResourceLauncher.spec.tsx

@@ -23,6 +23,20 @@ describe('ResourceLauncher', () => {
         expect(screen.queryAllByText('Resource Launcher UI').length).toEqual(2);
     });
 
+    it('should render the divider only for source items except the last one', () => {
+        const sources = [
+            mockSourceWithPlugin({ plugin: defaultPlugin }),
+            mockSourceWithPlugin({ id: '2', plugin: defaultPlugin }),
+            mockSourceWithPlugin({ id: '3', plugin: defaultPlugin }),
+        ];
+        const onSourceSelect = jest.fn();
+        const { container } = render(<ResourceLauncher sources={sources} onSourceSelect={onSourceSelect} />);
+
+        const dividerContainers = container.querySelectorAll('div.pt-3.pb-3');
+        // With 3 sources, there should be 2 dividers (in the first two <li>s)
+        expect(dividerContainers.length).toEqual(sources.length - 1);
+    });
+
     it('onSourceSelect query', async () => {
         const sources = [mockSourceWithPlugin({ plugin: defaultPlugin })];
         const onSourceSelect = jest.fn();

package/src/ResourceLauncher/ResourceLauncher.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import ResourceLauncher from './ResourceLauncher';
+import sampleSources from '../__mocks__/sample-sources.json';
+import { ResourceBrowserSourceWithPlugin, PluginLaunchMode, PluginLaunchModeType } from '../types';
+
+const DummyLauncher = ({
+    source,
+    onSearch,
+    onBrowse,
+}: {
+    source: any;
+    onSearch: (query: string) => void;
+    onBrowse: (browseTo: string) => void;
+}) => (
+    <div className="p-2 border rounded">
+        <div>{source.name}</div>
+        <button onClick={() => onSearch('sample query')} className="mr-2">
+            Search
+        </button>
+        <button onClick={() => onBrowse('sample browse')}>Browse</button>
+    </div>
+);
+
+const sourcesWithDummyPlugin = (sampleSources as any[]).map((source) => ({
+    ...source,
+    plugin: {
+        ...source.plugin,
+        type: source.plugin?.type || 'dummy',
+        // renderResourceLauncher should return a component. Here we return a function that renders DummyLauncher.
+        renderResourceLauncher: () => DummyLauncher,
+    },
+})) as ResourceBrowserSourceWithPlugin[];
+
+export default {
+    title: 'Resource Launcher',
+    component: ResourceLauncher,
+} as Meta<typeof ResourceLauncher>;
+
+const Template: StoryFn<typeof ResourceLauncher> = (args) => {
+    return (
+        <div className="flex justify-center m-3">
+            <ResourceLauncher
+                {...args}
+                sources={sourcesWithDummyPlugin}
+                onSourceSelect={(source, mode: PluginLaunchMode) => {
+                    console.log(`Source ${source?.name} / ${source.id} was selected with mode:`, mode);
+                }}
+            />
+        </div>
+    );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {};

package/src/ResourceLauncher/ResourceLauncher.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Divider } from '@squiz/sds';
 import { ResourceBrowserSource, ResourceBrowserSourceWithPlugin, PluginLaunchMode, PluginLaunchModeType } from '../types';
 
 interface ResourceLauncherProps {
@@ -23,6 +24,11 @@ function ResourceLauncher({ sources, onSourceSelect }: ResourceLauncherProps) {
                                         onSourceSelect(source, { type: PluginLaunchModeType.Browse, args: { browseTo } })
                                     }
                                 />
+                                {sources.length > 1 && index < sources.length - 1 && (
+                                    <div className="pt-3 pb-3">
+                                        <Divider />
+                                    </div>
+                                )}
                             </div>
                         </li>
                     );

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;