Expand tagger manual entry and add link to tagger interface (#947)

ui/v2.5/src/components/Help/Manual.tsx

@@ -19,9 +19,14 @@ import { MarkdownPage } from "../Shared/MarkdownPage";
 interface IManualProps {
   show: boolean;
   onClose: () => void;
+  defaultActiveTab?: string;
 }
 
-export const Manual: React.FC<IManualProps> = ({ show, onClose }) => {
+export const Manual: React.FC<IManualProps> = ({
+  show,
+  onClose,
+  defaultActiveTab,
+}) => {
   const content = [
     {
       key: "Introduction.md",
@@ -98,7 +103,9 @@ export const Manual: React.FC<IManualProps> = ({ show, onClose }) => {
     },
   ];
 
-  const [activeTab, setActiveTab] = useState(content[0].key);
+  const [activeTab, setActiveTab] = useState(
+    defaultActiveTab ?? content[0].key
+  );
 
   // links to other manual pages are specified as "/help/page.md"
   // intercept clicks to these pages and set the tab accordingly

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

@@ -10,6 +10,7 @@ import {
   stashBoxBatchQuery,
   useConfiguration,
 } from "src/core/StashService";
+import { Manual } from "src/components/Help/Manual";
 
 import StashSearchResult from "./StashSearchResult";
 import Config, { ITaggerConfig, initialConfig, ParseMode } from "./Config";
@@ -425,6 +426,7 @@ export const Tagger: React.FC<ITaggerProps> = ({ scenes }) => {
   const stashConfig = useConfiguration();
   const [config, setConfig] = useState<ITaggerConfig>(initialConfig);
   const [showConfig, setShowConfig] = useState(false);
+  const [showManual, setShowManual] = useState(false);
 
   const savedEndpointIndex =
     stashConfig.data?.configuration.general.stashBoxes.findIndex(
@@ -459,45 +461,61 @@ export const Tagger: React.FC<ITaggerProps> = ({ scenes }) => {
   };
 
   return (
-    <div className="tagger-container mx-auto">
-      {selectedEndpointIndex !== -1 && selectedEndpoint ? (
-        <>
-          <div className="row mb-2 no-gutters">
-            <Button onClick={() => setShowConfig(!showConfig)} variant="link">
-              {showConfig ? "Hide" : "Show"} Configuration
-            </Button>
-          </div>
+    <>
+      <Manual
+        show={showManual}
+        onClose={() => setShowManual(false)}
+        defaultActiveTab="Tagger.md"
+      />
+      <div className="tagger-container mx-auto">
+        {selectedEndpointIndex !== -1 && selectedEndpoint ? (
+          <>
+            <div className="row mb-2 no-gutters">
+              <Button onClick={() => setShowConfig(!showConfig)} variant="link">
+                {showConfig ? "Hide" : "Show"} Configuration
+              </Button>
+              <Button
+                className="ml-auto"
+                onClick={() => setShowManual(true)}
+                title="Help"
+                variant="link"
+              >
+                Help
+              </Button>
+            </div>
 
-          <Config config={config} setConfig={setConfig} show={showConfig} />
-          <TaggerList
-            scenes={scenes}
-            config={config}
-            selectedEndpoint={{
-              endpoint: selectedEndpoint.endpoint,
-              index: selectedEndpointIndex,
-            }}
-            queueFingerprintSubmission={queueFingerprintSubmission}
-            clearSubmissionQueue={clearSubmissionQueue}
-          />
-        </>
-      ) : (
-        <div className="my-4">
-          <h3 className="text-center mt-4">
-            To use the scene tagger a stash-box instance needs to be configured.
-          </h3>
-          <h5 className="text-center">
-            Please see{" "}
-            <HashLink
-              to="/settings?tab=configuration#stashbox"
-              scroll={(el) =>
-                el.scrollIntoView({ behavior: "smooth", block: "center" })
-              }
-            >
-              Settings.
-            </HashLink>
-          </h5>
-        </div>
-      )}
-    </div>
+            <Config config={config} setConfig={setConfig} show={showConfig} />
+            <TaggerList
+              scenes={scenes}
+              config={config}
+              selectedEndpoint={{
+                endpoint: selectedEndpoint.endpoint,
+                index: selectedEndpointIndex,
+              }}
+              queueFingerprintSubmission={queueFingerprintSubmission}
+              clearSubmissionQueue={clearSubmissionQueue}
+            />
+          </>
+        ) : (
+          <div className="my-4">
+            <h3 className="text-center mt-4">
+              To use the scene tagger a stash-box instance needs to be
+              configured.
+            </h3>
+            <h5 className="text-center">
+              Please see{" "}
+              <HashLink
+                to="/settings?tab=configuration#stashbox"
+                scroll={(el) =>
+                  el.scrollIntoView({ behavior: "smooth", block: "center" })
+                }
+              >
+                Settings.
+              </HashLink>
+            </h5>
+          </div>
+        )}
+      </div>
+    </>
   );
 };