@squiz/resource-browser 1.32.1-alpha.15 → 1.32.1-alpha.16

package/src/Hooks/useCategorisedSources.ts

@@ -0,0 +1,46 @@
+import { ScopedSource, Source } from '../types';
+import { useMemo } from 'react';
+
+export type CategorisedSource = {
+  key: string;
+  label: string;
+  sources: ScopedSource[];
+};
+
+/**
+ * Groups a list of source into scoped/un-scoped for rendering in the source list.
+ *
+ * @param {Source[]} sources
+ *
+ * @return {SourceList}
+ */
+export const useCategorisedSources = (sources: Source[]): CategorisedSource[] => {
+  return useMemo(() => {
+    const categorised: CategorisedSource[] = [];
+    const uncategorised: ScopedSource[] = [];
+
+    sources.forEach((source) => {
+      if (source.nodes.length > 0) {
+        const category: CategorisedSource = { key: source.id, label: source.name, sources: [] };
+
+        source.nodes.forEach((resource) => {
+          category.sources.push({ source, resource });
+        });
+
+        categorised.push(category);
+      } else {
+        uncategorised.push({ source, resource: null });
+      }
+    });
+
+    if (uncategorised.length > 0) {
+      categorised.push({
+        key: 'other',
+        label: 'Other systems',
+        sources: uncategorised,
+      });
+    }
+
+    return categorised;
+  }, [sources]);
+};

package/src/Hooks/useChildResources.spec.ts

@@ -0,0 +1,49 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { mockResource, mockScopedSource } from '../__mocks__/MockModels';
+import { useChildResources } from './useChildResources';
+
+describe('useChildResources', () => {
+  it('Should trigger and return the loaded child resources', async () => {
+    const source = mockScopedSource();
+    const currentResource = mockResource({ name: 'Current resource' });
+    const children = [mockResource({ name: 'Child 1' })];
+    const onRequestChildren = jest.fn().mockResolvedValue(children);
+    const { result } = renderHook(() =>
+      useChildResources({
+        source,
+        currentResource,
+        onRequestChildren,
+      }),
+    );
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.error).toBe(null);
+    expect(result.current.resources).toEqual([]);
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBe(null);
+    expect(result.current.resources).toBe(children);
+  });
+
+  it('Should return the error if loading resources fails', async () => {
+    const source = mockScopedSource();
+    const currentResource = mockResource({ name: 'Current resource' });
+    const error = new Error('Loading the resources failed.');
+    const onRequestChildren = jest.fn().mockRejectedValue(error);
+    const { result } = renderHook(() =>
+      useChildResources({
+        source,
+        currentResource,
+        onRequestChildren,
+      }),
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBe(error);
+    expect(result.current.resources).toEqual([]);
+  });
+});

package/src/Hooks/useChildResources.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import { Resource, ScopedSource, Source } from '../types';
+
+type UseChildResourcesProps = {
+  source: ScopedSource | null;
+  currentResource: Resource | null;
+  onRequestChildren: (source: Source, resource: Resource | null) => Promise<Resource[]>;
+};
+
+/**
+ * Triggers a reload of the child resources when the source or current resource change.
+ *
+ * @param {ScopedSource|null} source
+ * @param {Resource|null}     currentResource
+ * @param {Function}          onRequestChildren
+ */
+export const useChildResources = ({ source, currentResource, onRequestChildren }: UseChildResourcesProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [resources, setResources] = useState<Resource[]>([]);
+
+  // trigger a reload of the resources when the source or the current resource changes.
+  useEffect(() => {
+    setError(null);
+    setResources([]);
+
+    if (source) {
+      setIsLoading(true);
+
+      onRequestChildren(source.source, currentResource)
+        .then((resources: Array<Resource>) => {
+          setResources(resources);
+          setIsLoading(false);
+        })
+        .catch((e) => {
+          setError(e);
+          setIsLoading(false);
+        });
+    }
+  }, [source, currentResource]);
+
+  return { isLoading, error, resources };
+};

package/src/Hooks/useResourcePath.spec.ts

@@ -0,0 +1,124 @@
+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', async () => {
+    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' });
+
+    await act(() => result.current.setSource(source));
+    await 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
+    await 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', async () => {
+    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' });
+
+    await act(() => result.current.setSource(source));
+    await act(() => result.current.push(site));
+    await 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',
+    async (
+      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' }),
+      ];
+
+      await act(() => result.current.setSource(source));
+      await act(() => result.current.push(mockResources[0]));
+      await act(() => result.current.push(mockResources[1]));
+      await 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);
+
+      await act(() => result.current.popUntil(node));
+
+      expect(result.current.hierarchy).toEqual(expectedHierarchy);
+    },
+  );
+});

package/src/Hooks/useResourcePath.ts

@@ -0,0 +1,76 @@
+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) => {
+    setSourceInternal(source);
+    setResourceStack([]);
+  }, []);
+
+  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/Hooks/useSources.spec.ts

