From 0fef79926fc5ebb7d279e71061baa6ebf1f9c42a Mon Sep 17 00:00:00 2001
From: Martavis Parker <47053705+martavis@users.noreply.github.com>
Date: Tue, 15 Mar 2022 23:38:19 -0700
Subject: [PATCH] Host expiry setting to validate on change (#4604)

* cleaned up old conflicting tooltip styles

* fixed hsot expiry validation; validate on change
---
 .../admin/AppConfigForm/AppConfigForm.tsx     | 152 ++++++++----------
 .../forms/admin/AppConfigForm/_styles.scss    |  46 ------
 .../ManageAutomationsModal.tsx                |  30 ++--
 .../ManageAutomationsModal/_styles.scss       |  36 -----
 .../ManageAutomationsModal.tsx                |  30 ++--
 .../ManageAutomationsModal/_styles.scss       |  36 -----
 6 files changed, 98 insertions(+), 232 deletions(-)

diff --git a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.tsx b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.tsx
index d6d914f838..e0dceb01ba 100644
--- a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.tsx
+++ b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.tsx
@@ -219,7 +219,7 @@ const AppConfigFormFunctional = ({
     }
 
     if (enableHostExpiry) {
-      if (!hostExpiryWindow) {
+      if (!hostExpiryWindow || hostExpiryWindow <= 0) {
         errors.host_expiry_window =
           "Host expiry window must be a positive number";
       }
@@ -235,7 +235,7 @@ const AppConfigFormFunctional = ({
     setFormErrors(errors);
   };
 
-  // Validates forms when certain checkboxes and dropdowns are selected
+  // Validates forms when certain information is changed
   useEffect(() => {
     validateForm();
   }, [
@@ -245,6 +245,7 @@ const AppConfigFormFunctional = ({
     enableHostStatusWebhook,
     enableHostExpiry,
     agentOptions,
+    hostExpiryWindow,
   ]);
 
   // TOGGLE MODALS
@@ -832,86 +833,73 @@ const AppConfigFormFunctional = ({
           </p>
           <div className={`${baseClass}__inputs`}>
             <div className={`${baseClass}__form-fields`}>
-              <div className="tooltip-wrap tooltip-wrap--input">
-                <InputField
-                  label="Domain"
-                  onChange={handleInputChange}
-                  name="domain"
-                  value={domain}
-                  parseTarget
-                  tooltip={
-                    '<p>If you need to specify a HELO domain, <br />you can do it here <em className="hint hint--brand">(Default: <strong>Blank</strong>)</em></p>'
-                  }
-                />
-              </div>
-              <div className="tooltip-wrap">
-                <Checkbox
-                  onChange={handleInputChange}
-                  name="verifySSLCerts"
-                  value={verifySSLCerts}
-                  parseTarget
-                  tooltip={
-                    '<p>Turn this off (not recommended) <br />if you use a self-signed certificate <em className="hint hint--brand"><br />(Default: <strong>On</strong>)</em></p>'
-                  }
-                >
-                  Verify SSL certs
-                </Checkbox>
-              </div>
-              <div className="tooltip-wrap">
-                <Checkbox
-                  onChange={handleInputChange}
-                  name="enableStartTLS"
-                  value={enableStartTLS}
-                  parseTarget
-                  tooltip={
-                    '<p>Detects if STARTTLS is enabled <br />in your SMTP server and starts <br />to use it. <em className="hint hint--brand">(Default: <strong>On</strong>)</em></p>'
-                  }
-                >
-                  Enable STARTTLS
-                </Checkbox>
-              </div>
-              <div className="tooltip-wrap">
-                <Checkbox
-                  onChange={handleInputChange}
-                  name="enableHostExpiry"
-                  value={enableHostExpiry}
-                  parseTarget
-                  tooltip={
-                    '<p>When enabled, allows automatic cleanup <br />of hosts that have not communicated with Fleet <br />in some number of days. <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>'
-                  }
-                >
-                  Host expiry
-                </Checkbox>
-              </div>
-              <div className="tooltip-wrap tooltip-wrap--input">
-                <InputField
-                  label="Host expiry window"
-                  type="number"
-                  disabled={!enableHostExpiry}
-                  onChange={handleInputChange}
-                  name="hostExpiryWindow"
-                  value={hostExpiryWindow}
-                  parseTarget
-                  onBlur={validateForm}
-                  error={formErrors.host_expiry_window}
-                  tooltip={
-                    "<p>If a host has not communicated with Fleet in the specified number of days, it will be removed.</p>"
-                  }
-                />
-              </div>
-              <div className="tooltip-wrap">
-                <Checkbox
-                  onChange={handleInputChange}
-                  name="disableLiveQuery"
-                  value={disableLiveQuery}
-                  parseTarget
-                  tooltip={
-                    '<p>When enabled, disables the ability to run live queries <br />(ad hoc queries executed via the UI or fleetctl). <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>'
-                  }
-                >
-                  Disable live queries
-                </Checkbox>
-              </div>
+              <InputField
+                label="Domain"
+                onChange={handleInputChange}
+                name="domain"
+                value={domain}
+                parseTarget
+                tooltip={
+                  '<p>If you need to specify a HELO domain, <br />you can do it here <em className="hint hint--brand">(Default: <strong>Blank</strong>)</em></p>'
+                }
+              />
+              <Checkbox
+                onChange={handleInputChange}
+                name="verifySSLCerts"
+                value={verifySSLCerts}
+                parseTarget
+                tooltip={
+                  '<p>Turn this off (not recommended) <br />if you use a self-signed certificate <em className="hint hint--brand"><br />(Default: <strong>On</strong>)</em></p>'
+                }
+              >
+                Verify SSL certs
+              </Checkbox>
+              <Checkbox
+                onChange={handleInputChange}
+                name="enableStartTLS"
+                value={enableStartTLS}
+                parseTarget
+                tooltip={
+                  '<p>Detects if STARTTLS is enabled <br />in your SMTP server and starts <br />to use it. <em className="hint hint--brand">(Default: <strong>On</strong>)</em></p>'
+                }
+              >
+                Enable STARTTLS
+              </Checkbox>
+              <Checkbox
+                onChange={handleInputChange}
+                name="enableHostExpiry"
+                value={enableHostExpiry}
+                parseTarget
+                tooltip={
+                  '<p>When enabled, allows automatic cleanup <br />of hosts that have not communicated with Fleet <br />in some number of days. <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
+                error={formErrors.host_expiry_window}
+                tooltip={
+                  "<p>If a host has not communicated with Fleet in the specified number of days, it will be removed.</p>"
+                }
+              />
+              <Checkbox
+                onChange={handleInputChange}
+                name="disableLiveQuery"
+                value={disableLiveQuery}
+                parseTarget
+                tooltip={
+                  '<p>When enabled, disables the ability to run live queries <br />(ad hoc queries executed via the UI or fleetctl). <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>'
+                }
+              >
+                Disable live queries
+              </Checkbox>
             </div>
           </div>
         </div>
diff --git a/frontend/components/forms/admin/AppConfigForm/_styles.scss b/frontend/components/forms/admin/AppConfigForm/_styles.scss
index d77e88113e..3c17108438 100644
--- a/frontend/components/forms/admin/AppConfigForm/_styles.scss
+++ b/frontend/components/forms/admin/AppConfigForm/_styles.scss
@@ -224,51 +224,5 @@
 
   &__advanced-options {
     margin-bottom: $pad-large;
-
-    .tooltip-wrap {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      margin-bottom: $pad-large;
-
-      .icon-tooltip {
-        span {
-          display: flex;
-          align-items: center;
-        }
-        p {
-          text-align: center;
-        }
-      }
-
-      .form-field--input {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        margin-right: $pad-small;
-        margin-bottom: 0;
-      }
-
-      .form-field--checkbox {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-right: $pad-small;
-        margin-bottom: 0;
-
-        .fleet-checkbox {
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-
-    .tooltip-wrap--input {
-      .icon-tooltip {
-        span {
-          margin-top: 22px;
-        }
-      }
-    }
   }
 }
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/ManageAutomationsModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/ManageAutomationsModal.tsx
index ff2d89aa34..b1b7ba6e3f 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/ManageAutomationsModal.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/ManageAutomationsModal.tsx
@@ -199,22 +199,20 @@ const ManageAutomationsModal = ({
                 <p>Add a policy to turn on automations.</p>
               </div>
             )}
-            <div className="tooltip-wrap tooltip-wrap--input">
-              <InputField
-                inputWrapperClass={`${baseClass}__url-input`}
-                name="webhook-url"
-                label={"Destination URL"}
-                type={"text"}
-                value={destination_url}
-                onChange={onURLChange}
-                error={errors.url}
-                hint={
-                  'For each policy, Fleet will send a JSON payload to this URL with a list of the hosts that updated their answer to "No."'
-                }
-                placeholder={"https://server.com/example"}
-                tooltip="Provide a URL to deliver a webhook request to."
-              />
-            </div>
+            <InputField
+              inputWrapperClass={`${baseClass}__url-input`}
+              name="webhook-url"
+              label={"Destination URL"}
+              type={"text"}
+              value={destination_url}
+              onChange={onURLChange}
+              error={errors.url}
+              hint={
+                'For each policy, Fleet will send a JSON payload to this URL with a list of the hosts that updated their answer to "No."'
+              }
+              placeholder={"https://server.com/example"}
+              tooltip="Provide a URL to deliver a webhook request to."
+            />
             <Button
               type="button"
               variant="text-link"
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss
index bfcb7b2744..363e1c5964 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss
+++ b/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss
@@ -41,42 +41,6 @@
     opacity: 75%;
   }
 
-  .tooltip-wrap {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    margin-bottom: $pad-large;
-
-    .icon-tooltip {
-      span {
-        display: flex;
-        align-items: center;
-      }
-      p {
-        text-align: center;
-      }
-    }
-
-    .form-field--input {
-      display: block;
-      width: 100%;
-      margin-right: $pad-small;
-      margin-bottom: 0;
-    }
-
-    .form-field__hint {
-      font-style: normal;
-    }
-  }
-
-  .tooltip-wrap--input {
-    .icon-tooltip {
-      span {
-        margin-top: -5px;
-      }
-    }
-  }
-
   // so tooltips won't be triggered with whitespace
   .form-field__label {
     display: inline-block;
diff --git a/frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/ManageAutomationsModal.tsx b/frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/ManageAutomationsModal.tsx
index 690f67d05e..d5401b99f6 100644
--- a/frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/ManageAutomationsModal.tsx
+++ b/frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/ManageAutomationsModal.tsx
@@ -112,22 +112,20 @@ const ManageAutomationsModal = ({
                 days.
               </p>
             </div>
-            <div className="tooltip-wrap tooltip-wrap--input">
-              <InputField
-                inputWrapperClass={`${baseClass}__url-input`}
-                name="webhook-url"
-                label={"Destination URL"}
-                type={"text"}
-                value={destination_url}
-                onChange={onURLChange}
-                error={errors.url}
-                hint={
-                  "For each new vulnerability detected, Fleet will send a JSON payload to this URL with a list of the affected hosts."
-                }
-                placeholder={"https://server.com/example"}
-                tooltip="Provide a URL to deliver a webhook request to."
-              />
-            </div>
+            <InputField
+              inputWrapperClass={`${baseClass}__url-input`}
+              name="webhook-url"
+              label={"Destination URL"}
+              type={"text"}
+              value={destination_url}
+              onChange={onURLChange}
+              error={errors.url}
+              hint={
+                "For each new vulnerability detected, Fleet will send a JSON payload to this URL with a list of the affected hosts."
+              }
+              placeholder={"https://server.com/example"}
+              tooltip="Provide a URL to deliver a webhook request to."
+            />
             <Button
               type="button"
               variant="text-link"
diff --git a/frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/_styles.scss b/frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/_styles.scss
index 9dd3306a93..d4ba0a65a6 100644
--- a/frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/_styles.scss
+++ b/frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/_styles.scss
@@ -47,42 +47,6 @@
     }
   }
 
-  .tooltip-wrap {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    margin-bottom: $pad-large;
-
-    .icon-tooltip {
-      span {
-        display: flex;
-        align-items: center;
-      }
-      p {
-        text-align: center;
-      }
-    }
-
-    .form-field--input {
-      display: block;
-      width: 100%;
-      margin-right: $pad-small;
-      margin-bottom: 0;
-    }
-
-    .form-field__hint {
-      font-style: normal;
-    }
-  }
-
-  .tooltip-wrap--input {
-    .icon-tooltip {
-      span {
-        margin-top: -5px;
-      }
-    }
-  }
-
   // so tooltips won't be triggered with whitespace
   .form-field__label {
     display: inline-block;