@squiz/resource-browser 3.3.10 → 3.3.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.3.11
+
+### Patch Changes
+
+-   6c4d5b3: Support for proxying all dam requests
+
 ## 3.3.10
 
 ### Patch Changes

package/lib/Hooks/useAuth.d.ts

@@ -4,4 +4,5 @@ export declare const useAuth: (authConfig: AuthenticationConfiguration | undefin
     isAuthenticated: boolean;
     login: () => void;
     refreshAccessToken: () => Promise<string>;
+    alwaysUseResourceRequestProxy: boolean;
 };

package/lib/Hooks/useAuth.js

@@ -61,6 +61,11 @@ const useAuth = (authConfig) => {
         setIsAuthenticated(!!token);
     };
     (0, react_1.useEffect)(() => {
+        // Don't run internal processes if we are always using the resource request proxy
+        if (authConfig?.alwaysUseResourceRequestProxy) {
+            // Consistent return value for cleanup function
+            return () => { };
+        }
         const handleTabChange = () => {
             if (!document.hidden) {
                 syncAuthState();
@@ -75,15 +80,30 @@ const useAuth = (authConfig) => {
         };
     }, []);
     (0, react_1.useEffect)(() => {
+        // Don't run internal processes if we are always using the resource request proxy
+        if (authConfig?.alwaysUseResourceRequestProxy) {
+            return;
+        }
         refreshAccessToken().catch(() => {
             setIsAuthenticated(false);
         });
     }, [authConfig, refreshAccessToken]);
+    // Return some dummy data if we are always using the resource request proxy
+    if (authConfig?.alwaysUseResourceRequestProxy) {
+        return {
+            authToken: null,
+            isAuthenticated: true,
+            login: () => { },
+            refreshAccessToken: () => Promise.resolve(''),
+            alwaysUseResourceRequestProxy: true,
+        };
+    }
     return {
         authToken,
         isAuthenticated,
         login: handleLogin,
         refreshAccessToken,
+        alwaysUseResourceRequestProxy: false,
     };
 };
 exports.useAuth = useAuth;

package/lib/Plugin/Plugin.js

@@ -31,7 +31,8 @@ const AuthProvider_1 = require("../ResourceBrowserContext/AuthProvider");
 exports.PluginRender = (0, react_1.forwardRef)(({ render, inline, inlineType, ...props }, forwardRef) => {
     if (!render)
         return react_1.default.createElement(react_1.default.Fragment, null);
-    const requiresAuth = Boolean(props.source?.configuration?.authUrl);
+    const requiresAuth = Boolean(props.source?.configuration?.authUrl) ||
+        Boolean(props.source?.configuration?.alwaysUseResourceRequestProxy);
     const content = inline && inlineType ? (react_1.default.createElement(ResourceBrowserInlineButton_1.ResourceBrowserInlineButton, { ref: forwardRef, 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;
 });

package/lib/ResourceBrowserContext/AuthProvider.d.ts

@@ -5,6 +5,7 @@ interface AuthContextProps {
     isAuthenticated: boolean;
     login: () => void;
     refreshAccessToken: () => Promise<any>;
+    alwaysUseResourceRequestProxy: boolean;
 }
 export declare const AuthContext: React.Context<AuthContextProps | undefined>;
 export declare const useAuthContext: () => AuthContextProps;

package/lib/types.d.ts

@@ -8,6 +8,7 @@ export type AuthenticationConfiguration = {
     redirectUrl: string;
     clientId: string;
     scope: string;
+    alwaysUseResourceRequestProxy?: boolean;
 };
 export interface ResourceBrowserSource {
     name?: string;

package/package.json

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

package/src/Hooks/useAuth.spec.tsx

@@ -29,9 +29,9 @@ describe('useAuth', () => {
         await waitFor(() => {
             expect(result.current.authToken).toBe('initialAuthToken');
             expect(result.current.isAuthenticated).toBe(true);
+            expect(result.current.alwaysUseResourceRequestProxy).toBe(false);
         });
     });
-
     it('should do nothing if missing crucial props', async () => {
         const authConfigMissingProps = {
             clientId: 'example-client-id',
@@ -285,7 +285,7 @@ describe('useAuth', () => {
     });
 
     it('should throw an error when getCookieValue throws unexpectedly', () => {
-        jest.spyOn(authUtils, 'getCookieValue').mockImplementation(() => {
+        const getCookieValueSpy = jest.spyOn(authUtils, 'getCookieValue').mockImplementation(() => {
             throw new Error('Unexpected error');
         });
         const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
@@ -293,5 +293,48 @@ describe('useAuth', () => {
         expect(() => renderHook(() => useAuth(authConfig))).toThrow('Unexpected error');
 
         consoleSpy.mockRestore();
+        getCookieValueSpy.mockRestore();
+    });
+
+    describe('alwaysUseResourceRequestProxy', () => {
+        const authConfigAlwaysUseResourceRequestProxy = { ...authConfig, alwaysUseResourceRequestProxy: true };
+        it('should initialize with alwaysUseResourceRequestProxy true', async () => {
+            const { result } = renderHook(() => useAuth(authConfigAlwaysUseResourceRequestProxy));
+
+            await waitFor(() => {
+                expect(result.current.authToken).toBe(null);
+                expect(result.current.isAuthenticated).toBe(true);
+                expect(result.current.alwaysUseResourceRequestProxy).toBe(true);
+            });
+
+            // Check that refreshAccessToken is not called when authConfig changes
+            // Set up a spy and test that refreshAccessToken is not called when authConfig changes
+            const refreshAccessTokenSpy = jest.spyOn(authUtils, 'refreshAccessToken');
+
+            // Change authConfig and rerender
+            const newConfig = { ...authConfigAlwaysUseResourceRequestProxy, clientId: 'changed-client-id' };
+            const { rerender } = renderHook((props) => useAuth(props), { initialProps: authConfigAlwaysUseResourceRequestProxy });
+            rerender(newConfig);
+
+            // refreshAccessToken should not be called
+            expect(refreshAccessTokenSpy).not.toHaveBeenCalled();
+        });
+
+        it('should not attach event listeners when alwaysUseResourceRequestProxy is true', async () => {
+            mockGetCookieValue.mockReturnValueOnce(null);
+            const { result } = renderHook(() => useAuth(authConfigAlwaysUseResourceRequestProxy));
+
+            mockGetCookieValue.mockReturnValue('visibleAuthToken');
+
+            Object.defineProperty(document, 'hidden', { configurable: true, value: false });
+
+            act(() => {
+                document.dispatchEvent(new Event('visibilitychange'));
+            });
+
+            await waitFor(() => {
+                expect(result.current.authToken).toBe(null);
+            });
+        });
     });
 });

package/src/Hooks/useAuth.ts

@@ -65,6 +65,12 @@ export const useAuth = (authConfig: AuthenticationConfiguration | undefined) =>
     };
 
     useEffect(() => {
+        // Don't run internal processes if we are always using the resource request proxy
+        if (authConfig?.alwaysUseResourceRequestProxy) {
+            // Consistent return value for cleanup function
+            return () => {};
+        }
+
         const handleTabChange = () => {
             if (!document.hidden) {
                 syncAuthState();
@@ -82,15 +88,32 @@ export const useAuth = (authConfig: AuthenticationConfiguration | undefined) =>
     }, []);
 
     useEffect(() => {
+        // Don't run internal processes if we are always using the resource request proxy
+        if (authConfig?.alwaysUseResourceRequestProxy) {
+            return;
+        }
+
         refreshAccessToken().catch(() => {
             setIsAuthenticated(false);
         });
     }, [authConfig, refreshAccessToken]);
 
+    // Return some dummy data if we are always using the resource request proxy
+    if (authConfig?.alwaysUseResourceRequestProxy) {
+        return {
+            authToken: null,
+            isAuthenticated: true,
+            login: () => {},
+            refreshAccessToken: () => Promise.resolve(''),
+            alwaysUseResourceRequestProxy: true,
+        };
+    }
+
     return {
         authToken,
         isAuthenticated,
         login: handleLogin,
         refreshAccessToken,
+        alwaysUseResourceRequestProxy: false,
     };
 };

package/src/Plugin/Plugin.spec.tsx

@@ -81,4 +81,21 @@ describe('Plugin', () => {
             expect(AuthContext.AuthProvider).toHaveBeenCalledWith({ authConfig: sourceWithAuth, children: expect.anything() }, {});
         });
     });
+
+    it('Wraps content in AuthProvider when alwaysUseResourceRequestProxy is true', async () => {
+        const sourceWithAuth = {
+            id: '123',
+            type: 'dam' as ResourceBrowserPluginType,
+            configuration: {
+                alwaysUseResourceRequestProxy: true,
+            },
+        };
+
+        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.tsx

@@ -22,7 +22,9 @@ export type PluginRenderType = ResourceBrowserInputProps & {
 export const PluginRender = forwardRef<HTMLButtonElement, PluginRenderType>(({ render, inline, inlineType, ...props }, forwardRef) => {
     if (!render) return <></>;
 
-    const requiresAuth = Boolean((props.source as ResourceBrowserSourceWithConfig)?.configuration?.authUrl);
+    const requiresAuth =
+        Boolean((props.source as ResourceBrowserSourceWithConfig)?.configuration?.authUrl) ||
+        Boolean((props.source as ResourceBrowserSourceWithConfig)?.configuration?.alwaysUseResourceRequestProxy);
 
     const content =
         inline && inlineType ? (

package/src/ResourceBrowserContext/AuthProvider.spec.tsx

@@ -27,6 +27,7 @@ describe('AuthContext', () => {
         isAuthenticated: true,
         login: jest.fn(),
         refreshAccessToken: jest.fn(),
+        alwaysUseResourceRequestProxy: false,
     };
 
     beforeEach(() => {
@@ -36,12 +37,13 @@ describe('AuthContext', () => {
 
     it('should provide auth state and functions to consumers', async () => {
         const TestComponent = () => {
-            const { authToken, isAuthenticated, login } = useAuthContext();
+            const { authToken, isAuthenticated, login, alwaysUseResourceRequestProxy } = useAuthContext();
             return (
                 <div>
                     <span>{`Token: ${authToken}`}</span>
                     <span>{`Authenticated: ${isAuthenticated}`}</span>
                     <button onClick={login}>Login</button>
+                    <span>{`Always use resource request proxy: ${alwaysUseResourceRequestProxy}`}</span>
                 </div>
             );
         };
@@ -54,6 +56,7 @@ describe('AuthContext', () => {
 
         expect(screen.getByText(/Token: testAuthToken/)).toBeInTheDocument();
         expect(screen.getByText(/Authenticated: true/)).toBeInTheDocument();
+        expect(screen.getByText(/Always use resource request proxy: false/)).toBeInTheDocument();
 
         fireEvent.click(screen.getByText('Login'));
 

package/src/ResourceBrowserContext/AuthProvider.tsx

@@ -7,6 +7,7 @@ interface AuthContextProps {
     isAuthenticated: boolean;
     login: () => void;
     refreshAccessToken: () => Promise<any>;
+    alwaysUseResourceRequestProxy: boolean;
 }
 
 export const AuthContext = createContext<AuthContextProps | undefined>(undefined);

package/src/types.ts

@@ -10,6 +10,9 @@ export type AuthenticationConfiguration = {
     redirectUrl: string;
     clientId: string;
     scope: string;
+
+    // Route all DAM requests through the DAM proxy
+    alwaysUseResourceRequestProxy?: boolean;
 };
 
 export interface ResourceBrowserSource {