App Settings Page: Fix buggy anchor links (#2479)

changes/issue-2457-app-settings-anchor-links

@@ -0,0 +1 @@
+* Fixes buggy App Settings anchor links to work on first click

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">

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>

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 {