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

package/lib/Icons/Generics/Back.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function Back({ isDecorative, ...props }: {
+    isDecorative: boolean;
+} & React.SVGProps<SVGSVGElement>): JSX.Element;

package/lib/Icons/Generics/Back.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+function Back({ isDecorative, ...props }) {
+    return (react_1.default.createElement("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("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 && react_1.default.createElement("title", null, "back icon")));
+}
+exports.default = Back;

package/lib/Icons/Generics/Empty.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function Empty({ isDecorative, ...props }: {
+    isDecorative: boolean;
+} & React.SVGProps<SVGSVGElement>): JSX.Element;

package/lib/Icons/Generics/Empty.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+function Empty({ isDecorative, ...props }) {
+    return (react_1.default.createElement("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("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 && react_1.default.createElement("title", null, "empty icon")));
+}
+exports.default = Empty;

package/lib/Icons/Generics/GenericIconMap.d.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 '.';
 declare const GenericIconMap: {
     'arrow-right': typeof ArrowRight;
     'arrow-down': typeof ArrowDown;
@@ -8,5 +8,7 @@ declare const GenericIconMap: {
     close: typeof Close;
     error: typeof Error;
     retry: typeof Retry;
+    empty: typeof Empty;
+    back: typeof Back;
 };
 export default GenericIconMap;

package/lib/Icons/Generics/GenericIconMap.js

@@ -11,6 +11,8 @@ const GenericIconMap = {
     close: _1.Close,
     error: _1.Error,
     retry: _1.Retry,
+    empty: _1.Empty,
+    back: _1.Back,
 };
 // Export our map
 exports.default = GenericIconMap;

package/lib/Icons/Generics/index.d.ts

@@ -6,3 +6,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/lib/Icons/Generics/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Retry = exports.Error = exports.Close = exports.ResourceSelect = exports.Root = exports.Selected = exports.ArrowDown = exports.ArrowRight = void 0;
+exports.Back = exports.Empty = exports.Retry = exports.Error = exports.Close = exports.ResourceSelect = exports.Root = exports.Selected = exports.ArrowDown = exports.ArrowRight = void 0;
 // Exports all icons from the Generics folder
 var ArrowRight_1 = require("./ArrowRight");
 Object.defineProperty(exports, "ArrowRight", { enumerable: true, get: function () { return __importDefault(ArrowRight_1).default; } });
@@ -21,3 +21,7 @@ var Error_1 = require("./Error");
 Object.defineProperty(exports, "Error", { enumerable: true, get: function () { return __importDefault(Error_1).default; } });
 var Retry_1 = require("./Retry");
 Object.defineProperty(exports, "Retry", { enumerable: true, get: function () { return __importDefault(Retry_1).default; } });
+var Empty_1 = require("./Empty");
+Object.defineProperty(exports, "Empty", { enumerable: true, get: function () { return __importDefault(Empty_1).default; } });
+var Back_1 = require("./Back");
+Object.defineProperty(exports, "Back", { enumerable: true, get: function () { return __importDefault(Back_1).default; } });

package/lib/Icons/Icon.d.ts

@@ -9,6 +9,8 @@ export declare const iconSources: {
         close: typeof import("./Generics").Close;
         error: typeof import("./Generics").Error;
         retry: typeof import("./Generics").Retry;
+        empty: typeof import("./Generics").Empty;
+        back: typeof import("./Generics").Back;
     };
     matrix: {
         audio_file: typeof import("./MatrixResources").Audio;

package/lib/ResourceItem/ResourceItem.d.ts

@@ -5,10 +5,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;
 }

package/lib/ResourceItem/ResourceItem.js

@@ -12,14 +12,15 @@ const ResourceItem = ({ item, selected, label, type, childCount, previewModalSta
     const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(type);
     const title = isDisabled ? "You can't select this item" : label;
     return (react_1.default.createElement("li", { className: `flex items-stretch p-1 bg-white border border-grey-200 min-h-[64px] ${className}` },
-        react_1.default.createElement(ModalOpeningButton_1.default, { type: "button", ...triggerProps, isDisabled: isDisabled, onPress: () => onSelect(item, overlayProps), className: `
-          relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${childCount > 0 ? 'mr-2' : ''} ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
+        react_1.default.createElement(ModalOpeningButton_1.default, { 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 !== undefined && childCount > 0 ? 'mr-2' : ''} ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
         `, title: title },
             react_1.default.createElement(Icon_1.default, { icon: type, resourceSource: "matrix", "aria-label": type, className: `mr-4 shrink-0 ${isDisabled && 'opacity-40'}` }),
             react_1.default.createElement("span", { className: `relative  flex items-center ${selected ? 'mr-8' : ''}` },
                 react_1.default.createElement("span", { className: "line-clamp-2 text-left break-word" }, label),
-                selected && react_1.default.createElement(Icon_1.default, { icon: 'selected', "aria-label": "selected", className: "absolute -right-8" }))),
-        childCount > 0 && (react_1.default.createElement("button", { type: "button", "aria-label": `Drill down to ${label} children`, onClick: () => onDrillDown(item), className: `relative shrink-0 flex items-center p-4 rounded outline-0 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-50 focus:bg-gray-50` },
+                selected && react_1.default.createElement(Icon_1.default, { icon: 'selected', "aria-label": "selected", className: "absolute -right-8" })),
+            childCount === undefined && react_1.default.createElement(Icon_1.default, { icon: 'arrow-right', className: "absolute right-5" })),
+        childCount !== undefined && childCount > 0 && onDrillDown && (react_1.default.createElement("button", { type: "button", "aria-label": `Drill down to ${label} children`, onClick: () => onDrillDown(item), className: `relative shrink-0 flex items-center p-4 rounded outline-0 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-50 focus:bg-gray-50` },
             react_1.default.createElement("span", { className: "ml-auto flex items-center" },
                 react_1.default.createElement("span", { className: "truncate w-14 text-right", title: String(childCount) }, childCount),
                 react_1.default.createElement(Icon_1.default, { icon: 'arrow-right', className: "ml-1" }))))));

package/lib/ResourceList/ResourceList.d.ts

@@ -9,8 +9,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;
 }
-declare const ResourceList: ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, error, handleReload, }: ResourceListProps) => JSX.Element;
+declare const ResourceList: ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, handleReturnToRoot, handleReload, error, }: ResourceListProps) => JSX.Element;
 export default ResourceList;

