@squiz/resource-browser 1.67.1 → 1.68.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @squiz/resource-browser
 
+## 1.68.0
+
+### Minor Changes
+
+- 8c2491b: Added recent locations section to resource browser
+
 ## 1.67.1
 
 ### Patch Changes

package/lib/Hooks/useRecentLocations.d.ts

@@ -0,0 +1,10 @@
+import { Resource, Source } from '../types';
+export interface RecentLocation {
+    rootNode: Resource | null;
+    source: Source;
+    path: Array<Resource>;
+}
+export declare const useRecentLocations: (maxLocations?: number, storageKey?: string) => {
+    recentLocations: RecentLocation[];
+    addRecentLocation: (newLocation: RecentLocation) => void;
+};

package/lib/Hooks/useRecentLocations.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRecentLocations = void 0;
+const react_1 = require("react");
+const useRecentLocations = (maxLocations = 3, storageKey = 'rb_recent_locations') => {
+    let initialRecentLocations = [];
+    try {
+        initialRecentLocations = JSON.parse(localStorage.getItem(storageKey) ?? '[]');
+    }
+    catch (_ignored) {
+        // Ignore this error (edge case someone messing with the local storage...)
+    }
+    // We just have an extra safety check here in case local storage has been messed with and set as {} for example
+    if (!Array.isArray(initialRecentLocations)) {
+        initialRecentLocations = [];
+    }
+    const [recentLocations, setRecentLocations] = (0, react_1.useState)(initialRecentLocations);
+    const addRecentLocation = (newLocation) => {
+        // Check if the new location to make sure we don't already have a recent location for this
+        if (JSON.stringify(recentLocations).indexOf(JSON.stringify(newLocation)) > -1) {
+            return;
+        }
+        const updatedLocations = [newLocation, ...recentLocations.slice(0, maxLocations - 1)];
+        // Set state
+        setRecentLocations(updatedLocations);
+        // Update local storage
+        localStorage.setItem(storageKey, JSON.stringify(updatedLocations));
+    };
+    return {
+        recentLocations,
+        addRecentLocation,
+    };
+};
+exports.useRecentLocations = useRecentLocations;

package/lib/Icons/HistoryIcon.d.ts

@@ -0,0 +1,4 @@
+import React, { SVGAttributes } from 'react';
+type HistoryIconProps = SVGAttributes<SVGElement>;
+export declare const HistoryIcon: (props: HistoryIconProps) => React.JSX.Element;
+export {};

package/lib/Icons/HistoryIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HistoryIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const HistoryIcon = (props) => {
+    return (react_1.default.createElement("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        react_1.default.createElement("g", { id: "icon" },
+            react_1.default.createElement("path", { id: "Vector", d: "M10.5531 2.25131C6.73555 2.14631 3.60805 5.21381 3.60805 9.00131H2.26556C1.92806 9.00131 1.76306 9.40631 2.00306 9.63881L4.09556 11.7388C4.24555 11.8888 4.47806 11.8888 4.62806 11.7388L6.72055 9.63881C6.95305 9.40631 6.78805 9.00131 6.45055 9.00131H5.10805C5.10805 6.07631 7.49305 3.71381 10.4331 3.75131C13.2231 3.78881 15.5706 6.1363 15.6081 8.9263C15.6456 11.8588 13.2831 14.2513 10.3581 14.2513C9.15055 14.2513 8.03305 13.8388 7.14806 13.1413C6.84805 12.9088 6.42805 12.9313 6.15805 13.2013C5.84305 13.5163 5.86555 14.0488 6.21805 14.3188C7.35805 15.2188 8.79055 15.7513 10.3581 15.7513C14.1456 15.7513 17.2131 12.6238 17.1081 8.8063C17.0106 5.28881 14.0706 2.34881 10.5531 2.25131ZM10.1706 6.0013C9.86305 6.0013 9.60805 6.2563 9.60805 6.56381V9.32381C9.60805 9.58631 9.75055 9.83381 9.97555 9.9688L12.3156 11.3563C12.5856 11.5138 12.9306 11.4238 13.0881 11.1613C13.2456 10.8913 13.1556 10.5463 12.8931 10.3888L10.7331 9.10631V6.5563C10.7331 6.2563 10.4781 6.0013 10.1706 6.0013Z", fill: "#4F4F4F" }))));
+};
+exports.HistoryIcon = HistoryIcon;

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -37,11 +37,13 @@ const useResourcePath_1 = require("../Hooks/useResourcePath");
 const useChildResources_1 = require("../Hooks/useChildResources");
 const useSources_1 = require("../Hooks/useSources");
 const usePreselectedResourcePath_1 = require("../Hooks/usePreselectedResourcePath");
+const useRecentLocations_1 = require("../Hooks/useRecentLocations");
 function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestResource, onRequestChildren, onChange, onClose, preselectedSourceId, preselectedResource, }) {
     const previewModalState = (0, react_stately_1.useOverlayTriggerState)({});
     const [selectedResourceId, setSelectedResourceId] = (0, react_1.useState)(null);
     const [previewModalOverlayProps, setPreviewModalOverlayProps] = (0, react_1.useState)({});
     const { source, currentResource, hierarchy, setSource, push, popUntil } = (0, useResourcePath_1.useResourcePath)();
+    const { addRecentLocation } = (0, useRecentLocations_1.useRecentLocations)();
     const { data: sources, isLoading: isSourceLoading, reload: handleSourceReload, error: sourceError, } = (0, useSources_1.useSources)({ onRequestSources });
     const { data: resources, isLoading: isResourcesLoading, reload: handleResourceReload, error: resourceError, } = (0, useChildResources_1.useChildResources)({ source, currentResource, onRequestChildren });
     const { data: { source: preselectedSource, path: preselectedPath }, isLoading: isPreselectedResourcePathLoading, } = (0, usePreselectedResourcePath_1.usePreselectedResourcePath)({
@@ -66,8 +68,20 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
     }, [setSource]);
     const handleDetailSelect = (0, react_1.useCallback)((resource) => {
         onChange({ resource, source: source?.source });
+        // Find the path that got them to where they are
+        const selectedPath = hierarchy.map((path) => {
+            const pathNode = path.node;
+            return 'resource' in pathNode ? pathNode.resource : pathNode;
+        });
+        const [rootNode, ...path] = selectedPath;
+        // Update the recent locations in local storage
+        addRecentLocation({
+            rootNode,
+            path: path,
+            source: source?.source,
+        });
         onClose();
-    }, [source]);
+    }, [source, currentResource]);
     const handleDetailClose = (0, react_1.useCallback)(() => {
         setSelectedResourceId(null);
     }, []);
