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

package/src/SourceDropdown/SourceDropdown.tsx

@@ -1,27 +1,28 @@
 import React, { useState, useRef } from 'react';
 import { useFocusWithin, useKeyboard } from '@react-aria/interactions';
 
-import type { Source, Resource, NodeIdentifier } from '../index';
+import type { Source, ScopedSource } from '../types';
 import Spinner from '../Spinner/Spinner';
 import Icon, { IconOptions } from '../Icons/Icon';
 
 import uuid from '../uuid';
+import { useCategorisedSources } from '../Hooks/useCategorisedSources';
 
 export default function SourceDropdown({
   sources,
-  currentSource,
+  selectedSource,
   isLoading,
   onRootSelect,
   onSourceSelect,
 }: {
-  sources: Array<Source>;
-  currentSource: NodeIdentifier | null;
+  sources: Source[];
+  selectedSource: ScopedSource | null;
   isLoading: boolean;
   onRootSelect: () => void;
-  onSourceSelect: (node: NodeIdentifier, resetHierarchy: boolean) => void;
+  onSourceSelect: (source: ScopedSource) => void;
 }) {
+  const categorisedSources = useCategorisedSources(sources);
   const [uniqueId] = useState(uuid());
-
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setIsOpen] = useState(false);
 
@@ -42,10 +43,10 @@ export default function SourceDropdown({
     },
   });
 
