Add folder browser to path filter field (#3570)

ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Button, InputGroup, Form } from "react-bootstrap";
+import { Button, InputGroup, Form, Collapse } from "react-bootstrap";
 import { Icon } from "../Icon";
 import { LoadingIndicator } from "../LoadingIndicator";
 import { useDirectory } from "src/core/StashService";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { useDebouncedSetState } from "src/hooks/debounce";
 
 interface IProps {
@@ -12,6 +12,7 @@ interface IProps {
   setCurrentDirectory: (value: string) => void;
   defaultDirectories?: string[];
   appendButton?: JSX.Element;
+  collapsible?: boolean;
 }
 
 export const FolderSelect: React.FC<IProps> = ({
@@ -19,7 +20,9 @@ export const FolderSelect: React.FC<IProps> = ({
   setCurrentDirectory,
   defaultDirectories,
   appendButton,
+  collapsible = false,
 }) => {
+  const [showBrowser, setShowBrowser] = React.useState(false);
   const [directory, setDirectory] = useState(currentDirectory);
   const { data, error, loading } = useDirectory(directory);
   const intl = useIntl();
@@ -31,9 +34,10 @@ export const FolderSelect: React.FC<IProps> = ({
   const debouncedSetDirectory = useDebouncedSetState(setDirectory, 250);
 
   useEffect(() => {
-    if (currentDirectory === "" && !defaultDirectories && data?.directory.path)
-      setCurrentDirectory(data.directory.path);
-  }, [currentDirectory, setCurrentDirectory, data, defaultDirectories]);
+    if (currentDirectory !== directory) {
+      debouncedSetDirectory(currentDirectory);
+    }
+  }, [currentDirectory, directory, debouncedSetDirectory]);
 
   function setInstant(value: string) {
     setCurrentDirectory(value);
@@ -66,6 +70,7 @@ export const FolderSelect: React.FC<IProps> = ({
     <>
       <InputGroup>
         <Form.Control
+          className="btn-secondary"
           placeholder={intl.formatMessage({ id: "setup.folder.file_path" })}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             setDebounced(e.currentTarget.value);
@@ -76,6 +81,16 @@ export const FolderSelect: React.FC<IProps> = ({
         {appendButton ? (
           <InputGroup.Append>{appendButton}</InputGroup.Append>
         ) : undefined}
+        {collapsible ? (
+          <InputGroup.Append>
+            <Button
+              variant="secondary"
+              onClick={() => setShowBrowser(!showBrowser)}
+            >
+              <Icon icon={faEllipsis} />
+            </Button>
+          </InputGroup.Append>
+        ) : undefined}
         {!data || !data.directory || loading ? (
           <InputGroup.Append className="align-self-center">
             {loading ? (
@@ -89,18 +104,20 @@ export const FolderSelect: React.FC<IProps> = ({
       {error !== undefined && (
         <h5 className="mt-4 text-break">Error: {error.message}</h5>
       )}
-      <ul className="folder-list">
-        {topDirectory}
-        {selectableDirectories.map((path) => {
-          return (
-            <li key={path} className="folder-list-item">
-              <Button variant="link" onClick={() => setInstant(path)}>
-                {path}
-              </Button>
-            </li>
-          );
-        })}
-      </ul>
+      <Collapse in={!collapsible || showBrowser}>
+        <ul className="folder-list">
+          {topDirectory}
+          {selectableDirectories.map((path) => {
+            return (
+              <li key={path} className="folder-list-item">
+                <Button variant="link" onClick={() => setInstant(path)}>
+                  {path}
+                </Button>
+              </li>
+            );
+          })}
+        </ul>
+      </Collapse>
     </>
   );
 };