Frontend: Cleanup 42 js warnings (#16219)

frontend/components/DeviceUserError/DeviceUserError.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
 import DeviceUserError from "./DeviceUserError";

frontend/components/FleetMarkdown/FleetMarkdown.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
 import FleetMarkdown from "./FleetMarkdown";

frontend/components/LastUpdatedText/LastUpdatedText.stories.tsx

@@ -16,7 +16,7 @@ type Story = StoryObj<typeof LastUpdatedText>;
 
 export const Basic: Story = {};
 
-export const withLastUpdatedAt: Story = {
+export const WithLastUpdatedAt: Story = {
   args: {
     lastUpdatedAt: "2021-01-01T00:00:00Z",
   },

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

@@ -1,4 +1,4 @@
-import React, { Children } from "react";
+import React from "react";
 import { render, screen } from "@testing-library/react";
 import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 

frontend/components/forms/ChangeEmailForm/ChangeEmailForm.jsx

@@ -21,7 +21,7 @@ class ChangeEmailForm extends Component {
     const { fields, handleSubmit, onCancel } = this.props;
 
     return (
-      <form onSubmit={handleSubmit}>
+      <form className={baseClass} onSubmit={handleSubmit}>
         To update your email you must confirm your password.
         <InputField
           {...fields.password}

frontend/components/forms/fields/InputField/InputField.stories.jsx

@@ -1,6 +1,3 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-
 import InputField from ".";
 
 const meta = {

frontend/pages/DashboardPage/cards/ActivityFeed/ActivityFeed.tsx

@@ -60,7 +60,7 @@ const ActivityFeed = ({
     {
       keepPreviousData: true,
       staleTime: 5000,
-      onSuccess: (data) => {
+      onSuccess: () => {
         setShowActivityFeedTitle(true);
       },
       onError: () => {

frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/ActivityItem.tests.tsx

@@ -5,8 +5,6 @@ import createMockActivity from "__mocks__/activityMock";
 import createMockQuery from "__mocks__/queryMock";
 import { createMockTeamSummary } from "__mocks__/teamMock";
 import { ActivityType } from "interfaces/activity";
-import { createCustomRenderer } from "test/test-utils";
-import createMockConfig from "__mocks__/configMock";
 
 import ActivityItem from ".";
 

frontend/pages/LabelPage/LabelPage.tsx

@@ -54,22 +54,22 @@ const LabelPage = ({
   );
   const { renderFlash } = useContext(NotificationContext);
 
-  const { data: labels, error: labelsError } = useQuery<
-    ILabelsResponse,
-    Error,
-    ILabel[]
-  >(["labels"], () => labelsAPI.loadAll(), {
-    select: (data: ILabelsResponse) => data.labels,
-    onSuccess: (responseLabels: ILabel[]) => {
-      if (params.label_id) {
-        const selectLabel = responseLabels.find(
-          (label) => label.id === parseInt(params.label_id, 10)
-        );
-        setSelectedLabel(selectLabel);
-        setIsLoading(false);
-      }
-    },
-  });
+  const { error: labelsError } = useQuery<ILabelsResponse, Error, ILabel[]>(
+    ["labels"],
+    () => labelsAPI.loadAll(),
+    {
+      select: (data: ILabelsResponse) => data.labels,
+      onSuccess: (responseLabels: ILabel[]) => {
+        if (params.label_id) {
+          const selectLabel = responseLabels.find(
+            (label) => label.id === parseInt(params.label_id, 10)
+          );
+          setSelectedLabel(selectLabel);
+          setIsLoading(false);
+        }
+      },
+    }
+  );
 
   const onCloseSchemaSidebar = () => {
     setSidePanelOpen(false);
@@ -145,7 +145,7 @@ const LabelPage = ({
           "Label created. Try refreshing this page in just a moment to see the updated host count for your label."
         );
       })
-      .catch((updateError: any) => {
+      .catch((updateError: { data: IApiError }) => {
         if (updateError.data.errors[0].reason.includes("Duplicate")) {
           setLabelValidator({
             name: "A label with this name already exists",

frontend/pages/LoginPage/LoginPage.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useContext, useCallback } from "react";
 import { useQuery } from "react-query";
 import { InjectedRouter } from "react-router";
-import { size } from "lodash";
 import { AxiosError } from "axios";
 
 import paths from "router/paths";
@@ -62,21 +61,17 @@ const LoginPage = ({ router, location }: ILoginPageProps) => {
 
   const [errors, setErrors] = useState<Record<string, string>>({});
 
-  const {
-    data: ssoSettings,
-    isLoading: isLoadingSSOSettings,
-    error: errorSSOSettings,
-  } = useQuery<ISSOSettingsResponse, Error, ISSOSettings>(
-    ["ssoSettings"],
-    () => sessionsAPI.ssoSettings(),
-    {
-      enabled: !currentUser,
-      onError: (err) => {
-        console.error(err);
-      },
-      select: (data) => data.settings,
-    }
-  );
+  const { data: ssoSettings, isLoading: isLoadingSSOSettings } = useQuery<
+    ISSOSettingsResponse,
+    Error,
+    ISSOSettings
+  >(["ssoSettings"], () => sessionsAPI.ssoSettings(), {
+    enabled: !currentUser,
+    onError: (err) => {
+      console.error(err);
+    },
+    select: (data) => data.settings,
+  });
 
   useEffect(() => {
     // this only needs to run once so we can wrap it in useEffect to avoid unneccesary third-party

frontend/pages/LoginPage/LoginPreviewPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useEffect, useContext } from "react";
 import { InjectedRouter } from "react-router";
 
 import paths from "router/paths";

frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/components/DiskEncryptionTable/DiskEncryptionTable.tsx

@@ -1,7 +1,6 @@
-import React, { useContext } from "react";
+import React from "react";
 import { useQuery } from "react-query";
 
-import { AppContext } from "context/app";
 import mdmAPI, { IDiskEncryptionSummaryResponse } from "services/entities/mdm";
 
 import TableContainer from "components/TableContainer";

frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx

@@ -73,7 +73,7 @@ const TargetSection = ({
 
   // We make the call at this component as multiple children components need
   // this data.
-  const { data: teamData, isLoading: isLoadingTeam, isError } = useQuery<
+  const { data: teamData, isLoading: isLoadingTeam } = useQuery<
     ILoadTeamResponse,
     Error,
     ITeamConfig

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/RequestCSRModal/RequestCSRModal.tsx

@@ -1,4 +1,4 @@
-import React, { FormEvent, useState, useContext, useEffect } from "react";
+import React, { FormEvent, useState, useContext } from "react";
 
 import { AppContext } from "context/app";
 

frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import classnames from "classnames";
 
 import Button from "components/buttons/Button";
 // @ts-ignore

frontend/pages/admin/UserManagementPage/components/SelectRoleForm/SelectRoleForm.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useContext } from "react";
 
 import { ITeam } from "interfaces/team";
-import { IRole } from "interfaces/role";
 import { UserRole } from "interfaces/user";
 // ignore TS error for now until these are rewritten in ts.
 // @ts-ignore
@@ -18,8 +17,6 @@ interface ISelectRoleFormProps {
   isApiOnly?: boolean;
 }
 
-const baseClass = "select-role-form";
-
 const generateSelectedTeamData = (
   allTeams: ITeam[],
   updatedTeam?: any

frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useContext, useMemo } from "react";
 import { InjectedRouter } from "react-router";
 import { useQuery } from "react-query";
-import memoize from "memoize-one";
 
 import paths from "router/paths";
 import { IApiError } from "interfaces/errors";

frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx

@@ -383,7 +383,7 @@ const allHostTableHeaders: IDataColumn[] = [
   },
   {
     title: "MDM status",
-    Header: (cellProps: IHeaderProps): JSX.Element => {
+    Header: (): JSX.Element => {
       const titleWithToolTip = (
         <TooltipWrapper
           tipContent={
@@ -414,7 +414,7 @@ const allHostTableHeaders: IDataColumn[] = [
   },
   {
     title: "MDM server URL",
-    Header: (cellProps: IHeaderProps): JSX.Element => {
+    Header: (): JSX.Element => {
       const titleWithToolTip = (
         <TooltipWrapper
           tipContent={

frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx

@@ -14,7 +14,6 @@ import {
   MdmProfileStatus,
 } from "interfaces/mdm";
 import { IMunkiIssuesAggregate } from "interfaces/macadmins";
-import { ISoftware } from "interfaces/software";
 import { IPolicy } from "interfaces/policy";
 import {
   HOSTS_QUERY_PARAMS,

frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx

@@ -154,7 +154,7 @@ const HostDetailsPage = ({
   const [refetchStartTime, setRefetchStartTime] = useState<number | null>(null);
   const [showRefetchSpinner, setShowRefetchSpinner] = useState(false);
   const [schedule, setSchedule] = useState<IQueryStats[]>();
-  const [packsState, setPacksState] = useState<IPackStats[]>();
+  const [packsState, setPackState] = useState<IPackStats[]>();
   const [hostSoftware, setHostSoftware] = useState<ISoftware[]>([]);
   const [usersState, setUsersState] = useState<{ username: string }[]>([]);
   const [usersSearchString, setUsersSearchString] = useState("");

frontend/pages/hosts/details/HostDetailsPage/modals/DiskEncryptionKeyModal/DiskEncryptionKeyModal.tsx

@@ -5,7 +5,6 @@ import { IHostEncrpytionKeyResponse } from "interfaces/host";
 import hostAPI from "services/entities/hosts";
 
 import Modal from "components/Modal";
-import CustomLink from "components/CustomLink";
 import Button from "components/buttons/Button";
 import InputFieldHiddenContent from "components/forms/fields/InputFieldHiddenContent";
 import DataError from "components/DataError";

frontend/pages/hosts/details/cards/MunkiIssues/MunkiIssuesTableConfig.tsx

@@ -48,10 +48,6 @@ interface IDataColumn {
   // or one of the custom `filterTypes` defined for the `useTable` instance (see `DataTable`)
 }
 
-interface IMunkiIssueTableData extends IMunkiIssue {
-  time: string;
-}
-
 // NOTE: cellProps come from react-table
 // more info here https://react-table.tanstack.com/docs/api/useTable#cell-properties
 export const munkiIssuesTableHeaders: IDataColumn[] = [

frontend/pages/hosts/details/cards/Policies/Policies.tsx

@@ -1,17 +1,14 @@
 import React from "react";
 
 import { IHostPolicy } from "interfaces/policy";
-import InfoBanner from "components/InfoBanner";
 import TableContainer from "components/TableContainer";
-import CustomLink from "components/CustomLink";
 import EmptyTable from "components/EmptyTable";
 
 import {
   generatePolicyTableHeaders,
   generatePolicyDataSet,
 } from "./HostPoliciesTable/HostPoliciesTableConfig";
 import PolicyFailingCount from "./HostPoliciesTable/PolicyFailingCount";
-import { isValidPolicyResponse } from "../../../ManageHostsPage/helpers";
 
 interface IPoliciesProps {
   policies: IHostPolicy[];

frontend/pages/hosts/details/cards/Queries/HostQueries.tsx

@@ -87,7 +87,7 @@ const HostQueries = ({
   );
 
   return (
-    <div className="section section--host-queries">
+    <div className={`section section--${baseClass}`}>
       <p className="section__header">Queries</p>
       {!schedule || !schedule.length || isChromeOSHost ? (
         renderEmptyQueriesTab()

frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx

@@ -325,12 +325,12 @@ const generateTableHeaders = (
 };
 
 // The next update will match the next host count update, unless extra time is needed for hosts to send in their policy results.
-const nextPolicyUpdateMs = function (
+const nextPolicyUpdateMs = (
   policyItemUpdatedAtMs: Date,
   nextHostCountUpdateMs: number,
   hostCountUpdateIntervalMs: number,
   osqueryPolicyMs: number
-) {
+) => {
   let timeFromPolicyItemUpdateToNextHostCountUpdateMs =
     Date.now() - policyItemUpdatedAtMs.getTime() + nextHostCountUpdateMs;
   let additionalUpdateTimeMs = 0;

frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx

@@ -90,7 +90,6 @@ const ManageQueriesPage = ({
     filteredQueriesPath,
     isPremiumTier,
     isSandboxMode,
-    isGlobalObserver,
     config,
   } = useContext(AppContext);
   const { setLastEditedQueryBody, setSelectedQueryTargetsByType } = useContext(