From d12ce9a59111162e1cd8bc21b9165c1b3da6c4bf Mon Sep 17 00:00:00 2001
From: Ilya Kreymer <ikreymer@users.noreply.github.com>
Date: Mon, 7 Oct 2024 22:14:46 -0700
Subject: [PATCH] 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       |  4 +++
 frontend/src/index.ts                   |  4 +--
 frontend/src/pages/org/workflows-new.ts | 39 +++++++++++++++++++++++--
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/docs/user-guide/workflow-setup.md b/docs/user-guide/workflow-setup.md
index 3472a45d..d8a03bce 100644
--- a/docs/user-guide/workflow-setup.md
+++ b/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.
diff --git a/frontend/src/index.ts b/frontend/src/index.ts
index 2711a3e9..b672b3fd 100644
--- a/frontend/src/index.ts
+++ b/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;
       }
diff --git a/frontend/src/pages/org/workflows-new.ts b/frontend/src/pages/org/workflows-new.ts
index 5f8203a6..34afbbdb 100644
--- a/frontend/src/pages/org/workflows-new.ts
+++ b/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,
               }),