@squiz/resource-browser 1.32.1-alpha.32 → 1.32.1-alpha.34

package/src/Hooks/useSources.spec.ts

@@ -10,23 +10,11 @@ describe('useSources', () => {
 
     expect(result.current.isLoading).toBe(true);
     expect(result.current.error).toBe(null);
-    expect(result.current.sources).toEqual([]);
+    expect(result.current.data).toEqual([]);
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
 
     expect(result.current.isLoading).toBe(false);
-    expect(result.current.sources).toBe(sources);
-  });
-
-  it('Should return the error if loading resources fails', async () => {
-    const error = new Error('Loading the sources failed.');
-    const onRequestSources = jest.fn().mockRejectedValue(error);
-    const { result } = renderHook(() => useSources({ onRequestSources }));
-
-    await waitFor(() => expect(result.current.isLoading).toBe(false));
-
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.error).toBe(error);
-    expect(result.current.sources).toEqual([]);
+    expect(result.current.data).toBe(sources);
   });
 });

package/src/Hooks/useSources.ts

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
 import { Source } from '../types';
+import { useAsync } from './useAsync';
 
 type UseSourcesProps = {
   onRequestSources: () => Promise<Source[]>;
@@ -7,29 +7,6 @@ type UseSourcesProps = {
 
 /**
  * Loads and caches the source list when a component using the hook is mounted.
- *
- * @param {Function} onRequestSources
  */
-export const useSources = ({ onRequestSources }: UseSourcesProps) => {
-  const [error, setError] = useState<Error | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [sources, setSources] = useState<Source[]>([]);
-  const loadSources = useCallback(() => {
-    setIsLoading(true);
-    onRequestSources()
-      .then((sources) => {
-        setIsLoading(false);
-        setSources(sources);
-        setError(null);
-      })
-      .catch((error) => {
-        setIsLoading(false);
-        setError(error);
-      });
-  }, []);
-
-  // trigger a load of the sources when the component using the hook is initially rendered.
-  useEffect(loadSources, []);
-
-  return { isLoading, sources, reload: loadSources, error };
-};
+export const useSources = ({ onRequestSources }: UseSourcesProps) =>
+  useAsync({ callback: onRequestSources, defaultValue: [] }, []);

package/src/Icons/Generics/Back.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function Back({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M15.2912 7.00501H4.12124L9.00124 2.12501C9.39124 1.73501 9.39124 1.09501 9.00124 0.705006C8.61124 0.315006 7.98124 0.315006 7.59124 0.705006L1.00124 7.29501C0.61124 7.68501 0.61124 8.31501 1.00124 8.70501L7.59124 15.295C7.98124 15.685 8.61124 15.685 9.00124 15.295C9.39124 14.905 9.39124 14.275 9.00124 13.885L4.12124 9.00501H15.2912C15.8412 9.00501 16.2912 8.55501 16.2912 8.00501C16.2912 7.45501 15.8412 7.00501 15.2912 7.00501Z"
+        fill="#3D3D3D"
+      />
+      {!isDecorative && <title>back icon</title>}
+    </svg>
+  );
+}

package/src/Icons/Generics/Empty.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function Empty({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M1.3925 3.82749C0.612495 4.60749 0.612495 5.88749 1.3925 6.66749L4.5125 9.78749C2.0125 13.5475 0.752495 18.1875 1.3325 23.1675C2.37249 32.2475 9.75249 39.6275 18.8325 40.6675C23.8125 41.2475 28.4525 39.9875 32.2125 37.4875L35.3325 40.6075C36.1125 41.3875 37.3725 41.3875 38.1525 40.6075C38.9325 39.8275 38.9325 38.5675 38.1525 37.7875L4.21249 3.82749C3.4325 3.04749 2.17249 3.04749 1.3925 3.82749ZM21.1925 36.8075C12.3725 36.8075 5.19249 29.6275 5.19249 20.8075C5.19249 17.8475 6.01249 15.0875 7.43249 12.6875L29.3125 34.5675C26.9125 35.9875 24.1525 36.8075 21.1925 36.8075ZM13.0725 7.04749L10.1725 4.12749C13.3325 2.0275 17.1125 0.807495 21.1925 0.807495C32.2325 0.807495 41.1925 9.76749 41.1925 20.8075C41.1925 24.8875 39.9725 28.6675 37.8725 31.8275L34.9525 28.9075C36.3725 26.5275 37.1925 23.7675 37.1925 20.8075C37.1925 11.9875 30.0125 4.80749 21.1925 4.80749C18.2325 4.80749 15.4725 5.62749 13.0725 7.04749Z"
+        fill="#949494"
+      />
+      {!isDecorative && <title>empty icon</title>}
+    </svg>
+  );
+}

package/src/Icons/Generics/GenericIconMap.ts

@@ -1,4 +1,4 @@
-import { ArrowRight, ArrowDown, Selected, Root, ResourceSelect, Close, Error, Retry } from '.';
+import { ArrowRight, ArrowDown, Selected, Root, ResourceSelect, Close, Error, Retry, Empty, Back } from '.';
 
 // Define our map of matrix types to icons
 const GenericIconMap = {
@@ -10,6 +10,8 @@ const GenericIconMap = {
   close: Close,
   error: Error,
   retry: Retry,
+  empty: Empty,
+  back: Back,
 };
 
 // Export our map

package/src/Icons/Generics/index.tsx

@@ -7,3 +7,5 @@ export { default as ResourceSelect } from './ResourceSelect';
 export { default as Close } from './Close';
 export { default as Error } from './Error';
 export { default as Retry } from './Retry';
+export { default as Empty } from './Empty';
+export { default as Back } from './Back';

package/src/PreviewPanel/details/MatrixResource.tsx

@@ -30,8 +30,7 @@ const MatrixResource = ({ resource: { id, type, name, status } }: MatrixResource
           <div className="flex mb-2">
             <dt className="w-[60px] mr-4 text-gray-600">Status</dt>
             <dd className="flex items-center font-semibold">
-              <StatusIndicator status={status} />
-              {status.name}
+              <StatusIndicator className="mr-1" status={status} /> {status.name}
             </dd>
           </div>
         </dl>

package/src/ResourceBrowserContext/ResourceBrowserContext.spec.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ResourceBrowserContext, ResourceBrowserContextProps } from './ResourceBrowserContext';
+import { mockSource } from '../__mocks__/MockModels';
+
+describe('ResourceBrowserContext', () => {
+  it('Should render with expected default value', () => {
+    let defaultContext: ResourceBrowserContextProps | null = null;
+
+    render(
+      <ResourceBrowserContext.Consumer>
+        {(value) => {
+          defaultContext = value;
+          return null;
+        }}
+      </ResourceBrowserContext.Consumer>,
+    );
+
+    expect(defaultContext).toEqual({
+      onRequestChildren: expect.any(Function),
+      onRequestResource: expect.any(Function),
+      onRequestSources: expect.any(Function),
+    });
+    expect(() => defaultContext?.onRequestChildren(mockSource(), null)).toThrow(
+      'onRequestChildren has not been configured.',
+    );
+    expect(() => defaultContext?.onRequestResource({ source: 'source-id', resource: 'resource-id' })).toThrow(
+      'onRequestResource has not been configured.',
+    );
+    expect(() => defaultContext?.onRequestSources()).toThrow('onRequestSources has not been configured.');
+  });
+});

package/src/ResourceBrowserContext/ResourceBrowserContext.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Resource, ResourceReference, Source } from '../types';
+
+export type ResourceBrowserContextProps = {
+  onRequestSources: () => Promise<Source[]>;
+  onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
+  onRequestResource(reference: ResourceReference): Promise<Resource | null>;
+};
+
+export const ResourceBrowserContext = React.createContext<ResourceBrowserContextProps>({
+  onRequestSources: () => {
+    throw new Error('onRequestSources has not been configured.');
+  },
+  onRequestChildren: () => {
+    throw new Error('onRequestChildren has not been configured.');
+  },
+  onRequestResource: () => {
+    throw new Error('onRequestResource has not been configured.');
+  },
+});

package/src/ResourceItem/ResourceItem.tsx

@@ -11,10 +11,10 @@ interface ResourceItem<T> {
   selected?: boolean;
   label: string;
   type: string;
-  childCount: number;
+  childCount?: number;
   previewModalState: OverlayTriggerState;
   onSelect: (node: T, overlayProps: DOMAttributes<FocusableElement>) => void;
-  onDrillDown: (node: T) => void;
+  onDrillDown?: (node: T) => void;
   className: string;
   allowedTypes?: string[] | undefined;
 }
@@ -36,15 +36,16 @@ const ResourceItem = <T,>({
   const title = isDisabled ? "You can't select this item" : label;
 
   return (
-    <li className={`flex items-stretch p-1 bg-white border border-grey-200 min-h-[64px] ${className}`}>
+    <li className={`flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`}>
       <ModalOpeningButton
         type="button"
         {...triggerProps}
         isDisabled={isDisabled}
         onPress={() => onSelect(item, overlayProps)}
+        aria-label={childCount === undefined ? `Drill down to ${label} children` : ''}
         className={`
           relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${
-          childCount > 0 ? 'mr-2' : ''
+          childCount !== undefined && childCount > 0 ? 'mr-2' : ''
         } ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
         `}
         title={title}
@@ -59,8 +60,9 @@ const ResourceItem = <T,>({
           <span className="line-clamp-2 text-left break-word">{label}</span>
           {selected && <Icon icon={'selected' as IconOptions} aria-label="selected" className="absolute -right-8" />}
         </span>
+        {childCount === undefined && <Icon icon={'arrow-right' as IconOptions} className="absolute right-5" />}
       </ModalOpeningButton>
-      {childCount > 0 && (
+      {childCount !== undefined && childCount > 0 && onDrillDown && (
         <button
           type="button"
           aria-label={`Drill down to ${label} children`}

package/src/ResourceList/ResourceList.spec.tsx

@@ -39,6 +39,7 @@ describe('ResourceList', () => {
               onResourceDrillDown={() => {}}
               error={null}
               handleReload={reload}
+              handleReturnToRoot={reload}
             />
           );
         }}
@@ -65,6 +66,7 @@ describe('ResourceList', () => {
               onResourceDrillDown={() => {}}
               error={null}
               handleReload={reload}
+              handleReturnToRoot={reload}
             />
           );
         }}
@@ -91,6 +93,7 @@ describe('ResourceList', () => {
               onResourceDrillDown={() => {}}
               error={null}
               handleReload={reload}
+              handleReturnToRoot={reload}
             />
           );
         }}
@@ -122,6 +125,7 @@ describe('ResourceList', () => {
               onResourceDrillDown={() => {}}
               error={null}
               handleReload={reload}
+              handleReturnToRoot={reload}
             />
           );
         }}
@@ -153,6 +157,7 @@ describe('ResourceList', () => {
               onResourceDrillDown={onResourceDrillDown}
               error={null}
               handleReload={reload}
+              handleReturnToRoot={reload}
             />
           );
         }}
@@ -182,6 +187,7 @@ describe('ResourceList', () => {
               onResourceDrillDown={() => {}}
               error={new Error('This is a resource error!')}
               handleReload={reload}
+              handleReturnToRoot={reload}
             />
           );
         }}

package/src/ResourceList/ResourceList.tsx

@@ -5,7 +5,7 @@ import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import ResourceItem from '../ResourceItem/ResourceItem';
 import { Resource } from '../types';
 import { SkeletonListItem } from '../Skeleton/ListItem/SkeletonListItem';
-import ResourceError from '../ResourceError/ResourceError';
+import ResourceState from '../ResourceState/ResourceState';
 
 export interface ResourceListProps {
   resources: Array<Resource>;
@@ -15,8 +15,9 @@ export interface ResourceListProps {
   onResourceSelect: (resource: Resource, overlayProps: DOMAttributes<FocusableElement>) => void;
   onResourceDrillDown: (resource: Resource) => void;
   allowedTypes?: string[] | undefined;
-  error: Error | null;
+  handleReturnToRoot: () => void;
   handleReload: () => void;
+  error: Error | null;
 }
 
 const ResourceList = function ({
@@ -27,8 +28,9 @@ const ResourceList = function ({
   onResourceSelect,
   onResourceDrillDown,
   allowedTypes,
-  error,
+  handleReturnToRoot,
   handleReload,
+  error,
 }: ResourceListProps) {
   const listRef = useRef<HTMLUListElement>(null);
 
@@ -56,7 +58,13 @@ const ResourceList = function ({
         </>
       )}
 
-      {!isLoading && error && <ResourceError errorMessage={error.message} handleReload={handleReload} />}
+      {/* Error State */}
+      {!isLoading && error && <ResourceState state="error" message={error.message} handleReload={handleReload} />}
+
+      {/* Empty State */}
+      {!isLoading && !error && resources.length === 0 && (
+        <ResourceState state="empty" handleReload={handleReturnToRoot} />
+      )}
 
       {!isLoading &&
         !error &&

package/src/ResourcePicker/ResetButton.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 
-export const ResetButton = ({ isDisabled }: { isDisabled: boolean }) => (
+export type ResetButtonProps = {
+  onClick: () => void;
+  isDisabled?: boolean;
+};
+
+export const ResetButton = ({ onClick, isDisabled }: ResetButtonProps) => (
   <button
     type="button"
     aria-label={`Remove selection`}
     title={`Remove selection`}
     className="text-gray-500 hover:text-gray-800 focus:text-gray-800 w-6 h-6 disabled:text-gray-500 disabled:cursor-not-allowed"
     disabled={isDisabled}
+    onClick={onClick}
   >
     <CloseRoundedIcon />
   </button>

package/src/ResourcePicker/ResourcePicker.spec.tsx

@@ -35,9 +35,11 @@ describe('Resource picker', () => {
   });
 
   it('should render the error state if set to true', () => {
-    render(<ResourcePicker {...defaultProps} isError={true} />);
+    const errorMessage = 'Failed to retrieve asset info due to a Component Service API key problem.';
+
+    render(<ResourcePicker {...defaultProps} error={new Error(errorMessage)} />);
     const pickerLabel = screen.queryByText('Choose image');
-    const errorLabel = screen.queryByText('Failed to retrieve asset info due to a Component Service API key problem.');
+    const errorLabel = screen.queryByText(errorMessage);
 
     expect(pickerLabel).not.toBeInTheDocument();
     expect(errorLabel).toBeInTheDocument();
@@ -62,8 +64,10 @@ describe('Resource picker', () => {
   });
 
   it('should display the reset button in error state', () => {
-    render(<ResourcePicker {...defaultProps} isError={true} />);
-    const errorLabel = screen.queryByText('Failed to retrieve asset info due to a Component Service API key problem.');
+    const errorMessage = 'Failed to fetch resource.';
+
+    render(<ResourcePicker {...defaultProps} error={new Error(errorMessage)} />);
+    const errorLabel = screen.queryByText(errorMessage);
     const removeButton = screen.queryByLabelText('Remove selection');
 
     expect(errorLabel).toBeInTheDocument();

package/src/ResourcePicker/ResourcePicker.stories.tsx

@@ -12,7 +12,7 @@ export default {
 
 const Template: StoryFn<ResourcePickerProps> = (args: ResourcePickerProps) => (
   <div className="w-[400px] m-3">
-    <ResourcePicker {...args} />
+    <ResourcePicker {...args}>{() => <>Resource browser here</>}</ResourcePicker>
   </div>
 );
 
@@ -40,7 +40,7 @@ Loading.args = {
 export const Error = Template.bind({});
 Error.args = {
   ...Empty.args,
-  isError: true,
+  error: new window.Error('Failed to retrieve asset info due to a Component Service API key problem.'),
 };
 
 export const Selected = Template.bind({});

package/src/ResourcePicker/ResourcePicker.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-
-import { Resource } from '../types';
 import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
 import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
 import PhotoLibraryRoundedIcon from '@mui/icons-material/PhotoLibraryRounded';
-
+import { DOMAttributes } from '@react-types/shared';
+import { Resource } from '../types';
 import ModalTrigger from '../Modal/ModalTrigger';
 import { ErrorState } from './States/Error';
 import { LoadingState } from './States/Loading';
@@ -12,16 +11,26 @@ import { SelectedState } from './States/Selected';
 import clsx from 'clsx';
 
 export type ResourcePickerProps = {
-  resource: Resource;
+  resource: Resource | null;
   allowedTypes: string[] | undefined;
-  isError: boolean;
+  error: Error | null;
   isLoading: boolean;
-  isDisabled: boolean;
+  isDisabled?: boolean;
+  children: (onClose: () => void, titleProps: DOMAttributes) => React.ReactElement;
+  onClear: () => void;
 };
 
-const ResourcePicker = ({ resource, allowedTypes, isError, isLoading, isDisabled }: ResourcePickerProps) => {
-  const isImagePicker = allowedTypes && allowedTypes.length === 1 && (allowedTypes.includes('image') as boolean);
-  const isEmpty = resource === null && !isLoading && (!isError as boolean);
+const ResourcePicker = ({
+  resource,
+  allowedTypes,
+  error,
+  isLoading,
+  isDisabled,
+  children,
+  onClear,
+}: ResourcePickerProps) => {
+  const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
+  const isEmpty = resource === null && !isLoading && !error;
 
   return (
     <div className={clsx('resource-picker', isDisabled && 'bg-gray-300')}>
@@ -37,14 +46,14 @@ const ResourcePicker = ({ resource, allowedTypes, isError, isLoading, isDisabled
           icon={<AddCircleOutlineRoundedIcon aria-hidden className="!w-4 !h-4" />}
           isDisabled={isDisabled}
         >
-          {() => <div>Resource browser here</div>}
+          {children}
         </ModalTrigger>
       ) : (
         <div className="resource-picker-info">
           <div className="resource-picker-info__layout">
             {isLoading && <LoadingState />}
-            {isError && <ErrorState isDisabled={isDisabled} />}
-            {resource !== null && <SelectedState resource={resource} isDisabled={isDisabled} />}
+            {error && <ErrorState error={error} onClear={onClear} />}
+            {resource && <SelectedState resource={resource} isDisabled={isDisabled} onClear={onClear} />}
           </div>
         </div>
       )}

package/src/ResourcePicker/States/Error.tsx

@@ -3,10 +3,16 @@ import React from 'react';
 import Icon, { IconOptions } from '../../Icons/Icon';
 import { ResetButton } from '../ResetButton';
 
-export const ErrorState = ({ isDisabled }: { isDisabled: boolean }) => (
+export type ErrorStateProps = {
+  error: Error;
+  isDisabled?: boolean;
+  onClear: () => void;
+};
+
+export const ErrorState = ({ error, isDisabled, onClear }: ErrorStateProps) => (
   <>
     <Icon icon={'error' as IconOptions} aria-hidden className="w-6 h-6 text-red-300" />
-    <div className="text-red-300">Failed to retrieve asset info due to a Component Service API key problem.</div>
-    <ResetButton isDisabled={isDisabled} />
+    <div className="text-red-300">{error.message}</div>
+    <ResetButton isDisabled={isDisabled} onClick={onClear} />
   </>
 );

package/src/ResourcePicker/States/Selected.tsx

@@ -8,10 +8,15 @@ import { ResetButton } from '../ResetButton';
 
 export type SelectedStateProps = {
   resource: Resource;
-  isDisabled: boolean;
+  isDisabled?: boolean;
+  onClear: () => void;
 };
 
-export const SelectedState = ({ resource: { id, type, name, status, squizImage }, isDisabled }: SelectedStateProps) => {
+export const SelectedState = ({
+  resource: { id, type, name, status, squizImage },
+  isDisabled,
+  onClear,
+}: SelectedStateProps) => {
   const fileSize = squizImage?.imageVariations?.original?.byteSize;
   const fileWidth = squizImage?.imageVariations?.original?.width;
   const fileHeight = squizImage?.imageVariations?.original?.height;
@@ -23,9 +28,9 @@ export const SelectedState = ({ resource: { id, type, name, status, squizImage }
         {/* Center column */}
         <div className="justify-self-start self-center">{name}</div>
         {/* End column */}
-        <ResetButton isDisabled={isDisabled} />
+        <ResetButton isDisabled={isDisabled} onClick={onClear} />
       </>
-      <dl className="col-start-2 col-end-2 flex flex-column gap-1 justify-self-start items-center font-normal text-sm">
+      <dl className="col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm">
         <div>
           <dt className="hidden">Status: {status.name}</dt>
           <dd className="flex items-center">

package/src/ResourcePickerContainer/ResourcePickerContainer.spec.tsx

@@ -324,7 +324,7 @@ describe('ResourcePickerContainer', () => {
     });
 
     const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'site Test Website' }));
+    user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
 
     expect(mockModalState).toEqual(
       expect.objectContaining({

package/src/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -10,8 +10,8 @@ import SourceDropdown from '../SourceDropdown/SourceDropdown';
 
 import { Source, Resource, HydratedResourceReference, ScopedSource } from '../types';
 import { useResourcePath } from '../Hooks/useResourcePath';
+import { useAsync } from '../Hooks/useAsync';
 import { useChildResources } from '../Hooks/useChildResources';
-import { useSources } from '../Hooks/useSources';
 
 interface ResourcePickerContainerProps {
   title: string;
@@ -38,16 +38,16 @@ function ResourcePickerContainer({
   const { source, currentResource, hierarchy, setSource, push, popUntil } = useResourcePath();
 
   const {
-    sources,
+    data: sources,
     isLoading: isSourceLoading,
     reload: handleSourceReload,
     error: sourceError,
-  } = useSources({ onRequestSources });
+  } = useAsync({ callback: onRequestSources, defaultValue: [] }, []);
 
   const {
-    resources,
+    data: resources,
     isLoading: isResourcesLoading,
-    reloadResources: handleResourceReload,
+    reload: handleResourceReload,
     error: resourceError,
   } = useChildResources({ source, currentResource, onRequestChildren });
 
@@ -136,8 +136,6 @@ function ResourcePickerContainer({
               previewModalState={previewModalState}
               isLoading={isSourceLoading}
               onSourceSelect={handleSourceDrilldown}
-              onSourceDrillDown={handleSourceDrilldown}
-              allowedTypes={allowedTypes}
               handleReload={handleSourceReload}
               error={sourceError}
             />
@@ -151,6 +149,7 @@ function ResourcePickerContainer({
               onResourceSelect={handleResourceSelected}
               onResourceDrillDown={handleResourceDrillDown}
               allowedTypes={allowedTypes}
+              handleReturnToRoot={handleReturnToRoot}
               handleReload={handleResourceReload}
               error={resourceError}
             />

package/src/{ResourceError/ResourceError.spec.tsx → ResourceState/ResourceState.spec.tsx}

@@ -1,22 +1,23 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import ResourceError from './ResourceError';
+import ResourceState from './ResourceState';
 
 const defaultProps: any = {
-  errorMessage: 'This is a test error!',
+  state: 'error',
+  message: 'This is a test error!',
   handleReload: jest.fn(),
 };
 
 describe('ResourceError', () => {
   it('should render the component with the correct error message', () => {
-    const { getByText } = render(<ResourceError {...defaultProps} />);
-    const errorMessage = getByText(defaultProps.errorMessage);
+    const { getByText } = render(<ResourceState {...defaultProps} />);
+    const errorMessage = getByText(defaultProps.message);
 
     expect(errorMessage).toBeInTheDocument();
   });
 
   it('should call the reload function when the button is pressed', () => {
-    const { getByRole } = render(<ResourceError {...defaultProps} />);
+    const { getByRole } = render(<ResourceState {...defaultProps} />);
     const buttonElement = getByRole('button');
     fireEvent.click(buttonElement);
 

package/src/ResourceState/ResourceState.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import ResourceState from './ResourceState';
+
+export default {
+  title: 'Resource State',
+  component: ResourceState,
+} as Meta<typeof ResourceState>;
+
+const Template: StoryFn<typeof ResourceState> = ({ state, message }) => (
+  <ResourceState state={state} message={message} handleReload={() => alert('Resource browser reload')} />
+);
+
+export const Error = Template.bind({});
+Error.args = {
+  state: 'error',
+  message: 'This is a resource browser error!',
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  state: 'empty',
+};

package/src/ResourceState/ResourceState.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Icon, { IconOptions } from '../Icons/Icon';
+
+interface ResourceState {
+  state: 'error' | 'empty';
+  message?: string;
+  handleReload: () => void;
+}
+
+const ResourceState = function ({ state, message, handleReload }: ResourceState) {
+  return (
+    <div className="flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3">
+      <Icon icon={state as IconOptions} aria-hidden />
+      {/* Message */}
+      <span className="text-md text-gray-800 font-semibold leading-5">
+        {state === 'empty' ? 'There are no items to display' : message}
+      </span>
+      {/* Retry button */}
+      <button
+        type="button"
+        onClick={handleReload}
+        className="flex flex-row items-center justify-center gap-3 bg-black bg-opacity-10 h-9 mt-3 rounded text-md font-bold text-gray-700 py-2 px-3"
+      >
+        <Icon icon={state === 'empty' ? 'back' : 'retry'} aria-hidden />
+        {state === 'empty' ? 'Back to source list' : 'Try again'}
+      </button>
+    </div>
+  );
+};
+
+export default ResourceState;