@squiz/resource-browser 1.69.2 → 2.1.9-rc.0

package/src/Hooks/useResource.spec.ts

@@ -1,61 +0,0 @@
-import { renderHook, waitFor } from '@testing-library/react';
-import { mockResource } from '../__mocks__/MockModels';
-import { useResource, useResources } from './useResource';
-
-describe('useResource', () => {
-  it('Should load the resource', async () => {
-    const resource = mockResource();
-    const reference = { source: 'source-id', resource: 'resource-id' };
-    const onRequestResource = jest.fn().mockResolvedValue(resource);
-    const { result } = renderHook(() => useResource({ onRequestResource, reference }));
-
-    expect(result.current.isLoading).toBe(true);
-    expect(result.current.error).toBe(null);
-    expect(result.current.data).toEqual(null);
-
-    await waitFor(() => expect(result.current.isLoading).toBe(false));
-
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.data).toBe(resource);
-  });
-
-  it('Should not load the resource if no reference provided', async () => {
-    const reference = null;
-    const onRequestResource = jest.fn();
-    const { result } = renderHook(() => useResource({ onRequestResource, reference }));
-
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.error).toBe(null);
-    expect(result.current.data).toEqual(null);
-    expect(onRequestResource).not.toBeCalled();
-  });
-});
-
-describe('useResources', () => {
-  it('Should load the resources', async () => {
-    const resources = mockResource();
-    const references = [{ source: 'source-id', resource: 'resource-id' }];
-    const onRequestResource = jest.fn().mockResolvedValue(resources);
-    const { result } = renderHook(() => useResources({ onRequestResource, references }));
-
-    expect(result.current.isLoading).toBe(true);
-    expect(result.current.error).toBe(null);
-    expect(result.current.data).toEqual(null);
-
-    await waitFor(() => expect(result.current.isLoading).toBe(false));
-
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.data).toStrictEqual([resources]);
-  });
-
-  it('Should not load the resources if no references are provided', async () => {
-    const references = null;
-    const onRequestResource = jest.fn();
-    const { result } = renderHook(() => useResources({ onRequestResource, references }));
-
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.error).toBe(null);
-    expect(result.current.data).toEqual(null);
-    expect(onRequestResource).not.toBeCalled();
-  });
-});

package/src/Hooks/useResource.ts

@@ -1,40 +0,0 @@
-import { useAsync } from '@squiz/generic-browser-lib';
-import { Resource, ResourceReference } from '../types';
-
-type UseResourceProps = {
-  onRequestResource: (reference: ResourceReference) => Promise<Resource | null>;
-  reference?: ResourceReference | null;
-};
-
-type UseResourcesProps = {
-  onRequestResource: (reference: ResourceReference) => Promise<Resource | null>;
-  references?: ResourceReference[] | null;
-};
-
-/**
- * Loads the resource indicated by the provided reference.
- */
-export const useResource = ({ onRequestResource, reference }: UseResourceProps) =>
-  useAsync(
-    {
-      callback: () => (reference ? onRequestResource(reference) : null),
-      defaultValue: null,
-      // Avoid the race condition bug found in FEAAS-891
-      ignorePrevious: true,
-    },
-    [reference?.source, reference?.resource],
-  );
-
-/**
- * Loads the resources indicated by the provided reference.
- */
-export const useResources = ({ onRequestResource, references }: UseResourcesProps) => {
-  const callbackArray = references?.map((item) => () => onRequestResource(item));
-  return useAsync(
-    {
-      callback: callbackArray ? callbackArray : () => null,
-      defaultValue: null,
-    },
-    [],
-  );
-};

package/src/Hooks/useResourcePath.spec.ts

