From 3d46b0d22a478cf2acb941748be5f4e01bd745bd Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Mon, 25 Mar 2024 13:41:35 -0700
Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20Fix=20error=20state=20and=20al?=
 =?UTF-8?q?ignment=20on=20global=20host=20status=20webhook=20setting=20pag?=
 =?UTF-8?q?e=20(#17821)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Addresses #17534

<img width="1392" alt="Screenshot 2024-03-22 at 4 41 25 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/a6bff506-4e1d-4342-be34-890a7742c760">

- also fix bug in alignment of error states vs tooltip-wrapped labels
throughout org settings

- [x] Changes file added
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 .../17534-improve-error-states-org-settings    |  2 ++
 .../pages/admin/OrgSettingsPage/_styles.scss   |  4 ----
 .../GlobalHostStatusWebhook.tsx                | 18 +++++++++---------
 3 files changed, 11 insertions(+), 13 deletions(-)
 create mode 100644 changes/17534-improve-error-states-org-settings

diff --git a/changes/17534-improve-error-states-org-settings b/changes/17534-improve-error-states-org-settings
new file mode 100644
index 0000000000..6fdff36d01
--- /dev/null
+++ b/changes/17534-improve-error-states-org-settings
@@ -0,0 +1,2 @@
+- Fix error state rendering on the global Host status expiry settings page, fix error state
+  alignment for tooltip-wrapper field labels across organization settings.
diff --git a/frontend/pages/admin/OrgSettingsPage/_styles.scss b/frontend/pages/admin/OrgSettingsPage/_styles.scss
index cfbfb51a9e..3ae29e2405 100644
--- a/frontend/pages/admin/OrgSettingsPage/_styles.scss
+++ b/frontend/pages/admin/OrgSettingsPage/_styles.scss
@@ -101,10 +101,6 @@
       &__disabled-usage-statistics-checkbox {
         @include disabled;
       }
-
-      .component__tooltip-wrapper {
-        margin-bottom: $pad-xsmall;
-      }
     }
   }
 }
diff --git a/frontend/pages/admin/OrgSettingsPage/cards/GlobalHostStatusWebhook/GlobalHostStatusWebhook.tsx b/frontend/pages/admin/OrgSettingsPage/cards/GlobalHostStatusWebhook/GlobalHostStatusWebhook.tsx
index 6783bcc2bb..78c7a0b105 100644
--- a/frontend/pages/admin/OrgSettingsPage/cards/GlobalHostStatusWebhook/GlobalHostStatusWebhook.tsx
+++ b/frontend/pages/admin/OrgSettingsPage/cards/GlobalHostStatusWebhook/GlobalHostStatusWebhook.tsx
@@ -28,7 +28,7 @@ const baseClass = "app-config-form";
 
 export type IGlobalHostStatusWebhookFormData = {
   enableHostStatusWebhook: boolean;
-  hostStatusWebhookDestinationUrl: string;
+  destination_url: string;
   hostStatusWebhookHostPercentage: number;
   hostStatusWebhookWindow: number;
 };
@@ -46,7 +46,7 @@ const GlobalHostStatusWebhook = ({
     enableHostStatusWebhook:
       appConfig.webhook_settings.host_status_webhook
         ?.enable_host_status_webhook || false,
-    hostStatusWebhookDestinationUrl:
+    destination_url:
       appConfig.webhook_settings.host_status_webhook?.destination_url || "",
     hostStatusWebhookHostPercentage:
       appConfig.webhook_settings.host_status_webhook?.host_percentage || 1,
@@ -56,7 +56,7 @@ const GlobalHostStatusWebhook = ({
 
   const {
     enableHostStatusWebhook,
-    hostStatusWebhookDestinationUrl,
+    destination_url,
     hostStatusWebhookHostPercentage,
     hostStatusWebhookWindow,
   } = formData;
@@ -72,10 +72,10 @@ const GlobalHostStatusWebhook = ({
     const errors: IAppConfigFormErrors = {};
 
     if (enableHostStatusWebhook) {
-      if (!hostStatusWebhookDestinationUrl) {
+      if (!destination_url) {
         errors.destination_url = "Destination URL must be present";
-      } else if (!validUrl({ url: hostStatusWebhookDestinationUrl })) {
-        errors.server_url = `${hostStatusWebhookDestinationUrl} is not a valid URL`;
+      } else if (!validUrl({ url: destination_url })) {
+        errors.destination_url = `${destination_url} is not a valid URL`;
       }
     }
 
@@ -99,7 +99,7 @@ const GlobalHostStatusWebhook = ({
       webhook_settings: {
         host_status_webhook: {
           enable_host_status_webhook: enableHostStatusWebhook,
-          destination_url: hostStatusWebhookDestinationUrl,
+          destination_url,
           host_percentage: hostStatusWebhookHostPercentage,
           days_count: hostStatusWebhookWindow,
         },
@@ -166,8 +166,8 @@ const GlobalHostStatusWebhook = ({
                 placeholder="https://server.com/example"
                 label="Destination URL"
                 onChange={handleInputChange}
-                name="hostStatusWebhookDestinationUrl"
-                value={hostStatusWebhookDestinationUrl}
+                name="destination_url"
+                value={destination_url}
                 parseTarget
                 onBlur={validateForm}
                 error={formErrors.destination_url}