Confirm empty stash paths (#1983)

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

@@ -13,7 +13,7 @@ import { mutateSetup, useSystemStatus } from "src/core/StashService";
 import { Link } from "react-router-dom";
 import { ConfigurationContext } from "src/hooks/Config";
 import StashConfiguration from "../Settings/StashConfiguration";
-import { Icon, LoadingIndicator } from "../Shared";
+import { Icon, LoadingIndicator, Modal } from "../Shared";
 import { FolderSelectDialog } from "../Shared/FolderSelect/FolderSelectDialog";
 
 export const Setup: React.FC = () => {
@@ -24,6 +24,7 @@ export const Setup: React.FC = () => {
   const [step, setStep] = useState(0);
   const [configLocation, setConfigLocation] = useState("");
   const [stashes, setStashes] = useState<GQL.StashConfig[]>([]);
+  const [showStashAlert, setShowStashAlert] = useState(false);
   const [generatedLocation, setGeneratedLocation] = useState("");
   const [databaseFile, setDatabaseFile] = useState("");
   const [loading, setLoading] = useState(false);
@@ -90,6 +91,41 @@ export const Setup: React.FC = () => {
     setStep(step + 1);
   }
 
+  function confirmPaths() {
+    if (stashes.length > 0) {
+      next();
+      return;
+    }
+
+    setShowStashAlert(true);
+  }
+
+  function maybeRenderStashAlert() {
+    if (!showStashAlert) {
+      return;
+    }
+
+    return (
+      <Modal
+        show
+        icon="exclamation-triangle"
+        accept={{
+          text: intl.formatMessage({ id: "actions.confirm" }),
+          variant: "danger",
+          onClick: () => {
+            setShowStashAlert(false);
+            next();
+          },
+        }}
+        cancel={{ onClick: () => setShowStashAlert(false) }}
+      >
+        <p>
+          <FormattedMessage id="setup.paths.stash_alert" />
+        </p>
+      </Modal>
+    );
+  }
+
   function renderWelcomeSpecificConfig() {
     return (
       <>
@@ -245,6 +281,7 @@ export const Setup: React.FC = () => {
   function renderSetPaths() {
     return (
       <>
+        {maybeRenderStashAlert()}
         <section>
           <h2 className="mb-3">
             <FormattedMessage id="setup.paths.set_up_your_paths" />
@@ -298,7 +335,7 @@ export const Setup: React.FC = () => {
             <Button variant="secondary mx-2 p-5" onClick={() => goBack()}>
               <FormattedMessage id="actions.previous_action" />
             </Button>
-            <Button variant="primary mx-2 p-5" onClick={() => next()}>
+            <Button variant="primary mx-2 p-5" onClick={() => confirmPaths()}>
               <FormattedMessage id="actions.next_action" />
             </Button>
           </div>

ui/v2.5/src/locales/en-GB.json

@@ -788,7 +788,8 @@
       "database_filename_empty_for_default": "database filename (empty for default)",
       "where_can_stash_store_its_generated_content": "Where can Stash store its generated content?",
       "where_can_stash_store_its_generated_content_description": "In order to provide thumbnails, previews and sprites, Stash generates images and videos. This also includes transcodes for unsupported file formats. By default, Stash will create a <code>generated</code> directory within the directory containing your config file. If you want to change where this generated media will be stored, please enter an absolute or relative (to the current working directory) path. Stash will create this directory if it does not already exist.",
-      "path_to_generated_directory_empty_for_default": "path to generated directory (empty for default)"
+      "path_to_generated_directory_empty_for_default": "path to generated directory (empty for default)",
+      "stash_alert": "No library paths have been selected. No media will be able to be scanned into Stash. Are you sure?"
     },
     "confirm": {
       "almost_ready": "We're almost ready to complete the configuration. Please confirm the following settings. You can click back to change anything incorrect. If everything looks good, click Confirm to create your system.",