sidebar setup guide fixes: (#2105)

- ensure user-guide iframe is always visible if not fading in when
'Setup Guide' button is clicked
- Clicking 'Setup Guide' scrolls to relevant section of guide (scope,
limits, browser settings, scheduling, metadata) based on current
workflow editor tab via hashtag

---------

Co-authored-by: sua yoo <sua@webrecorder.org>

docs/user-guide/workflow-setup.md

@@ -276,3 +276,7 @@ Apply tags to the workflow. Tags applied to the workflow will propagate to every
 ### Collection Auto-Add
 
 Search for and specify [collections](collections.md) that this crawl workflow should automatically add archived items to as soon as crawling finishes. Canceled and Failed crawls will not be added to collections.
+
+## Review Settings
+
+This section lists all the previously entered settings for final review. If there are any errors from the previous form sections, they will be listed at the top. The errors need to be corrected before the crawl workflow can be created.

frontend/src/index.ts

@@ -850,14 +850,14 @@ export class App extends LiteElement {
         iframe.removeEventListener("load", oneLoad);
       };
 
-      iframe.classList.add(tw`opacity-0`);
-
       if (pathName) {
         if (iframe.src.slice(this.docsUrl.length) !== pathName) {
+          iframe.classList.add(tw`opacity-0`);
           iframe.addEventListener("load", oneLoad);
           iframe.src = `${this.docsUrl}${pathName}`;
         }
       } else {
+        iframe.classList.add(tw`opacity-0`);
         iframe.addEventListener("load", oneLoad);
         iframe.src = this.docsUrl;
       }

frontend/src/pages/org/workflows-new.ts

@@ -1,6 +1,6 @@
 import { localized, msg } from "@lit/localize";
 import { mergeDeep } from "immutable";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 
@@ -12,6 +12,23 @@ import { WorkflowScopeType } from "@/types/workflow";
 import LiteElement, { html } from "@/utils/LiteElement";
 import type { FormState as WorkflowFormState } from "@/utils/workflow";
 
+type GuideHash =
+  | "scope"
+  | "limits"
+  | "browser-settings"
+  | "scheduling"
+  | "metadata"
+  | "review-settings";
+
+const workflowTabToGuideHash: Record<string, GuideHash> = {
+  crawlSetup: "scope",
+  crawlLimits: "limits",
+  browserSettings: "browser-settings",
+  crawlScheduling: "scheduling",
+  crawlMetadata: "metadata",
+  confirmSettings: "review-settings",
+};
+
 /**
  * Usage:
  * ```ts
@@ -33,6 +50,24 @@ export class WorkflowsNew extends LiteElement {
   @property({ type: Object })
   initialWorkflow?: WorkflowParams;
 
+  @state()
+  private userGuideHashLink: GuideHash = "scope";
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    this.userGuideHashLink =
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      workflowTabToGuideHash[window.location.hash.slice(1) as GuideHash] ||
+      "scope";
+
+    window.addEventListener("hashchange", () => {
+      const hashValue = window.location.hash.slice(1) as GuideHash;
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      this.userGuideHashLink = workflowTabToGuideHash[hashValue] || "scope";
+    });
+  }
+
   private get defaultNewWorkflow(): WorkflowParams {
     return {
       name: "",
@@ -93,7 +128,7 @@ export class WorkflowsNew extends LiteElement {
                 UserGuideEventMap["btrix-user-guide-show"]["detail"]
               >("btrix-user-guide-show", {
                 detail: {
-                  path: "/user-guide/workflow-setup/#scope",
+                  path: `/user-guide/workflow-setup/#${this.userGuideHashLink}`,
                 },
                 bubbles: true,
               }),