@@ -0,0 +1,33 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { mockSource } from '../__mocks__/MockModels';
+import { useSources } from './useSources';
+
+describe('useSources', () => {
+  it('Should trigger and load the sources', async () => {
+    const sources = [mockSource()];
+    const onRequestSources = jest.fn().mockResolvedValue(sources);
+    const { result } = renderHook(() => useSources({ onRequestSources }));
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.error).toBe(null);
+    expect(result.current.sources).toEqual([]);
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBe(null);
+    expect(result.current.sources).toBe(sources);
+  });
+
+  it('Should return the error if loading resources fails', async () => {
+    const error = new Error('Loading the sources failed.');
+    const onRequestSources = jest.fn().mockRejectedValue(error);
+    const { result } = renderHook(() => useSources({ onRequestSources }));
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBe(error);
+    expect(result.current.sources).toEqual([]);
+  });
+});

package/src/Hooks/useSources.ts

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Source } from '../types';
+
+type UseSourcesProps = {
+  onRequestSources: () => Promise<Source[]>;
+};
+
+/**
+ * Loads and caches the source list when a component using the hook is mounted.
+ *
+ * @param {Function} onRequestSources
+ */
+export const useSources = ({ onRequestSources }: UseSourcesProps) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [sources, setSources] = useState<Source[]>([]);
+  const loadSources = useCallback(() => {
+    onRequestSources()
+      .then((sources) => {
+        setIsLoading(false);
+        setSources(sources);
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        setError(error);
+      });
+  }, []);
+
+  // trigger a load of the sources when the component using the hook is initially rendered.
+  useEffect(loadSources, []);
+
+  return { isLoading, error, sources, reload: loadSources };
+};

package/src/Icons/Icon.stories.tsx

