@squiz/resource-browser 3.1.0-rc.3 → 3.1.0-rc.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.1.0-rc.4
+
+### Patch Changes
+
+-   6503eba: clean selected mode on modal close
+
 ## 3.1.0-rc.3
 
 ### Patch Changes

package/lib/ResourcePicker/States/Selected.js

@@ -13,7 +13,7 @@ const SelectedState = ({ resource, showThumbnail, icon, label, description, isDi
         isOpen: isModalOpen,
         onOpenChange: onModalStateChange,
     };
-    const replaceAsset = (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: isModalOpen && onModalStateChange ? modalController : undefined, showLabel: false, label: "Replace selection", containerClasses: "text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed", icon: react_1.default.createElement(CircledLoopIcon_1.CircledLoopIcon, { "aria-hidden": true, className: "m-1" }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, resourcePickerContainer));
+    const replaceAsset = (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: modalController, showLabel: false, label: "Replace selection", containerClasses: "text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed", icon: react_1.default.createElement(CircledLoopIcon_1.CircledLoopIcon, { "aria-hidden": true, className: "m-1" }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, resourcePickerContainer));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         showThumbnail && resource.squizImage ? (react_1.default.createElement("div", { className: "checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded" },
             react_1.default.createElement("img", { src: resource.squizImage.imageVariations.original.url || resource.url, className: "w-full h-full object-cover object-center", alt: resource.squizImage.name || resource.name }))) : (react_1.default.createElement("div", { className: "w-4 h-4 mt-1 flex self-start overflow-hidden" }, icon)),

package/lib/index.js

@@ -102,6 +102,9 @@ const ResourceBrowser = (props) => {
             setSource(null);
             setMode(null);
         }
+        else if (!isModalOpen) {
+            setMode(null);
+        }
     }, [sources, isModalOpen]);
     // Reset function to allow user manual reload if sources fail in inline usage
     const handleReset = (0, react_1.useCallback)(() => {

package/package.json

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

package/src/ResourceBrowserInput/ResourceBrowserInput.spec.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { render, act, fireEvent, screen, waitFor } from '@testing-library/react';
 import { ResourceBrowserInput, ResourceBrowserInputProps } from './ResourceBrowserInput';
 import { mockSource, mockResource } from '../__mocks__/MockModels';
@@ -18,7 +18,7 @@ describe('Resource browser input', () => {
     const mockSetSource = jest.fn();
     const mockOnModalStateChange = jest.fn();
     const renderComponent = (props: Partial<ResourceBrowserInputProps> = {}) => {
-        render(
+        return render(
             <ResourceBrowserInput
                 modalTitle="Asset picker"
                 value={null}
@@ -158,11 +158,16 @@ describe('Resource browser input', () => {
                 },
             };
 
-            renderComponent({ value: { sourceId: source.id, resourceId: '100' }, plugin: plugin as ResourceBrowserPlugin });
+            renderComponent({
+                value: { sourceId: source.id, resourceId: '100' },
+                plugin: plugin as ResourceBrowserPlugin,
+            });
 
             await waitFor(() => expect(screen.queryByLabelText('Loading selection')).not.toBeInTheDocument());
             await act(() => fireEvent.click(screen.getByRole('button', { name: 'Replace selection' })));
-            expect(screen.getByRole('button', { name: 'Close Asset picker dialog' })).toBeInTheDocument();
+
+            // Modal index state change handler was instructed to open
+            expect(mockOnModalStateChange).toHaveBeenCalledWith(true);
         });
 
         it.each([

package/src/ResourcePicker/States/Selected.tsx

@@ -36,7 +36,7 @@ export const SelectedState = ({
     };
     const replaceAsset = (
         <ModalTrigger
-            overlayTriggerState={isModalOpen && onModalStateChange ? modalController : undefined}
+            overlayTriggerState={modalController}
             showLabel={false}
             label="Replace selection"
             containerClasses="text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed"

package/src/index.spec.tsx

@@ -8,6 +8,20 @@ import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserSourceWith
 import * as RBI from './ResourceBrowserInput/ResourceBrowserInput';
 jest.spyOn(RBI, 'ResourceBrowserInput');
 
+var useSourceReloadMock = jest.fn();
+jest.mock('./Hooks/useSources', () => {
+    const actual = jest.requireActual('./Hooks/useSources');
+    return {
+        useSources: jest.fn((...args) => {
+            const actualResult = actual.useSources(...args);
+            return {
+                ...actualResult,
+                reload: useSourceReloadMock,
+            };
+        }),
+    };
+});
+
 describe('Resource browser input', () => {
     const mockChange = jest.fn();
     const mockOnClear = jest.fn();
@@ -366,7 +380,7 @@ describe('Resource browser input', () => {
         });
 
         await waitFor(() => {
-            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+            expect(RBI.ResourceBrowserInput).toHaveBeenLastCalledWith(
                 expect.objectContaining({
                     source: calculatedSources[0],
                     plugin: mockDamPlugin,
@@ -375,4 +389,59 @@ describe('Resource browser input', () => {
             );
         });
     });
+
+    it('onModalStateChange called with false will reset the Mode', async () => {
+        const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
+
+        renderComponent({ value: { sourceId: sourcesInput[0].id, resourceId: '123456' } });
+
+        // Select a component and plugin mode
+        (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0].setSource(sourcesInput[0], { type: 'browse' });
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    pluginMode: {
+                        type: 'browse',
+                    },
+                }),
+                {},
+            );
+        });
+
+        // Invoke modal close callback
+        const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        act(() => {
+            onModalStateChange(false);
+        });
+
+        // Expect the mode to be reset
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenLastCalledWith(
+                expect.objectContaining({
+                    pluginMode: null,
+                }),
+                {},
+            );
+        });
+    });
+
+    it('onRetry reloads sources', async () => {
+        const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
+
+        renderComponent({ value: { sourceId: sourcesInput[0].id, resourceId: '123456' } });
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalled();
+        });
+
+        const { onRetry } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        act(() => {
+            onRetry();
+        });
+
+        await waitFor(() => {
+            expect(useSourceReloadMock).toHaveBeenCalled();
+        });
+    });
 });

package/src/index.tsx

@@ -106,6 +106,8 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
         if (!isModalOpen && !value && (sources?.length > 1 || searchEnabled)) {
             setSource(null);
             setMode(null);
+        } else if (!isModalOpen) {
+            setMode(null);
         }
     }, [sources, isModalOpen]);