UI: Add nice formatting and UX to log destinations in two places (#24396)

## Addresses #24363

<img width="1464" alt="Screenshot 2024-12-04 at 2 22 03 PM"
src="https://github.com/user-attachments/assets/0e935bc4-f9f1-41b9-b36c-3c7722ad5b95">
<img width="1464" alt="Screenshot 2024-12-04 at 2 21 11 PM"
src="https://github.com/user-attachments/assets/1b8e87d2-068c-4ef2-b46c-8cf57a1ab2c7">


- [x] Changes file added for user-visible changes in `changes/`, 
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

changes/24363-fancy-log-destination

@@ -0,0 +1 @@
+* Present a nicely formatted and more informative UI for log destination in two places.

frontend/components/LogDestinationIndicator/LogDestinationIndicator.tsx

@@ -5,6 +5,7 @@ import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 
 interface ILogDestinationIndicatorProps {
   logDestination: string;
+  excludeTooltip?: boolean;
 }
 
 const generateClassTag = (rawValue: string): string => {
@@ -16,7 +17,8 @@ const generateClassTag = (rawValue: string): string => {
 
 const LogDestinationIndicator = ({
   logDestination,
-}: ILogDestinationIndicatorProps): JSX.Element => {
+  excludeTooltip = false,
+}: ILogDestinationIndicatorProps) => {
   const classTag = generateClassTag(logDestination);
   const statusClassName = classnames(
     "log-destination-indicator",
@@ -108,7 +110,9 @@ const LogDestinationIndicator = ({
     }
   };
 
-  return (
+  return excludeTooltip ? (
+    <>{readableLogDestination()}</>
+  ) : (
     <TooltipWrapper tipContent={tooltipText()} className={statusClassName}>
       {readableLogDestination()}
     </TooltipWrapper>

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

@@ -7,15 +7,21 @@ import React, {
   useMemo,
 } from "react";
 import { InjectedRouter } from "react-router";
+
 import { pull, size } from "lodash";
 import classnames from "classnames";
 import { useDebouncedCallback } from "use-debounce";
+import { IAceEditor } from "react-ace/lib/types";
+import ReactTooltip from "react-tooltip";
+
 import { COLORS } from "styles/var/colors";
 
 import PATHS from "router/paths";
+
 import { AppContext } from "context/app";
 import { QueryContext } from "context/query";
 import { NotificationContext } from "context/notification";
+
 import {
   addGravatarUrlToResource,
   getCustomDropdownOptions,
@@ -30,7 +36,9 @@ import {
   INVALID_PLATFORMS_REASON,
   INVALID_PLATFORMS_FLASH_MESSAGE,
 } from "utilities/constants";
+
 import usePlatformCompatibility from "hooks/usePlatformCompatibility";
+
 import { getErrorReason, IApiError } from "interfaces/errors";
 import {
   ISchedulableQuery,
@@ -38,10 +46,8 @@ import {
   QueryLoggingOption,
 } from "interfaces/schedulable_query";
 import { SelectedPlatformString } from "interfaces/platform";
-import queryAPI from "services/entities/queries";
 
-import { IAceEditor } from "react-ace/lib/types";
-import ReactTooltip from "react-tooltip";
+import queryAPI from "services/entities/queries";
 
 import Avatar from "components/Avatar";
 import FleetAce from "components/FleetAce";
@@ -57,6 +63,8 @@ import TooltipWrapper from "components/TooltipWrapper";
 import Spinner from "components/Spinner";
 import Icon from "components/Icon/Icon";
 import AutoSizeInputField from "components/forms/fields/AutoSizeInputField";
+import LogDestinationIndicator from "components/LogDestinationIndicator";
+
 import SaveQueryModal from "../SaveQueryModal";
 import ConfirmSaveChangesModal from "../ConfirmSaveChangesModal";
 import DiscardDataOption from "../DiscardDataOption";
@@ -180,8 +188,6 @@ const EditQueryForm = ({
   const platformCompatibility = usePlatformCompatibility();
   const { setCompatiblePlatforms } = platformCompatibility;
 
-  const logDestination = config?.logging.result.plugin || "";
-
   const debounceSQL = useDebouncedCallback((sql: string) => {
     const { errors: newErrors } = validateQuerySQL(sql);
 
@@ -766,7 +772,14 @@ const EditQueryForm = ({
                   <>
                     Historical results will
                     {!lastEditedQueryAutomationsEnabled ? " not " : " "}be sent
-                    to your log destination: <b>{logDestination}</b>.
+                    to your log destination:{" "}
+                    <b>
+                      <LogDestinationIndicator
+                        logDestination={config?.logging.result.plugin || ""}
+                        excludeTooltip
+                      />
+                    </b>
+                    .
                   </>
                 }
               />

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

@@ -5,6 +5,20 @@ import { AppContext } from "context/app";
 
 import useDeepEffect from "hooks/useDeepEffect";
 
+import {
+  FREQUENCY_DROPDOWN_OPTIONS,
+  LOGGING_TYPE_OPTIONS,
+  MIN_OSQUERY_VERSION_OPTIONS,
+  SCHEDULE_PLATFORM_DROPDOWN_OPTIONS,
+} from "utilities/constants";
+
+import { SelectedPlatformString } from "interfaces/platform";
+import {
+  ICreateQueryRequestBody,
+  ISchedulableQuery,
+  QueryLoggingOption,
+} from "interfaces/schedulable_query";
+
 import Checkbox from "components/forms/fields/Checkbox";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
@@ -15,19 +29,9 @@ import TooltipWrapper from "components/TooltipWrapper";
 import Icon from "components/Icon";
 import Button from "components/buttons/Button";
 import Modal from "components/Modal";
-import {
-  FREQUENCY_DROPDOWN_OPTIONS,
-  LOGGING_TYPE_OPTIONS,
-  MIN_OSQUERY_VERSION_OPTIONS,
-  SCHEDULE_PLATFORM_DROPDOWN_OPTIONS,
-} from "utilities/constants";
 import RevealButton from "components/buttons/RevealButton";
-import { SelectedPlatformString } from "interfaces/platform";
-import {
-  ICreateQueryRequestBody,
-  ISchedulableQuery,
-  QueryLoggingOption,
-} from "interfaces/schedulable_query";
+import LogDestinationIndicator from "components/LogDestinationIndicator";
+
 import DiscardDataOption from "../DiscardDataOption";
 
 const baseClass = "save-query-modal";
@@ -90,8 +94,6 @@ const SaveQueryModal = ({
   );
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
 
-  const logDestination = config?.logging.result.plugin || "";
-
   const toggleAdvancedOptions = () => {
     setShowAdvancedOptions(!showAdvancedOptions);
   };
@@ -236,7 +238,14 @@ const SaveQueryModal = ({
           helpText={
             <>
               Historical results will {!automationsEnabled ? "not " : ""}be sent
-              to your log destination: <b>{logDestination}</b>.
+              to your log destination:{" "}
+              <b>
+                <LogDestinationIndicator
+                  logDestination={config?.logging.result.plugin || ""}
+                  excludeTooltip
+                />
+              </b>
+              .
             </>
           }
         />