Setup tweaks (#4304)

ui/v2.5/src/components/Setup/Setup.tsx

@@ -34,7 +34,7 @@ export const Setup: React.FC = () => {
   const [saveUI] = useConfigureUI();
 
   const [step, setStep] = useState(0);
-  const [configLocation, setConfigLocation] = useState("");
+  const [setupInWorkDir, setSetupInWorkDir] = useState(false);
   const [stashes, setStashes] = useState<GQL.StashConfig[]>([]);
   const [showStashAlert, setShowStashAlert] = useState(false);
   const [databaseFile, setDatabaseFile] = useState("");
@@ -65,6 +65,13 @@ export const Setup: React.FC = () => {
     return paths.join(pathSep);
   }
 
+  // simply returns everything preceding the last path separator
+  function pathDir(path: string) {
+    const lastSep = path.lastIndexOf(pathSep);
+    if (lastSep === -1) return "";
+    return path.slice(0, lastSep);
+  }
+
   const workingDir = status?.workingDir ?? ".";
 
   // When running Stash.app, the working directory is (usually) set to /.
@@ -75,15 +82,15 @@ export const Setup: React.FC = () => {
   const fallbackStashDir = pathJoin(homeDir, ".stash");
   const fallbackConfigPath = pathJoin(fallbackStashDir, "config.yml");
 
-  useEffect(() => {
+  const overrideConfig = status?.configPath;
-    if (status?.configPath) {
+  const overrideGenerated = configuration?.general.generatedPath;
-      setConfigLocation(status.configPath);
+  const overrideCache = configuration?.general.cachePath;
-    }
+  const overrideBlobs = configuration?.general.blobsPath;
-  }, [status?.configPath]);
+  const overrideDatabase = configuration?.general.databasePath;
 
   useEffect(() => {
     if (configuration) {
-      const { stashes: configStashes, generatedPath } = configuration.general;
+      const configStashes = configuration.general.stashes;
       if (configStashes.length > 0) {
         setStashes(
           configStashes.map((s) => {
@@ -92,9 +99,6 @@ export const Setup: React.FC = () => {
           })
         );
       }
-      if (generatedPath) {
-        setGeneratedLocation(generatedPath);
-      }
     }
   }, [configuration]);
 
@@ -113,8 +117,8 @@ export const Setup: React.FC = () => {
     </a>
   );
 
-  function onConfigLocationChosen(loc: string) {
+  function onConfigLocationChosen(inWorkDir: boolean) {
-    setConfigLocation(loc);
+    setSetupInWorkDir(inWorkDir);
     next();
   }
 
@@ -179,7 +183,7 @@ export const Setup: React.FC = () => {
             <FormattedMessage
               id="setup.welcome_specific_config.config_path"
               values={{
-                path: configLocation,
+                path: overrideConfig,
                 code: (chunks: string) => <code>{chunks}</code>,
               }}
             />
@@ -242,7 +246,7 @@ export const Setup: React.FC = () => {
           <div className="d-flex justify-content-center">
             <Button
               variant="secondary mx-2 p-5"
-              onClick={() => onConfigLocationChosen("")}
+              onClick={() => onConfigLocationChosen(false)}
             >
               <FormattedMessage
                 id="setup.welcome.in_current_stash_directory"
@@ -256,7 +260,7 @@ export const Setup: React.FC = () => {
             </Button>
             <Button
               variant="secondary mx-2 p-5"
-              onClick={() => onConfigLocationChosen("config.yml")}
+              onClick={() => onConfigLocationChosen(true)}
               disabled={macApp}
             >
               {macApp ? (
@@ -331,8 +335,44 @@ export const Setup: React.FC = () => {
     return <FolderSelectDialog onClose={onBlobsClosed} />;
   }
 
+  function maybeRenderDatabase() {
+    if (overrideDatabase) return;
+
+    return (
+      <Form.Group id="database">
+        <h3>
+          <FormattedMessage id="setup.paths.where_can_stash_store_its_database" />
+        </h3>
+        <p>
+          <FormattedMessage
+            id="setup.paths.where_can_stash_store_its_database_description"
+            values={{
+              code: (chunks: string) => <code>{chunks}</code>,
+            }}
+          />
+          <br />
+          <FormattedMessage
+            id="setup.paths.where_can_stash_store_its_database_warning"
+            values={{
+              strong: (chunks: string) => <strong>{chunks}</strong>,
+            }}
+          />
+        </p>
+        <Form.Control
+          className="text-input"
+          defaultValue={databaseFile}
+          placeholder={intl.formatMessage({
+            id: "setup.paths.database_filename_empty_for_default",
+          })}
+          onChange={(e) => setDatabaseFile(e.currentTarget.value)}
+        />
+      </Form.Group>
+    );
+  }
+
   function maybeRenderGenerated() {
-    if (!configuration?.general.generatedPath) {
+    if (overrideGenerated) return;
+
     return (
       <Form.Group id="generated">
         <h3>
@@ -353,9 +393,7 @@ export const Setup: React.FC = () => {
             placeholder={intl.formatMessage({
               id: "setup.paths.path_to_generated_directory_empty_for_default",
             })}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            onChange={(e) => setGeneratedLocation(e.currentTarget.value)}
-                setGeneratedLocation(e.currentTarget.value)
-              }
           />
           <InputGroup.Append>
             <Button
@@ -370,7 +408,6 @@ export const Setup: React.FC = () => {
       </Form.Group>
     );
   }
-  }
 
   function onCacheSelectClosed(d?: string) {
     if (d) {
@@ -389,7 +426,8 @@ export const Setup: React.FC = () => {
   }
 
   function maybeRenderCache() {
-    if (!configuration?.general.cachePath) {
+    if (overrideCache) return;
+
     return (
       <Form.Group id="cache">
         <h3>
@@ -410,9 +448,7 @@ export const Setup: React.FC = () => {
             placeholder={intl.formatMessage({
               id: "setup.paths.path_to_cache_directory_empty_for_default",
             })}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            onChange={(e) => setCacheLocation(e.currentTarget.value)}
-                setCacheLocation(e.currentTarget.value)
-              }
           />
           <InputGroup.Append>
             <Button
@@ -427,10 +463,10 @@ export const Setup: React.FC = () => {
       </Form.Group>
     );
   }
-  }
 
   function maybeRenderBlobs() {
-    if (!configuration?.general.blobsPath) {
+    if (overrideBlobs) return;
+
     return (
       <Form.Group id="blobs">
         <h3>
@@ -473,9 +509,7 @@ export const Setup: React.FC = () => {
               placeholder={intl.formatMessage({
                 id: "setup.paths.path_to_blobs_directory_empty_for_default",
               })}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onChange={(e) => setBlobsLocation(e.currentTarget.value)}
-                  setBlobsLocation(e.currentTarget.value)
-                }
               disabled={storeBlobsInDatabase}
             />
             <InputGroup.Append>
@@ -493,7 +527,6 @@ export const Setup: React.FC = () => {
       </Form.Group>
     );
   }
-  }
 
   function renderSetPaths() {
     return (
@@ -522,36 +555,7 @@ export const Setup: React.FC = () => {
               />
             </Card>
           </Form.Group>
-          <Form.Group id="database">
+          {maybeRenderDatabase()}
-            <h3>
-              <FormattedMessage id="setup.paths.where_can_stash_store_its_database" />
-            </h3>
-            <p>
-              <FormattedMessage
-                id="setup.paths.where_can_stash_store_its_database_description"
-                values={{
-                  code: (chunks: string) => <code>{chunks}</code>,
-                }}
-              />
-              <br />
-              <FormattedMessage
-                id="setup.paths.where_can_stash_store_its_database_warning"
-                values={{
-                  strong: (chunks: string) => <strong>{chunks}</strong>,
-                }}
-              />
-            </p>
-            <Form.Control
-              className="text-input"
-              defaultValue={databaseFile}
-              placeholder={intl.formatMessage({
-                id: "setup.paths.database_filename_empty_for_default",
-              })}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setDatabaseFile(e.currentTarget.value)
-              }
-            />
-          </Form.Group>
           {maybeRenderGenerated()}
           {maybeRenderCache()}
           {maybeRenderBlobs()}
@@ -587,6 +591,11 @@ export const Setup: React.FC = () => {
   }
 
   async function onSave() {
+    let configLocation = overrideConfig;
+    if (!configLocation) {
+      configLocation = setupInWorkDir ? "config.yml" : "";
+    }
+
     try {
       setLoading(true);
       await mutateSetup({
@@ -616,40 +625,22 @@ export const Setup: React.FC = () => {
   }
 
   function renderConfirm() {
-    let cfgPath = "";
+    let cfgDir: string;
-    let config = configLocation;
+    let config: string;
-    if (configLocation === "config.yml") {
+    if (overrideConfig) {
-      cfgPath = pwd;
+      cfgDir = pathDir(overrideConfig);
-      config = pathJoin(cfgPath, "config.yml");
+      config = overrideConfig;
-    } else if (configLocation === "") {
-      cfgPath = fallbackStashDir;
-      config = pathJoin(cfgPath, "config.yml");
-    }
-
-    let database = databaseFile;
-    if (database === "") {
-      database = pathJoin(cfgPath, "stash-go.sqlite");
-    }
-
-    let generated = generatedLocation;
-    if (generated === "") {
-      generated = pathJoin(cfgPath, "generated");
-    }
-
-    let cache = cacheLocation;
-    if (cache === "") {
-      cache = pathJoin(cfgPath, "cache");
-    }
-
-    let blobs;
-    if (storeBlobsInDatabase) {
-      blobs = intl.formatMessage({
-        id: "setup.confirm.blobs_use_database",
-      });
-    } else if (blobsLocation !== "") {
-      blobs = blobsLocation;
     } else {
-      blobs = pathJoin(cfgPath, "blobs");
+      cfgDir = setupInWorkDir ? pwd : fallbackStashDir;
+      config = pathJoin(cfgDir, "config.yml");
+    }
+
+    function joinCfgDir(path: string) {
+      if (cfgDir) {
+        return pathJoin(cfgDir, path);
+      } else {
+        return path;
+      }
     }
 
     return (
@@ -684,38 +675,52 @@ export const Setup: React.FC = () => {
               </ul>
             </dd>
           </dl>
+          {!overrideDatabase && (
             <dl>
               <dt>
                 <FormattedMessage id="setup.confirm.database_file_path" />
               </dt>
               <dd>
-              <code>{database}</code>
+                <code>{databaseFile || joinCfgDir("stash-go.sqlite")}</code>
               </dd>
             </dl>
+          )}
+          {!overrideGenerated && (
             <dl>
               <dt>
                 <FormattedMessage id="setup.confirm.generated_directory" />
               </dt>
               <dd>
-              <code>{generated}</code>
+                <code>{generatedLocation || joinCfgDir("generated")}</code>
               </dd>
             </dl>
+          )}
+          {!overrideCache && (
             <dl>
               <dt>
                 <FormattedMessage id="setup.confirm.cache_directory" />
               </dt>
               <dd>
-              <code>{cache}</code>
+                <code>{cacheLocation || joinCfgDir("cache")}</code>
               </dd>
             </dl>
+          )}
+          {!overrideBlobs && (
             <dl>
               <dt>
                 <FormattedMessage id="setup.confirm.blobs_directory" />
               </dt>
               <dd>
-              <code>{blobs}</code>
+                <code>
+                  {storeBlobsInDatabase ? (
+                    <FormattedMessage id="setup.confirm.blobs_use_database" />
+                  ) : (
+                    blobsLocation || joinCfgDir("blobs")
+                  )}
+                </code>
               </dd>
             </dl>
+          )}
         </section>
         <section className="mt-5">
           <div className="d-flex justify-content-center">
@@ -864,8 +869,7 @@ export const Setup: React.FC = () => {
     return <LoadingIndicator />;
   }
 
-  const welcomeStep =
+  const welcomeStep = overrideConfig
-    status && status.configPath !== ""
     ? renderWelcomeSpecificConfig
     : renderWelcome;
   const steps = [welcomeStep, renderSetPaths, renderConfirm, renderFinish];