package/lib/ResourceList/ResourceList.js

@@ -29,8 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const ResourceItem_1 = __importDefault(require("../ResourceItem/ResourceItem"));
 const SkeletonListItem_1 = require("../Skeleton/ListItem/SkeletonListItem");
-const ResourceError_1 = __importDefault(require("../ResourceError/ResourceError"));
-const ResourceList = function ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, error, handleReload, }) {
+const ResourceState_1 = __importDefault(require("../ResourceState/ResourceState"));
+const ResourceList = function ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, handleReturnToRoot, handleReload, error, }) {
     const listRef = (0, react_1.useRef)(null);
     // When resources change, because we are on a new page, reset focus to the list
     (0, react_1.useEffect)(() => {
@@ -44,7 +44,8 @@ const ResourceList = function ({ resources, selectedResource, previewModalState,
         isLoading && (react_1.default.createElement(react_1.default.Fragment, null, [...Array(8)].map((_item, index) => {
             return react_1.default.createElement(SkeletonListItem_1.SkeletonListItem, { key: index });
         }))),
-        !isLoading && error && react_1.default.createElement(ResourceError_1.default, { errorMessage: error.message, handleReload: handleReload }),
+        !isLoading && error && react_1.default.createElement(ResourceState_1.default, { state: "error", message: error.message, handleReload: handleReload }),
+        !isLoading && !error && resources.length === 0 && (react_1.default.createElement(ResourceState_1.default, { state: "empty", handleReload: handleReturnToRoot })),
         !isLoading &&
             !error &&
             resources.map((resource) => {

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -79,8 +79,8 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
             react_1.default.createElement("div", { className: "overflow-y-scroll flex-1 grow-[3] border-r border-gray-300" },
                 react_1.default.createElement("h3", { className: "sr-only" }, "Resource List"),
                 hierarchy.length > 0 && (react_1.default.createElement(ResourceBreadcrumb_1.default, { hierarchy: hierarchy, onBreadcrumbSelect: popUntil, onReturnToRoot: handleReturnToRoot })),
-                !source && (react_1.default.createElement(SourceList_1.default, { sources: sources, previewModalState: previewModalState, isLoading: isSourceLoading, onSourceSelect: handleSourceDrilldown, onSourceDrillDown: handleSourceDrilldown, allowedTypes: allowedTypes, handleReload: handleSourceReload, error: sourceError })),
-                source && (react_1.default.createElement(ResourceList_1.default, { previewModalState: previewModalState, resources: resources, selectedResource: selectedResource, isLoading: isResourcesLoading, onResourceSelect: handleResourceSelected, onResourceDrillDown: handleResourceDrillDown, allowedTypes: allowedTypes, handleReload: handleResourceReload, error: resourceError }))),
+                !source && (react_1.default.createElement(SourceList_1.default, { sources: sources, previewModalState: previewModalState, isLoading: isSourceLoading, onSourceSelect: handleSourceDrilldown, handleReload: handleSourceReload, error: sourceError })),
+                source && (react_1.default.createElement(ResourceList_1.default, { previewModalState: previewModalState, resources: resources, selectedResource: selectedResource, isLoading: isResourcesLoading, onResourceSelect: handleResourceSelected, onResourceDrillDown: handleResourceDrillDown, allowedTypes: allowedTypes, handleReturnToRoot: handleReturnToRoot, handleReload: handleResourceReload, error: resourceError }))),
             react_1.default.createElement(PreviewPanel_1.default, { resource: selectedResource, modalState: previewModalState, previewModalOverlayProps: previewModalOverlayProps, allowedTypes: allowedTypes, onSelect: handleDetailSelect, onClose: handleDetailClose }))));
 }
 exports.default = ResourcePickerContainer;

package/lib/ResourceState/ResourceState.d.ts

@@ -0,0 +1,7 @@
+interface ResourceState {
+    state: 'error' | 'empty';
+    message?: string;
+    handleReload: () => void;
+}
+declare const ResourceState: ({ state, message, handleReload }: ResourceState) => JSX.Element;
+export default ResourceState;

package/lib/{ResourceError/ResourceError.js → ResourceState/ResourceState.js}

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const Icon_1 = __importDefault(require("../Icons/Icon"));
-const ResourceError = function ({ errorMessage, handleReload }) {
+const ResourceState = function ({ state, message, handleReload }) {
     return (react_1.default.createElement("div", { className: "flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3" },
-        react_1.default.createElement(Icon_1.default, { icon: 'error', "aria-hidden": true }),
-        react_1.default.createElement("span", { className: "text-md text-gray-800 font-semibold leading-5" }, errorMessage),
-        react_1.default.createElement("button", { type: "button", onClick: handleReload, className: "flex flex-row items-center justify-center gap-3 bg-black bg-opacity-10 w-[119px] h-9 mt-3 rounded text-md font-bold text-gray-700" },
-            react_1.default.createElement(Icon_1.default, { icon: 'retry', "aria-hidden": true }),
-            " Try again")));
+        react_1.default.createElement(Icon_1.default, { icon: state, "aria-hidden": true }),
+        react_1.default.createElement("span", { className: "text-md text-gray-800 font-semibold leading-5" }, state === 'empty' ? 'There are no items to display' : message),
+        react_1.default.createElement("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" },
+            react_1.default.createElement(Icon_1.default, { icon: state === 'empty' ? 'back' : 'retry', "aria-hidden": true }),
+            state === 'empty' ? 'Back to source list' : 'Try again')));
 };