-  const handleSourceClick = (id: NodeIdentifier) => {
+  const handleSourceClick = (source: ScopedSource) => {
     setIsOpen(false);
     buttonRef.current?.focus();
-    onSourceSelect(id, true);
+    onSourceSelect(source);
   };
 
   const handleRootSelect = () => {
@@ -54,19 +55,6 @@ export default function SourceDropdown({
     onRootSelect();
   };
 
-  let currentResource: Resource | undefined = undefined;
-
-  for (let i = 0; i < sources.length; i++) {
-    const source = sources[i];
-    if (currentSource?.source === source.id) {
-      currentResource = source.nodes.find((node) => {
-        if (node.id.id === currentSource?.id) {
-          return node;
-        }
-      });
-    }
-  }
-
   return (
     <div {...focusWithinProps} {...keyboardProps} className="relative w-72 border border-2 rounded border-gray-300">
       <button
@@ -78,15 +66,20 @@ export default function SourceDropdown({
         onClick={() => setIsOpen(!isOpen)}
         className="relative flex items-center text-sm font-semibold p-2 w-full"
       >
-        {currentResource && (
+        {selectedSource && (
           <>
             <span className="sr-only">current source </span>
-            <Icon icon={currentResource.type as IconOptions} resourceSource="matrix" aria-hidden className="mr-2.5" />
-            <div className="truncate max-w-[200px]">{currentResource.label}</div>
+            <Icon
+              icon={selectedSource.resource?.type.code as IconOptions}
+              resourceSource="matrix"
+              aria-hidden
+              className="mr-2.5"
+            />
+            <div className="truncate max-w-[200px]">{selectedSource.resource?.name || selectedSource.source.name}</div>
           </>
         )}
 
-        {!currentResource && (
+        {!selectedSource && (
           <>
             <span className="sr-only">view </span>
             <Icon icon={'root' as IconOptions} aria-hidden className="mr-2.5" />
@@ -122,38 +115,38 @@ export default function SourceDropdown({
           </li>
         )}
         {!isLoading &&
-          sources.map(({ id: sourceId, name, nodes }, index) => {
+          categorisedSources.map(({ key, label, sources }, index) => {
             return (
-              <li
-                key={sourceId}
-                className={`flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}`}
-              >
+              <li key={key} className={`flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}`}>
                 <div className="relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0">
-                  <span className="z-10 bg-gray-100 px-2.5">{name}</span>
+                  <span className="z-10 bg-gray-100 px-2.5">{label}</span>
                 </div>
-                {nodes?.length > 0 && (
-                  <ul aria-label={`${name} nodes`} className="flex flex-col mt-2">
-                    {nodes.map(({ type, id: nodeId, selected, label }) => {
+                {sources?.length > 0 && (
+                  <ul aria-label={`${label} nodes`} className="flex flex-col mt-2">
+                    {sources.map(({ source, resource }) => {
+                      const isSelectedSource =
+                        source.id === selectedSource?.source.id && resource?.id === selectedSource?.resource?.id;
+
                       return (
                         <li
-                          key={`${sourceId}-${nodeId.id}`}
+                          key={`${source.id}-${resource?.id}`}
                           className="flex items-center bg-white border border-b-0 last:border-b border-grey-200 first:rounded-t last:rounded-b"
                         >
                           <button
                             type="button"
-                            onClick={() => handleSourceClick(nodeId)}
+                            onClick={() => handleSourceClick({ source, resource })}
                             className={`relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100 ${
-                              selected ? 'bg-blue-100 text-blue-400' : ''
+                              isSelectedSource ? 'bg-blue-100 text-blue-400' : ''
                             }`}
                           >
                             <Icon
-                              icon={type as IconOptions}
+                              icon={resource?.type.code as IconOptions}
                               resourceSource="matrix"
-                              aria-label={type}
+                              aria-label={resource?.type.name}
                               className="shrink-0 mr-2.5"
                             />
-                            <span className="text-left mr-7">{label}</span>
-                            {nodeId === currentResource?.id && (
+                            <span className="text-left mr-7">{resource?.name || source.name}</span>
+                            {isSelectedSource && (
                               <Icon
                                 icon={'selected' as IconOptions}
                                 aria-label="selected"

package/src/SourceList/SourceList.spec.tsx

@@ -2,63 +2,60 @@
 import React from 'react';
 import { screen, render, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
+import { mockSource } from '../__mocks__/MockModels';
 import { useOverlayTriggerState, OverlayTriggerState } from 'react-stately';
 import SourceList from './SourceList';
+import { Source } from '../types';
 
-const sources = [
-  {
+const sources: Source[] = [
+  mockSource({
     id: '1',
     name: 'Source 1',
     nodes: [
       {
-        id: {
-          id: '1',
-          source: '1',
+        id: '1',
+        type: {
+          code: 'site',
+          name: 'Site',
         },
-        type: 'site',
-        selected: false,
-        label: 'Node 1',
+        name: 'Node 1',
         childCount: 21,
       },
       {
-        id: {
-          id: '2',
-          source: '1',
+        id: '2',
+        type: {
+          code: 'site',
+          name: 'Site',
         },
-        type: 'site',
-        selected: false,
-        label: 'Node 2',
+        name: 'Node 2',
         childCount: 13,
       },
     ],
-  },
-  {
+  }),
+  mockSource({
     id: '2',
     name: 'Source 2',
     nodes: [
       {
-        id: {
-          id: '1',
-          source: '2',
+        id: '3',
+        type: {
+          code: 'site',
+          name: 'Site',
         },
-        type: 'site',
-        selected: false,
-        label: 'Node 3',
+        name: 'Node 3',
         childCount: 15,
       },
       {
-        id: {
-          id: '2',
-          source: '2',
+        id: '4',
+        type: {
+          code: 'site',
+          name: 'Site',
         },
-        type: 'site',
-        selected: false,
-        label: 'Node 4',
+        name: 'Node 4',
         childCount: 10,
       },
     ],
-  },
+  }),
 ];
 
 function SourceListTestWrapper({
@@ -191,7 +188,13 @@ describe('SourceList', () => {
 
     await waitFor(() => {
       // Provides the item that was clicked and an id reference to the button that was clicked
-      expect(onSourceSelect).toHaveBeenCalledWith({ source: '1', id: '1' }, { id: expect.any(String) });
+      expect(onSourceSelect).toHaveBeenCalledWith(
+        {
+          source: sources[0],
+          resource: sources[0].nodes[0],
+        },
+        { id: expect.any(String) },
+      );
     });
   });
 
@@ -218,7 +221,10 @@ describe('SourceList', () => {
     user.click(screen.getByRole('button', { name: 'Drill down to Node 1 children' }));
 
     await waitFor(() => {
-      expect(onSourceDrillDown).toHaveBeenCalledWith({ source: '1', id: '1' });
+      expect(onSourceDrillDown).toHaveBeenCalledWith({
+        source: sources[0],
+        resource: sources[0].nodes[0],
+      });
     });
   });
 });

package/src/SourceList/SourceList.tsx

@@ -3,16 +3,17 @@ import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 
 import ResourceItem from '../ResourceItem/ResourceItem';
-import { NodeIdentifier, Source } from '../index';
+import { Source, ScopedSource } from '../types';
 import { SkeletonList } from '../Skeleton/List/SkeletonList';
 import clsx from 'clsx';
+import { useCategorisedSources } from '../Hooks/useCategorisedSources';
 
 export interface SourceListProps {
-  sources: Array<Source>;
+  sources: Source[];
   previewModalState: OverlayTriggerState;
   isLoading: boolean;
-  onSourceSelect: (node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => void;
-  onSourceDrillDown: (node: NodeIdentifier) => void;
+  onSourceSelect: (node: ScopedSource, overlayProps: DOMAttributes<FocusableElement>) => void;
+  onSourceDrillDown: (node: ScopedSource) => void;
   allowedTypes?: string[] | undefined;
 }
 
@@ -24,6 +25,7 @@ const SourceList = function ({
   onSourceDrillDown,
   allowedTypes,
 }: SourceListProps) {
+  const categorisedSources = useCategorisedSources(sources);
   const listRef = useRef<HTMLUListElement>(null);
 
   useEffect(() => {
@@ -53,26 +55,22 @@ const SourceList = function ({
       )}
 
       {!isLoading &&
-        sources.map(({ id: sourceId, name, nodes }, index) => {
+        categorisedSources.map(({ key, label, sources }, index) => {
           return (
-            <li
-              key={sourceId}
-              className={`flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}`}
-            >
+            <li key={key} className={`flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}`}>
               <div className="relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0">
-                <span className="z-10 bg-gray-100 px-2.5">{name}</span>
+                <span className="z-10 bg-gray-100 px-2.5">{label}</span>
               </div>
-              {nodes?.length > 0 && (
-                <ul aria-label={`${name} nodes`} className="flex flex-col">
-                  {nodes.map(({ type, id: nodeId, selected, label, childCount }) => {
+              {sources.length > 0 && (
+                <ul aria-label={`${label} nodes`} className="flex flex-col">
+                  {sources.map(({ source, resource }) => {
                     return (
                       <ResourceItem
-                        key={`${sourceId}-${nodeId.id}`}
-                        id={nodeId}
-                        selected={selected}
-                        label={label}
-                        type={type}
-                        childCount={childCount}
+                        key={`${source.id}-${resource?.id}`}
+                        item={{ source, resource }}
+                        label={resource?.name || source.name}
+                        type={resource?.type.code || 'folder'}
+                        childCount={resource?.childCount || 0}
                         previewModalState={previewModalState}
                         onSelect={onSourceSelect}
                         onDrillDown={onSourceDrillDown}

package/src/SourceList/sample-sources.json

@@ -4,24 +4,43 @@
     "name": "Acme corporate system",
     "nodes": [
       {
-        "id": {
-          "id": "1",
-          "source": "1"
+        "id": "1",
+        "type": {
+          "code": "site",
+          "name": "Site"
         },
-        "type": "site",
-        "selected": true,
-        "label": "HandyHomes Website",
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "name": "HandyHomes Website",
         "childCount": 21
       },
       {
-        "id": {
-          "id": "2",
-          "source": "1"
+        "id": "2",
+        "type": {
+          "code": "site",
+          "name": "Site"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
         },
-        "type": "site",
-        "selected": false,
-        "label": "Another Website very long title to make it wrap to multiple lines",
+        "name": "Another Website very long title to make it wrap to multiple lines",
         "childCount": 135877
+      },
+      {
+        "id": "3",
+        "type": {
+          "code": "folder",
+          "name": "Folder"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "name": "Images",
+        "childCount": 100
       }
     ]
   },
@@ -30,81 +49,171 @@
     "name": "Acme internal system",
     "nodes": [
       {
-        "id": {
-          "id": "1",
-          "source": "2"
+        "id": "4",
+        "type": {
+          "code": "site",
+          "name": "Site"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
         },
-        "type": "site",
-        "selected": false,
-        "label": "Intranet Website",
+        "name": "Intranet Website",
         "childCount": 15
       },
       {
-        "id": {
-          "id": "2",
-          "source": "2"
+        "id": "5",
+        "type": {
+          "code": "site",
+          "name": "Site"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
         },
-        "type": "site",
-        "selected": false,
-        "label": "Social Website",
+        "name": "Social Website",
         "childCount": 10
       }
     ]
   },
   {
     "id": "3",
-    "name": "Other system",
-    "nodes": [
-      {
-        "id": {
-          "id": "1",
-          "source": "3"
-        },
-        "type": "folder",
-        "selected": false,
-        "label": "Digital asset manager",
-        "childCount": 0
-      },
-      {
-        "id": {
-          "id": "2",
-          "source": "3"
-        },
-        "type": "image",
-        "selected": false,
-        "label": "Unsplash image library",
-        "childCount": 0
-      },
-      {
-        "id": {
-          "id": "3",
-          "source": "3"
-        },
-        "type": "image",
-        "selected": false,
-        "label": "Unsplash image library",
-        "childCount": 0
-      },
-      {
-        "id": {
-          "id": "4",
-          "source": "3"
-        },
-        "type": "image",
-        "selected": false,
-        "label": "Unsplash image library",
-        "childCount": 0
-      },
-      {
-        "id": {
-          "id": "5",
-          "source": "3"
-        },
-        "type": "image",
-        "selected": false,
-        "label": "Unsplash image library",
-        "childCount": 0
-      }
-    ]
+    "name": "Digital asset manager",
+    "nodes": []
+  },
+  {
+    "id": "4",
+    "name": "Unsplash image library",
+    "nodes": []
+  },
+  {
+    "id": "5",
+    "name": "Unsplash image library 2",
+    "nodes": []
+  },
+  {
+    "id": "6",
+    "name": "Unsplash image library 3",
+    "nodes": []
+  },
+  {
+    "id": "7",
+    "name": "Unsplash image library 4",
+    "nodes": []
+  },
+  {
+    "id": "8",
+    "name": "Unsplash image library 5",
+    "nodes": []
+  },
+  {
+    "id": "9",
+    "name": "Unsplash image library 6",
+    "nodes": []
+  },
+  {
+    "id": "10",
+    "name": "Unsplash image library 7",
+    "nodes": []
+  },
+  {
+    "id": "11",
+    "name": "Unsplash image library 8",
+    "nodes": []
+  },
+  {
+    "id": "12",
+    "name": "Unsplash image library 9",
+    "nodes": []
+  },
+  {
+    "id": "13",
+    "name": "Unsplash image library 10",
+    "nodes": []
+  },
+  {
+    "id": "14",
+    "name": "Unsplash image library 11",
+    "nodes": []
+  },
+  {
+    "id": "15",
+    "name": "Unsplash image library 12",
+    "nodes": []
+  },
+  {
+    "id": "16",
+    "name": "Unsplash image library 13",
+    "nodes": []
+  },
+  {
+    "id": "17",
+    "name": "Unsplash image library 14",
+    "nodes": []
+  },
+  {
+    "id": "18",
+    "name": "Unsplash image library 15",
+    "nodes": []
+  },
+  {
+    "id": "19",
+    "name": "Unsplash image library 16",
+    "nodes": []
+  },
+  {
+    "id": "20",
+    "name": "Unsplash image library 17",
+    "nodes": []
+  },
+  {
+    "id": "21",
+    "name": "Unsplash image library 18",
+    "nodes": []
+  },
+  {
+    "id": "22",
+    "name": "Unsplash image library 19",
+    "nodes": []
+  },
+  {
+    "id": "23",
+    "name": "Unsplash image library 20",
+    "nodes": []
+  },
+  {
+    "id": "24",
+    "name": "Unsplash image library 21",
+    "nodes": []
+  },
+  {
+    "id": "25",
+    "name": "Unsplash image library 22",
+    "nodes": []
+  },
+  {
+    "id": "26",
+    "name": "Unsplash image library 23",
+    "nodes": []
+  },
+  {
+    "id": "27",
+    "name": "Unsplash image library 24",
+    "nodes": []
+  },
+  {
+    "id": "28",
+    "name": "Unsplash image library 25",
+    "nodes": []
+  },
+  {
+    "id": "29",
+    "name": "Unsplash image library 26",
+    "nodes": []
+  },
+  {
+    "id": "30",
+    "name": "Unsplash image library 27",
+    "nodes": []
   }
 ]

package/src/__mocks__/MockModels.ts

@@ -0,0 +1,30 @@
+import { DeepPartial, Resource, ScopedSource, Source } from '../types';
+
+export const mockSource = (properties: DeepPartial<Source> = {}): Source => {
+  return {
+    id: '1',
+    name: 'Test source',
+    ...properties,
+    nodes: properties?.nodes?.map((node) => mockResource(node as Partial<Resource>)) || [],
+  };
+};
+
+export const mockResource = (properties: Partial<Resource> = {}): Resource => {
+  return {
+    id: '1',
+    name: 'Test resource',
+    type: { code: 'folder', name: 'Folder' },
+    status: { code: 'live', name: 'Live' },
+    url: 'https://no-where.com',
+    urls: [],
+    childCount: 0,
+    ...properties,
+  };
+};
+
+export const mockScopedSource = (properties: DeepPartial<ScopedSource> = {}): ScopedSource => {
+  return {
+    source: mockSource(properties?.source),
+    resource: properties?.resource ? mockResource(properties?.resource as Partial<Resource>) : null,
+  };
+};