@squiz/resource-browser 1.66.3 → 1.67.1

package/src/Icons/CircledLoopIcon.tsx

@@ -0,0 +1,14 @@
+import React, { SVGAttributes } from 'react';
+
+type CircledLoopIconProps = SVGAttributes<SVGElement>;
+
+export const CircledLoopIcon = (props: CircledLoopIconProps) => {
+  return (
+    <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8 0.5C3.86 0.5 0.5 3.86 0.5 8C0.5 12.14 3.86 15.5 8 15.5C12.14 15.5 15.5 12.14 15.5 8C15.5 3.86 12.14 0.5 8 0.5ZM8 14C4.6925 14 2 11.3075 2 8C2 4.6925 4.6925 2 8 2C11.3075 2 14 4.6925 14 8C14 11.3075 11.3075 14 8 14ZM11.1275 10.07L10.3025 9.245C10.835 8.2475 10.7 6.9875 9.86 6.1475C9.3425 5.63 8.675 5.375 8 5.375C7.9775 5.375 7.955 5.3825 7.9325 5.3825L8.75 6.2L7.955 6.995L5.8325 4.8725L7.955 2.75L8.75 3.545L8.03 4.265C8.9825 4.2725 9.9275 4.625 10.655 5.345C11.93 6.6275 12.0875 8.615 11.1275 10.07ZM10.1675 11.1275L8.045 13.25L7.25 12.455L7.9625 11.7425C7.0175 11.735 6.0725 11.3675 5.3525 10.6475C4.07 9.365 3.9125 7.385 4.8725 5.93L5.6975 6.755C5.165 7.7525 5.3 9.0125 6.14 9.8525C6.665 10.3775 7.3625 10.6325 8.06 10.61L7.25 9.8L8.045 9.005L10.1675 11.1275Z"
+        fill="#949494"
+      />
+    </svg>
+  );
+};