-exports.default = ResourceError;
+exports.default = ResourceState;

package/lib/SourceList/SourceList.d.ts

@@ -6,10 +6,8 @@ export interface SourceListProps {
     previewModalState: OverlayTriggerState;
     isLoading: boolean;
     onSourceSelect: (node: ScopedSource, overlayProps: DOMAttributes<FocusableElement>) => void;
-    onSourceDrillDown: (node: ScopedSource) => void;
-    allowedTypes?: string[] | undefined;
     handleReload: () => void;
     error: Error | null;
 }
-declare const SourceList: ({ sources, previewModalState, isLoading, onSourceSelect, onSourceDrillDown, allowedTypes, handleReload, error, }: SourceListProps) => JSX.Element;
+declare const SourceList: ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, error, }: SourceListProps) => JSX.Element;
 export default SourceList;

package/lib/SourceList/SourceList.js

@@ -31,8 +31,8 @@ const ResourceItem_1 = __importDefault(require("../ResourceItem/ResourceItem"));
 const SkeletonList_1 = require("../Skeleton/List/SkeletonList");
 const clsx_1 = __importDefault(require("clsx"));
 const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
-const ResourceError_1 = __importDefault(require("../ResourceError/ResourceError"));
-const SourceList = function ({ sources, previewModalState, isLoading, onSourceSelect, onSourceDrillDown, allowedTypes, handleReload, error, }) {
+const ResourceState_1 = __importDefault(require("../ResourceState/ResourceState"));
+const SourceList = function ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, error, }) {
     const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);
     const listRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -48,7 +48,7 @@ const SourceList = function ({ sources, previewModalState, isLoading, onSourceSe
                 react_1.default.createElement(SkeletonList_1.SkeletonList, { itemCount: 3 })),
             react_1.default.createElement("li", null,
                 react_1.default.createElement(SkeletonList_1.SkeletonList, { itemCount: 3 })))),