@@ -1,120 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { mockScopedSource, mockResource } from '../__mocks__/MockModels';
-import { useResourcePath } from './useResourcePath';
-import { Resource, Hierarchy, ScopedSource } from '../types';
-
-describe('useResourcePath', () => {
-  it('Should return expected initial state', () => {
-    const {
-      result: { current: result },
-    } = renderHook(() => useResourcePath());
-
-    expect(result).toEqual({
-      source: null,
-      currentResource: null,
-      hierarchy: [],
-      setSource: expect.any(Function),
-      push: expect.any(Function),
-      popUntil: expect.any(Function),
-    });
-  });
-
-  it('setSource should update the source and clear the current hierarchy', () => {
-    const { result } = renderHook(() => useResourcePath());
-    const source = mockScopedSource({
-      source: { id: '1', name: 'Test source' },
-      resource: { id: '2', name: 'Test resource' },
-    });
-    const resource = mockResource({ id: '3', name: 'Test resource 2' });
-
-    act(() => result.current.setSource(source));
-    act(() => result.current.push(resource));
-
-    // make sure the current resource/hierarchy is populated
-    expect(result.current.currentResource).toBe(resource);
-    expect(result.current.hierarchy).toHaveLength(2);
-
-    // set the source again
-    act(() => result.current.setSource(source));
-
-    // make sure the current resource and hierarchy are reset
-    expect(result.current.source).toBe(source);
-    expect(result.current.currentResource).toBe(null);
-    expect(result.current.hierarchy).toEqual([{ key: 'source:1-resource:2', label: 'Test resource', node: source }]);
-  });
-
-  it('push should add the node to the hierarchy', () => {
-    const { result } = renderHook(() => useResourcePath());
-    const source = mockScopedSource({ source: { id: '1' } });
-    const site = mockResource({ id: '1', type: { code: 'site', name: 'Site' }, name: 'My site' });
-    const page = mockResource({ id: '2', type: { code: 'page', name: 'Page' }, name: 'My page' });
-
-    act(() => result.current.setSource(source));
-    act(() => result.current.push(site));
-    act(() => result.current.push(page));
-
-    expect(result.current.source).toBe(source);
-    expect(result.current.currentResource).toBe(page);
-    expect(result.current.hierarchy).toEqual([
-      { key: 'source:1-resource:unscoped', label: source.source.name, node: source },
-      { key: '1', label: site.name, node: site },
-      { key: '2', label: page.name, node: page },
-    ]);
-  });
-
-  it.each([
-    [
-      'popping to the last node should remove nothing',
-      mockResource({ id: '3' }),
-      [
-        { key: 'source:1-resource:unscoped', label: 'Test source', node: mockScopedSource({ source: { id: '1' } }) },
-        { key: '1', label: 'Resource 1', node: mockResource({ id: '1', name: 'Resource 1' }) },
-        { key: '2', label: 'Resource 2', node: mockResource({ id: '2', name: 'Resource 2' }) },
-        { key: '3', label: 'Resource 3', node: mockResource({ id: '3', name: 'Resource 3' }) },
-      ],
-    ],
-    [
-      'popping to a node not in the hierarchy should remove everything',
-      mockResource({ id: 'resource-not-in-hierarchy' }),
-      [],
-    ],
-    [
-      'popping to the source should remove everything except the source',
-      mockScopedSource({ source: { id: '1' } }),
-      [{ key: 'source:1-resource:unscoped', label: 'Test source', node: mockScopedSource({ source: { id: '1' } }) }],
-    ],
-    [
-      'popping to a resource node should remove the resources after it',
-      mockResource({ id: '2' }),
-      [
-        { key: 'source:1-resource:unscoped', label: 'Test source', node: mockScopedSource({ source: { id: '1' } }) },
-        { key: '1', label: 'Resource 1', node: mockResource({ id: '1', name: 'Resource 1' }) },
-        { key: '2', label: 'Resource 2', node: mockResource({ id: '2', name: 'Resource 2' }) },
-      ],
-    ],
-  ])(
-    'popUntil should remove from the hierarchy until the node being popped to is hit - %s',
-    (description: string, node: ScopedSource | Resource, expectedHierarchy: Hierarchy<ScopedSource | Resource>) => {
-      const { result } = renderHook(() => useResourcePath());
-      const source = mockScopedSource({ source: { id: '1' } });
-      const mockResources = [
-        mockResource({ id: '1', name: 'Resource 1' }),
-        mockResource({ id: '2', name: 'Resource 2' }),
-        mockResource({ id: '3', name: 'Resource 3' }),
-      ];
-
-      act(() => result.current.setSource(source));
-      act(() => result.current.push(mockResources[0]));
-      act(() => result.current.push(mockResources[1]));
-      act(() => result.current.push(mockResources[2]));
-
-      // make sure hierarchy has expected length before popping
-      expect(result.current.source).toBe(source);
-      expect(result.current.hierarchy).toHaveLength(4);
-
-      act(() => result.current.popUntil(node));
-
-      expect(result.current.hierarchy).toEqual(expectedHierarchy);
-    },
-  );
-});

