@squiz/resource-browser 1.32.1-alpha.12

package/src/ResourcePickerContainer/ResourcePickerContainer.stories.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import { NodeIdentifier } from '../index';
+import ResourcePickerContainer from './ResourcePickerContainer';
+import sampleSources from '../SourceList/sample-sources.json';
+import sampleResources from '../ResourceList/sample-resources.json';
+
+export default {
+  title: 'Resource Picker',
+  component: ResourcePickerContainer,
+} as Meta<typeof ResourcePickerContainer>;
+
+const Template: StoryFn<typeof ResourcePickerContainer> = ({ title }) => {
+  return (
+    <ResourcePickerContainer
+      title={title}
+      titleAriaProps={{}}
+      allowedTypes={undefined}
+      onRequestSources={() => {
+        return new Promise((resolve) => {
+          setTimeout(resolve, 500, sampleSources);
+        });
+      }}
+      onRequestChildren={() => {
+        return new Promise((resolve) => {
+          setTimeout(resolve, 500, sampleResources);
+        });
+      }}
+      onRequestResource={() => {
+        return new Promise((resolve) => {
+          setTimeout(resolve, 500, {
+            type: 'page',
+            name: 'Products',
+            properties: new Map([
+              ['assetId', '12345'],
+              ['status', 'UnderConstruction'],
+            ]),
+          });
+        });
+      }}
+      onChange={(nodeId: NodeIdentifier) => {
+        alert(`Resource Browser has selected ${nodeId.source} ${nodeId.id}`);
+      }}
+      onClose={() => {
+        alert('Resource Browser closed');
+      }}
+    />
+  );
+};
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  title: 'Asset Picker',
+};

