🤖 Fix all outstanding eslint warnings

frontend/components/ActionsDropdown/ActionsDropdown.tsx

@@ -31,7 +31,7 @@ interface IActionsDropdownProps {
   variant?: "button" | "brand-button" | "small-button";
 }
 
-const getOptionBackgroundColor = (state: any) => {
+const getOptionBackgroundColor = (state: { isFocused: boolean }) => {
   return state.isFocused ? COLORS["ui-fleet-black-5"] : "transparent";
 };
 

frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tests.tsx

@@ -7,7 +7,6 @@ import {
   baseUrl,
 } from "test/test-utils";
 import mockServer from "test/mock-server";
-import { getDeviceVppCommandResultHandler } from "test/handlers/device-handler";
 import {
   createMockHostAppStoreApp,
   createMockHostSoftware,

frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx

@@ -60,9 +60,9 @@ const platformSubNav: IPlatformSubNav[] = [
 interface IPlatformWrapperProps {
   enrollSecret: string;
   onCancel: () => void;
-  certificate: any;
+  certificate: string | undefined;
   isFetchingCertificate: boolean;
-  fetchCertificateError: any;
+  fetchCertificateError: Error | null;
   config: IConfig | null;
 }
 
@@ -419,7 +419,7 @@ const PlatformWrapper = ({
                   <br />
                   {fetchCertificateError ? (
                     <span className={`${baseClass}__error`}>
-                      {fetchCertificateError}
+                      {fetchCertificateError?.message}
                     </span>
                   ) : (
                     <Button variant="inverse" onClick={onDownloadFlagfile}>

frontend/components/AuthenticationNav/AuthenticationNav.tsx

@@ -29,7 +29,7 @@ const AuthenticationNav = ({
     return () => {
       document.removeEventListener("keydown", closeWithEscapeKey);
     };
-  }, []);
+  }, [router]);
 
   const onClick = (): void => {
     if (previousLocation) {

frontend/components/Avatar/Avatar.tsx

@@ -2,7 +2,6 @@ import React, { useState, useCallback } from "react";
 import classnames from "classnames";
 
 import { COLORS } from "styles/var/colors";
-import { DEFAULT_GRAVATAR_LINK } from "utilities/constants";
 
 interface IFleetAvatarProps {
   className?: string;
@@ -123,10 +122,6 @@ const APIOnlyAvatar = ({ className }: IAPIOnlyAvatar) => {
   );
 };
 
-interface IDefaultAvatar {
-  className?: string;
-}
-
 const DefaultAvatar = ({ className }: IAPIOnlyAvatar) => {
   return (
     <svg

frontend/components/ClickableUrls/ClickableUrls.tsx

@@ -31,6 +31,7 @@ const ClickableUrls = ({ text, className }: IClickableUrls): JSX.Element => {
   return (
     <div
       className={clickableUrlClasses}
+      // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: sanitizedTextWithLinks }}
     />
   );

frontend/components/Editor/Editor.tsx

@@ -52,6 +52,7 @@ interface IEditorProps {
   isFormField?: boolean;
   maxLines?: number;
   className?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange?: (value: string, event?: any) => void;
   onBlur?: () => void;
 }

frontend/components/FileUploader/FileUploader.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta<typeof FileUploader> = {
     accept: ".pdf",
     isLoading: false,
     onFileUpload: () => {
-      alert("File uploaded!");
+      console.log("File uploaded!");
     },
   },
 };

frontend/components/HumanTimeDiffWithDateTip/HumanTimeDiffWithDateTip.tsx

@@ -7,6 +7,7 @@ import ReactTooltip, { Place } from "react-tooltip";
 
 interface IHumanTimeDiffWithDateTip {
   timeString: string;
+  // eslint-disable-next-line react/no-unused-prop-types
   cutoffBeforeFleetLaunch?: boolean;
   tooltipPosition?: Place;
 }

frontend/components/LiveQuery/SelectTargets.tsx

@@ -285,7 +285,7 @@ const SelectTargets = ({
   useEffect(() => {
     const selected = [...targetedHosts, ...targetedLabels, ...targetedTeams];
     setSelectedTargets(selected);
-  }, [targetedHosts, targetedLabels, targetedTeams]);
+  }, [targetedHosts, targetedLabels, targetedTeams, setSelectedTargets]);
 
   useEffect(() => {
     labelsSummary && setLabels(parseLabels(labelsSummary));
@@ -294,7 +294,7 @@ const SelectTargets = ({
   useEffect(() => {
     setIsDebouncing(true);
     debounceSearch(searchTextHosts);
-  }, [searchTextHosts]);
+  }, [searchTextHosts, debounceSearch]);
 
   const handleClickCancel = () => {
     goToQueryEditor();

frontend/components/Modal/Modal.tsx

@@ -84,6 +84,7 @@ const Modal = ({
         document.removeEventListener("keydown", closeOrSaveWithEnterKey);
       };
     }
+    return undefined;
   }, [onEnter]);
 
   const backgroundClasses = classnames(`${baseClass}__background`, {

frontend/components/PaginatedList/PaginatedList.tests.tsx

@@ -47,13 +47,6 @@ describe("PaginatedList", () => {
     },
   ];
 
-  const fetchTinyPage = (pageNumber: number) => {
-    if (pageNumber <= 2) {
-      return [items[pageNumber]];
-    }
-    throw new Error("Invalid page number");
-  };
-
   const fetchSmallPage = (pageNumber: number) => {
     if (pageNumber === 0) {
       return [items[0], items[1]];

frontend/components/PaginatedList/PaginatedList.tsx

@@ -75,6 +75,7 @@ interface IPaginatedListProps<TItem> {
   helpText?: React.ReactNode;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function PaginatedListInner<TItem extends Record<string, any>>(
   {
     data,
@@ -104,7 +105,7 @@ function PaginatedListInner<TItem extends Record<string, any>>(
   const [dirtyItems, setDirtyItems] = useState<Record<string | number, TItem>>(
     {}
   );
-  const [error, setError] = useState<Error | null>(null);
+  const [error] = useState<Error | null>(null);
   const idKey = _idKey ?? "id";
   const labelKey = _labelKey ?? "name";
   const pageSize = _pageSize ?? 20;

frontend/components/PlatformCompatibility/PlatformCompatibility.tests.tsx

@@ -38,7 +38,7 @@ describe("Platform compatibility", () => {
   it("renders error state", () => {
     render(
       <PlatformCompatibility
-        compatiblePlatforms={["macos"]}
+        compatiblePlatforms={["darwin"]}
         error={{ name: "Error", message: "The resource was not found." }}
       />
     );

frontend/components/PlatformCompatibility/PlatformCompatibility.tsx

@@ -11,7 +11,7 @@ import TooltipWrapper from "components/TooltipWrapper";
 import Icon from "components/Icon";
 
 interface IPlatformCompatibilityProps {
-  compatiblePlatforms: any[] | null;
+  compatiblePlatforms: QueryablePlatform[] | null;
   error: Error | null;
 }
 

frontend/components/SQLEditor/SQLEditor.tsx

@@ -91,12 +91,12 @@ const SQLEditor = ({
     [`${baseClass}__wrapper--readonly-copy`]: !!isReadonlyCopy,
   });
 
-  const onClickCopy = () => {
+  const onClickCopy = useCallback(() => {
     stringToClipboard(value || "").then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     });
-  };
+  }, [value]);
 
   const fixHotkeys = (editor: Ace.Editor) => {
     editor.commands.removeCommand("gotoline");
@@ -261,7 +261,7 @@ const SQLEditor = ({
     onLoad && onLoad(editor);
   };
 
-  const onBlurHandler = (event: any, editor?: Ace.Editor): void => {
+  const onBlurHandler = (_event: unknown, editor?: Ace.Editor): void => {
     onBlur && onBlur(editor);
   };
 
@@ -313,7 +313,7 @@ const SQLEditor = ({
         </div>
       </div>
     );
-  }, [error, label, labelActionComponent, enableCopy, copied]);
+  }, [error, label, labelActionComponent, enableCopy, copied, onClickCopy]);
 
   const renderHelpText = () => {
     if (helpText) {

frontend/components/SyntaxHighlightedCode/SyntaxHighlightedCode.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { syntaxHighlight } from "utilities/helpers";
+
+interface ISyntaxHighlightedCodeProps {
+  json: unknown;
+  className?: string;
+}
+
+/**
+ * Renders a JSON object as syntax-highlighted HTML inside a <pre> tag.
+ *
+ * This component wraps the `syntaxHighlight` utility which generates safe HTML
+ * from trusted JSON data (all HTML entities are escaped before span tags are
+ * added for styling). The dangerouslySetInnerHTML usage is intentional and safe
+ * because the content is never derived from user input — it is always
+ * serialized from a controlled JavaScript object.
+ */
+const SyntaxHighlightedCode = ({
+  json,
+  className,
+}: ISyntaxHighlightedCodeProps): JSX.Element => {
+  return (
+    <pre
+      className={className}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: syntaxHighlight(json) }}
+    />
+  );
+};
+
+export default SyntaxHighlightedCode;

frontend/components/SyntaxHighlightedCode/index.ts

@@ -0,0 +1 @@
+export { default } from "./SyntaxHighlightedCode";

frontend/components/TableContainer/DataTable/ActionButton/ActionButton.tsx

@@ -31,7 +31,7 @@ function useActionCallback(
   callbackFn: (targetIds: number[]) => void | undefined
 ) {
   return useCallback(
-    (targetIds: any) => {
+    (targetIds: number[]) => {
       callbackFn(targetIds);
     },
     [callbackFn]

frontend/components/TableContainer/DataTable/DataTable.tests.tsx

@@ -176,6 +176,7 @@ describe("DataTable - component", () => {
       },
     ];
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const data: any = [];
 
     render(