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

package/src/PreviewPanel/PreviewPanel.spec.tsx

@@ -9,6 +9,7 @@ import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { useOverlayTrigger } from 'react-aria';
 
 import PreviewPanel from './PreviewPanel';
+import { Resource } from '../types';
 
 function PreviewPanelTestWrapper({
   constructFunction,
@@ -24,35 +25,20 @@ function PreviewPanelTestWrapper({
   return constructFunction(previewModalState, overlayProps);
 }
 
-describe('PreviewPanel', () => {
-  it('Show loading when isLoading is true', async () => {
-    const onSelect = jest.fn();
-    const onClose = jest.fn();
-
-    render(
-      <PreviewPanelTestWrapper
-        constructFunction={(previewModalState, overlayProps) => {
-          return (
-            <PreviewPanel
-              node={{ id: '1', source: '1' }}
-              resourceDetail={null}
-              isLoading
-              allowedTypes={undefined}
-              modalState={previewModalState}
-              previewModalOverlayProps={overlayProps}
-              onSelect={onSelect}
-              onClose={onClose}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getAllByText('Loading info')).toBeTruthy();
-    });
-  });
+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,
+  };
+}
 
+describe('PreviewPanel', () => {
   it('Renders a message when no item selected', async () => {
     const onSelect = jest.fn();
     const onClose = jest.fn();
@@ -62,9 +48,7 @@ describe('PreviewPanel', () => {
         constructFunction={(previewModalState, overlayProps) => {
           return (
             <PreviewPanel
-              node={null}
-              resourceDetail={null}
-              isLoading={false}
+              resource={null}
               allowedTypes={undefined}
               modalState={previewModalState}
               previewModalOverlayProps={overlayProps}
@@ -91,16 +75,7 @@ describe('PreviewPanel', () => {
           constructFunction={(previewModalState, overlayProps) => {
             return (
               <PreviewPanel
-                node={{ id: '1', source: '1' }}
-                resourceDetail={{
-                  type: 'folder',
-                  name: 'TestResource',
-                  properties: new Map([
-                    ['assetId', '12345'],
-                    ['status', 'UnderConstruction'],
-                  ]),
-                }}
-                isLoading={false}
+                resource={mockResource({ name: 'TestResource' })}
                 allowedTypes={undefined}
                 modalState={previewModalState}
                 previewModalOverlayProps={overlayProps}
@@ -129,16 +104,7 @@ describe('PreviewPanel', () => {
           constructFunction={(previewModalState, overlayProps) => {
             return (
               <PreviewPanel
-                node={{ id: '1', source: '1' }}
-                resourceDetail={{
-                  type: 'folder',
-                  name: 'TestResource',
-                  properties: new Map([
-                    ['assetId', '12345'],
-                    ['status', 'UnderConstruction'],
-                  ]),
-                }}
-                isLoading={false}
+                resource={mockResource({ name: 'TestResource' })}
                 allowedTypes={undefined}
                 modalState={previewModalState}
                 previewModalOverlayProps={overlayProps}
@@ -160,22 +126,14 @@ describe('PreviewPanel', () => {
   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
-              node={{ id: '1', source: '1' }}
-              resourceDetail={{
-                type: 'folder',
-                name: 'TestResource',
-                properties: new Map([
-                  ['assetId', '12345'],
-                  ['status', 'UnderConstruction'],
-                ]),
-              }}
-              isLoading={false}
+              resource={resource}
               allowedTypes={undefined}
               modalState={previewModalState}
               previewModalOverlayProps={overlayProps}
@@ -191,7 +149,7 @@ describe('PreviewPanel', () => {
     user.click(screen.getByRole('button'));
 
     await waitFor(() => {
-      expect(onSelect).toHaveBeenCalledWith({ id: '1', source: '1' });
+      expect(onSelect).toHaveBeenCalledWith(resource);
     });
   });
 });

package/src/PreviewPanel/PreviewPanel.stories.tsx

@@ -10,19 +10,17 @@ export default {
   component: PreviewPanel,
 } as Meta<typeof PreviewPanel>;
 
-const Template: StoryFn<typeof PreviewPanel> = ({ node, resourceDetail, isLoading, allowedTypes }) => {
+const Template: StoryFn<typeof PreviewPanel> = ({ resource, allowedTypes }) => {
   const previewModalState = useOverlayTriggerState({});
   const { overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
 
   return (
     <PreviewPanel
-      node={node}
-      resourceDetail={resourceDetail}
+      resource={resource}
       modalState={previewModalState}
       previewModalOverlayProps={overlayProps}
-      isLoading={isLoading}
       allowedTypes={allowedTypes}
-      onSelect={({ source, id }) => alert(`Resource Selected: ${source} - ${id}`)}
+      onSelect={({ id, name }) => alert(`Resource Selected: ${id} - ${name}`)}
       onClose={() => alert(`OnClose Selected`)}
     />
   );
@@ -30,32 +28,26 @@ const Template: StoryFn<typeof PreviewPanel> = ({ node, resourceDetail, isLoadin
 
 export const Primary = Template.bind({});
 Primary.args = {
-  node: {
+  resource: {
     id: '1',
-    source: '1',
-  },
-  resourceDetail: {
-    type: 'page',
     name: 'Products',
-    properties: new Map([
-      ['assetId', '12345'],
-      ['status', 'UnderConstruction'],
-    ]),
+    type: {
+      code: 'page_standard',
+      name: 'Standard Page',
+    },
+    status: {
+      code: 'live',
+      name: 'Live',
+    },
+    url: 'http://my-squiz.net/assets/1',
+    urls: [],
+    childCount: 0,
   },
-  isLoading: false,
-  isNotSelected: false,
   allowedTypes: undefined,
 };
 
 export const NoSelected = Template.bind({});
 NoSelected.args = {
   ...Primary.args,
-  node: null,
-  resourceDetail: null,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  ...Primary.args,
-  isLoading: true,
+  resource: null,
 };

package/src/PreviewPanel/PreviewPanel.tsx

@@ -1,29 +1,24 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 
 import Icon, { IconOptions } from '../Icons/Icon';
 import MatrixResource from './details/MatrixResource';
-import { NodeIdentifier, ResourceDetail } from '../index';
+import { Resource } from '../types';
 import PreviewModal from './PreviewModal';
-import Spinner from '../Spinner/Spinner';
 
 export interface PreviewPanelProps {
-  node: NodeIdentifier | null;
-  resourceDetail: ResourceDetail | null;
-  isLoading: boolean;
+  resource: Resource | null;
   modalState: OverlayTriggerState;
   previewModalOverlayProps: DOMAttributes<FocusableElement>;
   allowedTypes: string[] | undefined;
-  onSelect: (node: NodeIdentifier) => void;
+  onSelect: (resource: Resource) => void;
   onClose: () => void;
 }
 
 const PreviewPanel = function ({
-  node,
-  resourceDetail,
-  isLoading,
+  resource,
   previewModalOverlayProps,
   modalState,
   onSelect,
@@ -31,44 +26,23 @@ const PreviewPanel = function ({
 }: PreviewPanelProps) {
   // Watch the media size to see if we are on mobile size
   const isMobile = useMediaQuery({ query: '(max-width: 640px)' });
-  const previousIsMobile = useRef<boolean | null>(null);
 
+  // If we are on mobile and the selected resource changes show the preview panel modal.
   useEffect(() => {
-    if (node && isMobile) {
-      modalState.setOpen(true);
-      previousIsMobile.current = true;
-    } else {
-      previousIsMobile.current = false;
+    if (!modalState.isOpen) {
+      modalState.setOpen(Boolean(resource && isMobile));
     }
-  }, []);
+  }, [resource, isMobile]);
 
-  // If the media changes from mobile to non mobile or reverse toggle modal showing to undo the aria-hidden etc
-  useEffect(() => {
-    // Only trigger if we have a node selected, otherwise the modal will re-open itself as soon as its closed
-    if (node) {
-      if (previousIsMobile.current !== isMobile) {
-        previousIsMobile.current = isMobile;
-
-        if (isMobile) {
-          // If no mobile open the modal automatically
-          modalState.setOpen(true);
-        } else {
-          // If not in mobile close the modal automatically
-          modalState.setOpen(false);
-        }
-      }
-    }
-  }, [node, isMobile, modalState]);
-
-  let previewPanel = node && resourceDetail && (
+  const previewPanel = resource && (
     <>
       <div className="flex flex-col grow">
-        <MatrixResource {...resourceDetail} />
+        <MatrixResource resource={resource} />
       </div>
       <div className="flex justify-end border-t border-gray-300">
         <button
           type="button"
-          onClick={() => onSelect(node)}
+          onClick={() => onSelect(resource)}
           className="rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5"
         >
           Select
@@ -76,16 +50,6 @@ const PreviewPanel = function ({
       </div>
     </>
   );
-  if (isLoading) {
-    previewPanel = (
-      <div className="flex flex-col grow">
-        <div className="flex flex-col grow items-center mt-20 mx-20">
-          <Spinner />
-          <div className="text-sm text-gray-600 text-center mt-4">Loading info</div>
-        </div>
-      </div>
-    );
-  }
 
   return (
     <div className="sm:overflow-y-scroll sm:flex-1 sm:grow-[2] bg-white">
@@ -93,7 +57,7 @@ const PreviewPanel = function ({
       {!isMobile && <h3 className="sr-only">Resource Details</h3>}
 
       {/* Nothing selected, show an info message */}
-      {node === null && (
+      {resource === null && (
         <div className="max-sm:hidden flex flex-col h-full">
           <div className="flex flex-col grow items-center mt-20 mx-20">
             <Icon icon={'resource-select' as IconOptions} aria-hidden />
@@ -108,14 +72,14 @@ const PreviewPanel = function ({
       )}
 
       {/* Resource details shows in a new modal / bottom popover on mobile size */}
-      {node && isMobile && modalState.isOpen && (
+      {resource && isMobile && modalState.isOpen && (
         <PreviewModal state={modalState} overlayProps={previewModalOverlayProps} onClose={onClose}>
           {previewPanel}
         </PreviewModal>
       )}
 
       {/* If not mobile, just print the details out */}
-      {node && !isMobile && <div className="flex flex-col h-full">{previewPanel}</div>}
+      {resource && !isMobile && <div className="flex flex-col h-full">{previewPanel}</div>}
     </div>
   );
 };

package/src/PreviewPanel/details/MatrixResource.tsx

@@ -1,53 +1,57 @@
 import React from 'react';
 
-import { ResourceDetail } from '../../index';
+import { Resource } from '../../types';
 import Icon, { IconOptions } from '../../Icons/Icon';
 
 const statusColour = {
-  UnderConstruction: '#94D1F9',
-  Live: '#BEE509',
+  // Duplicated from the Matrix repository.
+  // src/Api/AssetManagementApi/Constants/AssetStatuses.php - contains a list of possible statuses.
+  // frontend/src/styles/common/status-colors.scss - contains the colours used for those statuses in Matrix.
+  unknown: '#ff0000',
+  archived: '#c98a67',
+  under_construction: '#94d1f9',
+  pending_approval: '#d0bbf0',
+  approved_to_go_live: '#f7eaa2',
+  live: '#bfe60a',
+  up_for_review: '#72cd32',
+  safe_editing: '#ff97b0',
+  safe_editing_pending_approval: '#d688db',
+  safe_edit_approved_to_go_live: '#ffb34a',
 };
 
-export enum MatrixStatus {
-  UnderConstruction = 'Under Construction',
-  Live = 'Live',
-}
-
-export type MatrixAsset = ResourceDetail & {
-  assetId?: string;
-  status?: MatrixStatus;
+type MatrixResourceProps = {
+  resource: Resource;
 };
 
-const MatrixResource = ({ type, name, properties }: ResourceDetail) => {
-  const assetId = properties.get('assetId') as string;
-  const status = properties.get('status');
+const MatrixResource = ({ resource: { id, type, name, status } }: MatrixResourceProps) => {
+  const color = statusColour[status.code as keyof typeof statusColour] || statusColour.unknown;
 
   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" />
+        <Icon icon={type.code 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>
+            <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">#{assetId}</dd>
+            <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">
               <span
-                style={{ backgroundColor: statusColour[status as keyof typeof statusColour] }}
+                style={{ backgroundColor: color }}
                 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]}
+              {status.name}
             </dd>
           </div>
         </dl>

package/src/ResourceBreadcrumb/ResourceBreadcrumb.spec.tsx

@@ -7,29 +7,25 @@ import ResourceBreadcrumb from './ResourceBreadcrumb';
 
 const hierarchy = [
   {
-    id: {
-      id: '1',
-      source: '1',
-    },
+    key: '1',
     label: 'HandyHomes website',
+    node: 'A',
   },
   {
-    id: {
-      id: '2',
-      source: '1',
-    },
+    key: '2',
     label: 'Section 1',
+    node: 'B',
   },
   {
-    id: {
-      id: '3',
-      source: '1',
-    },
+    key: '3',
     label: 'Pages',
+    node: 'C',
   },
 ];
 
 describe('ResourceBreadcrumb', () => {
+  const onBreadcrumbSelect = jest.fn();
+
   it('Breadcrumb renders each item', async () => {
     render(<ResourceBreadcrumb hierarchy={hierarchy} onBreadcrumbSelect={() => {}} onReturnToRoot={() => {}} />);
 
@@ -47,8 +43,6 @@ describe('ResourceBreadcrumb', () => {
   });
 
   it('Clicking breadcrumb calls onBreadcrumbSelect', async () => {
-    const onBreadcrumbSelect = jest.fn();
-
     render(
       <ResourceBreadcrumb hierarchy={hierarchy} onBreadcrumbSelect={onBreadcrumbSelect} onReturnToRoot={() => {}} />,
     );
@@ -57,7 +51,7 @@ describe('ResourceBreadcrumb', () => {
     user.click(screen.getByRole('button', { name: 'HandyHomes website' }));
 
     await waitFor(() => {
-      expect(onBreadcrumbSelect).toHaveBeenCalledWith({ source: '1', id: '1' });
+      expect(onBreadcrumbSelect).toHaveBeenCalledWith(hierarchy[0].node);
     });
   });
 
@@ -80,18 +74,14 @@ describe('ResourceBreadcrumb', () => {
         hierarchy={[
           ...hierarchy,
           {
-            id: {
-              id: '4',
-              source: '1',
-            },
+            key: '4',
             label: 'Item 4',
+            node: 'D',
           },
           {
-            id: {
-              id: '5',
-              source: '1',
-            },
+            key: '5',
             label: 'Item 5',
+            node: 'E',
           },
         ]}
         onBreadcrumbSelect={() => {}}

package/src/ResourceBreadcrumb/ResourceBreadcrumb.stories.tsx

@@ -12,7 +12,7 @@ export default {
 const Template: StoryFn<typeof ResourceBreadcrumb> = ({ hierarchy }) => (
   <ResourceBreadcrumb
     hierarchy={hierarchy}
-    onBreadcrumbSelect={({ source, id }) => alert(`Breadcrumb Select: ${source} - ${id}`)}
+    onBreadcrumbSelect={(node) => alert(`Node Select: ${node}`)}
     onReturnToRoot={() => alert(`Return to Root`)}
   />
 );

package/src/ResourceBreadcrumb/ResourceBreadcrumb.tsx

@@ -1,16 +1,15 @@
 import React, { useState, useCallback, useEffect } from 'react';
 
 import Icon, { IconOptions } from '../Icons/Icon';
+import { Hierarchy } from '../types';
 
-import { NodeIdentifier, Hierarchy } from '../index';
-
-export interface ResourceBreadcrumbProps {
-  hierarchy: Array<Hierarchy>;
-  onBreadcrumbSelect: (node: NodeIdentifier) => void;
+export interface ResourceBreadcrumbProps<T> {
+  hierarchy: Hierarchy<T>;
+  onBreadcrumbSelect: (node: T) => void;
   onReturnToRoot: () => void;
 }
 
-const ResourceBreadcrumb = function ({ hierarchy, onBreadcrumbSelect, onReturnToRoot }: ResourceBreadcrumbProps) {
+const ResourceBreadcrumb = function <T>({ hierarchy, onBreadcrumbSelect, onReturnToRoot }: ResourceBreadcrumbProps<T>) {
   // Track expanded state
   const [expandedHierarchy, setExpandedHierarchy] = useState(false);
 
@@ -37,14 +36,14 @@ const ResourceBreadcrumb = function ({ hierarchy, onBreadcrumbSelect, onReturnTo
             <Icon icon={'root' as IconOptions} aria-label="Return to source list" className="" />
           </button>
         </li>
-        {hierarchy.map(({ id, label }, index) => {
+        {hierarchy.map(({ key, label, node }, index) => {
           return (
             <li
-              key={`${id.source}-${id.id}`}
+              key={`${key}`}
               className="resource-breadcrumb__item max-md:hidden flex items-center mr-2 before:content-['/'] before:mr-2"
             >
               {index !== hierarchy.length - 1 && (
-                <button type="button" onClick={() => onBreadcrumbSelect(id)}>
+                <button type="button" onClick={() => onBreadcrumbSelect(node)}>
                   <div className={`resource-breadcrumb__label`} title={label}>
                     {label}
                   </div>

package/src/ResourceBreadcrumb/sample-hierarchy.json

@@ -1,37 +1,27 @@
 [
   {
-    "id": {
-      "id": "1",
-      "source": "1"
-    },
-    "label": "HandyHomes website"
+    "key": "1",
+    "label": "HandyHomes website",
+    "node": "A"
   },
   {
-    "id": {
-      "id": "2",
-      "source": "1"
-    },
-    "label": "Section 1 very long name"
+    "key": "2",
+    "label": "Section 1 very long name",
+    "node": "B"
   },
   {
-    "id": {
-      "id": "4",
-      "source": "1"
-    },
-    "label": "Page 1 very long name"
+    "key": "3",
+    "label": "Page 1 very long name",
+    "node": "C"
   },
   {
-    "id": {
-      "id": "5",
-      "source": "1"
-    },
-    "label": "Page 71 very long name"
+    "key": "4",
+    "label": "Page 71 very long name",
+    "node": "D"
   },
   {
-    "id": {
-      "id": "3",
-      "source": "1"
-    },
-    "label": "Pages very long name"
+    "key": "5",
+    "label": "Pages very long name",
+    "node": "E"
   }
 ]

package/src/ResourceItem/ResourceItem.tsx

@@ -4,25 +4,23 @@ 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;
+interface ResourceItem<T> {
+  item: T;
+  selected?: boolean;
   label: string;
   type: string;
   childCount: number;
   previewModalState: OverlayTriggerState;
-  onSelect: (node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => void;
-  onDrillDown: (node: NodeIdentifier) => void;
+  onSelect: (node: T, overlayProps: DOMAttributes<FocusableElement>) => void;
+  onDrillDown: (node: T) => void;
   className: string;
   allowedTypes?: string[] | undefined;
 }
 
-const ResourceItem = ({
-  id,
+const ResourceItem = <T,>({
+  item,
   selected,
   label,
   type,
@@ -32,7 +30,7 @@ const ResourceItem = ({
   onDrillDown,
   className,
   allowedTypes,
-}: ResourceItem) => {
+}: ResourceItem<T>) => {
   const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
   const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(type);
   const title = isDisabled ? "You can't select this item" : label;
@@ -43,7 +41,7 @@ const ResourceItem = ({
         type="button"
         {...triggerProps}
         isDisabled={isDisabled}
-        onPress={() => onSelect(id, overlayProps)}
+        onPress={() => onSelect(item, overlayProps)}
         className={`
           relative grow flex items-center p-4 rounded ${selected ? 'bg-blue-100 text-blue-400' : ''} ${
           childCount > 0 ? 'mr-2' : ''
@@ -64,7 +62,7 @@ const ResourceItem = ({
         <button
           type="button"
           aria-label={`Drill down to ${label} children`}
-          onClick={() => onDrillDown(id)}
+          onClick={() => onDrillDown(item)}
           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">