Fleet UI: Users can see a tooltip on a disabled checkbox (#17664)

changes/16345-disabled-checkbox-tooltip

@@ -0,0 +1 @@
+- UI fix: users can see a tooltip on a disabled checkbox

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`}

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 {

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

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;

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;
 }