From c6078a192329d7e6c6ebc5da72e98059cc0d7f8b Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Thu, 16 Nov 2023 14:32:53 -0800
Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20Update=20Advanced=20settings?=
 =?UTF-8?q?=20page=20(#15181)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Addresses #14260

- Show host expiry window input field only when setting is enabled
- Update setting tooltip text
- Clean up form validation

![Screenshot 2023-11-16 at 2 21
19 PM](https://github.com/fleetdm/fleet/assets/61553566/5f898650-da47-4e42-885a-21e2c3b5bda5)


![image](https://github.com/fleetdm/fleet/assets/61553566/0af9d7d7-4ab7-4ea3-ad2e-b75a91213cdb)


- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/14260-host-expiry-window              |  2 +
 .../cards/Advanced/Advanced.tsx               | 63 +++++++++----------
 2 files changed, 32 insertions(+), 33 deletions(-)
 create mode 100644 changes/14260-host-expiry-window

diff --git a/changes/14260-host-expiry-window b/changes/14260-host-expiry-window
new file mode 100644
index 000000000000..88a6165d8a8a
--- /dev/null
+++ b/changes/14260-host-expiry-window
@@ -0,0 +1,2 @@
+* Only show the Settings > Advanced > "Host expiry window" input field when the "Host expiry"
+setting is enabled
diff --git a/frontend/pages/admin/OrgSettingsPage/cards/Advanced/Advanced.tsx b/frontend/pages/admin/OrgSettingsPage/cards/Advanced/Advanced.tsx
index bc0852f9e913..cf0621256c1d 100644
--- a/frontend/pages/admin/OrgSettingsPage/cards/Advanced/Advanced.tsx
+++ b/frontend/pages/admin/OrgSettingsPage/cards/Advanced/Advanced.tsx
@@ -46,22 +46,17 @@ const Advanced = ({
     setFormData({ ...formData, [name]: value });
   };
 
-  const validateForm = () => {
+  useEffect(() => {
+    // validate desired form fields
     const errors: IAppConfigFormErrors = {};
 
-    if (enableHostExpiry) {
-      if (!hostExpiryWindow || hostExpiryWindow <= 0) {
-        errors.host_expiry_window =
-          "Host expiry window must be a positive number";
-      }
+    if (enableHostExpiry && (!hostExpiryWindow || hostExpiryWindow <= 0)) {
+      errors.host_expiry_window =
+        "Host expiry window must be a positive number";
     }
 
     setFormErrors(errors);
-  };
-
-  useEffect(() => {
-    validateForm();
-  }, [enableHostExpiry]);
+  }, [enableHostExpiry, hostExpiryWindow]);
 
   const onFormSubmit = (evt: React.MouseEvent<HTMLFormElement>) => {
     evt.preventDefault();
@@ -166,35 +161,37 @@ const Advanced = ({
                 value={enableHostExpiry}
                 parseTarget
                 tooltipContent={
-                  <p>
-                    When enabled, allows automatic cleanup <br />
-                    of hosts that have not communicated with Fleet <br />
-                    in some number of days.{" "}
+                  <>
+                    When enabled, allows automatic cleanup of
+                    <br />
+                    hosts that have not communicated with Fleet in
+                    <br />
+                    the number of days specified in the{" "}
+                    <strong>
+                      Host expiry
+                      <br />
+                      window
+                    </strong>{" "}
+                    setting.{" "}
                     <em className="hint hint--brand">
                       (Default: <strong>Off</strong>)
                     </em>
-                  </p>
+                  </>
                 }
               >
                 Host expiry
               </Checkbox>
-              <InputField
-                label="Host expiry window"
-                type="number"
-                disabled={!enableHostExpiry}
-                onChange={handleInputChange}
-                name="hostExpiryWindow"
-                value={hostExpiryWindow}
-                parseTarget
-                onBlur={validateForm}
-                error={formErrors.host_expiry_window}
-                tooltipContent={
-                  <p>
-                    If a host has not communicated with Fleet in the specified
-                    number of days, it will be removed.
-                  </p>
-                }
-              />
+              {enableHostExpiry && (
+                <InputField
+                  label="Host expiry window"
+                  type="number"
+                  onChange={handleInputChange}
+                  name="hostExpiryWindow"
+                  value={hostExpiryWindow}
+                  parseTarget
+                  error={formErrors.host_expiry_window}
+                />
+              )}
               <Checkbox
                 onChange={handleInputChange}
                 name="disableLiveQuery"