@squiz/resource-browser 1.69.2 → 2.1.9-rc.0

package/src/SourceDropdown/SourceDropdown.tsx

@@ -1,271 +1,93 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { useFocusWithin, useKeyboard } from '@react-aria/interactions';
-import { Icon, IconOptions, Spinner } from '@squiz/generic-browser-lib';
+import React, { useRef, useState } from 'react';
 
-import type { Source, ScopedSource, Resource } from '../types';
-
-import uuid from '../utils/uuid';
-import { useCategorisedSources } from '../Hooks/useCategorisedSources';
-import { HistoryIcon } from '../Icons/HistoryIcon';
-import { RecentResourcesPaths } from '../Hooks/useRecentResourcesPaths';
+import { ResourceBrowserSource } from '../types';
+import { Icon, IconOptions, uuid } from '@squiz/generic-browser-lib';
+import { useFocusWithin, useKeyboard } from 'react-aria';
 
 export default function SourceDropdown({
-  sources,
-  selectedSource,
-  isLoading,
-  onRootSelect,
-  onSourceSelect,
-  setSource,
-  currentResource,
-  recentSources,
+    sources,
+    selectedSource,
+    onSourceSelect,
 }: {
-  sources: Source[];
-  selectedSource: ScopedSource | null;
-  isLoading: boolean;
-  onRootSelect: () => void;
-  onSourceSelect: (source: ScopedSource) => void;
-  setSource: (source: ScopedSource | null, path?: Resource[]) => void;
-  currentResource: Resource | null;
-  recentSources: RecentResourcesPaths[];
+    sources: ResourceBrowserSource[];
+    selectedSource: ResourceBrowserSource;
+    onSourceSelect(source: ResourceBrowserSource): void;
 }) {
-  const categorisedSources = useCategorisedSources(sources);
-  const filteredRecentSources = recentSources.filter((item) => item.path?.length);
-  const [recentLocationSelection, setRecentLocationSelection] = useState<RecentResourcesPaths | null>();
-
-  const [uniqueId] = useState(uuid());
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-
-  // Watch the focus and blur on the menu and close if focus leaves the control
-  const { focusWithinProps } = useFocusWithin({
-    onBlurWithin: () => {
-      setIsOpen(false);
-    },
-  });
+    const [uniqueId] = useState(uuid());
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const [isOpen, setIsOpen] = useState(false);
+
+    // Watch the focus and blur on the menu and close if focus leaves the control
+    const { focusWithinProps } = useFocusWithin({
+        onBlurWithin: () => {
+            setIsOpen(false);
+        },
+    });
+
+    // Listen for Esc key within this element
+    const { keyboardProps } = useKeyboard({
+        onKeyDown: (e) => {
+            if (isOpen && e.key === 'Escape') {
+                setIsOpen(false);
+                buttonRef.current?.focus(); // Restore focus to the element which opened the menu
+            }
+        },
+    });
 
-  // Listen for Esc key within this element
-  const { keyboardProps } = useKeyboard({
-    onKeyDown: (e) => {
-      if (isOpen && e.key === 'Escape') {
+    const handleSourceClick = (source: ResourceBrowserSource) => {
         setIsOpen(false);
-        buttonRef.current?.focus(); // Restore focus to the element which opened the menu
-      }
-    },
-  });
+        buttonRef.current?.focus();
+        onSourceSelect(source);
+    };
 
-  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: RecentResourcesPaths) => {
-    setIsOpen(false);
-    setRecentLocationSelection(location);
-    buttonRef.current?.focus();
-
-    if (location.path) {
-      const [rootNode, ...path] = location.path;
-      setSource(
-        {
-          source: location.source as Source,
-          resource: rootNode,
-        },
-        path,
-      );
+    if (!sources.length) {
+        return <></>;
     }
-  };
 
-  useEffect(() => {
-    if (recentLocationSelection?.path) {
-      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 && currentResource.id !== lastResource?.id) {
-        setRecentLocationSelection(null);
-      }
-    }
-  }, [recentLocationSelection, currentResource]);
-
-  return (
-    <div {...focusWithinProps} {...keyboardProps} className="relative w-72 border-2 rounded border-gray-300">
-      <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 && (
-          <>
-            <span className="sr-only">current source </span>
-            <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
-              className="mr-2.5 h-[20px] w-[20px]"
-            />
-            <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>
-          </>
-        )}
-
-        {!selectedSource && (
-          <>
-            <span className="sr-only">view </span>
-            <Icon icon={'root' as IconOptions} aria-hidden className="mr-2.5 h-[20px] w-[20px]" />
-            All available sources
-          </>
-        )}
-
-        <Icon icon={'arrow-down' as IconOptions} aria-hidden className="absolute right-3" />
-      </button>
-      <ul
-        id={`${uniqueId}-button-menu`}
-        aria-hidden={!isOpen}
-        className={`absolute z-50 top-[calc(100%+5px)] -left-0.5 w-[calc(100%+4px)] bg-gray-100 border-2 rounded border-gray-300 p-2 overflow-y-scroll max-h-80 ${
-          !isOpen ? 'hidden' : ''
-        }`}
-      >
-        <li
-          key="return-root"
-          className="flex items-center text-sm font-semibold mb-2 bg-white border-1 rounded border-grey-200"
-        >
-          <button
-            type="button"
-            onClick={handleRootSelect}
-            className={`relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100`}
-          >
-            <Icon icon={'root' as IconOptions} aria-hidden className="mr-2.5" />
-            All available sources
-          </button>
-        </li>
-        {isLoading && (
-          <li className="mt-2">
-            <Spinner size="sm" label="Loading sources" className="m-3" />
-          </li>
-        )}
-
-        {!isLoading && filteredRecentSources.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">
-              {filteredRecentSources.map((item, index) => {
-                const lastResource = item.path && item.path[item.path.length - 1];
-                const isSelectedSource =
-                  item.source?.id === selectedSource?.source.id &&
-                  lastResource?.id === recentLocationSelection?.path?.[recentLocationSelection.path?.length - 1]?.id;
-
-                return (
-                  <li
-                    key={`${index}-${item.source?.id}-${lastResource?.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 || 'folder') as IconOptions}
-                        resourceSource="matrix"
-                        aria-label={lastResource?.name || item.source?.name}
-                        className="shrink-0 mr-2.5"
-                      />
-                      <span className="text-left mr-7">{lastResource?.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 || filteredRecentSources.length > 0 ? 'mt-3' : ''
+    return (
+        <div {...focusWithinProps} {...keyboardProps} className="relative w-72 border-2 rounded border-gray-300">
+            <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"
+            >
+                <span className="sr-only">current source </span>
+                <Icon icon={selectedSource.type as IconOptions} aria-hidden className="mr-2.5 h-[20px] w-[20px]" />
+                <div className="truncate max-w-[200px]">{selectedSource.name}</div>
+                <Icon icon={'arrow-down' as IconOptions} aria-hidden className="absolute right-3" />
+            </button>
+            <ul
+                id={`${uniqueId}-button-menu`}
+                aria-hidden={!isOpen}
+                className={`absolute z-50 top-[calc(100%+5px)] -left-0.5 w-[calc(100%+4px)] bg-gray-100 border-1 shadow-md rounded border-gray-300 p-2 pb-0 overflow-y-scroll max-h-80 ${
+                    !isOpen ? 'hidden' : ''
                 }`}
-              >
-                <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>
-                {sources?.length > 0 && (
-                  <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 &&
-                        !recentLocationSelection;
-
-                      return (
-                        <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"
-                        >
-                          <button
-                            type="button"
-                            onClick={() => handleSourceClick({ source, resource })}
-                            className={`relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100`}
-                          >
-                            <Icon
-                              icon={resource?.type.code as IconOptions}
-                              resourceSource="matrix"
-                              aria-label={resource?.type.name}
-                              className="shrink-0 mr-2.5"
-                            />
-                            <span className="text-left mr-7">{resource?.name || source.name}</span>
-                            {isSelectedSource && (
-                              <Icon
-                                icon={'selected' as IconOptions}
-                                aria-label="selected"
-                                className="absolute right-4"
-                              />
-                            )}
-                          </button>
+            >
+                {sources.map((source) => {
+                    const { id, name, type } = source;
+                    const isSelectedSource = id === selectedSource.id;
+
+                    return (
+                        <li key={id} className="flex items-center text-sm font-semibold mb-2 bg-white rounded">
+                            <button
+                                type="button"
+                                onClick={() => handleSourceClick(source)}
+                                className={`relative grow flex items-center p-2 border-1 border-white rounded hover:bg-gray-50 hover:border-gray-300 focus:bg-gray-100`}
+                            >
+                                <Icon icon={type as IconOptions} aria-label={type} className="shrink-0 mr-2.5" />
+                                <span className="text-left mr-7">{name}</span>
+                                {isSelectedSource && (
+                                    <Icon icon={'selected' as IconOptions} aria-label="selected" className="absolute right-4" />
+                                )}
+                            </button>
                         </li>
-                      );
-                    })}
-                  </ul>
-                )}
-              </li>
-            );
-          })}
-      </ul>
-    </div>
-  );
+                    );
+                })}
+            </ul>
+        </div>
+    );
 }