Fleet UI: Update agent options in-page documentation (#7255)

changes/issue-7125-update-agent-options-cta

@@ -0,0 +1 @@
+* Improved agent options in-page documentation

frontend/pages/admin/AppSettingsPage/cards/Agents/Agents.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from "react";
 // @ts-ignore
 import constructErrorString from "utilities/yaml";
 import yaml from "js-yaml";
+import paths from "router/paths";
 
 import Button from "components/buttons/Button";
 // @ts-ignore
@@ -19,7 +20,10 @@ const baseClass = "app-config-form";
 const Agents = ({
   appConfig,
   handleSubmit,
+  isPremiumTier,
 }: IAppConfigFormProps): JSX.Element => {
+  const { ADMIN_TEAMS } = paths;
+
   const [formData, setFormData] = useState<any>({
     agentOptions: yaml.dump(appConfig.agent_options) || {},
   });
@@ -65,29 +69,42 @@ const Agents = ({
     <form className={baseClass} onSubmit={onFormSubmit} autoComplete="off">
       <div className={`${baseClass}__section`}>
         <div className={`${baseClass}__yaml`}>
-          <h2>Global agent options</h2>
+          <h2>Agent options</h2>
           <p className={`${baseClass}__section-description`}>
-            This code will be used by osquery when it checks for configuration
-            options.
+            Agent options configure the osquery agent. When you update agent
+            options, they will be applied the next time a host checks in to
+            Fleet.
             <br />
-            <b>
-              Changes to these configuration options will be applied to all
-              hosts in your organization that do not belong to any team.
-            </b>
-          </p>
-          <InfoBanner className={`${baseClass}__config-docs`}>
-            How do global agent options interact with team-level agent
-            options?&nbsp;
             <a
               href="https://fleetdm.com/docs/using-fleet/fleet-ui#configuring-agent-options"
-              className={`${baseClass}__learn-more ${baseClass}__learn-more--inline`}
+              className={`${baseClass}__learn-more`}
               target="_blank"
               rel="noopener noreferrer"
             >
               Learn more about agent options&nbsp;
               <img className="icon" src={OpenNewTabIcon} alt="open new tab" />
             </a>
-          </InfoBanner>
+          </p>
+          {isPremiumTier ? (
+            <InfoBanner>
+              These options are not applied to hosts on a team. To update agent
+              options for hosts on a team, head to the&nbsp;
+              <a href={ADMIN_TEAMS}>Teams page</a>&nbsp;and select a team.
+            </InfoBanner>
+          ) : (
+            <InfoBanner>
+              Want some hosts to have different options?&nbsp;
+              <a
+                href="https://fleetdm.com/docs/using-fleet/teams"
+                className={`${baseClass}__learn-more ${baseClass}__learn-more--inline`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Learn more about teams&nbsp;
+                <img className="icon" src={OpenNewTabIcon} alt="open new tab" />
+              </a>
+            </InfoBanner>
+          )}
           <p className={`${baseClass}__component-label`}>
             <b>YAML</b>
           </p>

frontend/pages/admin/AppSettingsPage/components/OrgSettingsForm/OrgSettingsForm.tsx

@@ -119,7 +119,11 @@ const OrgSettingsForm = ({
             <Smtp appConfig={appConfig} handleSubmit={onFormSubmit} />
           )}
           {activeSection === "agents" && (
-            <AgentOptions appConfig={appConfig} handleSubmit={onFormSubmit} />
+            <AgentOptions
+              appConfig={appConfig}
+              handleSubmit={onFormSubmit}
+              isPremiumTier={isPremiumTier}
+            />
           )}
           {activeSection === "host-status-webhook" && (
             <HostStatusWebhook
@@ -199,7 +203,7 @@ const OrgSettingsForm = ({
                   )}`}
                   to={PATHS.ADMIN_SETTINGS_AGENTS}
                 >
-                  Global agent options
+                  Agent options
                 </Link>
               </li>
               <li>

frontend/pages/admin/AppSettingsPage/components/OrgSettingsForm/_styles.scss

@@ -1,5 +1,4 @@
 .org-settings-form {
-
   &__settings-form {
     display: flex;
   }
@@ -47,29 +46,7 @@
 .app-config-form {
   width: 100%;
 
-  &__config-docs {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: $pad-medium;
-    border-radius: $border-radius;
-    border: 1px solid #d9d9fe;
-    background-color: $ui-vibrant-blue-10;
-    margin-bottom: $pad-medium;
-    font-size: $x-small;
-
-    p {
-      margin: 0;
-      font-size: $x-small;
-    }
-  }
-
   &__learn-more {
-    color: $core-vibrant-blue;
-    font-size: $x-small;
-    font-weight: $bold;
-    text-decoration: none;
-
     &--inline {
       margin-left: $pad-medium;
     }
@@ -123,10 +100,10 @@
       padding-bottom: $pad-small;
       max-width: 65%;
       font-size: $medium;
-        font-weight: $regular;
-        color: $core-fleet-black;
-        border-bottom: solid 1px $ui-fleet-blue-15;
-        margin: 0 0 $pad-xxlarge;
+      font-weight: $regular;
+      color: $core-fleet-black;
+      border-bottom: solid 1px $ui-fleet-blue-15;
+      margin: 0 0 $pad-xxlarge;
     }
 
     .smtp-options {

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/AgentOptionsPage/AgentOptionsPage.tsx

@@ -77,8 +77,18 @@ const AgentOptionsPage = ({
   return (
     <div className={`${baseClass}`}>
       <p className={`${baseClass}__page-description`}>
-        This file describes options returned to osquery when it checks for
-        configuration.
+        Agent options configure the osquery agent. When you update agent
+        options, they will be applied the next time a host checks in to Fleet.
+        <br />
+        <a
+          href="https://fleetdm.com/docs/using-fleet/fleet-ui#configuring-agent-options"
+          className={`${baseClass}__learn-more`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn more about agent options&nbsp;
+          <img className="icon" src={OpenNewTabIcon} alt="open new tab" />
+        </a>
       </p>
       <InfoBanner className={`${baseClass}__config-docs`}>
         See Fleet documentation for an example file that includes the overrides