@squiz/resource-browser 1.32.1-alpha.20 → 1.32.1-alpha.21

package/lib/Hooks/useChildResources.d.ts

@@ -13,7 +13,8 @@ type UseChildResourcesProps = {
  */
 export declare const useChildResources: ({ source, currentResource, onRequestChildren }: UseChildResourcesProps) => {
     isLoading: boolean;
-    error: Error | null;
     resources: Resource[];
+    reloadResources: () => void;
+    error: Error | null;
 };
 export {};

package/lib/Hooks/useChildResources.js

@@ -10,11 +10,10 @@ const react_1 = require("react");
  * @param {Function}          onRequestChildren
  */
 const useChildResources = ({ source, currentResource, onRequestChildren }) => {
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [resources, setResources] = (0, react_1.useState)([]);
-    // trigger a reload of the resources when the source or the current resource changes.
-    (0, react_1.useEffect)(() => {
+    const loadResource = (0, react_1.useCallback)(() => {
         setError(null);
         setResources([]);
         if (source) {
@@ -30,6 +29,8 @@ const useChildResources = ({ source, currentResource, onRequestChildren }) => {
             });
         }
     }, [source, currentResource]);
-    return { isLoading, error, resources };
+    // trigger a reload of the resources when the source or the current resource changes.
+    (0, react_1.useEffect)(loadResource, [source, currentResource]);
+    return { isLoading, resources, reloadResources: loadResource, error };
 };
 exports.useChildResources = useChildResources;

package/lib/Hooks/useSources.d.ts

@@ -9,8 +9,8 @@ type UseSourcesProps = {
  */
 export declare const useSources: ({ onRequestSources }: UseSourcesProps) => {
     isLoading: boolean;
-    error: Error | null;
     sources: Source[];
     reload: () => void;
+    error: Error | null;
 };
 export {};

package/lib/Hooks/useSources.js

@@ -8,14 +8,16 @@ const react_1 = require("react");
  * @param {Function} onRequestSources
  */
 const useSources = ({ onRequestSources }) => {
-    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
     const [sources, setSources] = (0, react_1.useState)([]);
     const loadSources = (0, react_1.useCallback)(() => {
+        setIsLoading(true);
         onRequestSources()
             .then((sources) => {
             setIsLoading(false);
             setSources(sources);
+            setError(null);
         })
             .catch((error) => {
             setIsLoading(false);
@@ -24,6 +26,6 @@ const useSources = ({ onRequestSources }) => {
     }, []);
     // trigger a load of the sources when the component using the hook is initially rendered.
     (0, react_1.useEffect)(loadSources, []);
-    return { isLoading, error, sources, reload: loadSources };
+    return { isLoading, sources, reload: loadSources, error };
 };
 exports.useSources = useSources;

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

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

package/lib/Icons/Generics/Error.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 Error({ isDecorative, ...props }) {
+    return (react_1.default.createElement("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("path", { d: "M30.6498 6H17.3698C16.8498 6 16.3298 6.22 15.9698 6.58L6.58977 15.96C6.22977 16.32 6.00977 16.84 6.00977 17.36V30.62C6.00977 31.16 6.22977 31.66 6.58977 32.04L15.9498 41.4C16.3298 41.78 16.8498 42 17.3698 42H30.6298C31.1698 42 31.6698 41.78 32.0498 41.42L41.4098 32.06C41.7898 31.68 41.9898 31.18 41.9898 30.64V17.36C41.9898 16.82 41.7698 16.32 41.4098 15.94L32.0498 6.58C31.6898 6.22 31.1698 6 30.6498 6ZM24.0098 34.6C22.5698 34.6 21.4098 33.44 21.4098 32C21.4098 30.56 22.5698 29.4 24.0098 29.4C25.4498 29.4 26.6098 30.56 26.6098 32C26.6098 33.44 25.4498 34.6 24.0098 34.6ZM24.0098 26C22.9098 26 22.0098 25.1 22.0098 24V16C22.0098 14.9 22.9098 14 24.0098 14C25.1098 14 26.0098 14.9 26.0098 16V24C26.0098 25.1 25.1098 26 24.0098 26Z", fill: "#D72321" }),
+        !isDecorative && react_1.default.createElement("title", null, "error icon")));
+}
+exports.default = Error;

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

@@ -1,4 +1,4 @@
-import { ArrowRight, ArrowDown, Selected, Root, ResourceSelect, Close } from '.';
+import { ArrowRight, ArrowDown, Selected, Root, ResourceSelect, Close, Error, Retry } from '.';
 declare const GenericIconMap: {
     'arrow-right': typeof ArrowRight;
     'arrow-down': typeof ArrowDown;
@@ -6,5 +6,7 @@ declare const GenericIconMap: {
     selected: typeof Selected;
     root: typeof Root;
     close: typeof Close;
+    error: typeof Error;
+    retry: typeof Retry;
 };
 export default GenericIconMap;

package/lib/Icons/Generics/GenericIconMap.js

@@ -9,6 +9,8 @@ const GenericIconMap = {
     selected: _1.Selected,
     root: _1.Root,
     close: _1.Close,
+    error: _1.Error,
+    retry: _1.Retry,
 };
 // Export our map
 exports.default = GenericIconMap;

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

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

package/lib/Icons/Generics/Retry.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 Retry({ isDecorative, ...props }) {
+    return (react_1.default.createElement("svg", { width: "17", height: "20", viewBox: "0 0 17 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("path", { d: "M8.46194 3.64249V0.852487C8.46194 0.402487 7.92194 0.182487 7.61194 0.502487L3.81194 4.29249C3.61194 4.49249 3.61194 4.80249 3.81194 5.00249L7.60194 8.79249C7.92194 9.10249 8.46194 8.88249 8.46194 8.43249V5.64249C12.1919 5.64249 15.1419 9.06249 14.3219 12.9325C13.8519 15.2025 12.0119 17.0325 9.75194 17.5025C6.18194 18.2525 3.00194 15.8025 2.52194 12.4925C2.45194 12.0125 2.03194 11.6425 1.54194 11.6425C0.941942 11.6425 0.461942 12.1725 0.541942 12.7725C1.16194 17.1625 5.34194 20.4125 10.0719 19.4925C13.1919 18.8825 15.7019 16.3725 16.3119 13.2525C17.3019 8.12249 13.4019 3.64249 8.46194 3.64249Z", fill: "#3D3D3D" }),
+        !isDecorative && react_1.default.createElement("title", null, "retry icon")));
+}
+exports.default = Retry;

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

@@ -4,3 +4,5 @@ export { default as Selected } from './Selected';
 export { default as Root } from './Root';
 export { default as ResourceSelect } from './ResourceSelect';
 export { default as Close } from './Close';
+export { default as Error } from './Error';
+export { default as Retry } from './Retry';

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.Close = exports.ResourceSelect = exports.Root = exports.Selected = exports.ArrowDown = exports.ArrowRight = void 0;
+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; } });
@@ -17,3 +17,7 @@ var ResourceSelect_1 = require("./ResourceSelect");
 Object.defineProperty(exports, "ResourceSelect", { enumerable: true, get: function () { return __importDefault(ResourceSelect_1).default; } });
 var Close_1 = require("./Close");
 Object.defineProperty(exports, "Close", { enumerable: true, get: function () { return __importDefault(Close_1).default; } });
+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; } });

package/lib/Icons/Icon.d.ts

@@ -7,6 +7,8 @@ export declare const iconSources: {
         selected: typeof import("./Generics").Selected;
         root: typeof import("./Generics").Root;
         close: typeof import("./Generics").Close;
+        error: typeof import("./Generics").Error;
+        retry: typeof import("./Generics").Retry;
     };
     matrix: {
         audio_file: typeof import("./MatrixResources").Audio;

package/lib/ResourceError/ResourceError.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface ResourceError {
+    errorMessage: string;
+    handleReload: () => void;
+}
+declare const ResourceError: ({ errorMessage, handleReload }: ResourceError) => JSX.Element;
+export default ResourceError;

package/lib/ResourceError/ResourceError.js

@@ -0,0 +1,16 @@
+"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"));
+const Icon_1 = __importDefault(require("../Icons/Icon"));
+const ResourceError = function ({ errorMessage, 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")));
+};
+exports.default = ResourceError;

package/lib/ResourceList/ResourceList.d.ts

@@ -10,6 +10,8 @@ export interface ResourceListProps {
     onResourceSelect: (resource: Resource, overlayProps: DOMAttributes<FocusableElement>) => void;
     onResourceDrillDown: (resource: Resource) => void;
     allowedTypes?: string[] | undefined;
+    error: Error | null;
+    handleReload: () => void;
 }
-declare const ResourceList: ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, }: ResourceListProps) => JSX.Element;
+declare const ResourceList: ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, error, handleReload, }: ResourceListProps) => JSX.Element;
 export default ResourceList;