package/src/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -0,0 +1,224 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { useOverlayTriggerState } from 'react-stately';
+
+import SourceList from '../SourceList/SourceList';
+import ResourceList from '../ResourceList/ResourceList';
+import ResourceBreadcrumb from '../ResourceBreadcrumb/ResourceBreadcrumb';
+import PreviewPanel from '../PreviewPanel/PreviewPanel';
+import SourceDropdown from '../SourceDropdown/SourceDropdown';
+
+import { NodeIdentifier, Source, Resource, ResourceDetail, Hierarchy } from '../index';
+
+interface ResourcePickerContainerProps {
+  title: string;
+  titleAriaProps: DOMAttributes<FocusableElement>;
+  allowedTypes: string[] | undefined;
+  onRequestSources: () => Promise<Source[]>;
+  onRequestChildren(id: NodeIdentifier): Promise<Resource[]>;
+  onRequestResource(id: NodeIdentifier): Promise<ResourceDetail | null>;
+  onChange(resource: NodeIdentifier | null): void;
+  onClose: () => void;
+}
+
+function ResourcePickerContainer({
+  title,
+  titleAriaProps,
+  allowedTypes,
+  onRequestSources,
+  onRequestChildren,
+  onRequestResource,
+  onChange,
+  onClose,
+}: ResourcePickerContainerProps) {
+  const previewModalState = useOverlayTriggerState({});
+
+  const [isSourceLoading, setIsSourceLoading] = useState<boolean>(false);
+  const [isMainLoading, setIsMainLoading] = useState<boolean>(false);
+  const [isSecondaryLoading, setIsSecondaryLoading] = useState<boolean>(false);
+
+  const [currentNode, setCurrentNode] = useState<NodeIdentifier | null>(null);
+  const [selectedId, setSelectedId] = useState<NodeIdentifier | null>(null);
+  const [previewModalOverlayProps, setPreviewModalOverlayProps] = useState<DOMAttributes<FocusableElement>>({});
+  const [hierarchy, setHierarchy] = useState<Array<Hierarchy>>([]);
+
+  const [sources, setSources] = useState<Array<Source>>([]);
+  const [resources, setResources] = useState<Array<Resource>>([]);
+  const [selectedNodeDetails, setSelectedNodeDetails] = useState<ResourceDetail | null>(null);
+
+  const adjustHierarchy = (node: NodeIdentifier, resetHierarchy: boolean) => {
+    const isInHierarchy = hierarchy.find((hNode) => hNode.id === node);
+    let newHierarchy: Array<Hierarchy> = [];
+
+    // If the node is already in the hierarchy we need to 'jump' back to it
+    if (isInHierarchy) {
+      let reachedNode = false;
+      // Read though the hierarchy and add any nodes before and including the current to the array
+      hierarchy.forEach((hNode) => {
+        if (reachedNode === false) {
+          newHierarchy.push(hNode);
+          if (hNode.id === node) {
+            reachedNode = true;
+          }
+        }
+      });
+    } else {
+      let label: string = resources.find((resource) => resource.id === node)?.label || '';
+
+      // Might be a source
+      if (!label) {
+        const source = sources.find((source) => source.id === node.source);
+        if (source) {
+          label = source.nodes.find((resource) => resource.id === node)?.label || '';
+        }
+      }
+
+      // If we are jumping to a complete other spot and the container knows it, it can request a complete reset
+      if (!resetHierarchy) {
+        newHierarchy = hierarchy.slice();
+      }
+
+      newHierarchy.push({
+        id: node,
+        label,
+      });
+    }
+
+    setHierarchy(newHierarchy);
+  };
+
+  const handleResourceSelected = useCallback((node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => {
+    setPreviewModalOverlayProps(overlayProps);
+    setIsSecondaryLoading(true);
+    setSelectedId(node);
+
+    setSelectedNodeDetails(null);
+
+    onRequestResource(node).then((detail: ResourceDetail | null) => {
+      setSelectedNodeDetails(detail);
+      setIsSecondaryLoading(false);
+    });
+  }, []);
+
+  const handleResourceDrillDown = useCallback(
+    (node: NodeIdentifier, resetHierarchy?: boolean) => {
+      setIsMainLoading(true);
+      setCurrentNode(node);
+      adjustHierarchy(node, resetHierarchy || false);
+
+      setSelectedId(null);
+      setSelectedNodeDetails(null);
+      setResources([]);
+
+      onRequestChildren(node).then((resources: Array<Resource>) => {
+        setResources(resources);
+        setIsMainLoading(false);
+      });
+    },
+    [resources, sources],
+  );
+
+  const handleReturnToRoot = useCallback(() => {
+    setCurrentNode(null);
+    setSelectedId(null);
+    setResources([]);
+    setHierarchy([]);
+
+    setSelectedNodeDetails(null);
+  }, []);
+
+  const handleDetailSelect = useCallback((node: NodeIdentifier) => {
+    onChange(node);
+    onClose();
+  }, []);
+
+  const handleDetailClose = useCallback(() => {
+    setSelectedId(null);
+  }, []);
+
+  // On load of component fetch the list of sources
+  useEffect(() => {
+    setIsSourceLoading(true);
+    onRequestSources().then((sources: Array<Source>) => {
+      setSources(sources);
+      setIsSourceLoading(false);
+    });
+  }, []);
+
+  return (
+    <div className="relative flex flex-col h-full">
+      <div className="flex items-center p-6">
+        <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
+          {title}
+        </h2>
+        <div className="px-3 border-l border-grey-300 w-300px">
+          <SourceDropdown
+            sources={sources}
+            currentSource={hierarchy[0]?.id}
+            isLoading={isSourceLoading}
+            onSourceSelect={handleResourceDrillDown}
+            onRootSelect={handleReturnToRoot}
+          />
+        </div>
+        <button
+          type="button"
+          aria-label={`Close ${title} dialog`}
+          onClick={onClose}
+          className="absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100"
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </div>
+      <div className="flex border-t border-grey-300 h-[calc(100%-92px)]">
+        <div className="overflow-y-scroll flex-1 grow-[3] border-r border-gray-300">
+          <h3 className="sr-only">Resource List</h3>
+          {currentNode === null && (
+            <SourceList
+              sources={sources}
+              previewModalState={previewModalState}
+              isLoading={isSourceLoading}
+              onSourceSelect={handleResourceSelected}
+              onSourceDrillDown={handleResourceDrillDown}
+              allowedTypes={allowedTypes}
+            />
+          )}
+
+          {currentNode && (
+            <>
+              <ResourceBreadcrumb
+                hierarchy={hierarchy}
+                onBreadcrumbSelect={handleResourceDrillDown}
+                onReturnToRoot={handleReturnToRoot}
+              />
+              <ResourceList
+                previewModalState={previewModalState}
+                resources={resources}
+                isLoading={isMainLoading}
+                onResourceSelect={handleResourceSelected}
+                onResourceDrillDown={handleResourceDrillDown}
+                allowedTypes={allowedTypes}
+              />
+            </>
+          )}
+        </div>
+        <PreviewPanel
+          node={selectedId}
+          resourceDetail={selectedNodeDetails}
+          modalState={previewModalState}
+          isLoading={isSecondaryLoading}
+          previewModalOverlayProps={previewModalOverlayProps}
+          allowedTypes={allowedTypes}
+          onSelect={handleDetailSelect}
+          onClose={handleDetailClose}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ResourcePickerContainer;

package/src/Skeleton/List/SkeletonList.spec.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+
+import { SkeletonList } from './SkeletonList';
+
+describe('SkeletonList', () => {
+  it('Should render the skeleton list', async () => {
+    render(<SkeletonList itemCount={17} />);
+
+    expect(screen.getByLabelText('Skeleton loader list')).toBeInTheDocument();
+  });
+
+  it('Should list out the amount of items we set as the count', async () => {
+    render(<SkeletonList itemCount={5} />);
+
+    expect(screen.getAllByRole('listitem')).toHaveLength(5);
+  });
+});

package/src/Skeleton/List/SkeletonList.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import { SkeletonList, SkeletonListProps } from './SkeletonList';
+
+export default {
+  title: 'Global/Skeleton/List',
+  component: SkeletonList,
+} as Meta<typeof SkeletonList>;
+
+const Template: StoryFn<SkeletonListProps> = (args: SkeletonListProps) => <SkeletonList {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {};

package/src/Skeleton/List/SkeletonList.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SkeletonListItem } from '../ListItem/SkeletonListItem';
+import clsx from 'clsx';
+
+export type SkeletonListProps = {
+  itemCount: number;
+  className?: string;
+};
+
+export const SkeletonList = ({ itemCount = 8, className }: SkeletonListProps) => (
+  <ul className={clsx(`flex flex-col px-7 my-4`, className)} aria-label="Skeleton loader list">
+    {[...Array(itemCount)].map((_item, index: number) => {
+      return <SkeletonListItem key={index} />;
+    })}
+  </ul>
+);

package/src/Skeleton/ListItem/SkeletonListItem.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import { SkeletonListItem } from './SkeletonListItem';
+
+export default {
+  title: 'Global/Skeleton/List item',
+  component: SkeletonListItem,
+} as Meta<typeof SkeletonListItem>;
+
+const Template: StoryFn<typeof SkeletonListItem> = () => <SkeletonListItem />;
+
+export const Default = Template.bind({});
+
+Default.args = {};

package/src/Skeleton/ListItem/SkeletonListItem.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const SkeletonListItem = () => (
+  <li className="flex items-center p-1 first:mt-0 bg-white border border-b-0 border-grey-200 first:rounded-t-lg last:rounded-b-lg last:border-b">
+    <div className="grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded">
+      <span className="w-6 h-6 bg-gray-200 rounded-full" />
+      <div className="w-full d-flex flex-col mx-4">
+        <div className="mb-1 w-3/4 h-2 bg-gray-200 rounded" />
+        <div className="w-1/2 h-2 bg-gray-200 rounded" />
+      </div>
+      <div className="ml-auto mx-4 w-12 h-2 bg-gray-200 rounded" />
+    </div>
+  </li>
+);

package/src/SourceDropdown/SourceDropdown.spec.tsx

@@ -0,0 +1,263 @@
+/* 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 SourceDropdown from './SourceDropdown';
+
+const sources = [
+  {
+    id: '1',
+    name: 'Source 1',
+    nodes: [
+      {
+        id: {
+          id: '1',
+          source: '1',
+        },
+        type: 'site',
+        selected: false,
+        label: 'Node 1',
+        childCount: 21,
+      },
+      {
+        id: {
+          id: '2',
+          source: '1',
+        },
+        type: 'site',
+        selected: false,
+        label: 'Node 2',
+        childCount: 13,
+      },
+    ],
+  },
+  {
+    id: '2',
+    name: 'Source 2',
+    nodes: [
+      {
+        id: {
+          id: '1',
+          source: '2',
+        },
+        type: 'site',
+        selected: false,
+        label: 'Node 3',
+        childCount: 15,
+      },
+      {
+        id: {
+          id: '2',
+          source: '2',
+        },
+        type: 'site',
+        selected: false,
+        label: 'Node 4',
+        childCount: 10,
+      },
+    ],
+  },
+];
+
+describe('SourceDropdown', () => {
+  it('Render generic label if no source provided', async () => {
+    render(
+      <SourceDropdown
+        sources={sources}
+        currentSource={null}
+        isLoading={false}
+        onRootSelect={() => {}}
+        onSourceSelect={() => {}}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Source quick select' })).toHaveTextContent(
+        'view All available sources',
+      );
+    });
+  });
+
+  it('Show loading state if isLoading true', async () => {
+    render(
+      <SourceDropdown
+        sources={sources}
+        currentSource={null}
+        isLoading={true}
+        onRootSelect={() => {}}
+        onSourceSelect={() => {}}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Loading sources')).toBeTruthy();
+    });
+  });
+
+  it('Render title of currentSource if provided', async () => {
+    render(
+      <SourceDropdown
+        sources={sources}
+        currentSource={{
+          id: '2',
+          source: '2',
+        }}
+        isLoading={false}
+        onRootSelect={() => {}}
+        onSourceSelect={() => {}}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Source quick select' })).toHaveTextContent('current source Node 4');
+    });
+  });
+
+  it('Sources are rendered when dropdown clicked', async () => {
+    render(
+      <SourceDropdown
+        sources={sources}
+        currentSource={null}
+        isLoading={false}
+        onRootSelect={() => {}}
+        onSourceSelect={() => {}}
+      />,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Source quick select' }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'All available sources' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'site Node 1' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'site Node 2' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'site Node 3' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'site Node 4' })).toBeTruthy();
+    });
+  });
+
+  it('Source menu closes on focus loss', async () => {
+    render(
+      <div>
+        <SourceDropdown
+          sources={sources}
+          currentSource={null}
+          isLoading={false}
+          onRootSelect={() => {}}
+          onSourceSelect={() => {}}
+        />
+        <input />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    const buttonDropdown = screen.getByRole('button', { name: 'Source quick select' });
+    user.click(buttonDropdown);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'All available sources' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'site Node 1' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'site Node 2' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'site Node 3' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'site Node 4' })).toBeTruthy();
+    });
+
+    user.type(buttonDropdown, '{tab}');
+    user.type(buttonDropdown, '{tab}');
+    user.type(buttonDropdown, '{tab}');
+    user.type(buttonDropdown, '{tab}');
+    user.type(buttonDropdown, '{tab}');
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
+      expect(screen.queryByRole('button', { name: 'site Node 1' })).toBeFalsy();
+      expect(screen.queryByRole('button', { name: 'site Node 2' })).toBeFalsy();
+      expect(screen.queryByRole('button', { name: 'site Node 3' })).toBeFalsy();
+      expect(screen.queryByRole('button', { name: 'site Node 4' })).toBeFalsy();
+    });
+  });
+
+  it('Source menu closes on {esc}', async () => {
+    render(
+      <div>
+        <SourceDropdown
+          sources={sources}
+          currentSource={null}
+          isLoading={false}
+          onRootSelect={() => {}}
+          onSourceSelect={() => {}}
+        />
+        <input />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    const buttonDropdown = screen.getByRole('button', { name: 'Source quick select' });
+    user.click(buttonDropdown);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'All available sources' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'site Node 1' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'site Node 2' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'site Node 3' })).toBeTruthy();
+      expect(screen.getByRole('button', { name: 'site Node 4' })).toBeTruthy();
+    });
+
+    user.type(buttonDropdown, '{escape}');
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
+      expect(screen.queryByRole('button', { name: 'site Node 1' })).toBeFalsy();
+      expect(screen.queryByRole('button', { name: 'site Node 2' })).toBeFalsy();
+      expect(screen.queryByRole('button', { name: 'site Node 3' })).toBeFalsy();
+      expect(screen.queryByRole('button', { name: 'site Node 4' })).toBeFalsy();
+    });
+  });
+
+  it('Selecting all available sources calls onRootSelect ', async () => {
+    const onRootSelect = jest.fn();
+
+    render(
+      <SourceDropdown
+        sources={sources}
+        currentSource={null}
+        isLoading={false}
+        onRootSelect={onRootSelect}
+        onSourceSelect={() => {}}
+      />,
+    );
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Source quick select' }));
+    await user.click(screen.getByRole('button', { name: 'All available sources' }));
+
+    await waitFor(() => {
+      expect(onRootSelect).toHaveBeenCalled();
+      expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
+    });
+  });
+
+  it('Selecting node calls onSourceSelect ', async () => {
+    const onSourceSelect = jest.fn();
+
+    render(
+      <SourceDropdown
+        sources={sources}
+        currentSource={null}
+        isLoading={false}
+        onRootSelect={() => {}}
+        onSourceSelect={onSourceSelect}
+      />,
+    );
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Source quick select' }));
+    await user.click(screen.getByRole('button', { name: 'site Node 1' }));
+
+    await waitFor(() => {
+      expect(onSourceSelect).toHaveBeenCalledWith({ id: '1', source: '1' }, true);
+      expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
+    });
+  });
+});

package/src/SourceDropdown/SourceDropdown.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import SourceDropdown from './SourceDropdown';
+import sampleSources from './sample-sources.json';
+
+export default {
+  title: 'Source Dropdown',
+  component: SourceDropdown,
+} as Meta<typeof SourceDropdown>;
+
+const Template: StoryFn<typeof SourceDropdown> = ({ sources, currentSource, isLoading }) => (
+  <SourceDropdown
+    sources={sources}
+    currentSource={currentSource}
+    isLoading={isLoading}
+    onSourceSelect={({ source, id }) => alert(`Source Select: ${source} - ${id}`)}
+    onRootSelect={() => alert(`Root Select`)}
+  />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  sources: sampleSources,
+  currentSource: {
+    id: '1',
+    source: '1',
+  },
+  isLoading: false,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Primary.args,
+  isLoading: true,
+};