From 1ada015de32dff1d3a87b27f6459a77d36c5bb9e Mon Sep 17 00:00:00 2001
From: Mia Wong <miawongdev@gmail.com>
Date: Thu, 19 Jan 2023 08:39:03 -0800
Subject: [PATCH] Miawong/sc 59049/auto expand and collapse the the config nav
 (#3555)

---
 .../components/config_render/ConfigGroup.jsx  | 183 +++++++++---------
 .../AppConfig/components/AppConfig.tsx        |  44 +++++
 .../scss/components/watches/WatchConfig.scss  |   9 +-
 3 files changed, 140 insertions(+), 96 deletions(-)

diff --git a/web/src/components/config_render/ConfigGroup.jsx b/web/src/components/config_render/ConfigGroup.jsx
index 03600de22d..25dd2381b7 100644
--- a/web/src/components/config_render/ConfigGroup.jsx
+++ b/web/src/components/config_render/ConfigGroup.jsx
@@ -15,31 +15,28 @@ import { setOrder } from "./ConfigUtil";
 import { ConfigWrapper, ConfigItems } from "./ConfigComponents";
 import Icon from "../Icon";
 
-export default class ConfigGroup extends React.Component {
-  constructor() {
-    super();
-    this.markdownNode = React.createRef();
-  }
+const ConfigGroup = (props) => {
+  const markdownNode = React.createRef();
 
-  handleItemChange = (itemName, value, data) => {
-    if (this.props.handleChange) {
-      this.props.handleChange(itemName, value, data);
+  const handleItemChange = (itemName, value, data) => {
+    if (props.handleChange) {
+      props.handleChange(itemName, value, data);
     }
   };
 
-  handleAddItem = (itemName) => {
-    if (this.props.handleAddItem) {
-      this.props.handleAddItem(itemName);
+  const handleAddItem = (itemName) => {
+    if (props.handleAddItem) {
+      props.handleAddItem(itemName);
     }
   };
 
-  handleRemoveItem = (itemName, itemToRemove) => {
-    if (this.props.handleRemoveItem) {
-      this.props.handleRemoveItem(itemName, itemToRemove);
+  const handleRemoveItem = (itemName, itemToRemove) => {
+    if (props.handleRemoveItem) {
+      props.handleRemoveItem(itemName, itemToRemove);
     }
   };
 
-  renderConfigItems = (items, readonly) => {
+  const renderConfigItems = (items, readonly) => {
     if (!items) {
       return null;
     }
@@ -51,11 +48,11 @@ export default class ConfigGroup extends React.Component {
           return (
             <ConfigInput
               key={`${i}-${item.name}`}
-              handleOnChange={this.handleItemChange}
-              handleAddItem={this.handleAddItem}
-              handleRemoveItem={this.handleRemoveItem}
+              handleOnChange={handleItemChange}
+              handleAddItem={handleAddItem}
+              handleRemoveItem={handleRemoveItem}
               inputType="text"
-              groupName={this.props.item.name}
+              groupName={props.item.name}
               hidden={item.hidden}
               when={item.when}
               {...item}
@@ -67,11 +64,11 @@ export default class ConfigGroup extends React.Component {
           return (
             <ConfigTextarea
               key={`${i}-${item.name}`}
-              handleOnChange={this.handleItemChange}
-              handleAddItem={this.handleAddItem}
-              handleRemoveItem={this.handleRemoveItem}
+              handleOnChange={handleItemChange}
+              handleAddItem={handleAddItem}
+              handleRemoveItem={handleRemoveItem}
               hidden={item.hidden}
-              groupName={this.props.item.name}
+              groupName={props.item.name}
               when={item.when}
               {...item}
               readonly={isReadOnly}
@@ -82,11 +79,11 @@ export default class ConfigGroup extends React.Component {
           return (
             <ConfigCheckbox
               key={`${i}-${item.name}`}
-              handleOnChange={this.handleItemChange}
-              handleAddItem={this.handleAddItem}
-              handleRemoveItem={this.handleRemoveItem}
+              handleOnChange={handleItemChange}
+              handleAddItem={handleAddItem}
+              handleRemoveItem={handleRemoveItem}
               hidden={item.hidden}
-              groupName={this.props.item.name}
+              groupName={props.item.name}
               when={item.when}
               {...item}
               readonly={isReadOnly}
@@ -99,7 +96,7 @@ export default class ConfigGroup extends React.Component {
               key={`${i}-${item.name}`}
               className="field field-type-label"
               style={{
-                margin: this.props.affix ? "0" : "15px",
+                margin: props.affix ? "0" : "15px",
                 order: setOrder(i + 1, item.affix),
               }}
             >
@@ -108,7 +105,7 @@ export default class ConfigGroup extends React.Component {
                 recommended={item.recommended}
                 required={item.required}
                 hidden={item.hidden}
-                groupName={this.props.item.name}
+                groupName={props.item.name}
                 when={item.when}
                 name={item.name}
                 error={item.error}
@@ -120,7 +117,7 @@ export default class ConfigGroup extends React.Component {
           return (
             <ConfigWrapper
               key={`${i}-${item.name}`}
-              className={"field-type-label"}
+              className={"field-type-label "}
               marginTop={item.affix ? "0" : "15px"}
               order={setOrder(i + 1, item.affix)}
             >
@@ -128,14 +125,14 @@ export default class ConfigGroup extends React.Component {
                 {...item}
                 title={item.title}
                 recommended={item.recommended}
-                groupName={this.props.item.name}
+                groupName={props.item.name}
                 required={item.required}
-                handleChange={this.handleItemChange}
-                handleRemoveItem={this.handleRemoveItem}
+                handleChange={handleItemChange}
+                handleRemoveItem={handleRemoveItem}
                 hidden={item.hidden}
                 when={item.when}
-                configSequence={this.props.configSequence}
-                appSlug={this.props.appSlug}
+                configSequence={props.configSequence}
+                appSlug={props.appSlug}
                 readonly={isReadOnly}
                 index={i + 1}
               />
@@ -145,9 +142,9 @@ export default class ConfigGroup extends React.Component {
           return (
             <ConfigSelectOne
               key={`${i}-${item.name}`}
-              handleOnChange={this.handleItemChange}
+              handleOnChange={handleItemChange}
               hidden={item.hidden}
-              groupName={this.props.item.name}
+              groupName={props.item.name}
               when={item.when}
               {...item}
               readonly={isReadOnly}
@@ -158,7 +155,7 @@ export default class ConfigGroup extends React.Component {
           return (
             <div
               key={`${i}-${item.name}`}
-              className={`u-marginTop--15 u-marginBottom--15 ${
+              className={`u-marginTop--15 u-marginBottom--15   ${
                 item.hidden || item.when === "false" ? "hidden" : ""
               }`}
               style={{ order: setOrder(i + 1, item.affix) }}
@@ -172,11 +169,11 @@ export default class ConfigGroup extends React.Component {
           return (
             <ConfigInput
               key={`${i}-${item.name}`}
-              handleOnChange={this.handleItemChange}
-              handleAddItem={this.handleAddItem}
-              handleRemoveItem={this.handleRemoveItem}
+              handleOnChange={handleItemChange}
+              handleAddItem={handleAddItem}
+              handleRemoveItem={handleRemoveItem}
               hidden={item.hidden}
-              groupName={this.props.item.name}
+              groupName={props.item.name}
               when={item.when}
               inputType="password"
               {...item}
@@ -202,65 +199,65 @@ export default class ConfigGroup extends React.Component {
     });
   };
 
-  isAtLeastOneItemVisible = () => {
-    const { item } = this.props;
+  const isAtLeastOneItemVisible = () => {
+    const { item } = props;
     if (!item) {
       return false;
     }
-    return some(this.props.item.items, (item) => {
+    return some(props.item.items, (item) => {
       if (!isEmpty(item)) {
-        return ConfigService.isVisible(this.props.items, item);
+        return ConfigService.isVisible(props.items, item);
       }
     });
   };
 
-  render() {
-    const { item, readonly } = this.props;
-    const hidden = item && item.when === "false";
-    if (hidden || !this.isAtLeastOneItemVisible()) {
-      return null;
-    }
-    const hasAffix = item.items.every((option) => option.affix);
-    return (
-      <div className="flex-column flex-auto">
-        {item && (
+  const { item, readonly } = props;
+  const hidden = item && item.when === "false";
+  if (hidden || !isAtLeastOneItemVisible()) {
+    return null;
+  }
+  const hasAffix = item.items.every((option) => option.affix);
+  return (
+    <div className="flex-column flex-auto">
+      {item && (
+        <div
+          id={`${item.name}`}
+          className={`flex-auto config-item-wrapper card-item u-padding--15 observe-elements ${
+            isAtLeastOneItemVisible() ? "u-marginBottom--20" : ""
+          } config-groups`}
+        >
+          <h3 className="card-item-title">{item.title}</h3>
+          {item.description !== "" ? (
+            <div className="field-section-help-text help-text-color u-marginTop--10">
+              <Markdown
+                ref={markdownNode}
+                options={{
+                  linkTarget: "_blank",
+                  linkify: true,
+                }}
+              >
+                {item.description}
+              </Markdown>
+            </div>
+          ) : null}
           <div
-            id={item.name}
-            className={`flex-auto config-item-wrapper card-item u-padding--15 ${
-              this.isAtLeastOneItemVisible() ? "u-marginBottom--20" : ""
-            }`}
+            className="config-items"
+            style={{ display: hasAffix ? "grid" : "block" }}
           >
-            <h3 className="card-item-title">{item.title}</h3>
-            {item.description !== "" ? (
-              <div className="field-section-help-text help-text-color u-marginTop--10">
-                <Markdown
-                  ref={this.markdownNode}
-                  options={{
-                    linkTarget: "_blank",
-                    linkify: true,
-                  }}
-                >
-                  {item.description}
-                </Markdown>
-              </div>
-            ) : null}
-            <div
-              className="config-items"
-              style={{ display: hasAffix ? "grid" : "block" }}
-            >
-              {this.renderConfigItems(item.items, readonly)}
-            </div>
-            {item.repeatable && (
-              <div className="u-marginTop--15">
-                <button className="btn secondary blue rounded add-btn">
-                  <Icon icon="plus" size={14} />
-                  Add another {item.title}
-                </button>
-              </div>
-            )}
+            {renderConfigItems(item.items, readonly)}
           </div>
-        )}
-      </div>
-    );
-  }
-}
+          {item.repeatable && (
+            <div className="u-marginTop--15">
+              <button className="btn secondary blue rounded add-btn">
+                <Icon icon="plus" size={14} />
+                Add another {item.title}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ConfigGroup;
diff --git a/web/src/features/AppConfig/components/AppConfig.tsx b/web/src/features/AppConfig/components/AppConfig.tsx
index eb481d9eac..9e7ccd5e03 100644
--- a/web/src/features/AppConfig/components/AppConfig.tsx
+++ b/web/src/features/AppConfig/components/AppConfig.tsx
@@ -578,6 +578,49 @@ class AppConfig extends Component<Props, State> {
       saveButtonText = "Generate Upgrade Command";
     }
 
+    const sections = document.querySelectorAll(".observe-elements");
+
+    const callback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach(({ isIntersecting, target }) => {
+        // find the group nav link that matches the current section in view
+        const groupNav = document.querySelector(
+          `#config-group-nav-${target.id}`
+        );
+        // find the active link in the group nav
+        const activeLink = document.querySelector(".active-item");
+        const hash = this.props.location.hash.slice(1);
+        const activeLinkByHash = document.querySelector(`a[href='#${hash}']`);
+        if (isIntersecting) {
+          groupNav?.classList.add("is-active");
+          // if your group is active, item will be active
+          if (activeLinkByHash && groupNav?.contains(activeLinkByHash)) {
+            activeLinkByHash.classList.add("active-item");
+          }
+        } else {
+          // if the section is not in view, remove the highlight from the active link
+          if (groupNav?.contains(activeLink) && activeLink) {
+            activeLink.classList.remove("active-item");
+          }
+          // remove the highlight from the group nav link
+          groupNav?.classList.remove("is-active");
+        }
+      });
+    };
+
+    const options = {
+      root: document,
+      // rootMargin is the amount of space around the root element that the intersection observer will look for intersections
+      rootMargin: "20% 0% -75% 0%",
+      // threshold: the proportion of the element that must be within the root bounds for it to be considered intersecting
+      threshold: 0.15,
+    };
+
+    const observer = new IntersectionObserver(callback, options);
+
+    sections.forEach((section) => {
+      observer.observe(section);
+    });
+
     return (
       <div className="flex flex-column u-paddingLeft--20 u-paddingBottom--20 u-paddingRight--20 alignItems--center">
         <KotsPageTitle pageName="Config" showAppSlug />
@@ -608,6 +651,7 @@ class AppConfig extends Component<Props, State> {
                       ? "group-open"
                       : ""
                   }`}
+                  id={`config-group-nav-${group.name}`}
                 >
                   <div
                     className="flex alignItems--center"
diff --git a/web/src/scss/components/watches/WatchConfig.scss b/web/src/scss/components/watches/WatchConfig.scss
index 27b5a41340..1995bc447d 100644
--- a/web/src/scss/components/watches/WatchConfig.scss
+++ b/web/src/scss/components/watches/WatchConfig.scss
@@ -72,9 +72,6 @@ a:visited {
     }
 
     &.group-open {
-      & .group-title {
-        font-weight: 700;
-      }
       .icon.u-darkDropdownArrow,
       .arrow-down {
         transform: rotate(180deg);
@@ -83,6 +80,12 @@ a:visited {
         display: block;
       }
     }
+    &.is-active {
+      & .group-title {
+        font-weight: 700;
+        color: $text-color-primary;
+      }
+    }
   }
 }
 .side-nav-items {