package/lib/ResourceList/ResourceList.js

@@ -29,7 +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 ResourceList = function ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, }) {
+const ResourceError_1 = __importDefault(require("../ResourceError/ResourceError"));
+const ResourceList = function ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, error, handleReload, }) {
     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)(() => {
@@ -43,7 +44,9 @@ 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 &&
             resources.map((resource) => {
                 return (react_1.default.createElement(ResourceItem_1.default, { 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, className: "border-b-0 first:mt-0 first:rounded-t-lg last:rounded-b-lg last:border-b", allowedTypes: allowedTypes }));
             })));

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -41,12 +41,8 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
     const [selectedResource, setSelectedResource] = (0, react_1.useState)(null);
     const [previewModalOverlayProps, setPreviewModalOverlayProps] = (0, react_1.useState)({});
     const { source, currentResource, hierarchy, setSource, push, popUntil } = (0, useResourcePath_1.useResourcePath)();
-    const { isLoading: isSourceLoading, sources } = (0, useSources_1.useSources)({ onRequestSources });
-    const { isLoading: isResourcesLoading, resources } = (0, useChildResources_1.useChildResources)({
-        source,
-        currentResource,
-        onRequestChildren,
-    });
+    const { sources, isLoading: isSourceLoading, reload: handleSourceReload, error: sourceError, } = (0, useSources_1.useSources)({ onRequestSources });
+    const { resources, isLoading: isResourcesLoading, reloadResources: handleResourceReload, error: resourceError, } = (0, useChildResources_1.useChildResources)({ source, currentResource, onRequestChildren });
     const handleResourceDrillDown = (0, react_1.useCallback)((resource) => {
         push(resource);
     }, [push]);