@@ -95,7 +109,7 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
         react_1.default.createElement("div", { className: "flex items-center p-4.5" },
             react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title),
             react_1.default.createElement("div", { className: "px-3 border-l border-gray-300 w-300px" },
-                react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: source, isLoading: isSourceLoading, onSourceSelect: handleSourceDrilldown, onRootSelect: handleReturnToRoot })),
+                react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: source, isLoading: isSourceLoading, onSourceSelect: handleSourceDrilldown, onRootSelect: handleReturnToRoot, setSource: setSource, currentResource: currentResource })),
             react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100" },
                 react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                     react_1.default.createElement("path", { d: "M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z", fill: "currentColor" })))),
@@ -103,7 +117,7 @@ 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 || isPreselectedResourcePathLoading, onSourceSelect: handleSourceDrilldown, handleReload: handleSourceReload, error: sourceError })),
+                !source && (react_1.default.createElement(SourceList_1.default, { sources: sources, previewModalState: previewModalState, isLoading: isSourceLoading || isPreselectedResourcePathLoading, onSourceSelect: handleSourceDrilldown, handleReload: handleSourceReload, setSource: setSource, 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("div", { className: "sm:overflow-y-scroll sm:flex-1 sm:grow-[2] bg-white" },
                 react_1.default.createElement(PreviewPanel_1.default, { resource: isResourcesLoading ? null : selectedResource, modalState: previewModalState, previewModalOverlayProps: previewModalOverlayProps, allowedTypes: allowedTypes, onSelect: handleDetailSelect, onClose: handleDetailClose })))));

package/lib/SourceDropdown/SourceDropdown.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import type { Source, ScopedSource } from '../types';
-export default function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, }: {
+import type { Source, ScopedSource, Resource } from '../types';
+export default function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, setSource, currentResource, }: {
     sources: Source[];
     selectedSource: ScopedSource | null;
     isLoading: boolean;
     onRootSelect: () => void;
     onSourceSelect: (source: ScopedSource) => void;
+    setSource: (source: ScopedSource | null, path?: Resource[]) => void;
+    currentResource: Resource | null;
 }): React.JSX.Element;

package/lib/SourceDropdown/SourceDropdown.js

@@ -31,8 +31,12 @@ const interactions_1 = require("@react-aria/interactions");
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const uuid_1 = __importDefault(require("../utils/uuid"));
 const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
-function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, }) {
+const useRecentLocations_1 = require("../Hooks/useRecentLocations");
+const HistoryIcon_1 = require("../Icons/HistoryIcon");
+function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, setSource, currentResource, }) {
     const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);
+    const { recentLocations } = (0, useRecentLocations_1.useRecentLocations)();
+    const [recentLocationSelection, setRecentLocationSelection] = (0, react_1.useState)();
     const [uniqueId] = (0, react_1.useState)((0, uuid_1.default)());
     const buttonRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
@@ -53,20 +57,49 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
     });
     const handleSourceClick = (source) => {
         setIsOpen(false);
+        setRecentLocationSelection(null);
         buttonRef.current?.focus();
         onSourceSelect(source);
     };
     const handleRootSelect = () => {
         setIsOpen(false);
+        setRecentLocationSelection(null);
         buttonRef.current?.focus();
         onRootSelect();
     };
+    const handleRecentLocationClick = (location) => {
+        setIsOpen(false);
+        setRecentLocationSelection(location);
+        buttonRef.current?.focus();
+        setSource({
+            source: location.source,
+            resource: location.rootNode,
+        }, location.path);
+    };
+    (0, react_1.useEffect)(() => {
+        const lastResource = recentLocationSelection?.path[recentLocationSelection.path.length - 1];
+        // If the current resource selected in the resource browser is no longer the item selected in the
+        // recent locations section dropdown then we set the selection to null to prevent active statuses.
+        if (currentResource?.id !== lastResource?.id) {
+            setRecentLocationSelection(null);
+        }
+    }, [recentLocationSelection, currentResource]);
     return (react_1.default.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-72 border-2 rounded border-gray-300" },
         react_1.default.createElement("button", { ref: buttonRef, type: "button", "aria-label": "Source quick select", "aria-expanded": isOpen, "aria-controls": `${uniqueId}-button-menu`, onClick: () => setIsOpen(!isOpen), className: "relative flex items-center text-sm font-semibold p-1.5 w-full" },
             selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", { className: "sr-only" }, "current source "),
-                react_1.default.createElement(generic_browser_lib_1.Icon, { icon: selectedSource.resource?.type.code, resourceSource: "matrix", "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
-                react_1.default.createElement("div", { className: "truncate max-w-[200px]" }, selectedSource.resource?.name || selectedSource.source.name))),
+                react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 
+                    // Ignoring this specific line in test coverage because its a super niche issue that I could only replicate in Matrix
+                    /* istanbul ignore next */
+                    recentLocationSelection
+                        ? currentResource?.type.code || selectedSource.resource?.type.code
+                        : selectedSource.resource?.type.code, resourceSource: "matrix", "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
+                react_1.default.createElement("div", { className: "truncate max-w-[200px]" }, 
+                // Ignoring this specific line in test coverage because its a super niche issue that I could only replicate in Matrix
+                /* istanbul ignore next */
+                recentLocationSelection
+                    ? currentResource?.name || selectedSource.resource?.name || selectedSource.source.name
+                    : selectedSource.resource?.name || selectedSource.source.name))),
             !selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", { className: "sr-only" }, "view "),
                 react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'root', "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