-        !isLoading && error && react_1.default.createElement(ResourceError_1.default, { errorMessage: error.message, handleReload: handleReload }),
+        !isLoading && error && react_1.default.createElement(ResourceState_1.default, { state: "error", message: error.message, handleReload: handleReload }),
         !isLoading &&
             !error &&
             categorisedSources.map(({ key, label, sources }, index) => {
@@ -56,7 +56,7 @@ const SourceList = function ({ sources, previewModalState, isLoading, onSourceSe
                     react_1.default.createElement("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" },
                         react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5" }, label)),
                     sources.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${label} nodes`, className: "flex flex-col" }, sources.map(({ source, resource }) => {
-                        return (react_1.default.createElement(ResourceItem_1.default, { 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, className: "mt-3 rounded-lg", allowedTypes: allowedTypes }));
+                        return (react_1.default.createElement(ResourceItem_1.default, { key: `${source.id}-${resource?.id}`, item: { source, resource }, label: resource?.name || source.name, type: resource?.type.code || 'folder', previewModalState: previewModalState, onSelect: onSourceSelect, className: "mt-3 rounded-lg" }));
                     })))));
             })));
 };

package/lib/index.css

@@ -393,6 +393,9 @@
 .squiz-rb-scope .right-4 {
   right: 1rem;
 }
+.squiz-rb-scope .right-5 {
+  right: 1.25rem;
+}
 .squiz-rb-scope .top-2 {
   top: 0.5rem;
 }
@@ -610,9 +613,6 @@
 .squiz-rb-scope .w-72 {
   width: 18rem;
 }
-.squiz-rb-scope .w-\[119px\] {
-  width: 119px;
-}
 .squiz-rb-scope .w-\[20px\] {
   width: 20px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.32.1-alpha.32",
+  "version": "1.32.1-alpha.33",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@mui/icons-material": "5.11.16",
-    "@squiz/dx-json-schema-lib": "1.32.1-alpha.32",
+    "@squiz/dx-json-schema-lib": "1.32.1-alpha.33",
     "pretty-bytes": "5.6.0",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
@@ -73,5 +73,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "cddd834def3c2d6b84923f3be0c58c1073025abc"
+  "gitHead": "614c4ec6f82220758521a2887b45094c36474aef"
 }

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/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;
 }
@@ -42,9 +42,10 @@ const ResourceItem = <T,>({
         {...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/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

@@ -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;

package/src/SourceList/SourceList.spec.tsx

@@ -80,7 +80,6 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={true}
               onSourceSelect={() => {}}
-              onSourceDrillDown={() => {}}
               error={null}
               handleReload={reload}
             />
@@ -106,7 +105,6 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
-              onSourceDrillDown={() => {}}
               error={null}
               handleReload={reload}
             />
@@ -133,7 +131,6 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
-              onSourceDrillDown={() => {}}
               error={null}
               handleReload={reload}
             />
@@ -159,7 +156,6 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
-              onSourceDrillDown={() => {}}
               error={null}
               handleReload={reload}
             />
@@ -192,7 +188,6 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={onSourceSelect}
-              onSourceDrillDown={() => {}}
               error={null}
               handleReload={reload}
             />
@@ -202,7 +197,7 @@ describe('SourceList', () => {
     );
 
     const user = userEvent.setup();
-    const itemButton = screen.getByRole('button', { name: 'site Node 1' });
+    const itemButton = screen.getByRole('button', { name: 'Drill down to Node 1 children' });
     user.click(itemButton);
 
     await waitFor(() => {
@@ -217,39 +212,6 @@ describe('SourceList', () => {
     });
   });
 
-  it('Clicking node child count triggers correct onSourceDrillDown', async () => {
-    const onSourceDrillDown = jest.fn();
-    const reload = jest.fn();
-
-    render(
-      <SourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <SourceList
-              sources={sources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onSourceSelect={() => {}}
-              onSourceDrillDown={onSourceDrillDown}
-              error={null}
-              handleReload={reload}
-            />
-          );
-        }}
-      />,
-    );
-
-    const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'Drill down to Node 1 children' }));
-
-    await waitFor(() => {
-      expect(onSourceDrillDown).toHaveBeenCalledWith({
-        source: sources[0],
-        resource: sources[0].nodes[0],
-      });
-    });
-  });
-
   it('Renders error state when an error occurs loading source list', async () => {
     const reload = jest.fn();
 
@@ -262,7 +224,6 @@ describe('SourceList', () => {
               previewModalState={previewModalState}
               isLoading={false}
               onSourceSelect={() => {}}
-              onSourceDrillDown={() => {}}
               error={new Error('Source list error!')}
               handleReload={reload}
             />

package/src/SourceList/SourceList.tsx

@@ -7,15 +7,13 @@ import { Source, ScopedSource } from '../types';
 import { SkeletonList } from '../Skeleton/List/SkeletonList';
 import clsx from 'clsx';
 import { useCategorisedSources } from '../Hooks/useCategorisedSources';
-import ResourceError from '../ResourceError/ResourceError';
+import ResourceState from '../ResourceState/ResourceState';
 
 export interface SourceListProps {
   sources: Source[];
   previewModalState: OverlayTriggerState;
   isLoading: boolean;
   onSourceSelect: (node: ScopedSource, overlayProps: DOMAttributes<FocusableElement>) => void;
-  onSourceDrillDown: (node: ScopedSource) => void;
-  allowedTypes?: string[] | undefined;
   handleReload: () => void;
   error: Error | null;
 }
@@ -25,8 +23,6 @@ const SourceList = function ({
   previewModalState,
   isLoading,
   onSourceSelect,
-  onSourceDrillDown,
-  allowedTypes,
   handleReload,
   error,
 }: SourceListProps) {
@@ -59,7 +55,7 @@ const SourceList = function ({
         </>
       )}
 
-      {!isLoading && error && <ResourceError errorMessage={error.message} handleReload={handleReload} />}
+      {!isLoading && error && <ResourceState state="error" message={error.message} handleReload={handleReload} />}
 
       {!isLoading &&
         !error &&
@@ -78,12 +74,9 @@ const SourceList = function ({
                         item={{ source, resource }}
                         label={resource?.name || source.name}
                         type={resource?.type.code || 'folder'}
-                        childCount={resource?.childCount || 0}
                         previewModalState={previewModalState}
                         onSelect={onSourceSelect}
-                        onDrillDown={onSourceDrillDown}
                         className="mt-3 rounded-lg"
-                        allowedTypes={allowedTypes}
                       />
                     );
                   })}

package/lib/ResourceError/ResourceError.d.ts

@@ -1,6 +0,0 @@
-interface ResourceError {
-    errorMessage: string;
-    handleReload: () => void;
-}
-declare const ResourceError: ({ errorMessage, handleReload }: ResourceError) => JSX.Element;
-export default ResourceError;

package/src/ResourceError/ResourceError.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import Icon, { IconOptions } from '../Icons/Icon';
-
-interface ResourceError {
-  errorMessage: string;
-  handleReload: () => void;
-}
-
-const ResourceError = function ({ errorMessage, handleReload }: ResourceError) {
-  return (
-    <div className="flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3">
-      <Icon icon={'error' as IconOptions} aria-hidden />
-      {/* Error message */}
-      <span className="text-md text-gray-800 font-semibold leading-5">{errorMessage}</span>
-      {/* Retry button */}
-      <button
-        type="button"
-        onClick={handleReload}
-        className="flex flex-row items-center justify-center gap-3 bg-black bg-opacity-10 w-[119px] h-9 mt-3 rounded text-md font-bold text-gray-700"
-      >
-        <Icon icon={'retry' as IconOptions} aria-hidden /> Try again
-      </button>
-    </div>
-  );
-};
-
-export default ResourceError;