@@ -83,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 })),
-                source && (react_1.default.createElement(ResourceList_1.default, { previewModalState: previewModalState, resources: resources, selectedResource: selectedResource, isLoading: isResourcesLoading, onResourceSelect: handleResourceSelected, onResourceDrillDown: handleResourceDrillDown, allowedTypes: allowedTypes }))),
+                !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 }))),
             react_1.default.createElement(PreviewPanel_1.default, { resource: selectedResource, modalState: previewModalState, previewModalOverlayProps: previewModalOverlayProps, allowedTypes: allowedTypes, onSelect: handleDetailSelect, onClose: handleDetailClose }))));
 }
 exports.default = ResourcePickerContainer;

package/lib/SourceList/SourceList.d.ts

@@ -9,6 +9,8 @@ export interface SourceListProps {
     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, }: SourceListProps) => JSX.Element;
+declare const SourceList: ({ sources, previewModalState, isLoading, onSourceSelect, onSourceDrillDown, allowedTypes, handleReload, error, }: SourceListProps) => JSX.Element;
 export default SourceList;

package/lib/SourceList/SourceList.js

@@ -31,7 +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 SourceList = function ({ sources, previewModalState, isLoading, onSourceSelect, onSourceDrillDown, allowedTypes, }) {
+const ResourceError_1 = __importDefault(require("../ResourceError/ResourceError"));
+const SourceList = function ({ sources, previewModalState, isLoading, onSourceSelect, onSourceDrillDown, allowedTypes, handleReload, error, }) {
     const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);
     const listRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -47,7 +48,9 @@ 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 &&
             categorisedSources.map(({ key, label, sources }, index) => {
                 return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}` },
                     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" },

package/lib/index.css

@@ -529,6 +529,9 @@
 .squiz-rb-scope .h-6 {
   height: 1.5rem;
 }
+.squiz-rb-scope .h-9 {
+  height: 2.25rem;
+}
 .squiz-rb-scope .h-\[50vh\] {
   height: 50vh;
 }
@@ -574,6 +577,9 @@
 .squiz-rb-scope .w-72 {
   width: 18rem;
 }
+.squiz-rb-scope .w-\[119px\] {
+  width: 119px;
+}
 .squiz-rb-scope .w-\[60px\] {
   width: 60px;
 }
@@ -613,6 +619,9 @@
 .squiz-rb-scope .grid-cols-\[24px_1fr_45px\] {
   grid-template-columns: 24px 1fr 45px;
 }
+.squiz-rb-scope .flex-row {
+  flex-direction: row;
+}
 .squiz-rb-scope .flex-col {
   flex-direction: column;
 }
@@ -631,6 +640,9 @@
 .squiz-rb-scope .justify-center {
   justify-content: center;
 }
+.squiz-rb-scope .gap-3 {
+  gap: 0.75rem;
+}
 .squiz-rb-scope .overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -686,6 +698,10 @@
 .squiz-rb-scope .border-opacity-20 {
   --tw-border-opacity: 0.2;
 }
+.squiz-rb-scope .bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
 .squiz-rb-scope .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(230 241 250 / var(--tw-bg-opacity));
@@ -709,6 +725,9 @@
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .bg-opacity-10 {
+  --tw-bg-opacity: 0.1;
+}
 .squiz-rb-scope .p-1 {
   padding: 0.25rem;
 }
@@ -748,6 +767,10 @@
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.squiz-rb-scope .py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
 .squiz-rb-scope .pb-4 {
   padding-bottom: 1rem;
 }
@@ -763,6 +786,9 @@
 .squiz-rb-scope .text-base {
   font-size: 1rem;
 }
+.squiz-rb-scope .text-md {
+  font-size: 0.875rem;
+}
 .squiz-rb-scope .text-sm {
   font-size: 0.8125rem;
 }
@@ -770,12 +796,18 @@
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
+.squiz-rb-scope .font-bold {
+  font-weight: 700;
+}
 .squiz-rb-scope .font-normal {
   font-weight: 400;
 }
 .squiz-rb-scope .font-semibold {
   font-weight: 600;
 }
+.squiz-rb-scope .leading-5 {
+  line-height: 1.25rem;
+}
 .squiz-rb-scope .leading-6 {
   line-height: 1.5rem;
 }
@@ -791,6 +823,10 @@
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
 }
+.squiz-rb-scope .text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(79 79 79 / var(--tw-text-opacity));
+}
 .squiz-rb-scope .text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(61 61 61 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.32.1-alpha.20",
+  "version": "1.32.1-alpha.21",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -14,7 +14,7 @@
     "clean": "rimraf ./lib"
   },
   "dependencies": {
-    "@squiz/dx-json-schema-lib": "1.32.1-alpha.20",
+    "@squiz/dx-json-schema-lib": "1.32.1-alpha.21",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
     "react-stately": "3.21.0"
@@ -71,5 +71,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "80da37a08710a54a9bab23b1f741299d157f56e2"
+  "gitHead": "c197f8d0d9e326d6a3fcaa5c417d3918a4a62234"
 }

package/src/Hooks/useChildResources.spec.ts

@@ -8,6 +8,7 @@ describe('useChildResources', () => {
     const currentResource = mockResource({ name: 'Current resource' });
     const children = [mockResource({ name: 'Child 1' })];
     const onRequestChildren = jest.fn().mockResolvedValue(children);
+
     const { result } = renderHook(() =>
       useChildResources({
         source,
@@ -23,7 +24,6 @@ describe('useChildResources', () => {
     await waitFor(() => expect(result.current.isLoading).toBe(false));
 
     expect(result.current.isLoading).toBe(false);
-    expect(result.current.error).toBe(null);
     expect(result.current.resources).toBe(children);
   });
 
@@ -32,6 +32,7 @@ describe('useChildResources', () => {
     const currentResource = mockResource({ name: 'Current resource' });
     const error = new Error('Loading the resources failed.');
     const onRequestChildren = jest.fn().mockRejectedValue(error);
+
     const { result } = renderHook(() =>
       useChildResources({
         source,

package/src/Hooks/useChildResources.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Resource, ScopedSource, Source } from '../types';
 
 type UseChildResourcesProps = {
@@ -15,12 +15,11 @@ type UseChildResourcesProps = {
  * @param {Function}          onRequestChildren
  */
 export const useChildResources = ({ source, currentResource, onRequestChildren }: UseChildResourcesProps) => {
-  const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
   const [resources, setResources] = useState<Resource[]>([]);
 
-  // trigger a reload of the resources when the source or the current resource changes.
-  useEffect(() => {
+  const loadResource = useCallback(() => {
     setError(null);
     setResources([]);
 
@@ -39,5 +38,8 @@ export const useChildResources = ({ source, currentResource, onRequestChildren }
     }
   }, [source, currentResource]);
 
-  return { isLoading, error, resources };
+  // trigger a reload of the resources when the source or the current resource changes.
+  useEffect(loadResource, [source, currentResource]);
+
+  return { isLoading, resources, reloadResources: loadResource, error };
 };

package/src/Hooks/useSources.spec.ts

@@ -15,7 +15,6 @@ describe('useSources', () => {
     await waitFor(() => expect(result.current.isLoading).toBe(false));
 
     expect(result.current.isLoading).toBe(false);
-    expect(result.current.error).toBe(null);
     expect(result.current.sources).toBe(sources);
   });
 

package/src/Hooks/useSources.ts

@@ -11,14 +11,16 @@ type UseSourcesProps = {
  * @param {Function} onRequestSources
  */
 export const useSources = ({ onRequestSources }: UseSourcesProps) => {
-  const [isLoading, setIsLoading] = useState(true);
   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);
@@ -29,5 +31,5 @@ export const useSources = ({ onRequestSources }: UseSourcesProps) => {
   // trigger a load of the sources when the component using the hook is initially rendered.
   useEffect(loadSources, []);
 
-  return { isLoading, error, sources, reload: loadSources };
+  return { isLoading, sources, reload: loadSources, error };
 };

package/src/Icons/Generics/Error.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function Error({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M30.6498 6H17.3698C16.8498 6 16.3298 6.22 15.9698 6.58L6.58977 15.96C6.22977 16.32 6.00977 16.84 6.00977 17.36V30.62C6.00977 31.16 6.22977 31.66 6.58977 32.04L15.9498 41.4C16.3298 41.78 16.8498 42 17.3698 42H30.6298C31.1698 42 31.6698 41.78 32.0498 41.42L41.4098 32.06C41.7898 31.68 41.9898 31.18 41.9898 30.64V17.36C41.9898 16.82 41.7698 16.32 41.4098 15.94L32.0498 6.58C31.6898 6.22 31.1698 6 30.6498 6ZM24.0098 34.6C22.5698 34.6 21.4098 33.44 21.4098 32C21.4098 30.56 22.5698 29.4 24.0098 29.4C25.4498 29.4 26.6098 30.56 26.6098 32C26.6098 33.44 25.4498 34.6 24.0098 34.6ZM24.0098 26C22.9098 26 22.0098 25.1 22.0098 24V16C22.0098 14.9 22.9098 14 24.0098 14C25.1098 14 26.0098 14.9 26.0098 16V24C26.0098 25.1 25.1098 26 24.0098 26Z"
+        fill="#D72321"
+      />
+      {!isDecorative && <title>error icon</title>}
+    </svg>
+  );
+}

package/src/Icons/Generics/GenericIconMap.ts

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

package/src/Icons/Generics/Retry.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function Retry({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8.46194 3.64249V0.852487C8.46194 0.402487 7.92194 0.182487 7.61194 0.502487L3.81194 4.29249C3.61194 4.49249 3.61194 4.80249 3.81194 5.00249L7.60194 8.79249C7.92194 9.10249 8.46194 8.88249 8.46194 8.43249V5.64249C12.1919 5.64249 15.1419 9.06249 14.3219 12.9325C13.8519 15.2025 12.0119 17.0325 9.75194 17.5025C6.18194 18.2525 3.00194 15.8025 2.52194 12.4925C2.45194 12.0125 2.03194 11.6425 1.54194 11.6425C0.941942 11.6425 0.461942 12.1725 0.541942 12.7725C1.16194 17.1625 5.34194 20.4125 10.0719 19.4925C13.1919 18.8825 15.7019 16.3725 16.3119 13.2525C17.3019 8.12249 13.4019 3.64249 8.46194 3.64249Z"
+        fill="#3D3D3D"
+      />
+      {!isDecorative && <title>retry icon</title>}
+    </svg>
+  );
+}

package/src/Icons/Generics/index.tsx

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

package/src/ResourceError/ResourceError.spec.tsx

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

package/src/ResourceError/ResourceError.tsx

@@ -0,0 +1,27 @@
+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;

package/src/ResourceList/ResourceList.spec.tsx

@@ -25,6 +25,8 @@ function ResourceListTestWrapper({
 
 describe('ResourceList', () => {
   it('Shows loading when isLoading true', async () => {
+    const reload = jest.fn();
+
     render(
       <ResourceListTestWrapper
         constructFunction={(previewModalState) => {
@@ -35,6 +37,8 @@ describe('ResourceList', () => {
               isLoading={true}
               onResourceSelect={() => {}}
               onResourceDrillDown={() => {}}
+              error={null}
+              handleReload={reload}
             />
           );
         }}
@@ -47,6 +51,8 @@ describe('ResourceList', () => {
   });
 
   it('Focus is moved to the resource list', async () => {
+    const reload = jest.fn();
+
     render(
       <ResourceListTestWrapper
         constructFunction={(previewModalState) => {
@@ -57,6 +63,8 @@ describe('ResourceList', () => {
               isLoading={false}
               onResourceSelect={() => {}}
               onResourceDrillDown={() => {}}
+              error={null}
+              handleReload={reload}
             />
           );
         }}
@@ -69,6 +77,8 @@ describe('ResourceList', () => {
   });
 
   it('Resource list render each resource', async () => {
+    const reload = jest.fn();
+
     render(
       <ResourceListTestWrapper
         constructFunction={(previewModalState) => {
@@ -79,6 +89,8 @@ describe('ResourceList', () => {
               isLoading={false}
               onResourceSelect={() => {}}
               onResourceDrillDown={() => {}}
+              error={null}
+              handleReload={reload}
             />
           );
         }}
@@ -96,6 +108,7 @@ describe('ResourceList', () => {
 
   it('Clicking resource body triggers correct onResourceSelect', async () => {
     const onResourceSelect = jest.fn();
+    const reload = jest.fn();
 
     render(
       <ResourceListTestWrapper
@@ -107,6 +120,8 @@ describe('ResourceList', () => {
               isLoading={false}
               onResourceSelect={onResourceSelect}
               onResourceDrillDown={() => {}}
+              error={null}
+              handleReload={reload}
             />
           );
         }}
@@ -124,6 +139,7 @@ describe('ResourceList', () => {
 
   it('Clicking node child count triggers correct onResourceDrillDown', async () => {
     const onResourceDrillDown = jest.fn();
+    const reload = jest.fn();
 
     render(
       <ResourceListTestWrapper
@@ -135,6 +151,8 @@ describe('ResourceList', () => {
               isLoading={false}
               onResourceSelect={() => {}}
               onResourceDrillDown={onResourceDrillDown}
+              error={null}
+              handleReload={reload}
             />
           );
         }}
@@ -148,4 +166,31 @@ describe('ResourceList', () => {
       expect(onResourceDrillDown).toHaveBeenCalledWith(resources[2]);
     });
   });
+
+  it('Renders error state when an error occurs loading resource list', async () => {
+    const reload = jest.fn();
+
+    const { getByText } = render(
+      <ResourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <ResourceList
+              resources={resources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onResourceSelect={() => {}}
+              onResourceDrillDown={() => {}}
+              error={new Error('This is a resource error!')}
+              handleReload={reload}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      const errorMessage = getByText('This is a resource error!');
+      expect(errorMessage).toBeInTheDocument();
+    });
+  });
 });

package/src/ResourceList/ResourceList.tsx

@@ -5,6 +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';
 
 export interface ResourceListProps {
   resources: Array<Resource>;
@@ -14,6 +15,8 @@ export interface ResourceListProps {
   onResourceSelect: (resource: Resource, overlayProps: DOMAttributes<FocusableElement>) => void;
   onResourceDrillDown: (resource: Resource) => void;
   allowedTypes?: string[] | undefined;
+  error: Error | null;
+  handleReload: () => void;
 }
 
 const ResourceList = function ({
@@ -24,6 +27,8 @@ const ResourceList = function ({
   onResourceSelect,
   onResourceDrillDown,
   allowedTypes,
+  error,
+  handleReload,
 }: ResourceListProps) {
   const listRef = useRef<HTMLUListElement>(null);
 
@@ -51,7 +56,10 @@ const ResourceList = function ({
         </>
       )}
 
+      {!isLoading && error && <ResourceError errorMessage={error.message} handleReload={handleReload} />}
+
       {!isLoading &&
+        !error &&
         resources.map((resource) => {
           return (
             <ResourceItem

package/src/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -36,12 +36,20 @@ function ResourcePickerContainer({
   const [selectedResource, setSelectedResource] = useState<Resource | null>(null);
   const [previewModalOverlayProps, setPreviewModalOverlayProps] = useState<DOMAttributes>({});
   const { source, currentResource, hierarchy, setSource, push, popUntil } = useResourcePath();
-  const { isLoading: isSourceLoading, sources } = useSources({ onRequestSources });
-  const { isLoading: isResourcesLoading, resources } = useChildResources({
-    source,
-    currentResource,
-    onRequestChildren,
-  });
+
+  const {
+    sources,
+    isLoading: isSourceLoading,
+    reload: handleSourceReload,
+    error: sourceError,
+  } = useSources({ onRequestSources });
+
+  const {
+    resources,
+    isLoading: isResourcesLoading,
+    reloadResources: handleResourceReload,
+    error: resourceError,
+  } = useChildResources({ source, currentResource, onRequestChildren });
 
   const handleResourceDrillDown = useCallback(
     (resource: Resource) => {
@@ -130,6 +138,8 @@ function ResourcePickerContainer({
               onSourceSelect={handleSourceDrilldown}
               onSourceDrillDown={handleSourceDrilldown}
               allowedTypes={allowedTypes}
+              handleReload={handleSourceReload}
+              error={sourceError}
             />
           )}
           {source && (
@@ -141,6 +151,8 @@ function ResourcePickerContainer({
               onResourceSelect={handleResourceSelected}
               onResourceDrillDown={handleResourceDrillDown}
               allowedTypes={allowedTypes}
+              handleReload={handleResourceReload}
+              error={resourceError}
             />
           )}
         </div>

package/src/SourceList/SourceList.spec.tsx

@@ -69,6 +69,8 @@ function SourceListTestWrapper({
 
 describe('SourceList', () => {
   it('Shows loading when isLoading is true', async () => {
+    const reload = jest.fn();
+
     render(
       <SourceListTestWrapper
         constructFunction={(previewModalState) => {
@@ -79,6 +81,8 @@ describe('SourceList', () => {
               isLoading={true}
               onSourceSelect={() => {}}
               onSourceDrillDown={() => {}}
+              error={null}
+              handleReload={reload}
             />
           );
         }}
@@ -91,6 +95,8 @@ describe('SourceList', () => {
   });
 
   it('Source list render each source', async () => {
+    const reload = jest.fn();
+
     render(
       <SourceListTestWrapper
         constructFunction={(previewModalState) => {
@@ -101,6 +107,8 @@ describe('SourceList', () => {
               isLoading={false}
               onSourceSelect={() => {}}
               onSourceDrillDown={() => {}}
+              error={null}
+              handleReload={reload}
             />
           );
         }}
@@ -114,6 +122,8 @@ describe('SourceList', () => {
   });
 
   it('Focus is moved to the source list', async () => {
+    const reload = jest.fn();
+
     render(
       <SourceListTestWrapper
         constructFunction={(previewModalState) => {
@@ -124,6 +134,8 @@ describe('SourceList', () => {
               isLoading={false}
               onSourceSelect={() => {}}
               onSourceDrillDown={() => {}}
+              error={null}
+              handleReload={reload}
             />
           );
         }}
@@ -136,6 +148,8 @@ describe('SourceList', () => {
   });
 
   it('Source list renders each sources nodes', async () => {
+    const reload = jest.fn();
+
     render(
       <SourceListTestWrapper
         constructFunction={(previewModalState) => {
@@ -146,6 +160,8 @@ describe('SourceList', () => {
               isLoading={false}
               onSourceSelect={() => {}}
               onSourceDrillDown={() => {}}
+              error={null}
+              handleReload={reload}
             />
           );
         }}
@@ -165,6 +181,7 @@ describe('SourceList', () => {
 
   it('Clicking node body triggers correct onSourceSelect', async () => {
     const onSourceSelect = jest.fn();
+    const reload = jest.fn();
 
     render(
       <SourceListTestWrapper
@@ -176,6 +193,8 @@ describe('SourceList', () => {
               isLoading={false}
               onSourceSelect={onSourceSelect}
               onSourceDrillDown={() => {}}
+              error={null}
+              handleReload={reload}
             />
           );
         }}
@@ -200,6 +219,7 @@ describe('SourceList', () => {
 
   it('Clicking node child count triggers correct onSourceDrillDown', async () => {
     const onSourceDrillDown = jest.fn();
+    const reload = jest.fn();
 
     render(
       <SourceListTestWrapper
@@ -211,6 +231,8 @@ describe('SourceList', () => {
               isLoading={false}
               onSourceSelect={() => {}}
               onSourceDrillDown={onSourceDrillDown}
+              error={null}
+              handleReload={reload}
             />
           );
         }}
@@ -227,4 +249,31 @@ describe('SourceList', () => {
       });
     });
   });
+
+  it('Renders error state when an error occurs loading source list', async () => {
+    const reload = jest.fn();
+
+    const { getByText } = render(
+      <SourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <SourceList
+              sources={sources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onSourceSelect={() => {}}
+              onSourceDrillDown={() => {}}
+              error={new Error('Source list error!')}
+              handleReload={reload}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      const errorMessage = getByText('Source list error!');
+      expect(errorMessage).toBeInTheDocument();
+    });
+  });
 });

package/src/SourceList/SourceList.tsx

@@ -7,6 +7,7 @@ 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';
 
 export interface SourceListProps {
   sources: Source[];
@@ -15,6 +16,8 @@ export interface SourceListProps {
   onSourceSelect: (node: ScopedSource, overlayProps: DOMAttributes<FocusableElement>) => void;
   onSourceDrillDown: (node: ScopedSource) => void;
   allowedTypes?: string[] | undefined;
+  handleReload: () => void;
+  error: Error | null;
 }
 
 const SourceList = function ({
@@ -24,6 +27,8 @@ const SourceList = function ({
   onSourceSelect,
   onSourceDrillDown,
   allowedTypes,
+  handleReload,
+  error,
 }: SourceListProps) {
   const categorisedSources = useCategorisedSources(sources);
   const listRef = useRef<HTMLUListElement>(null);
@@ -54,7 +59,10 @@ const SourceList = function ({
         </>
       )}
 
+      {!isLoading && error && <ResourceError errorMessage={error.message} handleReload={handleReload} />}
+
       {!isLoading &&
+        !error &&
         categorisedSources.map(({ key, label, sources }, index) => {
           return (
             <li key={key} className={`flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}`}>

package/src/__mocks__/StorybookHelpers.ts

@@ -6,34 +6,53 @@ type CreateCallbacksProps = Partial<{
   delay: number;
   sourceIsLoading: boolean;
   resourceIsLoading: boolean;
+  error?: string;
 }>;
 
 export const createResourceBrowserCallbacks = ({
   delay = 500,
   sourceIsLoading = false,
   resourceIsLoading = false,
+  error,
 }: CreateCallbacksProps = {}) => {
   return {
     onRequestSources: () => {
-      return new Promise((resolve) => {
-        if (!sourceIsLoading) {
-          setTimeout(resolve, delay, sampleSources);
-        }
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          if (error && Math.random() > 0.5) {
+            reject(new Error(error));
+          } else {
+            if (!sourceIsLoading) {
+              resolve(sampleSources);
+            }
+          }
+        }, delay);
       });
     },
     onRequestChildren: (source: Source, resource: Resource | null) => {
-      return new Promise((resolve) => {
+      return new Promise((resolve, reject) => {
         if (!resourceIsLoading) {
-          const children = resource ? (((resource as any)?._children || []) as Resource[]) : sampleResources;
-
-          setTimeout(resolve, delay, children);
+          setTimeout(() => {
+            if (error && Math.random() > 0.5) {
+              reject(new Error(error));
+            } else {
+              const children = resource ? (((resource as any)?._children || []) as Resource[]) : sampleResources;
+              resolve(children);
+            }
+          }, delay);
         }
       });
     },
     onRequestResource: () => {
-      return new Promise((resolve) => {
+      return new Promise((resolve, reject) => {
         if (!resourceIsLoading) {
-          setTimeout(resolve, delay, sampleResources[0]);
+          setTimeout(() => {
+            if (error && Math.random() > 0.5) {
+              reject(new Error(error));
+            } else {
+              resolve(sampleResources[0]);
+            }
+          }, delay);
         }
       });
     },

package/src/index.stories.tsx

@@ -8,10 +8,11 @@ export default {
 } as Meta<typeof RelatedAssetPicker>;
 
 const Template: StoryFn<typeof RelatedAssetPicker> = (props) => {
-  const { sourceIsLoading, resourceIsLoading } = props;
+  const { sourceIsLoading, resourceIsLoading, error } = props;
   const { onRequestSources, onRequestChildren, onRequestResource, onChange } = createResourceBrowserCallbacks({
     sourceIsLoading: !!sourceIsLoading,
     resourceIsLoading: !!resourceIsLoading,
+    error,
   });
 
   return (
@@ -41,5 +42,6 @@ Primary.args = {
   modalTitle: 'Asset Picker',
   sourceIsLoading: false,
   resourceIsLoading: false,
+  error: '',
   allowedTypes: ['site', 'image', 'physical_file'],
 };