package/src/ResourceBrowserContext/ResourceBrowserContext.spec.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { ResourceBrowserContext, ResourceBrowserContextProps } from './ResourceBrowserContext';
-import { mockSource } from '../__mocks__/MockModels';
+import {
+  ResourceBrowserContext,
+  ResourceBrowserContextProps,
+  ResourceBrowserContextProvider,
+} from './ResourceBrowserContext';
+import { mockResource, mockSource } from '../__mocks__/MockModels';
 
 describe('ResourceBrowserContext', () => {
   it('Should render with expected default value', () => {
-    let defaultContext: ResourceBrowserContextProps | null = null;
+    let defaultContext: ResourceBrowserContextProps | undefined;
 
     render(
       <ResourceBrowserContext.Consumer>
@@ -29,4 +33,90 @@ describe('ResourceBrowserContext', () => {
     );
     expect(() => defaultContext?.onRequestSources()).toThrow('onRequestSources has not been configured.');
   });
+
+  it('Should add memoization to data fetching functions', async () => {
+    let context: ResourceBrowserContextProps | undefined;
+    const sources = [mockSource({ id: '10' }), mockSource({ id: '20' })];
+    const resources = [mockResource({ id: '100' }), mockResource({ id: '200' })];
+    const onRequestSources = jest.fn().mockResolvedValue(sources);
+    const onRequestResource = jest.fn().mockResolvedValue(resources[0]);
+    const onRequestChildren = jest.fn().mockResolvedValue(resources);
+
+    render(
+      <ResourceBrowserContextProvider
+        value={{
+          onRequestSources,
+          onRequestResource,
+          onRequestChildren,
+        }}
+      >
+        <ResourceBrowserContext.Consumer>
+          {(value) => {
+            context = value;
+            return null;
+          }}
+        </ResourceBrowserContext.Consumer>
+      </ResourceBrowserContextProvider>,
+    );
+
+    const result = await Promise.all([
+      context?.onRequestSources?.(),
+      context?.onRequestSources?.(),
+      context?.onRequestResource?.({ resource: '100', source: '10' }),
+      context?.onRequestResource?.({ resource: '100', source: '10' }),
+      context?.onRequestResource?.({ resource: '200', source: '20' }),
+      context?.onRequestChildren?.(sources[0], null),
+      context?.onRequestChildren?.(sources[0], null),
+      context?.onRequestChildren?.(sources[1], null),
+    ]);
+
+    // mocked data should be returned for all invocations of memoized function
+    expect(result).toEqual([
+      sources,
+      sources,
+      resources[0],
+      resources[0],
+      resources[0],
+      resources,
+      resources,
+      resources,
+    ]);
+
+    // memoized function should only be called when different arguments are provided
+    expect(onRequestSources).toBeCalledTimes(1);
+    expect(onRequestResource).toBeCalledTimes(2);
+    expect(onRequestChildren).toBeCalledTimes(2);
+  });
+
+  it('Should not cache failures from data fetching functions', async () => {
+    let context: ResourceBrowserContextProps | undefined;
+    const sources = [mockSource({ id: '10' })];
+    const onRequestSources = jest
+      .fn()
+      .mockRejectedValueOnce(new Error('Cannot fetch sources.'))
+      .mockResolvedValueOnce(sources);
+    const onRequestResource = jest.fn();
+    const onRequestChildren = jest.fn();
+
+    render(
+      <ResourceBrowserContextProvider
+        value={{
+          onRequestSources,
+          onRequestResource,
+          onRequestChildren,
+        }}
+      >
+        <ResourceBrowserContext.Consumer>
+          {(value) => {
+            context = value;
+            return null;
+          }}
+        </ResourceBrowserContext.Consumer>
+      </ResourceBrowserContextProvider>,
+    );
+
+    await expect(context?.onRequestSources?.()).rejects.toThrow(new Error('Cannot fetch sources.'));
+    await expect(context?.onRequestSources?.()).resolves.toEqual(sources);
+    expect(onRequestSources).toBeCalledTimes(2);
+  });
 });

package/src/ResourceBrowserContext/ResourceBrowserContext.tsx

@@ -0,0 +1,56 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+import { OnRequestResource, OnRequestSources, OnRequestChildren } from '../types';
+import pMemoize from 'p-memoize';
+import ExpiryMap from 'expiry-map';
+
+export type ResourceBrowserContextProps = {
+  onRequestSources: OnRequestSources;
+  onRequestChildren: OnRequestChildren;
+  onRequestResource: OnRequestResource;
+};
+
+/**
+ * @internal Direct usage of this object is discouraged. It will be privated in a future major version.
+ * Please use ResourceBrowserContextProvider instead.
+ */
+export const ResourceBrowserContext = React.createContext<ResourceBrowserContextProps>({
+  onRequestSources: () => {
+    throw new Error('onRequestSources has not been configured.');
+  },
+  onRequestChildren: () => {
+    throw new Error('onRequestChildren has not been configured.');
+  },
+  onRequestResource: () => {
+    throw new Error('onRequestResource has not been configured.');
+  },
+});
+
+export const ResourceBrowserContextProvider = (props: PropsWithChildren<{ value: ResourceBrowserContextProps }>) => {
+  const CACHE_DURATION = 30000; // 30 seconds
+  const {
+    value: { onRequestSources, onRequestChildren, onRequestResource, ...other },
+    children,
+  } = props;
+  const cache = new ExpiryMap(CACHE_DURATION);
+  const memoized = useMemo(
+    () => ({
+      onRequestSources: pMemoize(onRequestSources, {
+        cache,
+        cacheKey: () => 'onRequestSources',
+      }),
+      onRequestChildren: pMemoize(onRequestChildren, {
+        cache,
+        cacheKey: ([source, resource]) => `onRequestChildren.${source.id}.${resource?.id}`,
+      }),
+      onRequestResource: pMemoize(onRequestResource, {
+        cache,
+        cacheKey: ([reference]) => `onRequestResource.${reference.source}.${reference.resource}`,
+      }),
+    }),
+    [onRequestSources, onRequestChildren, onRequestResource],
+  );
+
+  return (
+    <ResourceBrowserContext.Provider value={{ ...memoized, ...other }}>{children}</ResourceBrowserContext.Provider>
+  );
+};