@@ -27,13 +27,13 @@ Root.args = {
 
 export const Audio = Template.bind({});
 Audio.args = {
-  icon: 'audio',
+  icon: 'audio_file',
   resourceSource: 'matrix',
 };
 
 export const Excel = Template.bind({});
 Excel.args = {
-  icon: 'excel',
+  icon: 'excel_doc',
   resourceSource: 'matrix',
 };
 
@@ -57,19 +57,19 @@ Image.args = {
 
 export const Page = Template.bind({});
 Page.args = {
-  icon: 'page',
+  icon: 'page_standard',
   resourceSource: 'matrix',
 };
 
 export const Pdf = Template.bind({});
 Pdf.args = {
-  icon: 'pdf',
+  icon: 'pdf_file',
   resourceSource: 'matrix',
 };
 
 export const Powerpoint = Template.bind({});
 Powerpoint.args = {
-  icon: 'powerpoint',
+  icon: 'powerpoint_doc',
   resourceSource: 'matrix',
 };
 
@@ -81,13 +81,13 @@ Site.args = {
 
 export const Video = Template.bind({});
 Video.args = {
-  icon: 'video',
+  icon: 'video_file',
   resourceSource: 'matrix',
 };
 
 export const Word = Template.bind({});
 Word.args = {
-  icon: 'word',
+  icon: 'word_doc',
   resourceSource: 'matrix',
 };
 

package/src/Icons/Icon.tsx

@@ -9,9 +9,7 @@ export const iconSources = {
 
 // The resource sources options
 export type ResourceSources = keyof typeof iconSources;
-
-// Get the list of possible icons from the icon sources
-export type IconOptions = keyof (typeof iconSources)[ResourceSources];
+export type IconOptions = string;
 
 /**
  * Renders an icon based on the resource source and the icon name
@@ -39,18 +37,15 @@ function Icon({
   isDecorative?: boolean;
 } & React.HTMLAttributes<HTMLElement> &
   React.SVGAttributes<SVGElement>) {
-  // Loop through the resource sources
-  for (const source in iconSources) {
-    // If the resource source is the current source and the icon is in the current source map, render the icon
-    if (resourceSource === source && icon && icon in iconSources[source]) {
-      // Get the icon from the current source map
-      const Icon = iconSources[source][icon] as React.FunctionComponent<
-        { isDecorative: boolean } & React.SVGProps<SVGSVGElement>
-      >;
+  const icons = (iconSources[resourceSource] as any) || null;
+
+  // If the resource source is the current source and the icon is in the current source map, render the icon
+  if (icons && icon && icon in icons) {
+    // Get the icon from the current source map
+    const Icon = icons[icon] as React.FunctionComponent<{ isDecorative: boolean } & React.SVGProps<SVGSVGElement>>;
 
-      // Render the icon
-      return <Icon isDecorative={isDecorative} {...props} />;
-    }
+    // Render the icon
+    return <Icon isDecorative={isDecorative} {...props} />;
   }
 
   // If the icon is not defined, render the default icon

package/src/Icons/MatrixResources/Audio.tsx

@@ -24,7 +24,7 @@ export default function Audio({ isDecorative, ...props }: { isDecorative: boolea
       <circle cx="7.5" cy="16.5" fill="#73c0cb" r="2" stroke="#057e91" />
       <path d="m16 7 1 .32v7.18c0 .2761-.2239.5-.5.5s-.5-.2239-.5-.5z" fill="#057e91" />
       <circle cx="14.5" cy="14.5" fill="#73c0cb" r="2" stroke="#057e91" />
-      {!isDecorative && <title>audio icon</title>}
+      {!isDecorative && <title>audio file icon</title>}
     </svg>
   );
 }

package/src/Icons/MatrixResources/Excel.tsx

@@ -23,7 +23,7 @@ export default function Excel({ isDecorative, ...props }: { isDecorative: boolea
       <rect y="8" width="12" height="12" rx="2" fill="#4FAD6F" />
       <path d="M3.5 11.5L8.5 16.5" stroke="white" strokeLinecap="round" />
       <path d="M8.5 11.5L3.5 16.5" stroke="white" strokeLinecap="round" />
-      {!isDecorative && <title>excel icon</title>}
+      {!isDecorative && <title>excel doc icon</title>}
     </svg>
   );
 }

package/src/Icons/MatrixResources/MatrixResourceMap.ts

@@ -2,17 +2,17 @@ import { Audio, Excel, Folder, GenericFile, Image, Page, Pdf, Powerpoint, Site,
 
 // Define our map of matrix types to icons
 const MatrixResourceMap = {
-  audio: Audio,
-  excel: Excel,
+  audio_file: Audio,
+  excel_doc: Excel,
   folder: Folder,
-  generic_file: GenericFile,
+  generic_file: GenericFile, // fallback when a type doesn't match.
   image: Image,
   page_standard: Page,
-  pdf: Pdf,
-  powerpoint: Powerpoint,
+  pdf_file: Pdf,
+  powerpoint_doc: Powerpoint,
   site: Site,
-  video: Video,
-  word: Word,
+  video_file: Video,
+  word_doc: Word,
 };
 
 // Export our map

package/src/Icons/MatrixResources/Pdf.tsx

@@ -28,7 +28,7 @@ export default function Pdf({ isDecorative, ...props }: { isDecorative: boolean
         <path d="m11.5 17.5v-3.8c0-.1105.0895-.2.2-.2h1.8" />
         <path d="m11.5 15.5h1" />
       </g>
-      {!isDecorative && <title>pdf icon</title>}
+      {!isDecorative && <title>pdf file icon</title>}
     </svg>
   );
 }

package/src/Icons/MatrixResources/Powerpoint.tsx

@@ -28,7 +28,7 @@ export default function Powerpoint({
         <path d="m3.5 11.5v5" />
         <path d="m3.5 11.5h3.5c.33333 0 1.5 0 1.5 1.5s-1.16667 1.5-1.5 1.5h-3" />
       </g>
-      {!isDecorative && <title>powerpoint icon</title>}
+      {!isDecorative && <title>powerpoint doc icon</title>}
     </svg>
   );
 }

package/src/Icons/MatrixResources/Video.tsx

@@ -21,7 +21,7 @@ export default function Video({ isDecorative, ...props }: { isDecorative: boolea
         stroke="#6b47b4"
         strokeLinecap="round"
       />
-      {!isDecorative && <title>video icon</title>}
+      {!isDecorative && <title>video file icon</title>}
     </svg>
   );
 }

package/src/Icons/MatrixResources/Word.tsx

@@ -24,7 +24,7 @@ export default function Word({ isDecorative, ...props }: { isDecorative: boolean
       <path d="m14.5 3v3.5c0 .55228.4477 1 1 1h3.5" stroke="#bcbcbc" />
       <rect fill="#0774d2" height="12" rx="2" width="12" y="8" />
       <path d="m2.5 11.5 1.5 5 2-5 2 5 1.5-5" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" />
-      {!isDecorative && <title>word icon</title>}
+      {!isDecorative && <title>word doc icon</title>}
     </svg>
   );
 }

package/src/Modal/Modal.tsx

@@ -44,7 +44,7 @@ function Modal({ isDismissable, state, overlayProps, children, ...props }: Modal
       <div className="squiz-rb-scope">
         <div
           {...underlayProps}
-          className="h-full z-[9999] fixed inset-0 before:z-40 before:fixed before:inset-0 before:bg-black before:bg-opacity-25"
+          className="h-full z-[9998] fixed inset-0 before:z-40 before:fixed before:inset-0 before:bg-black before:bg-opacity-25"
         >
           <div {...modalProps} ref={ref} className="h-full flex items-center justify-center">
             <ModalContent {...overlayProps}>{(titleProps) => children(titleProps)}</ModalContent>

package/src/PreviewPanel/PreviewModal.tsx

@@ -77,7 +77,7 @@ function PreviewModal({ state, overlayProps, children, onClose, ...props }: Prev
         ref={modalRef}
         {...underlayProps}
         {...keyboardProps}
-        className="fixed z-50 overflow-y-scroll bottom-0 w-full h-[50vh] bg-white border-t border-gray-300"
+        className="fixed z-[9999] overflow-y-scroll bottom-0 w-full h-[50vh] bg-white border-t border-gray-300"
       >
         <div ref={overlayRef} {...modalProps} className="h-full">
           <PreviewModalContent {...overlayProps} onClose={onClose}>