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

package/src/ResourceList/ResourceList.spec.tsx

@@ -2,61 +2,16 @@
 import React from 'react';
 import { screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
+import { mockResource } from '../__mocks__/MockModels';
 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,
-  },
+  mockResource({ id: '1', type: { code: 'page', name: 'Page' }, name: 'Resource 1' }),
+  mockResource({ id: '2', type: { code: 'page', name: 'Page' }, name: 'Resource 2' }),
+  mockResource({ id: '3', type: { code: 'folder', name: 'Folder' }, name: 'Resource 3', childCount: 31 }),
+  mockResource({ id: '4', type: { code: 'folder', name: 'Folder' }, name: 'Resource 4', childCount: 55 }),
+  mockResource({ id: '5', type: { code: 'word_doc', name: 'MS Word Document' }, name: 'Resource 5' }),
 ];
 
 function ResourceListTestWrapper({
@@ -163,7 +118,7 @@ describe('ResourceList', () => {
 
     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) });
+      expect(onResourceSelect).toHaveBeenCalledWith(resources[0], { id: expect.any(String) });
     });
   });
 
@@ -190,7 +145,7 @@ describe('ResourceList', () => {
     user.click(screen.getByRole('button', { name: 'Drill down to Resource 3 children' }));
 
     await waitFor(() => {
-      expect(onResourceDrillDown).toHaveBeenCalledWith({ source: '1', id: '3' });
+      expect(onResourceDrillDown).toHaveBeenCalledWith(resources[2]);
     });
   });
 });

package/src/ResourceList/ResourceList.stories.tsx

@@ -18,8 +18,8 @@ const Template: StoryFn<typeof ResourceList> = ({ resources, isLoading, allowedT
       resources={resources}
       previewModalState={previewModalState}
       isLoading={isLoading}
-      onResourceSelect={({ source, id }) => alert(`Resource Select: ${source} - ${id}`)}
-      onResourceDrillDown={({ source, id }) => alert(`Child Drill Down: ${source} - ${id}`)}
+      onResourceSelect={({ id }) => alert(`Resource Select: ${id}`)}
+      onResourceDrillDown={({ id }) => alert(`Child Drill Down: ${id}`)}
       allowedTypes={allowedTypes}
     />
   );

package/src/ResourceList/ResourceList.tsx

@@ -3,20 +3,22 @@ import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 
 import ResourceItem from '../ResourceItem/ResourceItem';
-import { NodeIdentifier, Resource } from '../index';
+import { Resource } from '../types';
 import { SkeletonListItem } from '../Skeleton/ListItem/SkeletonListItem';
 
 export interface ResourceListProps {
   resources: Array<Resource>;
+  selectedResource?: Resource | null;
   previewModalState: OverlayTriggerState;
   isLoading: boolean;
-  onResourceSelect: (node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => void;
-  onResourceDrillDown: (node: NodeIdentifier) => void;
+  onResourceSelect: (resource: Resource, overlayProps: DOMAttributes<FocusableElement>) => void;
+  onResourceDrillDown: (resource: Resource) => void;
   allowedTypes?: string[] | undefined;
 }
 
 const ResourceList = function ({
   resources,
+  selectedResource,
   previewModalState,
   isLoading,
   onResourceSelect,
@@ -50,15 +52,15 @@ const ResourceList = function ({
       )}
 
       {!isLoading &&
-        resources.map(({ type, id, selected, label, childCount }) => {
+        resources.map((resource) => {
           return (
             <ResourceItem
-              key={`${id.source}-${id.id}`}
-              id={id}
-              selected={selected}
-              label={label}
-              type={type}
-              childCount={childCount}
+              key={resource.id}
+              item={resource}
+              selected={resource.id == selectedResource?.id}
+              label={resource.name}
+              type={resource.type.code}
+              childCount={resource.childCount}
               previewModalState={previewModalState}
               onSelect={onResourceSelect}
               onDrillDown={onResourceDrillDown}