@@ -79,13 +112,32 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
                     "All available sources")),
             isLoading && (react_1.default.createElement("li", { className: "mt-2" },
                 react_1.default.createElement(generic_browser_lib_1.Spinner, { size: "sm", label: "Loading sources", className: "m-3" }))),
+            !isLoading && recentLocations.length > 0 && (react_1.default.createElement("li", { className: `flex flex-col text-sm font-semibold text-grey-800` },
+                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 flex gap-1 items-center" },
+                        react_1.default.createElement(HistoryIcon_1.HistoryIcon, null),
+                        "Recent locations")),
+                react_1.default.createElement("ul", { "aria-label": "recent location nodes", className: "flex flex-col mt-2" }, recentLocations.map((item, index) => {
+                    const lastResource = item.path[item.path.length - 1];
+                    const isSelectedSource = item.source?.id === selectedSource?.source.id &&
+                        item.rootNode?.id === selectedSource?.resource?.id &&
+                        lastResource?.id === currentResource?.id &&
+                        recentLocationSelection;
+                    return (react_1.default.createElement("li", { key: `${index}-${item.source?.id}-${item.rootNode?.id}`, className: "flex items-center bg-white border border-b-0 last:border-b border-grey-200 first:rounded-t last:rounded-b" },
+                        react_1.default.createElement("button", { type: "button", onClick: () => handleRecentLocationClick(item), className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100` },
+                            react_1.default.createElement(generic_browser_lib_1.Icon, { icon: (lastResource?.type.code || item.rootNode?.type.code || 'folder'), resourceSource: "matrix", "aria-label": lastResource?.name || item.rootNode?.name || item.source?.name, className: "shrink-0 mr-2.5" }),
+                            react_1.default.createElement("span", { className: "text-left mr-7" }, lastResource?.name || item.rootNode?.name || item.source?.name),
+                            isSelectedSource && (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
+                })))),
             !isLoading &&
                 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' : ''}` },
+                    return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 || recentLocations.length > 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" },
                             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 mt-2" }, sources.map(({ source, resource }) => {
-                            const isSelectedSource = source.id === selectedSource?.source.id && resource?.id === selectedSource?.resource?.id;
+                            const isSelectedSource = source.id === selectedSource?.source.id &&
+                                resource?.id === selectedSource?.resource?.id &&
+                                !recentLocationSelection;
                             return (react_1.default.createElement("li", { key: `${source.id}-${resource?.id}`, className: "flex items-center bg-white border border-b-0 last:border-b border-grey-200 first:rounded-t last:rounded-b" },
                                 react_1.default.createElement("button", { type: "button", onClick: () => handleSourceClick({ source, resource }), className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100` },
                                     react_1.default.createElement(generic_browser_lib_1.Icon, { icon: resource?.type.code, resourceSource: "matrix", "aria-label": resource?.type.name, className: "shrink-0 mr-2.5" }),

package/lib/SourceList/SourceList.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { Source, ScopedSource } from '../types';
+import { Source, ScopedSource, Resource } from '../types';
 export interface SourceListProps {
     sources: Source[];
     previewModalState: OverlayTriggerState;
     isLoading: boolean;
     onSourceSelect: (node: ScopedSource, overlayProps: DOMAttributes<FocusableElement>) => void;
     handleReload: () => void;
+    setSource: (source: ScopedSource | null, path?: Resource[]) => void;
     error: Error | null;
 }
-declare const SourceList: ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, error, }: SourceListProps) => React.JSX.Element;
+declare const SourceList: ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, setSource, error, }: SourceListProps) => React.JSX.Element;
 export default SourceList;

package/lib/SourceList/SourceList.js

@@ -30,9 +30,12 @@ const react_1 = __importStar(require("react"));
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const clsx_1 = __importDefault(require("clsx"));
 const useCategorisedSources_1 = require("../Hooks/useCategorisedSources");
-const SourceList = function ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, error, }) {
+const useRecentLocations_1 = require("../Hooks/useRecentLocations");
+const HistoryIcon_1 = require("../Icons/HistoryIcon");
+const SourceList = function ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, setSource, error, }) {
     const categorisedSources = (0, useCategorisedSources_1.useCategorisedSources)(sources);
     const listRef = (0, react_1.useRef)(null);
+    const { recentLocations } = (0, useRecentLocations_1.useRecentLocations)();
     (0, react_1.useEffect)(() => {
         if (listRef.current) {
             listRef.current?.focus({
@@ -47,9 +50,23 @@ const SourceList = function ({ sources, previewModalState, isLoading, onSourceSe
     }
     return (react_1.default.createElement("ul", { ref: listRef, tabIndex: -1, "aria-label": `Source list`, className: (0, clsx_1.default)('flex flex-col bg-gray-100 min-h-full focus-visible:outline-0 px-7 py-4') },
         error && react_1.default.createElement(generic_browser_lib_1.ResourceState, { state: "error", message: error.message, handleReload: handleReload }),
+        !error && recentLocations.length > 0 && (react_1.default.createElement("li", { className: `flex flex-col text-sm font-semibold text-grey-800` },
+            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 flex gap-1 items-center" },
+                    react_1.default.createElement(HistoryIcon_1.HistoryIcon, null),
+                    "Recent locations")),
+            react_1.default.createElement("ul", { "aria-label": `recent location nodes`, className: "flex flex-col" }, recentLocations.map((item, index) => {
+                const lastResource = item.path[item.path.length - 1];
+                return (react_1.default.createElement(generic_browser_lib_1.ResourceItem, { key: `${index}-${item.source?.id}-${item.rootNode?.id}`, item: { source: item.source, resource: item.rootNode }, label: lastResource?.name || item.rootNode?.name || item?.source.name, type: lastResource?.type?.code || item.rootNode?.type?.code || 'folder', previewModalState: previewModalState, onSelect: () => {
+                        setSource({
+                            source: item.source,
+                            resource: item.rootNode,
+                        }, item.path);
+                    }, className: (0, clsx_1.default)(index === 0 && 'rounded-t-lg mt-3', index === recentLocations.length - 1 && 'rounded-b-lg'), showChevron: true }));
+            })))),
         !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' : ''}` },
+                return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 || recentLocations.length > 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" },
                         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 }) => {

package/lib/index.css

@@ -749,6 +749,14 @@
 .squiz-rb-scope .rounded-lg {
   border-radius: 0.5rem;
 }
+.squiz-rb-scope .rounded-b-lg {
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+.squiz-rb-scope .rounded-t-lg {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
 .squiz-rb-scope .border {
   border-width: 1px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.67.1",
+  "version": "1.68.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,

package/src/Hooks/useRecentLocations.spec.ts

@@ -0,0 +1,85 @@
+import { act, renderHook } from '@testing-library/react';
+import { useRecentLocations } from './useRecentLocations';
+
+import { mockResource, mockSource } from '../__mocks__/MockModels';
+
+describe('useRecentLocations', () => {
+  const mockLocalStorageData = [
+    {
+      path: [],
+      source: {
+        id: '1',
+        name: 'Test source',
+        nodes: [],
+      },
+      rootNode: {
+        childCount: 0,
+        id: '1',
+        lineages: [],
+        name: 'Test resource',
+        status: {
+          code: 'live',
+          name: 'Live',
+        },
+        type: {
+          code: 'folder',
+          name: 'Folder',
+        },
+        url: 'https://no-where.com',
+        urls: [],
+      },
+    },
+  ];
+
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('should initialize with empty array if no recent locations in storage', () => {
+    const { result } = renderHook(() => useRecentLocations());
+    expect(result.current.recentLocations).toEqual([]);
+  });
+
+  it('should add a new recent location', () => {
+    const { result } = renderHook(() => useRecentLocations());
+
+    act(() => {
+      result.current.addRecentLocation({
+        path: [],
+        source: mockSource(),
+        rootNode: mockResource(),
+      });
+    });
+
+    expect(result.current.recentLocations).toEqual(mockLocalStorageData);
+  });
+
+  it('should not add duplicate recent locations', () => {
+    const { result } = renderHook(() => useRecentLocations());
+
+    act(() => {
+      result.current.addRecentLocation({
+        path: [],
+        source: mockSource(),
+        rootNode: mockResource(),
+      });
+
+      // Add duplicate
+      result.current.addRecentLocation({
+        path: [],
+        source: mockSource(),
+        rootNode: mockResource(),
+      });
+    });
+
+    expect(result.current.recentLocations).toEqual(mockLocalStorageData);
+  });
+
+  it('should load recent locations from local storage on mount', () => {
+    localStorage.setItem('rb_recent_locations', JSON.stringify(mockLocalStorageData));
+
+    const { result } = renderHook(() => useRecentLocations());
+
+    expect(result.current.recentLocations).toEqual(mockLocalStorageData);
+  });
+});

package/src/Hooks/useRecentLocations.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Resource, Source } from '../types';
+
+export interface RecentLocation {
+  rootNode: Resource | null;
+  source: Source;
+  path: Array<Resource>;
+}
+
+export const useRecentLocations = (maxLocations = 3, storageKey = 'rb_recent_locations') => {
+  let initialRecentLocations = [];
+
+  try {
+    initialRecentLocations = JSON.parse(localStorage.getItem(storageKey) ?? '[]');
+  } catch (_ignored) {
+    // Ignore this error (edge case someone messing with the local storage...)
+  }
+
+  // We just have an extra safety check here in case local storage has been messed with and set as {} for example
+  if (!Array.isArray(initialRecentLocations)) {
+    initialRecentLocations = [];
+  }
+
+  const [recentLocations, setRecentLocations] = useState<Array<RecentLocation>>(initialRecentLocations);
+
+  const addRecentLocation = (newLocation: RecentLocation) => {
+    // Check if the new location to make sure we don't already have a recent location for this
+    if (JSON.stringify(recentLocations).indexOf(JSON.stringify(newLocation)) > -1) {
+      return;
+    }
+
+    const updatedLocations = [newLocation, ...recentLocations.slice(0, maxLocations - 1)];
+
+    // Set state
+    setRecentLocations(updatedLocations);
+
+    // Update local storage
+    localStorage.setItem(storageKey, JSON.stringify(updatedLocations));
+  };
+
+  return {
+    recentLocations,
+    addRecentLocation,
+  };
+};

package/src/Icons/HistoryIcon.tsx

@@ -0,0 +1,17 @@
+import React, { SVGAttributes } from 'react';
+
+type HistoryIconProps = SVGAttributes<SVGElement>;
+
+export const HistoryIcon = (props: HistoryIconProps) => {
+  return (
+    <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g id="icon">
+        <path
+          id="Vector"
+          d="M10.5531 2.25131C6.73555 2.14631 3.60805 5.21381 3.60805 9.00131H2.26556C1.92806 9.00131 1.76306 9.40631 2.00306 9.63881L4.09556 11.7388C4.24555 11.8888 4.47806 11.8888 4.62806 11.7388L6.72055 9.63881C6.95305 9.40631 6.78805 9.00131 6.45055 9.00131H5.10805C5.10805 6.07631 7.49305 3.71381 10.4331 3.75131C13.2231 3.78881 15.5706 6.1363 15.6081 8.9263C15.6456 11.8588 13.2831 14.2513 10.3581 14.2513C9.15055 14.2513 8.03305 13.8388 7.14806 13.1413C6.84805 12.9088 6.42805 12.9313 6.15805 13.2013C5.84305 13.5163 5.86555 14.0488 6.21805 14.3188C7.35805 15.2188 8.79055 15.7513 10.3581 15.7513C14.1456 15.7513 17.2131 12.6238 17.1081 8.8063C17.0106 5.28881 14.0706 2.34881 10.5531 2.25131ZM10.1706 6.0013C9.86305 6.0013 9.60805 6.2563 9.60805 6.56381V9.32381C9.60805 9.58631 9.75055 9.83381 9.97555 9.9688L12.3156 11.3563C12.5856 11.5138 12.9306 11.4238 13.0881 11.1613C13.2456 10.8913 13.1556 10.5463 12.8931 10.3888L10.7331 9.10631V6.5563C10.7331 6.2563 10.4781 6.0013 10.1706 6.0013Z"
+          fill="#4F4F4F"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -19,6 +19,7 @@ import { useResourcePath } from '../Hooks/useResourcePath';
 import { useChildResources } from '../Hooks/useChildResources';
 import { useSources } from '../Hooks/useSources';
 import { usePreselectedResourcePath } from '../Hooks/usePreselectedResourcePath';
+import { useRecentLocations } from '../Hooks/useRecentLocations';
 
 interface ResourcePickerContainerProps {
   title: string;
@@ -49,6 +50,8 @@ function ResourcePickerContainer({
   const [selectedResourceId, setSelectedResourceId] = useState<string | null>(null);
   const [previewModalOverlayProps, setPreviewModalOverlayProps] = useState<DOMAttributes>({});
   const { source, currentResource, hierarchy, setSource, push, popUntil } = useResourcePath();
+  const { addRecentLocation } = useRecentLocations();
+
   const {
     data: sources,
     isLoading: isSourceLoading,
@@ -101,9 +104,25 @@ function ResourcePickerContainer({
   const handleDetailSelect = useCallback(
     (resource: Resource) => {
       onChange({ resource, source: source?.source as Source });
+
+      // Find the path that got them to where they are
+      const selectedPath = hierarchy.map((path) => {
+        const pathNode = path.node as ScopedSource;
+        return 'resource' in pathNode ? pathNode.resource : pathNode;
+      });
+
+      const [rootNode, ...path] = selectedPath;
+
+      // Update the recent locations in local storage
+      addRecentLocation({
+        rootNode,
+        path: path as Resource[],
+        source: source?.source as Source,
+      });
+
       onClose();
     },
-    [source],
+    [source, currentResource],
   );
 
   const handleDetailClose = useCallback(() => {
@@ -150,6 +169,8 @@ function ResourcePickerContainer({
             isLoading={isSourceLoading}
             onSourceSelect={handleSourceDrilldown}
             onRootSelect={handleReturnToRoot}
+            setSource={setSource}
+            currentResource={currentResource}
           />
         </div>
         <button
@@ -183,6 +204,7 @@ function ResourcePickerContainer({
               isLoading={isSourceLoading || isPreselectedResourcePathLoading}
               onSourceSelect={handleSourceDrilldown}
               handleReload={handleSourceReload}
+              setSource={setSource}
               error={sourceError}
             />
           )}

package/src/SourceDropdown/SourceDropdown.spec.tsx

@@ -4,7 +4,34 @@ import { screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import SourceDropdown from './SourceDropdown';
 import { Source } from '../types';
-import { mockScopedSource, mockSource } from '../__mocks__/MockModels';
+import { mockScopedSource, mockSource, mockResource } from '../__mocks__/MockModels';
+
+const mockLocalStorageData = [
+  {
+    path: [],
+    source: {
+      id: '1',
+      name: 'Test source',
+      nodes: [],
+    },
+    rootNode: {
+      childCount: 0,
+      id: '1',
+      lineages: [],
+      name: 'Test resource',
+      status: {
+        code: 'live',
+        name: 'Live',
+      },
+      type: {
+        code: 'folder',
+        name: 'Folder',
+      },
+      url: 'https://no-where.com',
+      urls: [],
+    },
+  },
+];
 
 const sources: Source[] = [
   mockSource({
@@ -66,6 +93,8 @@ describe('SourceDropdown', () => {
         isLoading={false}
         onRootSelect={() => {}}
         onSourceSelect={() => {}}
+        setSource={() => {}}
+        currentResource={mockResource()}
       />,
     );
 
@@ -84,6 +113,8 @@ describe('SourceDropdown', () => {
         isLoading={true}
         onRootSelect={() => {}}
         onSourceSelect={() => {}}
+        setSource={() => {}}
+        currentResource={mockResource()}
       />,
     );
 
@@ -107,6 +138,8 @@ describe('SourceDropdown', () => {
         isLoading={false}
         onRootSelect={() => {}}
         onSourceSelect={() => {}}
+        setSource={() => {}}
+        currentResource={mockResource()}
       />,
     );
 
@@ -125,6 +158,8 @@ describe('SourceDropdown', () => {
         isLoading={false}
         onRootSelect={() => {}}
         onSourceSelect={() => {}}
+        setSource={() => {}}
+        currentResource={mockResource()}
       />,
     );
 
@@ -149,6 +184,8 @@ describe('SourceDropdown', () => {
           isLoading={false}
           onRootSelect={() => {}}
           onSourceSelect={() => {}}
+          setSource={() => {}}
+          currentResource={mockResource()}
         />
         <input />
       </div>,
@@ -190,6 +227,8 @@ describe('SourceDropdown', () => {
           isLoading={false}
           onRootSelect={() => {}}
           onSourceSelect={() => {}}
+          setSource={() => {}}
+          currentResource={mockResource()}
         />
         <input />
       </div>,
@@ -232,6 +271,8 @@ describe('SourceDropdown', () => {
         isLoading={false}
         onRootSelect={onRootSelect}
         onSourceSelect={() => {}}
+        setSource={() => {}}
+        currentResource={mockResource()}
       />,
     );
 
@@ -255,6 +296,8 @@ describe('SourceDropdown', () => {
         isLoading={false}
         onRootSelect={() => {}}
         onSourceSelect={onSourceSelect}
+        setSource={() => {}}
+        currentResource={mockResource()}
       />,
     );
 
@@ -267,4 +310,59 @@ describe('SourceDropdown', () => {
       expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
     });
   });
+
+  it('Recent location sources are rendered when dropdown clicked', async () => {
+    localStorage.setItem('rb_recent_locations', JSON.stringify(mockLocalStorageData));
+
+    render(
+      <SourceDropdown
+        sources={sources}
+        selectedSource={null}
+        isLoading={false}
+        onRootSelect={() => {}}
+        onSourceSelect={() => {}}
+        setSource={() => {}}
+        currentResource={mockResource()}
+      />,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Source quick select' }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Test resource')).toBeInTheDocument();
+    });
+  });
+
+  it('Selecting recent location calls setSource ', async () => {
+    const onSourceSelect = jest.fn();
+    const setSource = jest.fn();
+
+    render(
+      <SourceDropdown
+        sources={sources}
+        selectedSource={null}
+        isLoading={false}
+        onRootSelect={() => {}}
+        onSourceSelect={onSourceSelect}
+        setSource={setSource}
+        currentResource={mockResource()}
+      />,
+    );
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Source quick select' }));
+    await user.click(screen.getByText('Test resource'));
+
+    await waitFor(() => {
+      expect(setSource).toHaveBeenCalledWith(
+        {
+          source: mockLocalStorageData[0].source,
+          resource: mockLocalStorageData[0].rootNode,
+        },
+        mockLocalStorageData[0].path,
+      );
+      expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
+    });
+  });
 });

package/src/SourceDropdown/SourceDropdown.tsx

@@ -1,11 +1,13 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useFocusWithin, useKeyboard } from '@react-aria/interactions';
 import { Icon, IconOptions, Spinner } from '@squiz/generic-browser-lib';
 
-import type { Source, ScopedSource } from '../types';
+import type { Source, ScopedSource, Resource } from '../types';
 
 import uuid from '../utils/uuid';
 import { useCategorisedSources } from '../Hooks/useCategorisedSources';
+import { useRecentLocations, RecentLocation } from '../Hooks/useRecentLocations';
+import { HistoryIcon } from '../Icons/HistoryIcon';
 
 export default function SourceDropdown({
   sources,
@@ -13,14 +15,21 @@ export default function SourceDropdown({
   isLoading,
   onRootSelect,
   onSourceSelect,
+  setSource,
+  currentResource,
 }: {
   sources: Source[];
   selectedSource: ScopedSource | null;
   isLoading: boolean;
   onRootSelect: () => void;
   onSourceSelect: (source: ScopedSource) => void;
+  setSource: (source: ScopedSource | null, path?: Resource[]) => void;
+  currentResource: Resource | null;
 }) {
   const categorisedSources = useCategorisedSources(sources);
+  const { recentLocations } = useRecentLocations();
+  const [recentLocationSelection, setRecentLocationSelection] = useState<RecentLocation | null>();
+
   const [uniqueId] = useState(uuid());
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setIsOpen] = useState(false);
@@ -44,16 +53,40 @@ export default function SourceDropdown({
 
   const handleSourceClick = (source: ScopedSource) => {
     setIsOpen(false);
+    setRecentLocationSelection(null);
     buttonRef.current?.focus();
     onSourceSelect(source);
   };
 
   const handleRootSelect = () => {
     setIsOpen(false);
+    setRecentLocationSelection(null);
     buttonRef.current?.focus();
     onRootSelect();
   };
 
+  const handleRecentLocationClick = (location: RecentLocation) => {
+    setIsOpen(false);
+    setRecentLocationSelection(location);
+    buttonRef.current?.focus();
+    setSource(
+      {
+        source: location.source as Source,
+        resource: location.rootNode,
+      },
+      location.path,
+    );
+  };
+
+  useEffect(() => {
+    const lastResource = recentLocationSelection?.path[recentLocationSelection.path.length - 1];
+    // If the current resource selected in the resource browser is no longer the item selected in the
+    // recent locations section dropdown then we set the selection to null to prevent active statuses.
+    if (currentResource?.id !== lastResource?.id) {
+      setRecentLocationSelection(null);
+    }
+  }, [recentLocationSelection, currentResource]);
+
   return (
     <div {...focusWithinProps} {...keyboardProps} className="relative w-72 border-2 rounded border-gray-300">
       <button
@@ -69,12 +102,26 @@ export default function SourceDropdown({
           <>
             <span className="sr-only">current source </span>
             <Icon
-              icon={selectedSource.resource?.type.code as IconOptions}
+              icon={
+                // Ignoring this specific line in test coverage because its a super niche issue that I could only replicate in Matrix
+                /* istanbul ignore next */
+                recentLocationSelection
+                  ? currentResource?.type.code || selectedSource.resource?.type.code
+                  : selectedSource.resource?.type.code
+              }
               resourceSource="matrix"
               aria-hidden
               className="mr-2.5 h-[20px] w-[20px]"
             />
-            <div className="truncate max-w-[200px]">{selectedSource.resource?.name || selectedSource.source.name}</div>
+            <div className="truncate max-w-[200px]">
+              {
+                // Ignoring this specific line in test coverage because its a super niche issue that I could only replicate in Matrix
+                /* istanbul ignore next */
+                recentLocationSelection
+                  ? currentResource?.name || selectedSource.resource?.name || selectedSource.source.name
+                  : selectedSource.resource?.name || selectedSource.source.name
+              }
+            </div>
           </>
         )}
 
@@ -113,10 +160,63 @@ export default function SourceDropdown({
             <Spinner size="sm" label="Loading sources" className="m-3" />
           </li>
         )}
+
+        {!isLoading && recentLocations.length > 0 && (
+          <li className={`flex flex-col text-sm font-semibold text-grey-800`}>
+            <div className="relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0">
+              <span className="z-10 bg-gray-100 px-2.5 flex gap-1 items-center">
+                <HistoryIcon />
+                Recent locations
+              </span>
+            </div>
+            <ul aria-label="recent location nodes" className="flex flex-col mt-2">
+              {recentLocations.map((item, index) => {
+                const lastResource = item.path[item.path.length - 1];
+                const isSelectedSource =
+                  item.source?.id === selectedSource?.source.id &&
+                  item.rootNode?.id === selectedSource?.resource?.id &&
+                  lastResource?.id === currentResource?.id &&
+                  recentLocationSelection;
+
+                return (
+                  <li
+                    key={`${index}-${item.source?.id}-${item.rootNode?.id}`}
+                    className="flex items-center bg-white border border-b-0 last:border-b border-grey-200 first:rounded-t last:rounded-b"
+                  >
+                    <button
+                      type="button"
+                      onClick={() => handleRecentLocationClick(item)}
+                      className={`relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100`}
+                    >
+                      <Icon
+                        icon={(lastResource?.type.code || item.rootNode?.type.code || 'folder') as IconOptions}
+                        resourceSource="matrix"
+                        aria-label={lastResource?.name || item.rootNode?.name || item.source?.name}
+                        className="shrink-0 mr-2.5"
+                      />
+                      <span className="text-left mr-7">
+                        {lastResource?.name || item.rootNode?.name || item.source?.name}
+                      </span>
+                      {isSelectedSource && (
+                        <Icon icon={'selected' as IconOptions} aria-label="selected" className="absolute right-4" />
+                      )}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          </li>
+        )}
+
         {!isLoading &&
           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' : ''}`}>
+              <li
+                key={key}
+                className={`flex flex-col text-sm font-semibold text-grey-800 ${
+                  index > 0 || recentLocations.length > 0 ? 'mt-3' : ''
+                }`}
+              >
                 <div className="relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0">
                   <span className="z-10 bg-gray-100 px-2.5">{label}</span>
                 </div>
@@ -124,7 +224,9 @@ export default function SourceDropdown({
                   <ul aria-label={`${label} nodes`} className="flex flex-col mt-2">
                     {sources.map(({ source, resource }) => {
                       const isSelectedSource =
-                        source.id === selectedSource?.source.id && resource?.id === selectedSource?.resource?.id;
+                        source.id === selectedSource?.source.id &&
+                        resource?.id === selectedSource?.resource?.id &&
+                        !recentLocationSelection;
 
                       return (
                         <li

package/src/SourceList/SourceList.spec.tsx

@@ -7,6 +7,33 @@ import { useOverlayTriggerState, OverlayTriggerState } from 'react-stately';
 import SourceList from './SourceList';
 import { Source } from '../types';
 
+const mockLocalStorageData = [
+  {
+    path: [],
+    source: {
+      id: '1',
+      name: 'Test source',
+      nodes: [],
+    },
+    rootNode: {
+      childCount: 0,
+      id: '1',
+      lineages: [],
+      name: 'Test resource',
+      status: {
+        code: 'live',
+        name: 'Live',
+      },
+      type: {
+        code: 'folder',
+        name: 'Folder',
+      },
+      url: 'https://no-where.com',
+      urls: [],
+    },
+  },
+];
+
 const sources: Source[] = [
   mockSource({
     id: '1',
@@ -82,6 +109,7 @@ describe('SourceList', () => {
               onSourceSelect={() => {}}
               error={null}
               handleReload={reload}
+              setSource={() => {}}
             />
           );
         }}
@@ -107,6 +135,7 @@ describe('SourceList', () => {
               onSourceSelect={() => {}}
               error={null}
               handleReload={reload}
+              setSource={() => {}}
             />
           );
         }}
@@ -133,6 +162,7 @@ describe('SourceList', () => {
               onSourceSelect={() => {}}
               error={null}
               handleReload={reload}
+              setSource={() => {}}
             />
           );
         }}
@@ -158,6 +188,7 @@ describe('SourceList', () => {
               onSourceSelect={() => {}}
               error={null}
               handleReload={reload}
+              setSource={() => {}}
             />
           );
         }}
@@ -190,6 +221,7 @@ describe('SourceList', () => {
               onSourceSelect={onSourceSelect}
               error={null}
               handleReload={reload}
+              setSource={() => {}}
             />
           );
         }}
@@ -226,6 +258,7 @@ describe('SourceList', () => {
               onSourceSelect={() => {}}
               error={new Error('Source list error!')}
               handleReload={reload}
+              setSource={() => {}}
             />
           );
         }}
@@ -237,4 +270,117 @@ describe('SourceList', () => {
       expect(errorMessage).toBeInTheDocument();
     });
   });
+
+  it('Renders recent locations section when local storage has data present', async () => {
+    const reload = jest.fn();
+    const setSource = jest.fn();
+
+    localStorage.setItem('rb_recent_locations', JSON.stringify(mockLocalStorageData));
+
+    render(
+      <SourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <SourceList
+              sources={sources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onSourceSelect={() => {}}
+              error={null}
+              handleReload={reload}
+              setSource={setSource}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Recent locations')).toBeInTheDocument();
+      expect(screen.getByText('Test resource')).toBeInTheDocument();
+    });
+  });
+
+  it('Handles setSource on click of recent locations item', async () => {
+    const reload = jest.fn();
+    const setSource = jest.fn();
+
+    localStorage.setItem('rb_recent_locations', JSON.stringify(mockLocalStorageData));
+
+    render(
+      <SourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <SourceList
+              sources={sources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onSourceSelect={() => {}}
+              error={null}
+              handleReload={reload}
+              setSource={setSource}
+            />
+          );
+        }}
+      />,
+    );
+
+    const user = userEvent.setup();
+    const itemButton = screen.getByRole('button', { name: 'Drill down to Test resource children' });
+    user.click(itemButton);
+
+    await waitFor(() => {
+      // Provides the item that was clicked and an id reference to the button that was clicked
+      expect(setSource).toHaveBeenCalledWith(
+        {
+          source: mockLocalStorageData[0].source,
+          resource: mockLocalStorageData[0].rootNode,
+        },
+        mockLocalStorageData[0].path,
+      );
+    });
+  });
+
+  it('Uses source name if resource name is not available', async () => {
+    const reload = jest.fn();
+    const setSource = jest.fn();
+
+    localStorage.setItem(
+      'rb_recent_locations',
+      JSON.stringify([
+        {
+          path: [],
+          source: {
+            id: '1',
+            name: 'Test source',
+            nodes: [],
+          },
+          rootNode: null,
+        },
+      ]),
+    );
+
+    render(
+      <SourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <SourceList
+              sources={sources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onSourceSelect={() => {}}
+              error={null}
+              handleReload={reload}
+              setSource={setSource}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Recent locations')).toBeInTheDocument();
+      expect(screen.getByText('Test source')).toBeInTheDocument();
+    });
+  });
 });

package/src/SourceList/SourceList.tsx

@@ -4,8 +4,10 @@ import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { SkeletonList, ResourceItem, ResourceState } from '@squiz/generic-browser-lib';
 import clsx from 'clsx';
 
-import { Source, ScopedSource } from '../types';
+import { Source, ScopedSource, Resource } from '../types';
 import { useCategorisedSources } from '../Hooks/useCategorisedSources';
+import { useRecentLocations } from '../Hooks/useRecentLocations';
+import { HistoryIcon } from '../Icons/HistoryIcon';
 
 export interface SourceListProps {
   sources: Source[];
@@ -13,6 +15,7 @@ export interface SourceListProps {
   isLoading: boolean;
   onSourceSelect: (node: ScopedSource, overlayProps: DOMAttributes<FocusableElement>) => void;
   handleReload: () => void;
+  setSource: (source: ScopedSource | null, path?: Resource[]) => void;
   error: Error | null;
 }
 
@@ -22,10 +25,12 @@ const SourceList = function ({
   isLoading,
   onSourceSelect,
   handleReload,
+  setSource,
   error,
 }: SourceListProps) {
   const categorisedSources = useCategorisedSources(sources);
   const listRef = useRef<HTMLUListElement>(null);
+  const { recentLocations } = useRecentLocations();
 
   useEffect(() => {
     if (listRef.current) {
@@ -53,10 +58,54 @@ const SourceList = function ({
     >
       {error && <ResourceState state="error" message={error.message} handleReload={handleReload} />}
 
+      {!error && recentLocations.length > 0 && (
+        <li className={`flex flex-col text-sm font-semibold text-grey-800`}>
+          <div className="relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0">
+            <span className="z-10 bg-gray-100 px-2.5 flex gap-1 items-center">
+              <HistoryIcon />
+              Recent locations
+            </span>
+          </div>
+          <ul aria-label={`recent location nodes`} className="flex flex-col">
+            {recentLocations.map((item, index) => {
+              const lastResource = item.path[item.path.length - 1];
+              return (
+                <ResourceItem
+                  key={`${index}-${item.source?.id}-${item.rootNode?.id}`}
+                  item={{ source: item.source, resource: item.rootNode }}
+                  label={lastResource?.name || item.rootNode?.name || item?.source.name}
+                  type={lastResource?.type?.code || item.rootNode?.type?.code || 'folder'}
+                  previewModalState={previewModalState}
+                  onSelect={() => {
+                    setSource(
+                      {
+                        source: item.source as Source,
+                        resource: item.rootNode,
+                      },
+                      item.path,
+                    );
+                  }}
+                  className={clsx(
+                    index === 0 && 'rounded-t-lg mt-3',
+                    index === recentLocations.length - 1 && 'rounded-b-lg',
+                  )}
+                  showChevron
+                />
+              );
+            })}
+          </ul>
+        </li>
+      )}
+
       {!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' : ''}`}>
+            <li
+              key={key}
+              className={`flex flex-col text-sm font-semibold text-grey-800 ${
+                index > 0 || recentLocations.length > 0 ? 'mt-3' : ''
+              }`}
+            >
               <div className="relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0">
                 <span className="z-10 bg-gray-100 px-2.5">{label}</span>
               </div>