From 5ba22347ff5564cfa19e75970e32c2d0fafbfb12 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 14 Oct 2021 16:43:30 -0400
Subject: [PATCH] App Settings Page: Fix buggy anchor links (#2479)

---
 changes/issue-2457-app-settings-anchor-links  |  1 +
 .../admin/AppConfigForm/AppConfigForm.jsx     | 14 ++------
 .../admin/AppSettingsPage/AppSettingsPage.jsx | 35 +++++++++++++------
 .../pages/admin/AppSettingsPage/_styles.scss  | 28 +++++++--------
 4 files changed, 43 insertions(+), 35 deletions(-)
 create mode 100644 changes/issue-2457-app-settings-anchor-links

diff --git a/changes/issue-2457-app-settings-anchor-links b/changes/issue-2457-app-settings-anchor-links
new file mode 100644
index 0000000000..2304a705f1
--- /dev/null
+++ b/changes/issue-2457-app-settings-anchor-links
@@ -0,0 +1 @@
+* Fixes buggy App Settings anchor links to work on first click
\ No newline at end of file
diff --git a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
index 12cb66e181..e5f7597b60 100644
--- a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
+++ b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
@@ -126,16 +126,6 @@ class AppConfigForm extends Component {
     };
   }
 
-  onToggleAdvancedOptions = (evt) => {
-    evt.preventDefault();
-
-    const { showAdvancedOptions } = this.state;
-
-    this.setState({ showAdvancedOptions: !showAdvancedOptions });
-
-    return false;
-  };
-
   toggleHostStatusWebhookPreviewModal = () => {
     const { showHostStatusWebhookPreviewModal } = this.state;
     this.setState({
@@ -713,7 +703,9 @@ class AppConfigForm extends Component {
           </div>
 
           <div className={`${baseClass}__section`}>
-            <h2>Advanced options</h2>
+            <h2>
+              <a id="advanced-options">Advanced options</a>
+            </h2>
             {renderAdvancedOptions()}
           </div>
           <Button type="submit" variant="brand">
diff --git a/frontend/pages/admin/AppSettingsPage/AppSettingsPage.jsx b/frontend/pages/admin/AppSettingsPage/AppSettingsPage.jsx
index 0e0e9ea8a7..16b76e3fca 100644
--- a/frontend/pages/admin/AppSettingsPage/AppSettingsPage.jsx
+++ b/frontend/pages/admin/AppSettingsPage/AppSettingsPage.jsx
@@ -11,7 +11,6 @@ import { renderFlash } from "redux/nodes/notifications/actions";
 import { updateConfig } from "redux/nodes/app/actions";
 
 export const baseClass = "app-settings";
-
 class AppSettingsPage extends Component {
   static propTypes = {
     appConfig: configInterface,
@@ -52,6 +51,10 @@ class AppSettingsPage extends Component {
 
     const formData = { ...appConfig, enable_smtp: smtpConfigured };
 
+    const scrollTo = (elementId) => {
+      document.getElementById(elementId).scrollIntoView(true);
+    };
+
     return (
       <div className={`${baseClass} body-wrap`}>
         <p className={`${baseClass}__page-description`}>
@@ -62,33 +65,45 @@ class AppSettingsPage extends Component {
           <nav>
             <ul className={`${baseClass}__form-nav-list`}>
               <li>
-                <a href="#organization-info">Organization info</a>
+                <a onClick={() => scrollTo("organization-info")}>
+                  Organization info
+                </a>
               </li>
               <li>
-                <a href="#fleet-web-address">Fleet web address</a>
+                <a onClick={() => scrollTo("fleet-web-address")}>
+                  Fleet web address
+                </a>
               </li>
               <li>
-                <a href="#saml">SAML single sign on options</a>
+                <a onClick={() => scrollTo("saml")}>
+                  SAML single sign on options
+                </a>
               </li>
               <li>
-                <a href="#smtp">SMTP options</a>
+                <a onClick={() => scrollTo("smtp")}>SMTP options</a>
               </li>
               <li>
-                <a href="#osquery-enrollment-secrets">
+                <a onClick={() => scrollTo("osquery-enrollment-secrets")}>
                   Osquery enrollment secrets
                 </a>
               </li>
               <li>
-                <a href="#agent-options">Global agent options</a>
+                <a onClick={() => scrollTo("agent-options")}>
+                  Global agent options
+                </a>
               </li>
               <li>
-                <a href="#host-status-webhook">Host status webhook</a>
+                <a onClick={() => scrollTo("host-status-webhook")}>
+                  Host status webhook
+                </a>
               </li>
               <li>
-                <a href="#usage-stats">Usage statistics</a>
+                <a onClick={() => scrollTo("usage-stats")}>Usage statistics</a>
               </li>
               <li>
-                <a href="#advanced-options">Advanced options</a>
+                <a onClick={() => scrollTo("advanced-options")}>
+                  Advanced options
+                </a>
               </li>
             </ul>
           </nav>
diff --git a/frontend/pages/admin/AppSettingsPage/_styles.scss b/frontend/pages/admin/AppSettingsPage/_styles.scss
index dff46b45fc..92ec0ea935 100644
--- a/frontend/pages/admin/AppSettingsPage/_styles.scss
+++ b/frontend/pages/admin/AppSettingsPage/_styles.scss
@@ -14,22 +14,22 @@
     border-bottom: solid 1px $ui-fleet-blue-15;
     margin: 0 0 15px;
     padding: 0 0 $pad-small;
+  }
+  a {
+    text-decoration: none;
+    cursor: pointer;
+  }
 
-    a {
-      text-decoration: none;
-    }
+  .fleeticon {
+    font-size: 8px;
+    margin: 0 20px;
+    vertical-align: 4px;
+  }
 
-    .fleeticon {
-      font-size: 8px;
-      margin: 0 20px;
-      vertical-align: 4px;
-    }
-
-    small {
-      font-size: $x-small;
-      font-weight: $regular;
-      color: $core-fleet-black;
-    }
+  small {
+    font-size: $x-small;
+    font-weight: $regular;
+    color: $core-fleet-black;
   }
 
   &__settings-form {