package/src/Hooks/useResourcePath.ts

@@ -1,76 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Hierarchy, ScopedSource, Resource } from '../types';
-
-/**
- * Retains the state relating to where in the resource tree we are.
- *
- * Including:
- *  * The source.
- *  * A full path from the source to the leaf resource being browser.
- */
-export const useResourcePath = () => {
-  const [source, setSourceInternal] = useState<ScopedSource | null>(null);
-  const [resourceStack, setResourceStack] = useState<Array<Resource>>([]);
-
-  const setSource = useCallback((source: ScopedSource | null, path: Resource[] = []) => {
-    setSourceInternal(source);
-    setResourceStack(path);
-  }, []);
-
-  const push = useCallback(
-    (resource: Resource) => {
-      setResourceStack([...resourceStack, resource]);
-    },
-    [resourceStack],
-  );
-
-  const popUntil = useCallback(
-    (node: ScopedSource | Resource) => {
-      if ('source' in node) {
-        // source node selected, just switch to the source
-        setSource(node);
-        return;
-      }
-
-      // resource node selected
-      const newResourceStack = [...resourceStack];
-
-      // pop until we reach the node that was selected in the breadcrumb
-      while (newResourceStack.length > 0 && newResourceStack[newResourceStack.length - 1].id !== node?.id) {
-        newResourceStack.pop();
-      }
-
-      if (newResourceStack.length === 0) {
-        // if we didn't find the node clear the source to push the user back to the root
-        setSource(null);
-      } else {
-        setResourceStack(newResourceStack);
-      }
-    },
-    [source, resourceStack],
-  );
-
-  const hierarchy = useMemo<Hierarchy<ScopedSource | Resource>>(() => {
-    if (!source) {
-      return [];
-    }
-
-    return [
-      {
-        key: `source:${source.source.id}-resource:${source.resource?.id || 'unscoped'}`,
-        label: source.resource?.name || source.source.name,
-        node: source,
-      },
-      ...resourceStack.map((resource) => ({ key: resource.id, node: resource, label: resource.name })),
-    ];
-  }, [source, resourceStack]);
-
-  return {
-    source,
-    currentResource: (resourceStack[resourceStack.length - 1] || null) as Resource | null,
-    hierarchy,
-    setSource,
-    push,
-    popUntil,
-  };
-};

package/src/Icons/HistoryIcon.tsx

