@squiz/resource-browser 1.32.1-alpha.12

package/src/PreviewPanel/details/MatrixResource.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { ResourceDetail } from '../../index';
+import Icon, { IconOptions } from '../../Icons/Icon';
+
+const statusColour = {
+  UnderConstruction: '#94D1F9',
+  Live: '#BEE509',
+};
+
+export enum MatrixStatus {
+  UnderConstruction = 'Under Construction',
+  Live = 'Live',
+}
+
+export type MatrixAsset = ResourceDetail & {
+  assetId?: string;
+  status?: MatrixStatus;
+};
+
+const MatrixResource = ({ type, name, properties }: ResourceDetail) => {
+  const assetId = properties.get('assetId') as string;
+  const status = properties.get('status');
+
+  return (
+    <div>
+      <div className="flex flex-col items-center text-gray-800 mt-7 mx-5 pb-4 border-b border-gray-300">
+        <Icon icon={type as IconOptions} resourceSource="matrix" className="w-14 h-14" />
+        <div className="mt-4 font-semibold text-base">{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}</dd>
+          </div>
+
+          <div className="flex mb-2">
+            <dt className="w-[60px] mr-4 text-gray-600">Asset ID</dt>
+            <dd className="font-semibold">#{assetId}</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">
+              <span
+                style={{ backgroundColor: statusColour[status as keyof typeof statusColour] }}
+                className="block rounded-full w-3 h-3 mr-1 border border-solid border-black border-opacity-20"
+              ></span>
+              {MatrixStatus[status as keyof typeof MatrixStatus]}
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  );
+};
+
+export default MatrixResource;

package/src/ResourceBreadcrumb/ResourceBreadcrumb.spec.tsx

