Fleet UI: Update discard data option link + styling (#41535)

frontend/pages/queries/edit/components/DiscardDataOption/DiscardDataOption.tsx

@@ -1,10 +1,12 @@
+import React, { useState } from "react";
+
+import { QueryLoggingOption } from "interfaces/schedulable_query";
+
+import Button from "components/buttons/Button";
 import Checkbox from "components/forms/fields/Checkbox";
 import Icon from "components/Icon";
 import InfoBanner from "components/InfoBanner";
 import TooltipWrapper from "components/TooltipWrapper";
-import { QueryLoggingOption } from "interfaces/schedulable_query";
-import React, { useState } from "react";
-import { Link } from "react-router";
 
 const baseClass = "discard-data-option";
 
@@ -22,11 +24,15 @@ const DiscardDataOption = ({
   setDiscardData,
 }: IDiscardDataOptionProps) => {
   const [forceEditDiscardData, setForceEditDiscardData] = useState(false);
-  const disable = queryReportsDisabled && !forceEditDiscardData;
+
+  const isDisabled = queryReportsDisabled && !forceEditDiscardData;
+  const isReportsLoggingIgnored =
+    selectedLoggingType === "differential" ||
+    selectedLoggingType === "differential_ignore_removals";
 
   const renderHelpText = () => (
-    <div className="help-text">
-      {disable ? (
+    <>
+      {isDisabled ? (
         <>
           This setting is ignored because reports in Fleet have been{" "}
           <TooltipWrapper
@@ -41,15 +47,17 @@ const DiscardDataOption = ({
               </>
             }
           >
-            {"globally disabled."}
-          </TooltipWrapper>{" "}
-          <Link
-            to=""
+            globally disabled.
+          </TooltipWrapper>
+          <Button
             onClick={(e: React.MouseEvent) => {
               e.preventDefault();
               setForceEditDiscardData(true);
             }}
+            variant="text-icon"
+            size="small"
             className={`${baseClass}__edit-anyway`}
+            iconStroke
           >
             <>
               Edit anyway
@@ -59,32 +67,27 @@ const DiscardDataOption = ({
                 size="small"
               />
             </>
-          </Link>
+          </Button>
         </>
       ) : (
         "The most recent results for each host will not be available in Fleet."
       )}
-    </div>
+    </>
   );
+
   return (
     <div className={baseClass}>
-      {["differential", "differential_ignore_removals"].includes(
-        selectedLoggingType
-      ) && (
-        <>
-          <InfoBanner color="grey">
-            The <b>Discard data</b> setting is ignored when differential logging
-            is enabled. This report&apos;s results will not be saved in Fleet.
-          </InfoBanner>
-        </>
+      {isReportsLoggingIgnored && (
+        <InfoBanner color="grey">
+          The <b>Discard data</b> setting is ignored when differential logging
+          is enabled. This report&apos;s results will not be saved in Fleet.
+        </InfoBanner>
       )}
       <Checkbox
         name="discardData"
         onChange={setDiscardData}
         value={discardData}
-        wrapperClassName={
-          disable ? `${baseClass}__disabled-discard-data-checkbox` : ""
-        }
+        disabled={isDisabled}
         helpText={renderHelpText()}
       >
         Discard data

frontend/pages/queries/edit/components/DiscardDataOption/_styles.scss

@@ -1,20 +1,13 @@
 .discard-data-option {
-  .info-banner {
-    margin-bottom: 1.5rem;
-    &__info {
-      line-height: 21px;
-    }
-  }
+  @include vertical-form-layout;
 
-  &__disabled-discard-data-checkbox > .fleet-checkbox {
-    @include disabled;
+  .info-banner {
+    margin-bottom: 0; // TODO: Remove when globally info-banner gaps do not rely on margin but flex gap
   }
 
   &__edit-anyway {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    font-weight: inherit;
-    font-size: inherit;
+    margin-top: -$pad-small; // Prevents help text jump from padded button disappearing when clicked
+    margin-bottom: -$pad-small; // Prevents help text jump from padded button disappearing when clicked
+    margin-left: $pad-small; // Space between text and button, can't use flex as we have a tooltip within text
   }
 }