From 303df2869cd956a6a708c3155015a9c551d05598 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 9 Jan 2023 19:58:33 -0800
Subject: [PATCH] Sticky the crawl config progress indicator position (#445)

* fix tabs on scroll

* adjust for smaller creen size

* scroll to top of section on change

* only scroll if needed
---
 frontend/src/components/tab-list.ts           | 13 +++++
 .../src/pages/archive/crawl-config-editor.ts  | 49 ++++++++++++++-----
 2 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/tab-list.ts b/frontend/src/components/tab-list.ts
index 9051103c..86f541a6 100644
--- a/frontend/src/components/tab-list.ts
+++ b/frontend/src/components/tab-list.ts
@@ -140,6 +140,14 @@ export class TabList extends LitElement {
 
     .navWrapper {
       grid-area: menu;
+      overflow-y: hidden;
+      overflow-x: auto;
+    }
+
+    @media only screen and (min-width: ${SCREEN_LG}px) {
+      .navWrapper {
+        overflow: initial;
+      }
     }
 
     .header {
@@ -155,6 +163,9 @@ export class TabList extends LitElement {
 
     .nav {
       position: relative;
+      position: -webkit-sticky;
+      position: sticky;
+      top: var(--sl-spacing-medium);
     }
 
     ul {
@@ -331,8 +342,10 @@ export class TabList extends LitElement {
       panel.active = panel.name === this.activePanel;
       if (panel.active) {
         panel.style.display = "flex";
+        panel.setAttribute("aria-hidden", "false");
       } else {
         panel.style.display = "none";
+        panel.setAttribute("aria-hidden", "true");
       }
     });
   }
diff --git a/frontend/src/pages/archive/crawl-config-editor.ts b/frontend/src/pages/archive/crawl-config-editor.ts
index fc6c83a4..335c36c5 100644
--- a/frontend/src/pages/archive/crawl-config-editor.ts
+++ b/frontend/src/pages/archive/crawl-config-editor.ts
@@ -8,7 +8,7 @@ import type {
   SlSelect,
   SlTextarea,
 } from "@shoelace-style/shoelace";
-import { state, property, query } from "lit/decorators.js";
+import { state, property, query, queryAsync } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { msg, localized, str } from "@lit/localize";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -257,6 +257,9 @@ export class CrawlConfigEditor extends LiteElement {
   @query('form[name="newJobConfig"]')
   formElem!: HTMLFormElement;
 
+  @queryAsync("btrix-tab-panel[aria-hidden=false]")
+  activeTabPanel!: Promise<HTMLElement | null>;
+
   connectedCallback(): void {
     this.initializeEditor();
     super.connectedCallback();
@@ -269,14 +272,17 @@ export class CrawlConfigEditor extends LiteElement {
     ) {
       this.initializeEditor();
     }
+    if (changedProperties.get("formState") && this.formState) {
+      this.handleFormStateChange();
+    }
+  }
+
+  updated(changedProperties: Map<string, any>) {
     if (changedProperties.get("progressState") && this.progressState) {
       this.handleProgressStateChange(
         changedProperties.get("progressState") as ProgressState
       );
     }
-    if (changedProperties.get("formState") && this.formState) {
-      this.handleFormStateChange();
-    }
   }
 
   private initializeEditor() {
@@ -396,7 +402,7 @@ export class CrawlConfigEditor extends LiteElement {
             this.renderNavItem(tabName, tabLabels[tabName])
           )}
 
-          <btrix-tab-panel name="newJobConfig-crawlSetup">
+          <btrix-tab-panel name="newJobConfig-crawlSetup" class="scroll-m-3">
             ${this.renderPanelContent(
               html`
                 ${when(this.jobType === "url-list", this.renderUrlListSetup)}
@@ -411,16 +417,28 @@ export class CrawlConfigEditor extends LiteElement {
               { isFirst: true }
             )}
           </btrix-tab-panel>
-          <btrix-tab-panel name="newJobConfig-browserSettings">
+          <btrix-tab-panel
+            name="newJobConfig-browserSettings"
+            class="scroll-m-3"
+          >
             ${this.renderPanelContent(this.renderCrawlBehaviors())}
           </btrix-tab-panel>
-          <btrix-tab-panel name="newJobConfig-crawlScheduling">
+          <btrix-tab-panel
+            name="newJobConfig-crawlScheduling"
+            class="scroll-m-3"
+          >
             ${this.renderPanelContent(this.renderJobScheduling())}
           </btrix-tab-panel>
-          <btrix-tab-panel name="newJobConfig-crawlInformation">
+          <btrix-tab-panel
+            name="newJobConfig-crawlInformation"
+            class="scroll-m-3"
+          >
             ${this.renderPanelContent(this.renderJobInformation())}
           </btrix-tab-panel>
-          <btrix-tab-panel name="newJobConfig-confirmSettings">
+          <btrix-tab-panel
+            name="newJobConfig-confirmSettings"
+            class="scroll-m-3"
+          >
             ${this.renderPanelContent(this.renderConfirmSettings(), {
               isLast: true,
             })}
@@ -1275,10 +1293,15 @@ https://example.net`}
     }
   }
 
-  private handleProgressStateChange(oldState: ProgressState) {
-    const { currentStep } = this.progressState;
-    if (oldState.currentStep !== currentStep) {
-      this.formElem?.scrollIntoView({ behavior: "smooth" });
+  private async handleProgressStateChange(oldState: ProgressState) {
+    const { activeTab } = this.progressState;
+    if (oldState.activeTab !== activeTab) {
+      const activeTabPanel = (await this.activeTabPanel) as HTMLElement;
+      if (activeTabPanel && activeTabPanel.getBoundingClientRect().top < 0) {
+        activeTabPanel.scrollIntoView({
+          behavior: "smooth",
+        });
+      }
     }
   }