From 6d965426e0b7730ca06cc91c812be61f357ddfce Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 26 Mar 2024 09:55:49 -0400
Subject: [PATCH] Fleet UI: Users can see a tooltip on a disabled checkbox
 (#17664)

---
 changes/16345-disabled-checkbox-tooltip       |  1 +
 .../forms/fields/Checkbox/Checkbox.tsx        | 17 +++++---
 .../forms/fields/Checkbox/_styles.scss        | 17 ++++++++
 .../TeamHostExpiryToggle.tsx                  | 40 ++++++++-----------
 .../TeamHostExpiryToggle/_styles.scss         |  4 --
 frontend/styles/var/mixins.scss               |  7 ++++
 6 files changed, 53 insertions(+), 33 deletions(-)
 create mode 100644 changes/16345-disabled-checkbox-tooltip

diff --git a/changes/16345-disabled-checkbox-tooltip b/changes/16345-disabled-checkbox-tooltip
new file mode 100644
index 0000000000..5e83ded1e1
--- /dev/null
+++ b/changes/16345-disabled-checkbox-tooltip
@@ -0,0 +1 @@
+- UI fix: users can see a tooltip on a disabled checkbox
diff --git a/frontend/components/forms/fields/Checkbox/Checkbox.tsx b/frontend/components/forms/fields/Checkbox/Checkbox.tsx
index 8380b4279c..83ddcb43be 100644
--- a/frontend/components/forms/fields/Checkbox/Checkbox.tsx
+++ b/frontend/components/forms/fields/Checkbox/Checkbox.tsx
@@ -55,21 +55,26 @@ const Checkbox = (props: ICheckboxProps) => {
     className,
     baseClass
   );
+
+  const checkBoxTickClass = classnames(`${baseClass}__tick`, {
+    [`${baseClass}__tick--disabled`]: disabled,
+    [`${baseClass}__tick--indeterminate`]: indeterminate,
+  });
+
+  const checkBoxLabelClass = classnames(checkBoxClass, {
+    [`${baseClass}__label--disabled`]: disabled,
+  });
+
   const formFieldProps = {
     ...pick(props, ["helpText", "label", "error", "name"]),
     className: wrapperClassName,
     type: "checkbox",
   } as IFormFieldProps;
 
-  const checkBoxTickClass = classnames(`${checkBoxClass}__tick`, {
-    [`${checkBoxClass}__tick--disabled`]: disabled,
-    [`${checkBoxClass}__tick--indeterminate`]: indeterminate,
-  });
-
   return (
     <FormField {...formFieldProps}>
       <>
-        <label htmlFor={name} className={checkBoxClass}>
+        <label htmlFor={name} className={checkBoxLabelClass}>
           <input
             checked={value}
             className={`${baseClass}__input`}
diff --git a/frontend/components/forms/fields/Checkbox/_styles.scss b/frontend/components/forms/fields/Checkbox/_styles.scss
index 3aa8725df1..5c7da05188 100644
--- a/frontend/components/forms/fields/Checkbox/_styles.scss
+++ b/frontend/components/forms/fields/Checkbox/_styles.scss
@@ -29,6 +29,18 @@
         }
       }
 
+      &--disabled {
+        &::after {
+          @include disabled-checkbox;
+        }
+
+        &:hover {
+          &::after {
+            @include disabled-checkbox;
+          }
+        }
+      }
+
       &::before {
         @include position(absolute, 50% null null 50%);
         transform: rotate(45deg);
@@ -41,6 +53,7 @@
         border-top: 0;
         border-left: 0;
         content: "";
+        z-index: 9;
       }
     }
   }
@@ -109,6 +122,10 @@
     padding-left: $pad-small;
     display: inline-block;
     vertical-align: top;
+
+    &--disabled {
+      color: $ui-fleet-black-50;
+    }
   }
 
   &__label-tooltip {
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/components/TeamHostExpiryToggle/TeamHostExpiryToggle.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/components/TeamHostExpiryToggle/TeamHostExpiryToggle.tsx
index dd46c48cff..90d07f9f06 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/components/TeamHostExpiryToggle/TeamHostExpiryToggle.tsx
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/components/TeamHostExpiryToggle/TeamHostExpiryToggle.tsx
@@ -48,32 +48,26 @@ const TeamHostExpiryToggle = ({
       <Checkbox
         name="enableHostExpiry"
         onChange={setTeamExpiryEnabled}
-        value={teamExpiryEnabled || globalHostExpiryEnabled}
-        wrapperClassName={
-          globalHostExpiryEnabled
-            ? `${baseClass}__disabled-team-host-expiry-toggle`
-            : ""
-        }
+        value={teamExpiryEnabled || globalHostExpiryEnabled} // Still shows checkmark if global expiry is enabled though the checkbox will be disabled.
+        disabled={globalHostExpiryEnabled}
         helpText={renderHelpText()}
         tooltipContent={
-          !globalHostExpiryEnabled && (
-            <>
-              When enabled, allows automatic cleanup of
+          <>
+            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 />
-              hosts that have not communicated with Fleet in
-              <br />
-              the number of days specified in the{" "}
-              <strong>
-                Host expiry
-                <br />
-                window
-              </strong>{" "}
-              setting.{" "}
-              <em>
-                (Default: <strong>Off</strong>)
-              </em>
-            </>
-          )
+              window
+            </strong>{" "}
+            setting.{" "}
+            <em>
+              (Default: <strong>Off</strong>)
+            </em>
+          </>
         }
       >
         Enable host expiry
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/components/TeamHostExpiryToggle/_styles.scss b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/components/TeamHostExpiryToggle/_styles.scss
index 43791035fd..3f18097166 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/components/TeamHostExpiryToggle/_styles.scss
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/components/TeamHostExpiryToggle/_styles.scss
@@ -1,8 +1,4 @@
 .team-host-expiry-toggle {
-  &__disabled-team-host-expiry-toggle > .fleet-checkbox {
-    @include disabled;
-  }
-
   &__add-custom-window {
     display: inline-flex;
     align-items: center;
diff --git a/frontend/styles/var/mixins.scss b/frontend/styles/var/mixins.scss
index a600c5c848..e786ab7696 100644
--- a/frontend/styles/var/mixins.scss
+++ b/frontend/styles/var/mixins.scss
@@ -117,6 +117,13 @@ $max-width: 2560px;
   cursor: default;
 }
 
+@mixin disabled-checkbox {
+  background-color: $ui-fleet-black-25;
+  border-color: $ui-fleet-black-25;
+  pointer-events: none;
+  cursor: default;
+}
+
 @mixin grey-text {
   color: $ui-fleet-black-75;
 }