@@ -1,17 +0,0 @@
-import React, { SVGAttributes } from 'react';
-
-type HistoryIconProps = SVGAttributes<SVGElement>;
-
-export const HistoryIcon = (props: HistoryIconProps) => {
-  return (
-    <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <g id="icon">
-        <path
-          id="Vector"
-          d="M10.5531 2.25131C6.73555 2.14631 3.60805 5.21381 3.60805 9.00131H2.26556C1.92806 9.00131 1.76306 9.40631 2.00306 9.63881L4.09556 11.7388C4.24555 11.8888 4.47806 11.8888 4.62806 11.7388L6.72055 9.63881C6.95305 9.40631 6.78805 9.00131 6.45055 9.00131H5.10805C5.10805 6.07631 7.49305 3.71381 10.4331 3.75131C13.2231 3.78881 15.5706 6.1363 15.6081 8.9263C15.6456 11.8588 13.2831 14.2513 10.3581 14.2513C9.15055 14.2513 8.03305 13.8388 7.14806 13.1413C6.84805 12.9088 6.42805 12.9313 6.15805 13.2013C5.84305 13.5163 5.86555 14.0488 6.21805 14.3188C7.35805 15.2188 8.79055 15.7513 10.3581 15.7513C14.1456 15.7513 17.2131 12.6238 17.1081 8.8063C17.0106 5.28881 14.0706 2.34881 10.5531 2.25131ZM10.1706 6.0013C9.86305 6.0013 9.60805 6.2563 9.60805 6.56381V9.32381C9.60805 9.58631 9.75055 9.83381 9.97555 9.9688L12.3156 11.3563C12.5856 11.5138 12.9306 11.4238 13.0881 11.1613C13.2456 10.8913 13.1556 10.5463 12.8931 10.3888L10.7331 9.10631V6.5563C10.7331 6.2563 10.4781 6.0013 10.1706 6.0013Z"
-          fill="#4F4F4F"
-        />
-      </g>
-    </svg>
-  );
-};

package/src/PreviewPanel/PreviewPanel.spec.tsx