@@ -0,0 +1,76 @@
+/* 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 ResourceBreadcrumb from './ResourceBreadcrumb';
+
+const hierarchy = [
+  {
+    id: {
+      id: '1',
+      source: '1',
+    },
+    label: 'HandyHomes website',
+  },
+  {
+    id: {
+      id: '2',
+      source: '1',
+    },
+    label: 'Section 1',
+  },
+  {
+    id: {
+      id: '3',
+      source: '1',
+    },
+    label: 'Pages',
+  },
+];
+
+describe('ResourceBreadcrumb', () => {
+  it('Breadcrumb renders each item', async () => {
+    render(<ResourceBreadcrumb hierarchy={hierarchy} onBreadcrumbSelect={() => {}} onReturnToRoot={() => {}} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('HandyHomes website')).toBeTruthy();
+      expect(screen.getByText('HandyHomes website').tagName.toLocaleLowerCase()).toEqual('button');
+
+      expect(screen.getByText('Section 1')).toBeTruthy();
+      expect(screen.getByText('Section 1').tagName.toLocaleLowerCase()).toEqual('button');
+
+      // Last item isn't a button
+      expect(screen.getByText('Pages')).toBeTruthy();
+      expect(screen.getByText('Pages').tagName.toLocaleLowerCase()).toEqual('span');
+    });
+  });
+
+  it('Clicking breadcrumb calls onBreadcrumbSelect', async () => {
+    const onBreadcrumbSelect = jest.fn();
+
+    render(
+      <ResourceBreadcrumb hierarchy={hierarchy} onBreadcrumbSelect={onBreadcrumbSelect} onReturnToRoot={() => {}} />,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'HandyHomes website' }));
+
+    await waitFor(() => {
+      expect(onBreadcrumbSelect).toHaveBeenCalledWith({ source: '1', id: '1' });
+    });
+  });
+
+  it('Clicking root icon calls onReturnToRoot', async () => {
+    const onReturnToRoot = jest.fn();
+
+    render(<ResourceBreadcrumb hierarchy={hierarchy} onBreadcrumbSelect={() => {}} onReturnToRoot={onReturnToRoot} />);
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Return to source list' }));
+
+    await waitFor(() => {
+      expect(onReturnToRoot).toHaveBeenCalled();
+    });
+  });
+});

package/src/ResourceBreadcrumb/ResourceBreadcrumb.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import ResourceBreadcrumb from './ResourceBreadcrumb';
+import sampleHierarchy from './sample-hierarchy.json';
+
+export default {
+  title: 'Resource Breadcrumb',
+  component: ResourceBreadcrumb,
+} as Meta<typeof ResourceBreadcrumb>;
+
+const Template: StoryFn<typeof ResourceBreadcrumb> = ({ hierarchy }) => (
+  <ResourceBreadcrumb
+    hierarchy={hierarchy}
+    onBreadcrumbSelect={({ source, id }) => alert(`Breadcrumb Select: ${source} - ${id}`)}
+    onReturnToRoot={() => alert(`Return to Root`)}
+  />
+);
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  hierarchy: sampleHierarchy,
+};

package/src/ResourceBreadcrumb/ResourceBreadcrumb.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import Icon, { IconOptions } from '../Icons/Icon';
+
+import { NodeIdentifier, Hierarchy } from '../index';
+
+export interface ResourceBreadcrumbProps {
+  hierarchy: Array<Hierarchy>;
+  onBreadcrumbSelect: (node: NodeIdentifier) => void;
+  onReturnToRoot: () => void;
+}
+
+const ResourceBreadcrumb = function ({ hierarchy, onBreadcrumbSelect, onReturnToRoot }: ResourceBreadcrumbProps) {
+  return (
+    <nav aria-label="Resource breadcrumb" className="text-sm text-gray-600 px-7 my-5">
+      <ol className="flex items-center">
+        <li className="flex items-center mr-3">
+          <button type="button" onClick={onReturnToRoot}>
+            <Icon icon={'root' as IconOptions} aria-label="Return to source list" className="" />
+          </button>
+        </li>
+        {hierarchy.map(({ id, label }, index) => {
+          return (
+            <li key={`${id.source}-${id.id}`} className="mr-2 before:content-['/'] before:mr-2">
+              {index !== hierarchy.length - 1 && (
+                <button type="button" onClick={() => onBreadcrumbSelect(id)}>
+                  {label}
+                </button>
+              )}
+              {index === hierarchy.length - 1 && <span className="font-semibold">{label}</span>}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+export default ResourceBreadcrumb;

package/src/ResourceBreadcrumb/sample-hierarchy.json

@@ -0,0 +1,23 @@
+[
+  {
+    "id": {
+      "id": "1",
+      "source": "1"
+    },
+    "label": "HandyHomes website"
+  },
+  {
+    "id": {
+      "id": "2",
+      "source": "1"
+    },
+    "label": "Section 1"
+  },
+  {
+    "id": {
+      "id": "3",
+      "source": "1"
+    },
+    "label": "Pages"
+  }
+]

package/src/ResourceItem/ResourceItem.spec.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import ResourceItem from './ResourceItem';
+
+const mockOnSelect = jest.fn();
+const mockOnDrillDown = jest.fn();
+const previewModalState = jest.fn();
+
+const defaultProps: any = {
+  id: '123',
+  selected: false,
+  label: 'My Resource',
+  type: 'site',
+  childCount: 0,
+  previewModalState: previewModalState,
+  onSelect: mockOnSelect,
+  onDrillDown: mockOnDrillDown,
+  className: '',
+};
+
+describe('ResourceItem', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the component with the correct label', () => {
+    const { getByText } = render(<ResourceItem {...defaultProps} />);
+    const labelElement = getByText('My Resource');
+
+    expect(labelElement).toBeInTheDocument();
+  });
+
+  it('should call the onSelect function when the button is pressed', () => {
+    const { getByRole } = render(<ResourceItem {...defaultProps} />);
+    const buttonElement = getByRole('button');
+    fireEvent.click(buttonElement);
+
+    expect(mockOnSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call the onDrillDown function when the drill down button is pressed', () => {
+    const { getByLabelText } = render(<ResourceItem {...defaultProps} childCount={1} />);
+    const drillDownButtonElement = getByLabelText('Drill down to My Resource children');
+    fireEvent.click(drillDownButtonElement);
+
+    expect(mockOnDrillDown).toHaveBeenCalledTimes(1);
+  });
+
+  it('should disable the button when the allowedTypes prop is not in the list of allowedItems', () => {
+    const { getByRole } = render(<ResourceItem {...defaultProps} allowedTypes={['page']} />);
+    const buttonElement = getByRole('button');
+
+    expect(buttonElement).toBeDisabled();
+  });
+
+  it('should not disable the button when the allowedTypes prop is in the list of allowedItems', () => {
+    const { getByRole } = render(<ResourceItem {...defaultProps} allowedTypes={['site']} />);
+    const buttonElement = getByRole('button');
+
+    expect(buttonElement).not.toBeDisabled();
+  });
+
+  it('should not disable the button when the allowedTypes is undefined', () => {
+    const { getByRole } = render(<ResourceItem {...defaultProps} />);
+    const buttonElement = getByRole('button');
+
+    expect(buttonElement).not.toBeDisabled();
+  });
+});

package/src/ResourceItem/ResourceItem.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { useOverlayTrigger } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+
+import Icon, { IconOptions } from '../Icons/Icon';
+import { NodeIdentifier } from '../index';
+import ModalOpeningButton from '../Modal/ModalOpeningButton';
+
+interface ResourceItem {
+  key: string;
+  id: NodeIdentifier;
+  selected: boolean;
+  label: string;
+  type: string;
+  childCount: number;
+  previewModalState: OverlayTriggerState;
+  onSelect: (node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => void;
+  onDrillDown: (node: NodeIdentifier) => void;
+  className: string;
+  allowedTypes?: string[] | undefined;
+}
+
+const ResourceItem = ({
+  id,
+  selected,
+  label,
+  type,
+  childCount,
+  previewModalState,
+  onSelect,
+  onDrillDown,
+  className,
+  allowedTypes,
+}: ResourceItem) => {
+  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
+  const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(type);
+  const title = isDisabled ? "You can't select this item" : label;
+
+  return (
+    <li className={`flex items-stretch p-1 bg-white border border-grey-200 ${className}`}>
+      <ModalOpeningButton
+        type="button"
+        {...triggerProps}
+        isDisabled={isDisabled}
+        onPress={() => onSelect(id, overlayProps)}
+        className={`
+          relative grow flex items-center p-4 rounded ${selected ? 'bg-blue-100 text-blue-400' : ''} ${
+          childCount > 0 ? 'mr-2' : ''
+        } ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-100 focus:bg-gray-100'}
+        `}
+        title={title}
+      >
+        <Icon
+          icon={type as IconOptions}
+          resourceSource="matrix"
+          aria-label={type}
+          className={`mr-4 shrink-0 ${isDisabled && 'opacity-40'}`}
+        />
+        <span className="text-left break-all">{label}</span>
+        {childCount <= 0 && <Icon icon={'arrow-right' as IconOptions} className="absolute right-5" />}
+      </ModalOpeningButton>
+      {childCount > 0 && (
+        <button
+          type="button"
+          aria-label={`Drill down to ${label} children`}
+          onClick={() => onDrillDown(id)}
+          className={`relative shrink-0 flex items-center p-4 rounded before:w-px before:h-[calc(100%-0.75rem)] before:bg-gray-200 before:absolute before:top-1.5 before:-left-1 hover:bg-gray-100 focus:bg-gray-100`}
+        >
+          <span className="ml-auto flex items-center">
+            <span className="truncate w-10 text-right" title={String(childCount)}>
+              {childCount}
+            </span>
+            <Icon icon={'arrow-right' as IconOptions} className="ml-1" />
+          </span>
+        </button>
+      )}
+    </li>
+  );
+};
+
+export default ResourceItem;

package/src/ResourceList/ResourceList.spec.tsx

@@ -0,0 +1,196 @@
+/* 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 { useOverlayTriggerState, OverlayTriggerState } from 'react-stately';
+import ResourceList from './ResourceList';
+
+const resources = [
+  {
+    id: {
+      id: '1',
+      source: '1',
+    },
+    type: 'page',
+    selected: false,
+    label: 'Resource 1',
+    childCount: 0,
+  },
+  {
+    id: {
+      id: '2',
+      source: '1',
+    },
+    type: 'page',
+    selected: false,
+    label: 'Resource 2',
+    childCount: 0,
+  },
+  {
+    id: {
+      id: '3',
+      source: '1',
+    },
+    type: 'folder',
+    selected: false,
+    label: 'Resource 3',
+    childCount: 31,
+  },
+  {
+    id: {
+      id: '4',
+      source: '1',
+    },
+    type: 'folder',
+    selected: false,
+    label: 'Resource 4',
+    childCount: 55,
+  },
+  {
+    id: {
+      id: '5',
+      source: '1',
+    },
+    type: 'docx',
+    selected: false,
+    label: 'Resource 5',
+    childCount: 0,
+  },
+];
+
+function ResourceListTestWrapper({
+  constructFunction,
+}: {
+  constructFunction: (previewModalState: OverlayTriggerState) => JSX.Element;
+}) {
+  const previewModalState = useOverlayTriggerState({});
+  return constructFunction(previewModalState);
+}
+
+describe('ResourceList', () => {
+  it('Shows loading when isLoading true', async () => {
+    render(
+      <ResourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <ResourceList
+              resources={resources}
+              previewModalState={previewModalState}
+              isLoading={true}
+              onResourceSelect={() => {}}
+              onResourceDrillDown={() => {}}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('loading Resource list')).toBeTruthy();
+    });
+  });
+
+  it('Focus is moved to the resource list', async () => {
+    render(
+      <ResourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <ResourceList
+              resources={resources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onResourceSelect={() => {}}
+              onResourceDrillDown={() => {}}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText('Resource list')).toHaveFocus();
+    });
+  });
+
+  it('Resource list render each resource', async () => {
+    render(
+      <ResourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <ResourceList
+              resources={resources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onResourceSelect={() => {}}
+              onResourceDrillDown={() => {}}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByText('Resource 1')).toBeTruthy();
+      expect(screen.queryByText('Resource 2')).toBeTruthy();
+      expect(screen.queryByText('Resource 3')).toBeTruthy();
+      expect(screen.queryByText('Resource 4')).toBeTruthy();
+      expect(screen.queryByText('Resource 5')).toBeTruthy();
+    });
+  });
+
+  it('Clicking resource body triggers correct onResourceSelect', async () => {
+    const onResourceSelect = jest.fn();
+
+    render(
+      <ResourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <ResourceList
+              resources={resources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onResourceSelect={onResourceSelect}
+              onResourceDrillDown={() => {}}
+            />
+          );
+        }}
+      />,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'page Resource 1' }));
+
+    await waitFor(() => {
+      // Provides the item that was clicked and an id reference to the button that was clicked
+      expect(onResourceSelect).toHaveBeenCalledWith({ source: '1', id: '1' }, { id: expect.any(String) });
+    });
+  });
+
+  it('Clicking node child count triggers correct onResourceDrillDown', async () => {
+    const onResourceDrillDown = jest.fn();
+
+    render(
+      <ResourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <ResourceList
+              resources={resources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onResourceSelect={() => {}}
+              onResourceDrillDown={onResourceDrillDown}
+            />
+          );
+        }}
+      />,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Drill down to Resource 3 children' }));
+
+    await waitFor(() => {
+      expect(onResourceDrillDown).toHaveBeenCalledWith({ source: '1', id: '3' });
+    });
+  });
+});

package/src/ResourceList/ResourceList.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { useOverlayTriggerState } from 'react-stately';
+
+import ResourceList from './ResourceList';
+import sampleResources from './sample-resources.json';
+
+export default {
+  title: 'Resource List',
+  component: ResourceList,
+} as Meta<typeof ResourceList>;
+
+const Template: StoryFn<typeof ResourceList> = ({ resources, isLoading, allowedTypes }) => {
+  const previewModalState = useOverlayTriggerState({});
+
+  return (
+    <ResourceList
+      resources={resources}
+      previewModalState={previewModalState}
+      isLoading={isLoading}
+      onResourceSelect={({ source, id }) => alert(`Resource Select: ${source} - ${id}`)}
+      onResourceDrillDown={({ source, id }) => alert(`Child Drill Down: ${source} - ${id}`)}
+      allowedTypes={allowedTypes}
+    />
+  );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  resources: sampleResources,
+  isLoading: false,
+  allowedTypes: ['site', 'image'],
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Primary.args,
+  isLoading: true,
+  allowedTypes: ['site', 'image'],
+};

package/src/ResourceList/ResourceList.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+import { OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+
+import ResourceItem from '../ResourceItem/ResourceItem';
+import { NodeIdentifier, Resource } from '../index';
+import { SkeletonListItem } from '../Skeleton/ListItem/SkeletonListItem';
+
+export interface ResourceListProps {
+  resources: Array<Resource>;
+  previewModalState: OverlayTriggerState;
+  isLoading: boolean;
+  onResourceSelect: (node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => void;
+  onResourceDrillDown: (node: NodeIdentifier) => void;
+  allowedTypes?: string[] | undefined;
+}
+
+const ResourceList = function ({
+  resources,
+  previewModalState,
+  isLoading,
+  onResourceSelect,
+  onResourceDrillDown,
+  allowedTypes,
+}: ResourceListProps) {
+  const listRef = useRef<HTMLUListElement>(null);
+
+  // When resources change, because we are on a new page, reset focus to the list
+  useEffect(() => {
+    if (listRef.current) {
+      listRef.current?.focus({
+        preventScroll: true,
+      });
+    }
+  }, [resources]);
+
+  return (
+    <ul
+      ref={listRef}
+      tabIndex={-1}
+      aria-label={`${isLoading ? 'loading' : ''} Resource list`}
+      className="flex flex-col text-sm font-semibold px-7 my-4"
+    >
+      {isLoading && (
+        <>
+          {[...Array(8)].map((_item, index: number) => {
+            return <SkeletonListItem key={index} />;
+          })}
+        </>
+      )}
+
+      {!isLoading &&
+        resources.map(({ type, id, selected, label, childCount }) => {
+          return (
+            <ResourceItem
+              key={`${id.source}-${id.id}`}
+              id={id}
+              selected={selected}
+              label={label}
+              type={type}
+              childCount={childCount}
+              previewModalState={previewModalState}
+              onSelect={onResourceSelect}
+              onDrillDown={onResourceDrillDown}
+              className="border-b-0 first:mt-0 first:rounded-t-lg last:rounded-b-lg last:border-b"
+              allowedTypes={allowedTypes}
+            />
+          );
+        })}
+    </ul>
+  );
+};
+
+export default ResourceList;