Add a notice about the "upload" dialog

Users keep getting confused about the webkit directory selection dialog that has unfortunate wording about "uploading" that I can't change. Hopefully this new dialog that displays before the dialog I can't control will help users understand that nothing is getting uploaded anywhere.

The message can be ignored in the future with a checkbox that sets a cookie.

components/DataDirPicker.tsx

@@ -1,9 +1,11 @@
 import React, { useContext, useRef, useState, useEffect } from "react";
+import Cookies from "js-cookie";
 
 import { WorkerPoolContext } from "../lib/WorkerPool";
 import { useAppSelector } from "../lib/hooks";
 import { isPlugin, parsePluginFiles } from "../lib/plugins";
 import styles from "../styles/DataDirPicker.module.css";
+import { createPortal } from "react-dom";
 
 type Props = {};
 
@@ -13,6 +15,9 @@ const DataDirPicker: React.FC<Props> = () => {
   const plugins = useAppSelector((state) => state.plugins.plugins);
   const pluginsPending = useAppSelector((state) => state.plugins.pending);
   const [loading, setLoading] = useState<boolean>(false);
+  const [uploadNoticeShown, setUploadNoticeShown] = useState(false);
+  const [ignoreUploadNoticeChecked, setIgnoreUploadNoticeChecked] =
+    useState(false);
 
   useEffect(() => {
     if (pluginsPending === 0 && loading) {
@@ -68,6 +73,53 @@ const DataDirPicker: React.FC<Props> = () => {
         </strong>
         .
       </p>
+      {typeof window !== "undefined" &&
+        createPortal(
+          <dialog open={uploadNoticeShown} className={styles.dialog}>
+            <p>
+              <strong>NOTE:</strong> the following dialog will ask you to upload
+              all the files in your Data folder.&nbsp;
+              <strong>NOTHING WILL BE UPLOADED ANYWHERE</strong>. The plugin
+              files will only be transferred to your browser and processed on
+              your device.
+            </p>
+            <p>
+              Drag and drop the Data folder onto the web page to avoid the
+              upload dialog entirely.
+            </p>
+            <label>
+              <input
+                type="checkbox"
+                id="ignore-upload-notice"
+                checked={ignoreUploadNoticeChecked}
+                onChange={(event) => {
+                  if (event.target.checked) {
+                    setIgnoreUploadNoticeChecked(true);
+                  } else {
+                    setIgnoreUploadNoticeChecked(false);
+                  }
+                }}
+              />{" "}
+              Don&apos;t show this message again
+            </label>
+            <menu>
+              <button
+                onClick={() => {
+                  setUploadNoticeShown(false);
+                  if (ignoreUploadNoticeChecked) {
+                    Cookies.set("ignoreDataDirPickerUploadNotice", "true");
+                  }
+                  if (inputRef.current) {
+                    inputRef.current.click();
+                  }
+                }}
+              >
+                Ok
+              </button>
+            </menu>
+          </dialog>,
+          document.body
+        )}
       <input
         type="file"
         webkitdirectory=""
@@ -80,7 +132,11 @@ const DataDirPicker: React.FC<Props> = () => {
         onClick={() => {
           if (inputRef.current) {
             inputRef.current.value = ""; // clear the value so reloading same directory works
-            inputRef.current.click();
+            if (Cookies.get("ignoreDataDirPickerUploadNotice") !== "true") {
+              setUploadNoticeShown(true);
+            } else {
+              inputRef.current.click();
+            }
           }
         }}
         disabled={!workerPool || loading}

package-lock.json

@@ -12,6 +12,7 @@
         "date-fns": "^2.28.0",
         "downshift": "^6.1.7",
         "javascript-color-gradient": "^1.3.2",
+        "js-cookie": "^3.0.1",
         "mapbox-gl": "^2.6.1",
         "minisearch": "^3.2.0",
         "next": "12.1.1-canary.15",
@@ -22,6 +23,7 @@
         "swr": "^1.1.2"
       },
       "devDependencies": {
+        "@types/js-cookie": "^3.0.2",
         "@types/node": "17.0.8",
         "@types/react": "17.0.38",
         "@types/react-dom": "^17.0.11",
@@ -467,6 +469,12 @@
       "resolved": "https://registry.npmjs.org/@types/javascript-color-gradient/-/javascript-color-gradient-1.3.0.tgz",
       "integrity": "sha512-wIzCbAXQPgWvAvwnJIRAy+RwMkAMp9Cv/BiQg4GQq7Vrnu9J9U3l7LbcP+UgwkkNOAXPq59jfQcPRGgPBgIAWA=="
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.2.tgz",
+      "integrity": "sha512-6+0ekgfusHftJNYpihfkMu8BWdeHs9EOJuGcSofErjstGPfPGEu9yTu4t460lTzzAMl2cM5zngQJqPMHbbnvYA==",
+      "dev": true
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -2237,6 +2245,14 @@
       "resolved": "https://registry.npmjs.org/javascript-color-gradient/-/javascript-color-gradient-1.3.2.tgz",
       "integrity": "sha512-P/VjoTPdfRmMOkfR65m1BQTlX/hYphZIj5u1Ntvpxf+9011uXjazbEOQ63g3EhlgzHYa2uwVU3RVgy3gJuLdlQ=="
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3786,6 +3802,12 @@
       "resolved": "https://registry.npmjs.org/@types/javascript-color-gradient/-/javascript-color-gradient-1.3.0.tgz",
       "integrity": "sha512-wIzCbAXQPgWvAvwnJIRAy+RwMkAMp9Cv/BiQg4GQq7Vrnu9J9U3l7LbcP+UgwkkNOAXPq59jfQcPRGgPBgIAWA=="
     },
+    "@types/js-cookie": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.2.tgz",
+      "integrity": "sha512-6+0ekgfusHftJNYpihfkMu8BWdeHs9EOJuGcSofErjstGPfPGEu9yTu4t460lTzzAMl2cM5zngQJqPMHbbnvYA==",
+      "dev": true
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -5087,6 +5109,11 @@
       "resolved": "https://registry.npmjs.org/javascript-color-gradient/-/javascript-color-gradient-1.3.2.tgz",
       "integrity": "sha512-P/VjoTPdfRmMOkfR65m1BQTlX/hYphZIj5u1Ntvpxf+9011uXjazbEOQ63g3EhlgzHYa2uwVU3RVgy3gJuLdlQ=="
     },
+    "js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "date-fns": "^2.28.0",
     "downshift": "^6.1.7",
     "javascript-color-gradient": "^1.3.2",
+    "js-cookie": "^3.0.1",
     "mapbox-gl": "^2.6.1",
     "minisearch": "^3.2.0",
     "next": "12.1.1-canary.15",
@@ -25,6 +26,7 @@
     "swr": "^1.1.2"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.2",
     "@types/node": "17.0.8",
     "@types/react": "17.0.38",
     "@types/react-dom": "^17.0.11",

styles/DataDirPicker.module.css

@@ -9,3 +9,27 @@
 .break-word {
   word-break: break-word;
 }
+
+.dialog {
+  top: 12px;
+  z-index: 8;
+  background-color: #fbefd5;
+  box-shadow: 0 0 1em black;
+  max-width: 400px;
+}
+
+.dialog label {
+  user-select: none;
+  cursor: pointer;
+}
+
+.dialog menu {
+  padding: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.dialog menu button {
+  font-size: 14px;
+  padding: 4px 8px;
+}