@@ -1,198 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import React from 'react';
-import { screen, render, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Context as ResponsiveContext } from 'react-responsive';
-
-import { useOverlayTriggerState, OverlayTriggerState } from 'react-stately';
-import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { useOverlayTrigger } from 'react-aria';
-
-import PreviewPanel from './PreviewPanel';
-import { Resource } from '../types';
-
-function PreviewPanelTestWrapper({
-  constructFunction,
-}: {
-  constructFunction: (
-    previewModalState: OverlayTriggerState,
-    overlayProps: DOMAttributes<FocusableElement>,
-  ) => JSX.Element;
-}) {
-  const previewModalState = useOverlayTriggerState({});
-  const { overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
-
-  return constructFunction(previewModalState, overlayProps);
-}
-
-function mockResource(properties: Partial<Resource> = {}): Resource {
-  return {
-    id: 'test-resource',
-    name: 'Test resource',
-    type: { code: 'folder', name: 'Folder' },
-    status: { code: 'live', name: 'Live' },
-    url: 'https://no-where.com',
-    urls: [],
-    childCount: 0,
-    ...properties,
-  };
-}
-
-function mockImageResource(properties: Partial<Resource> = {}): Resource {
-  return {
-    id: 'test-image-resource',
-    name: 'Test image resource',
-    type: { code: 'image', name: 'Image' },
-    status: { code: 'live', name: 'Live' },
-    url: 'https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
-    urls: [
-      'https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
-      'http://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
-    ],
-    childCount: 0,
-    ...properties,
-  };
-}
-
-describe('PreviewPanel', () => {
-  it('Renders a message when no item selected', async () => {
-    const onSelect = jest.fn();
-    const onClose = jest.fn();
-
-    render(
-      <PreviewPanelTestWrapper
-        constructFunction={(previewModalState, overlayProps) => {
-          return (
-            <PreviewPanel
-              resource={null}
-              allowedTypes={undefined}
-              modalState={previewModalState}
-              previewModalOverlayProps={overlayProps}
-              onSelect={onSelect}
-              onClose={onClose}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getAllByText('Make a selection to see more info here.')).toBeTruthy();
-    });
-  });
-
-  it('Renders an image when an image is selected', async () => {
-    const onSelect = jest.fn();
-    const onClose = jest.fn();
-    const resource = mockImageResource();
-
-    render(
-      <PreviewPanelTestWrapper
-        constructFunction={(previewModalState, overlayProps) => {
-          return (
-            <PreviewPanel
-              resource={resource}
-              allowedTypes={undefined}
-              modalState={previewModalState}
-              previewModalOverlayProps={overlayProps}
-              onSelect={onSelect}
-              onClose={onClose}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.queryByAltText(resource.name)).toBeTruthy();
-    });
-  });
-
-  it('Renders tablet / desktop very above 640px', async () => {
-    const onSelect = jest.fn();
-    const onClose = jest.fn();
-
-    render(
-      <ResponsiveContext.Provider value={{ width: 641 }}>
-        <PreviewPanelTestWrapper
-          constructFunction={(previewModalState, overlayProps) => {
-            return (
-              <PreviewPanel
-                resource={mockResource({ name: 'TestResource' })}
-                allowedTypes={undefined}
-                modalState={previewModalState}
-                previewModalOverlayProps={overlayProps}
-                onSelect={onSelect}
-                onClose={onClose}
-              />
-            );
-          }}
-        />
-      </ResponsiveContext.Provider>,
-    );
-
-    await waitFor(() => {
-      expect(screen.queryByRole('dialog')).toBeFalsy();
-      expect(screen.queryByText('TestResource')).toBeTruthy();
-    });
-  });
-
-  it('Renders mobile below 640px', async () => {
-    const onSelect = jest.fn();
-    const onClose = jest.fn();
-
-    render(
-      <ResponsiveContext.Provider value={{ width: 640 }}>
-        <PreviewPanelTestWrapper
-          constructFunction={(previewModalState, overlayProps) => {
-            return (
-              <PreviewPanel
-                resource={mockResource({ name: 'TestResource' })}
-                allowedTypes={undefined}
-                modalState={previewModalState}
-                previewModalOverlayProps={overlayProps}
-                onSelect={onSelect}
-                onClose={onClose}
-              />
-            );
-          }}
-        />
-      </ResponsiveContext.Provider>,
-    );
-
-    await waitFor(() => {
-      expect(screen.queryByRole('dialog')).toBeTruthy();
-      expect(screen.queryByText('TestResource')).toBeTruthy();
-    });
-  });
-
-  it('Clicking select button return source and id of resource being shown', async () => {
-    const onSelect = jest.fn();
-    const onClose = jest.fn();
-    const resource = mockResource();
-
-    render(
-      <PreviewPanelTestWrapper
-        constructFunction={(previewModalState, overlayProps) => {
-          return (
-            <PreviewPanel
-              resource={resource}
-              allowedTypes={undefined}
-              modalState={previewModalState}
-              previewModalOverlayProps={overlayProps}
-              onSelect={onSelect}
-              onClose={onClose}
-            />
-          );
-        }}
-      />,
-    );
-
-    const user = userEvent.setup();
-    user.click(screen.getByRole('button'));
-
-    await waitFor(() => {
-      expect(onSelect).toHaveBeenCalledWith(resource);
-    });
-  });
-});

package/src/PreviewPanel/PreviewPanel.stories.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { useOverlayTriggerState } from 'react-stately';
-import { useOverlayTrigger } from 'react-aria';
-
-import PreviewPanel from './PreviewPanel';
-
-export default {
-  title: 'Preview Panel',
-  component: PreviewPanel,
-} as Meta<typeof PreviewPanel>;
-
-const Template: StoryFn<typeof PreviewPanel> = ({ resource, allowedTypes }) => {
-  const previewModalState = useOverlayTriggerState({});
-  const { overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
-
-  return (
-    <PreviewPanel
-      resource={resource}
-      modalState={previewModalState}
-      previewModalOverlayProps={overlayProps}
-      allowedTypes={allowedTypes}
-      onSelect={({ id, name }) => alert(`Resource Selected: ${id} - ${name}`)}
-      onClose={() => alert(`OnClose Selected`)}
-    />
-  );
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  resource: {
-    id: '1',
-    name: 'Products',
-    type: {
-      code: 'page_standard',
-      name: 'Standard Page',
-    },
-    status: {
-      code: 'live',
-      name: 'Live',
-    },
-    url: 'http://my-squiz.net/assets/1',
-    urls: [],
-    childCount: 0,
-  },
-  allowedTypes: undefined,
-};
-
-export const ImageAsset = Template.bind({});
-ImageAsset.args = {
-  resource: {
-    id: '104',
-    name: 'Little goat face',
-    type: {
-      code: 'image',
-      name: 'Image',
-    },
-    status: {
-      code: 'live',
-      name: 'Live',
-    },
-    url: 'https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
-    urls: [
-      'https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
-      'http://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
-    ],
-    childCount: 0,
-  },
-  allowedTypes: undefined,
-};
-
-export const NoSelected = Template.bind({});
-NoSelected.args = {
-  ...Primary.args,
-  resource: null,
-};

package/src/PreviewPanel/PreviewPanel.tsx

@@ -1,6 +0,0 @@
-import { PreviewPanelHOC, PreviewPanelProps } from '@squiz/generic-browser-lib';
-import MatrixResource from './details/MatrixResource';
-
-export type { PreviewPanelProps };
-
-export default PreviewPanelHOC(MatrixResource);

package/src/PreviewPanel/details/MatrixResource.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { Resource } from '../../types';
-import { Icon, IconOptions } from '@squiz/generic-browser-lib';
-import StatusIndicator from '../../StatusIndicator/StatusIndicator';
-
-type MatrixResourceProps = {
-  resource: Resource;
-};
-
-const ImageThumb = ({ url, name }: { url: string; name: string }) => {
-  return (
-    <div className="checkered-bg w-full h-[164px] overflow-hidden flex justify-center items-center">
-      <img src={url} className="max-w-full max-h-full" alt={name} />
-    </div>
-  );
-};
-
-const MatrixResource = ({ resource: { id, type, name, status, url } }: MatrixResourceProps) => {
-  return (
-    <div>
-      <div className="flex flex-col items-center text-gray-800 mt-7 mx-5 pb-4 border-b border-gray-300">
-        {type.code === 'image' && url ? (
-          <ImageThumb url={url} name={name} />
-        ) : (
-          <Icon icon={type.code as IconOptions} resourceSource="matrix" className="w-14 h-14" />
-        )}
-        <div className="mt-4 font-semibold text-base break-word">{name}</div>
-      </div>
-      <div className="text-gray-800 mx-6 mt-4">
-        <dl className="flex flex-col text-sm">
-          <div className="flex mb-2">
-            <dt className="w-[60px] mr-4 text-gray-600">Type</dt>
-            <dd className="font-semibold">{type.name}</dd>
-          </div>
-
-          <div className="flex mb-2">
-            <dt className="w-[60px] mr-4 text-gray-600">Asset ID</dt>
-            <dd className="font-semibold">#{id}</dd>
-          </div>
-
-          <div className="flex mb-2">
-            <dt className="w-[60px] mr-4 text-gray-600">Status</dt>
-            <dd className="flex items-center font-semibold">
-              <StatusIndicator className="mr-1" status={status} /> {status.name}
-            </dd>
-          </div>
-        </dl>
-      </div>
-    </div>
-  );
-};
-
-export default MatrixResource;

package/src/PreviewPanel/details/matrix-resource.scss

@@ -1,16 +0,0 @@
-$sds-grey-300: #e0e0e0;
-
-.checkered-bg {
-  @apply bg-white;
-  background-size: 24px 24px;
-  background-position: 0 0, 12px 12px;
-  background-image: linear-gradient(
-      45deg,
-      $sds-grey-300 25%,
-      transparent 25%,
-      transparent 75%,
-      $sds-grey-300 75%,
-      $sds-grey-300
-    ),
-    linear-gradient(45deg, $sds-grey-300 25%, transparent 25%, transparent 75%, $sds-grey-300 75%, $sds-grey-300);
-}