Frontend: Cleanup implied types, unused imports and variables (#7439)

frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx

@@ -7,8 +7,6 @@ import { NotificationContext } from "context/notification";
 import { AppContext } from "context/app";
 // @ts-ignore
 import { stringToClipboard } from "utilities/copy_text";
-import { ITeam } from "interfaces/team";
-import { IEnrollSecret } from "interfaces/enroll_secret";
 
 import configAPI from "services/entities/config";
 
@@ -67,8 +65,8 @@ const PlatformWrapper = ({
   const { config, isPreviewMode } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
   const [copyMessage, setCopyMessage] = useState<Record<string, string>>({});
-  const [includeFleetDesktop, setIncludeFleetDesktop] = useState<boolean>(true);
-  const [showPlainOsquery, setShowPlainOsquery] = useState<boolean>(false);
+  const [includeFleetDesktop, setIncludeFleetDesktop] = useState(true);
+  const [showPlainOsquery, setShowPlainOsquery] = useState(false);
 
   const {
     data: certificate,

frontend/components/App/App.tsx

@@ -48,7 +48,7 @@ const App = ({ children, location }: IAppProps): JSX.Element => {
     setSandboxExpiry,
   } = useContext(AppContext);
 
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const fetchConfig = async () => {
     try {

frontend/components/Avatar/Avatar.tsx

@@ -16,8 +16,8 @@ export interface IAvatarInterface {
 const baseClass = "avatar";
 
 const Avatar = ({ className, size, user }: IAvatarInterface): JSX.Element => {
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [isError, setIsError] = useState<boolean>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
 
   const onLoad = useCallback(() => {
     setIsLoading(false);

frontend/components/DeleteSecretModal/DeleteSecretModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";
 import { ITeam } from "interfaces/team";

frontend/components/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx

@@ -28,8 +28,8 @@ const EnrollSecretRow = ({
   toggleDeleteSecretModal,
   setSelectedSecret,
 }: IEnrollSecretRowProps): JSX.Element | null => {
-  const [showSecret, setShowSecret] = useState<boolean>(false);
-  const [copyMessage, setCopyMessage] = useState<string>("");
+  const [showSecret, setShowSecret] = useState(false);
+  const [copyMessage, setCopyMessage] = useState("");
 
   const onCopySecret = (evt: React.MouseEvent) => {
     evt.preventDefault();

frontend/components/LiveQuery/SelectTargets.tsx

@@ -138,9 +138,9 @@ const SelectTargets = ({
 
   const [labels, setLabels] = useState<ILabelsByType | null>(null);
   const [inputTabIndex, setInputTabIndex] = useState<number | null>(null);
-  const [searchText, setSearchText] = useState<string>("");
-  const [debouncedSearchText, setDebouncedSearchText] = useState<string>("");
-  const [isDebouncing, setIsDebouncing] = useState<boolean>(false);
+  const [searchText, setSearchText] = useState("");
+  const [debouncedSearchText, setDebouncedSearchText] = useState("");
+  const [isDebouncing, setIsDebouncing] = useState(false);
 
   const debounceSearch = useDebouncedCallback(
     (search: string) => {

frontend/components/SecretEditorModal/SecretEditorModal.tsx

@@ -38,7 +38,7 @@ const SecretEditorModal = ({
   selectedSecret,
   isUpdatingSecret,
 }: ISecretEditorModalProps): JSX.Element => {
-  const [enrollSecretString, setEnrollSecretString] = useState<string>(
+  const [enrollSecretString, setEnrollSecretString] = useState(
     selectedSecret ? selectedSecret.secret : randomSecretGenerator()
   );
   const [errors, setErrors] = useState<{ [key: string]: string }>({});

frontend/components/SecretField/SecretField.tsx

@@ -15,8 +15,8 @@ interface ISecretFieldProps {
   secret: string | null;
 }
 const SecretField = ({ secret }: ISecretFieldProps): JSX.Element | null => {
-  const [showSecret, setShowSecret] = useState<boolean>(false);
-  const [copyMessage, setCopyMessage] = useState<string>("");
+  const [showSecret, setShowSecret] = useState(false);
+  const [copyMessage, setCopyMessage] = useState("");
 
   const onCopySecret = (evt: React.MouseEvent) => {
     evt.preventDefault();

frontend/components/TableContainer/TableContainer.tsx

@@ -143,7 +143,7 @@ const TableContainer = ({
   const [sortDirection, setSortDirection] = useState(
     defaultSortDirection || ""
   );
-  const [pageIndex, setPageIndex] = useState<number>(DEFAULT_PAGE_INDEX);
+  const [pageIndex, setPageIndex] = useState(DEFAULT_PAGE_INDEX);
   const [clientFilterCount, setClientFilterCount] = useState<number>();
 
   const prevPageIndex = useRef(0);

frontend/components/forms/packs/EditPackForm/EditPackForm.tsx

@@ -55,10 +55,8 @@ const EditPackForm = ({
   isUpdatingPack,
 }: IEditPackForm): JSX.Element => {
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
-  const [packName, setPackName] = useState<string>(formData.name);
-  const [packDescription, setPackDescription] = useState<string>(
-    formData.description
-  );
+  const [packName, setPackName] = useState(formData.name);
+  const [packDescription, setPackDescription] = useState(formData.description);
   const [packFormTargets, setPackFormTargets] = useState<ITarget[]>(
     formData.targets
   );

frontend/components/forms/packs/PackForm/PackForm.tsx

@@ -37,8 +37,8 @@ const EditPackForm = ({
   isUpdatingPack,
 }: IPackForm): JSX.Element => {
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
-  const [packName, setPackName] = useState<string>("");
-  const [packDescription, setPackDescription] = useState<string>("");
+  const [packName, setPackName] = useState("");
+  const [packDescription, setPackDescription] = useState("");
   const [packFormTargets, setPackFormTargets] = useState<ITarget[] | []>([]);
 
   const onChangePackName = (value: string) => {

frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx

@@ -29,7 +29,7 @@ const PackQueriesTable = ({
   scheduledQueries,
   isLoadingPackQueries,
 }: IPackQueriesTableProps): JSX.Element => {
-  const [querySearchText, setQuerySearchText] = useState<string>("");
+  const [querySearchText, setQuerySearchText] = useState("");
 
   // NOTE: this is called once on the initial rendering. The initial render of
   // the TableContainer child component will call this handler.

frontend/docs/patterns.md

@@ -45,7 +45,7 @@ All Javascript and React files use Typescript, meaning the extensions are `.ts`
 
 - Local states
 ```typescript
-const [item, setItem] = useState<string>("");
+const [item, setItem] = useState("");
 ```
 
 - Fetch function signatures (i.e. `react-query`)
@@ -112,7 +112,7 @@ of React. Hooks are only allowed in functional components, which are created lik
 import React, { useState, useEffect } from "React";
 
 const PageOrComponent = (props) => {
-  const [item, setItem] = useState<string>("");
+  const [item, setItem] = useState("");
 
   // runs only on first mount (replaces componentDidMount)
   useEffect(() => {

frontend/hooks/usePlaformSelector.tsx

@@ -16,9 +16,9 @@ const usePlatformSelector = (
   platformContext: IPlatformString | null | undefined,
   baseClass = ""
 ): IPlatformSelector => {
-  const [checkDarwin, setCheckDarwin] = useState<boolean>(false);
-  const [checkWindows, setCheckWindows] = useState<boolean>(false);
-  const [checkLinux, setCheckLinux] = useState<boolean>(false);
+  const [checkDarwin, setCheckDarwin] = useState(false);
+  const [checkWindows, setCheckWindows] = useState(false);
+  const [checkLinux, setCheckLinux] = useState(false);
 
   const checksByPlatform: Record<string, boolean> = {
     darwin: checkDarwin,

frontend/layouts/CoreLayout/CoreLayout.tsx

@@ -37,10 +37,9 @@ const CoreLayout = ({ children, router }: ICoreLayoutProps) => {
   const { config, currentUser, isPremiumTier } = useContext(AppContext);
   const { notification, hideFlash } = useContext(NotificationContext);
   const { setResetSelectedRows } = useContext(TableContext);
-  const [
-    showExpirationFlashMessage,
-    setShowExpirationFlashMessage,
-  ] = useState<boolean>(false);
+  const [showExpirationFlashMessage, setShowExpirationFlashMessage] = useState(
+    false
+  );
 
   // on success of an action, the table will reset its checkboxes.
   // setTimeout is to help with race conditions as table reloads

frontend/pages/ForgotPasswordPage/ForgotPasswordPage.tsx

@@ -13,9 +13,9 @@ import Spinner from "components/Spinner";
 import ExternalURLIcon from "../../../assets/images/icon-external-url-12x12@2x.png";
 
 const ForgotPasswordPage = () => {
-  const [email, setEmail] = useState<string>("");
+  const [email, setEmail] = useState("");
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const baseClass = "forgot-password";
 

frontend/pages/Homepage/Homepage.tsx

@@ -52,24 +52,20 @@ const Homepage = (): JSX.Element => {
     setCurrentTeam,
   } = useContext(AppContext);
 
-  const [selectedPlatform, setSelectedPlatform] = useState<string>("");
+  const [selectedPlatform, setSelectedPlatform] = useState("");
   const [labels, setLabels] = useState<ILabelSummary[]>();
-  const [macCount, setMacCount] = useState<number>(0);
-  const [windowsCount, setWindowsCount] = useState<number>(0);
-  const [linuxCount, setLinuxCount] = useState<number>(0);
-  const [onlineCount, setOnlineCount] = useState<number>(0);
-  const [offlineCount, setOfflineCount] = useState<number>(0);
-  const [showActivityFeedTitle, setShowActivityFeedTitle] = useState<boolean>(
-    false
-  );
-  const [showSoftwareUI, setShowSoftwareUI] = useState<boolean>(false);
-  const [showMunkiUI, setShowMunkiUI] = useState<boolean>(false);
-  const [showMDMUI, setShowMDMUI] = useState<boolean>(false);
-  const [showAddHostsModal, setShowAddHostsModal] = useState<boolean>(false);
-  const [showOperatingSystemsUI, setShowOperatingSystemsUI] = useState<boolean>(
-    false
-  );
-  const [showHostsUI, setShowHostsUI] = useState<boolean>(false); // Hides UI on first load only
+  const [macCount, setMacCount] = useState(0);
+  const [windowsCount, setWindowsCount] = useState(0);
+  const [linuxCount, setLinuxCount] = useState(0);
+  const [onlineCount, setOnlineCount] = useState(0);
+  const [offlineCount, setOfflineCount] = useState(0);
+  const [showActivityFeedTitle, setShowActivityFeedTitle] = useState(false);
+  const [showSoftwareUI, setShowSoftwareUI] = useState(false);
+  const [showMunkiUI, setShowMunkiUI] = useState(false);
+  const [showMDMUI, setShowMDMUI] = useState(false);
+  const [showAddHostsModal, setShowAddHostsModal] = useState(false);
+  const [showOperatingSystemsUI, setShowOperatingSystemsUI] = useState(false);
+  const [showHostsUI, setShowHostsUI] = useState(false); // Hides UI on first load only
 
   const canEnrollHosts =
     isGlobalAdmin || isGlobalMaintainer || isTeamAdmin || isTeamMaintainer;
@@ -124,24 +120,20 @@ const Homepage = (): JSX.Element => {
     }
   );
 
-  const {
-    isLoading: isGlobalSecretsLoading,
-    data: globalSecrets,
-    refetch: refetchGlobalSecrets,
-  } = useQuery<IEnrollSecretsResponse, Error, IEnrollSecret[]>(
-    ["global secrets"],
-    () => enrollSecretsAPI.getGlobalEnrollSecrets(),
-    {
-      enabled: !!canEnrollGlobalHosts,
-      select: (data: IEnrollSecretsResponse) => data.secrets,
-    }
-  );
+  const { isLoading: isGlobalSecretsLoading, data: globalSecrets } = useQuery<
+    IEnrollSecretsResponse,
+    Error,
+    IEnrollSecret[]
+  >(["global secrets"], () => enrollSecretsAPI.getGlobalEnrollSecrets(), {
+    enabled: !!canEnrollGlobalHosts,
+    select: (data: IEnrollSecretsResponse) => data.secrets,
+  });
 
-  const {
-    isLoading: isTeamSecretsLoading,
-    data: teamSecrets,
-    refetch: refetchTeamSecrets,
-  } = useQuery<IEnrollSecretsResponse, Error, IEnrollSecret[]>(
+  const { data: teamSecrets } = useQuery<
+    IEnrollSecretsResponse,
+    Error,
+    IEnrollSecret[]
+  >(
     ["team secrets", currentTeam],
     () => {
       if (currentTeam) {

frontend/pages/Homepage/cards/ActivityFeed/ActivityFeed.tsx

@@ -74,8 +74,8 @@ const TAGGED_TEMPLATES = {
 const ActivityFeed = ({
   setShowActivityFeedTitle,
 }: IActvityCardProps): JSX.Element => {
-  const [pageIndex, setPageIndex] = useState<number>(0);
-  const [showMore, setShowMore] = useState<boolean>(true);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [showMore, setShowMore] = useState(true);
 
   const {
     data: activities,

frontend/pages/Homepage/cards/MDM/MDM.tsx

@@ -67,7 +67,7 @@ const MDM = ({
   setShowMDMUI,
   setTitleDetail,
 }: IMDMCardProps): JSX.Element => {
-  const [navTabIndex, setNavTabIndex] = useState<number>(0);
+  const [navTabIndex, setNavTabIndex] = useState(0);
   const [formattedMDMData, setFormattedMDMData] = useState<
     IDataTableMDMFormat[]
   >([]);

frontend/pages/Homepage/cards/Software/Software.tsx

@@ -35,9 +35,9 @@ const Software = ({
   setActionURL,
   setTitleDetail,
 }: ISoftwareCardProps): JSX.Element => {
-  const [navTabIndex, setNavTabIndex] = useState<number>(0);
-  const [pageIndex, setPageIndex] = useState<number>(0);
-  const [isSoftwareEnabled, setIsSoftwareEnabled] = useState<boolean>();
+  const [navTabIndex, setNavTabIndex] = useState(0);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [isSoftwareEnabled, setIsSoftwareEnabled] = useState(false);
 
   const { availableTeams, currentTeam, isOnGlobalTeam } = useContext(
     AppContext

frontend/pages/Homepage/cards/WelcomeHost/WelcomeHost.tsx

@@ -41,12 +41,11 @@ const WelcomeHost = ({
   const { renderFlash } = useContext(NotificationContext);
   const [refetchStartTime, setRefetchStartTime] = useState<number | null>(null);
   const [currentPolicyShown, setCurrentPolicyShown] = useState<IHostPolicy>();
-  const [showPolicyModal, setShowPolicyModal] = useState<boolean>(false);
-  const [isPoliciesEmpty, setIsPoliciesEmpty] = useState<boolean>(false);
-  const [
-    showRefetchLoadingSpinner,
-    setShowRefetchLoadingSpinner,
-  ] = useState<boolean>(false);
+  const [showPolicyModal, setShowPolicyModal] = useState(false);
+  const [isPoliciesEmpty, setIsPoliciesEmpty] = useState(false);
+  const [showRefetchLoadingSpinner, setShowRefetchLoadingSpinner] = useState(
+    false
+  );
 
   const {
     isLoading: isLoadingHost,

frontend/pages/LoginPage/LoginPage.tsx

@@ -55,7 +55,7 @@ const LoginPage = ({ router, location }: ILoginPageProps) => {
   } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
   const { redirectLocation } = useContext(RoutingContext);
-  const [loginVisible, setLoginVisible] = useState<boolean>(true);
+  const [loginVisible, setLoginVisible] = useState(true);
   const [ssoSettings, setSSOSettings] = useState<ISSOSettings>();
   const [pageStatus, setPageStatus] = useState<string | null>(
     new URLSearchParams(location.search).get("status")

frontend/pages/LoginPage/LoginPreviewPage.tsx

@@ -26,7 +26,7 @@ const LoginPreviewPage = ({ router }: ILoginPreviewPageProps): JSX.Element => {
     setCurrentUser,
     setCurrentTeam,
   } = useContext(AppContext);
-  const [loginVisible, setLoginVisible] = useState<boolean>(true);
+  const [loginVisible, setLoginVisible] = useState(true);
 
   const onSubmit = async (formData: ILoginData) => {
     const { HOME } = paths;

frontend/pages/UserSettingsPage/UserSettingsPage.tsx

@@ -38,14 +38,14 @@ interface IUserSettingsPageProps {
 const UserSettingsPage = ({
   router,
 }: IUserSettingsPageProps): JSX.Element | null => {
-  const { config, currentUser, isSandboxMode } = useContext(AppContext);
+  const { config, currentUser } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
 
-  const [pendingEmail, setPendingEmail] = useState<string>("");
-  const [showEmailModal, setShowEmailModal] = useState<boolean>(false);
-  const [showPasswordModal, setShowPasswordModal] = useState<boolean>(false);
+  const [pendingEmail, setPendingEmail] = useState("");
+  const [showEmailModal, setShowEmailModal] = useState(false);
+  const [showPasswordModal, setShowPasswordModal] = useState(false);
   const [updatedUser, setUpdatedUser] = useState<Partial<IUser>>({});
-  const [showApiTokenModal, setShowApiTokenModal] = useState<boolean>(false);
+  const [showApiTokenModal, setShowApiTokenModal] = useState(false);
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
   const [userErrors, setUserErrors] = useState<{ [key: string]: string }>({});
 

frontend/pages/admin/AppSettingsPage/cards/HostStatusWebhook/HostStatusWebhook.tsx

@@ -27,7 +27,7 @@ const HostStatusWebhook = ({
   const [
     showHostStatusWebhookPreviewModal,
     setShowHostStatusWebhookPreviewModal,
-  ] = useState<boolean>(false);
+  ] = useState(false);
   const [formData, setFormData] = useState<any>({
     enableHostStatusWebhook:
       appConfig.webhook_settings.host_status_webhook

frontend/pages/admin/AppSettingsPage/cards/Statistics/Statistics.tsx

@@ -19,10 +19,9 @@ const Statistics = ({
   handleSubmit,
   isUpdatingSettings,
 }: IAppConfigFormProps): JSX.Element => {
-  const [
-    showUsageStatsPreviewModal,
-    setShowUsageStatsPreviewModal,
-  ] = useState<boolean>(false);
+  const [showUsageStatsPreviewModal, setShowUsageStatsPreviewModal] = useState(
+    false
+  );
   const [formData, setFormData] = useState<any>({
     enableUsageStatistics: appConfig.server_settings.enable_analytics,
   });

frontend/pages/admin/AppSettingsPage/components/OrgSettingsForm/OrgSettingsForm.tsx

@@ -35,8 +35,8 @@ const OrgSettingsForm = ({
 
   const handlePageError = useErrorHandler();
 
-  const [activeSection, setActiveSection] = useState<string>("info");
-  const [isUpdatingSettings, setIsUpdatingSettings] = useState<boolean>(false);
+  const [activeSection, setActiveSection] = useState("info");
+  const [isUpdatingSettings, setIsUpdatingSettings] = useState(false);
 
   const { data: appConfig, isLoading, refetch: refetchConfig } = useQuery<
     IConfig,

frontend/pages/admin/IntegrationsPage/IntegrationsPage.tsx

@@ -54,9 +54,7 @@ const IntegrationsPage = (): JSX.Element => {
     integrationEditing,
     setIntegrationEditing,
   ] = useState<IIntegrationTableData>();
-  const [isUpdatingIntegration, setIsUpdatingIntegration] = useState<boolean>(
-    false
-  );
+  const [isUpdatingIntegration, setIsUpdatingIntegration] = useState(false);
   const [jiraIntegrations, setJiraIntegrations] = useState<
     IJiraIntegration[]
   >();
@@ -66,7 +64,7 @@ const IntegrationsPage = (): JSX.Element => {
   const [backendValidators, setBackendValidators] = useState<{
     [key: string]: string;
   }>({});
-  const [testingConnection, setTestingConnection] = useState<boolean>(false);
+  const [testingConnection, setTestingConnection] = useState(false);
 
   const {
     data: integrations,

frontend/pages/admin/IntegrationsPage/components/CreateIntegrationModal/CreateIntegrationModal.tsx

@@ -37,7 +37,7 @@ const CreateIntegrationModal = ({
   const [errors, setErrors] = useState<{ [key: string]: string }>(
     backendValidators
   );
-  const [destination, setDestination] = useState<string>("jira");
+  const [destination, setDestination] = useState("jira");
 
   const onDestinationChange = (value: string) => {
     setDestination(value);

frontend/pages/admin/IntegrationsPage/components/IntegrationForm/IntegrationForm.tsx

@@ -64,7 +64,7 @@ const IntegrationForm = ({
     enableSoftwareVulnerabilities:
       integrationEnableSoftwareVulnerabilities || false,
   });
-  const [integrationDestination, setIntegrationDestination] = useState<string>(
+  const [integrationDestination, setIntegrationDestination] = useState(
     integrationEditingType || destination || "jira"
   );
   const [urlError, setUrlError] = useState<string | null>(null);

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/MembersPage.tsx

@@ -58,18 +58,13 @@ const MembersPage = ({
   const smtpConfigured = config?.smtp_settings.configured || false;
   const canUseSso = config?.sso_settings.enable_sso || false;
 
-  const [showAddMemberModal, setShowAddMemberModal] = useState<boolean>(false);
-  const [showRemoveMemberModal, setShowRemoveMemberModal] = useState<boolean>(
-    false
-  );
-  const [showEditUserModal, setShowEditUserModal] = useState<boolean>(false);
-  const [showCreateUserModal, setShowCreateUserModal] = useState<boolean>(
-    false
-  );
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [isUpdatingMembers, setIsUpdatingMembers] = useState<boolean>(false);
+  const [showAddMemberModal, setShowAddMemberModal] = useState(false);
+  const [showRemoveMemberModal, setShowRemoveMemberModal] = useState(false);
+  const [showEditUserModal, setShowEditUserModal] = useState(false);
+  const [showCreateUserModal, setShowCreateUserModal] = useState(false);
+  const [isUpdatingMembers, setIsUpdatingMembers] = useState(false);
   const [userEditing, setUserEditing] = useState<IUser>();
-  const [searchString, setSearchString] = useState<string>("");
+  const [searchString, setSearchString] = useState("");
   const [createUserErrors, setCreateUserErrors] = useState<IUserFormErrors>(
     DEFAULT_CREATE_USER_ERRORS
   );

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx

@@ -127,8 +127,8 @@ const TeamDetailsWrapper = ({
   const [backendValidators, setBackendValidators] = useState<{
     [key: string]: string;
   }>({});
-  const [isUpdatingTeams, setIsUpdatingTeams] = useState<boolean>(false);
-  const [isUpdatingSecret, setIsUpdatingSecret] = useState<boolean>(false);
+  const [isUpdatingTeams, setIsUpdatingTeams] = useState(false);
+  const [isUpdatingSecret, setIsUpdatingSecret] = useState(false);
   const { refetch: refetchMe } = useQuery(["me"], () => usersAPI.me(), {
     enabled: false,
     onSuccess: ({ user, available_teams }: IGetMeResponse) => {

frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx

@@ -25,12 +25,12 @@ const noTeamsClass = "no-teams";
 
 const TeamManagementPage = (): JSX.Element => {
   const { renderFlash } = useContext(NotificationContext);
-  const [isUpdatingTeams, setIsUpdatingTeams] = useState<boolean>(false);
+  const [isUpdatingTeams, setIsUpdatingTeams] = useState(false);
   const [showCreateTeamModal, setShowCreateTeamModal] = useState(false);
   const [showDeleteTeamModal, setShowDeleteTeamModal] = useState(false);
   const [showEditTeamModal, setShowEditTeamModal] = useState(false);
   const [teamEditing, setTeamEditing] = useState<ITeam>();
-  const [searchString, setSearchString] = useState<string>("");
+  const [searchString, setSearchString] = useState("");
   const [backendValidators, setBackendValidators] = useState<{
     [key: string]: string;
   }>({});

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

@@ -3,7 +3,6 @@ import React from "react";
 import { ITeam } from "interfaces/team";
 import { IUserFormErrors } from "interfaces/user";
 import Modal from "components/Modal";
-import Spinner from "components/Spinner";
 import UserForm from "../UserForm";
 import { IFormData } from "../UserForm/UserForm";
 

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

@@ -3,7 +3,6 @@ import React from "react";
 import { ITeam } from "interfaces/team";
 import { IUserFormErrors } from "interfaces/user";
 import Modal from "components/Modal";
-import Spinner from "components/Spinner";
 import UserForm from "../UserForm";
 import { IFormData } from "../UserForm/UserForm";
 

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

@@ -62,7 +62,7 @@ const SelectRoleForm = ({
   onFormChange,
   label,
 }: ISelectRoleFormProps): JSX.Element => {
-  const [selectedRole, setSelectedRole] = useState<string>(
+  const [selectedRole, setSelectedRole] = useState(
     defaultTeamRole.toLowerCase()
   );
 

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

@@ -125,9 +125,7 @@ const UserForm = ({
     currentUserId,
   });
 
-  const [isGlobalUser, setIsGlobalUser] = useState<boolean>(
-    !!defaultGlobalRole
-  );
+  const [isGlobalUser, setIsGlobalUser] = useState(!!defaultGlobalRole);
 
   useEffect(() => {
     setErrors(createOrEditUserErrors);

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

@@ -38,20 +38,12 @@ const UsersTable = ({ router }: IUsersTableProps): JSX.Element => {
   const { renderFlash } = useContext(NotificationContext);
 
   // STATES
-  const [showCreateUserModal, setShowCreateUserModal] = useState<boolean>(
-    false
-  );
-  const [showEditUserModal, setShowEditUserModal] = useState<boolean>(false);
-  const [showDeleteUserModal, setShowDeleteUserModal] = useState<boolean>(
-    false
-  );
-  const [showResetPasswordModal, setShowResetPasswordModal] = useState<boolean>(
-    false
-  );
-  const [showResetSessionsModal, setShowResetSessionsModal] = useState<boolean>(
-    false
-  );
-  const [isUpdatingUsers, setIsUpdatingUsers] = useState<boolean>(false);
+  const [showCreateUserModal, setShowCreateUserModal] = useState(false);
+  const [showEditUserModal, setShowEditUserModal] = useState(false);
+  const [showDeleteUserModal, setShowDeleteUserModal] = useState(false);
+  const [showResetPasswordModal, setShowResetPasswordModal] = useState(false);
+  const [showResetSessionsModal, setShowResetSessionsModal] = useState(false);
+  const [isUpdatingUsers, setIsUpdatingUsers] = useState(false);
   const [userEditing, setUserEditing] = useState<any>(null);
   const [createUserErrors, setCreateUserErrors] = useState<IUserFormErrors>(
     DEFAULT_CREATE_USER_ERRORS
@@ -59,7 +51,7 @@ const UsersTable = ({ router }: IUsersTableProps): JSX.Element => {
   const [editUserErrors, setEditUserErrors] = useState<IUserFormErrors>(
     DEFAULT_CREATE_USER_ERRORS
   );
-  const [querySearchText, setQuerySearchText] = useState<string>("");
+  const [querySearchText, setQuerySearchText] = useState("");
 
   // API CALLS
   const {

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx

@@ -203,47 +203,31 @@ const ManageHostsPage = ({
   // ========= states
   const [selectedLabel, setSelectedLabel] = useState<ILabel>();
   const [selectedSecret, setSelectedSecret] = useState<IEnrollSecret>();
-  const [
-    showNoEnrollSecretBanner,
-    setShowNoEnrollSecretBanner,
-  ] = useState<boolean>(true);
-  const [showDeleteSecretModal, setShowDeleteSecretModal] = useState<boolean>(
-    false
-  );
-  const [showSecretEditorModal, setShowSecretEditorModal] = useState<boolean>(
-    false
-  );
-  const [showEnrollSecretModal, setShowEnrollSecretModal] = useState<boolean>(
-    false
-  );
-  const [showDeleteLabelModal, setShowDeleteLabelModal] = useState<boolean>(
-    false
-  );
-  const [showEditColumnsModal, setShowEditColumnsModal] = useState<boolean>(
-    false
-  );
-  const [showAddHostsModal, setShowAddHostsModal] = useState<boolean>(false);
-  const [showTransferHostModal, setShowTransferHostModal] = useState<boolean>(
-    false
-  );
-  const [showDeleteHostModal, setShowDeleteHostModal] = useState<boolean>(
-    false
+  const [showNoEnrollSecretBanner, setShowNoEnrollSecretBanner] = useState(
+    true
   );
+  const [showDeleteSecretModal, setShowDeleteSecretModal] = useState(false);
+  const [showSecretEditorModal, setShowSecretEditorModal] = useState(false);
+  const [showEnrollSecretModal, setShowEnrollSecretModal] = useState(false);
+  const [showDeleteLabelModal, setShowDeleteLabelModal] = useState(false);
+  const [showEditColumnsModal, setShowEditColumnsModal] = useState(false);
+  const [showAddHostsModal, setShowAddHostsModal] = useState(false);
+  const [showTransferHostModal, setShowTransferHostModal] = useState(false);
+  const [showDeleteHostModal, setShowDeleteHostModal] = useState(false);
   const [hiddenColumns, setHiddenColumns] = useState<string[]>(
     storedHiddenColumns || defaultHiddenColumns
   );
   const [selectedHostIds, setSelectedHostIds] = useState<number[]>([]);
-  const [
-    isAllMatchingHostsSelected,
-    setIsAllMatchingHostsSelected,
-  ] = useState<boolean>(false);
-  const [searchQuery, setSearchQuery] = useState<string>(initialQuery);
+  const [isAllMatchingHostsSelected, setIsAllMatchingHostsSelected] = useState(
+    false
+  );
+  const [searchQuery, setSearchQuery] = useState(initialQuery);
   const [hosts, setHosts] = useState<IHost[]>();
-  const [isHostsLoading, setIsHostsLoading] = useState<boolean>(false);
-  const [hasHostErrors, setHasHostErrors] = useState<boolean>(false);
+  const [isHostsLoading, setIsHostsLoading] = useState(false);
+  const [hasHostErrors, setHasHostErrors] = useState(false);
   const [filteredHostCount, setFilteredHostCount] = useState<number>();
-  const [isHostCountLoading, setIsHostCountLoading] = useState<boolean>(false);
-  const [hasHostCountErrors, setHasHostCountErrors] = useState<boolean>(false);
+  const [isHostCountLoading, setIsHostCountLoading] = useState(false);
+  const [hasHostCountErrors, setHasHostCountErrors] = useState(false);
   const [sortBy, setSortBy] = useState<ISortOption[]>(initialSortBy);
   const [policy, setPolicy] = useState<IPolicy>();
   const [softwareDetails, setSoftwareDetails] = useState<ISoftware | null>(
@@ -261,10 +245,10 @@ const ManageHostsPage = ({
   const [labelValidator, setLabelValidator] = useState<{
     [key: string]: string;
   }>(DEFAULT_CREATE_LABEL_ERRORS);
-  const [resetPageIndex, setResetPageIndex] = useState<boolean>(false);
-  const [isUpdatingLabel, setIsUpdatingLabel] = useState<boolean>(false);
-  const [isUpdatingSecret, setIsUpdatingSecret] = useState<boolean>(false);
-  const [isUpdatingHosts, setIsUpdatingHosts] = useState<boolean>(false);
+  const [resetPageIndex, setResetPageIndex] = useState(false);
+  const [isUpdatingLabel, setIsUpdatingLabel] = useState(false);
+  const [isUpdatingSecret, setIsUpdatingSecret] = useState(false);
+  const [isUpdatingHosts, setIsUpdatingHosts] = useState(false);
 
   // ======== end states
 

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

@@ -63,17 +63,15 @@ const LabelForm = ({
   backendValidators,
   isUpdatingLabel,
 }: ILabelFormProps): JSX.Element => {
-  const [name, setName] = useState<string>(selectedLabel?.name || "");
-  const [nameError, setNameError] = useState<string>("");
-  const [description, setDescription] = useState<string>(
+  const [name, setName] = useState(selectedLabel?.name || "");
+  const [nameError, setNameError] = useState("");
+  const [description, setDescription] = useState(
     selectedLabel?.description || ""
   );
-  const [descriptionError, setDescriptionError] = useState<string>("");
-  const [query, setQuery] = useState<string>(selectedLabel?.query || "");
-  const [queryError, setQueryError] = useState<string>("");
-  const [platform, setPlatform] = useState<string>(
-    selectedLabel?.platform || ""
-  );
+  const [descriptionError, setDescriptionError] = useState("");
+  const [query, setQuery] = useState(selectedLabel?.query || "");
+  const [queryError, setQueryError] = useState("");
+  const [platform, setPlatform] = useState(selectedLabel?.platform || "");
 
   const debounceSQL = useDebouncedCallback((queryString: string) => {
     let valid = true;

frontend/pages/hosts/ManageHostsPage/helpers.ts

@@ -1,4 +1,3 @@
-import { ILabel } from "interfaces/label";
 import { isEmpty, reduce, trim, union } from "lodash";
 import { buildQueryStringFromParams } from "utilities/url";
 

frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx

@@ -51,19 +51,17 @@ const DeviceUserPage = ({
   const deviceAuthToken = device_auth_token;
   const { renderFlash } = useContext(NotificationContext);
 
-  const [isPremiumTier, setIsPremiumTier] = useState<boolean>(false);
-  const [showInfoModal, setShowInfoModal] = useState<boolean>(false);
+  const [isPremiumTier, setIsPremiumTier] = useState(false);
+  const [showInfoModal, setShowInfoModal] = useState(false);
   const [refetchStartTime, setRefetchStartTime] = useState<number | null>(null);
-  const [showRefetchSpinner, setShowRefetchSpinner] = useState<boolean>(false);
+  const [showRefetchSpinner, setShowRefetchSpinner] = useState(false);
   const [hostSoftware, setHostSoftware] = useState<ISoftware[]>([]);
   const [host, setHost] = useState<IHost | null>();
-  const [orgLogoURL, setOrgLogoURL] = useState<string>("");
+  const [orgLogoURL, setOrgLogoURL] = useState("");
   const [selectedPolicy, setSelectedPolicy] = useState<IHostPolicy | null>(
     null
   );
-  const [showPolicyDetailsModal, setShowPolicyDetailsModal] = useState<boolean>(
-    false
-  );
+  const [showPolicyDetailsModal, setShowPolicyDetailsModal] = useState(false);
 
   const { data: deviceMapping, refetch: refetchDeviceMapping } = useQuery(
     ["deviceMapping", deviceAuthToken],

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

@@ -126,29 +126,23 @@ const HostDetailsPage = ({
     return false;
   };
 
-  const [showDeleteHostModal, setShowDeleteHostModal] = useState<boolean>(
-    false
-  );
-  const [showTransferHostModal, setShowTransferHostModal] = useState<boolean>(
-    false
-  );
-  const [showQueryHostModal, setShowQueryHostModal] = useState<boolean>(false);
-  const [showPolicyDetailsModal, setPolicyDetailsModal] = useState<boolean>(
-    false
-  );
-  const [showOSPolicyModal, setShowOSPolicyModal] = useState<boolean>(false);
+  const [showDeleteHostModal, setShowDeleteHostModal] = useState(false);
+  const [showTransferHostModal, setShowTransferHostModal] = useState(false);
+  const [showQueryHostModal, setShowQueryHostModal] = useState(false);
+  const [showPolicyDetailsModal, setPolicyDetailsModal] = useState(false);
+  const [showOSPolicyModal, setShowOSPolicyModal] = useState(false);
   const [selectedPolicy, setSelectedPolicy] = useState<IHostPolicy | null>(
     null
   );
-  const [isUpdatingHost, setIsUpdatingHost] = useState<boolean>(false);
+  const [isUpdatingHost, setIsUpdatingHost] = useState(false);
 
   const [refetchStartTime, setRefetchStartTime] = useState<number | null>(null);
-  const [showRefetchSpinner, setShowRefetchSpinner] = useState<boolean>(false);
+  const [showRefetchSpinner, setShowRefetchSpinner] = useState(false);
   const [packsState, setPacksState] = useState<IPackStats[]>();
   const [scheduleState, setScheduleState] = useState<IQueryStats[]>();
   const [hostSoftware, setHostSoftware] = useState<ISoftware[]>([]);
   const [usersState, setUsersState] = useState<{ username: string }[]>([]);
-  const [usersSearchString, setUsersSearchString] = useState<string>("");
+  const [usersSearchString, setUsersSearchString] = useState("");
 
   const { data: fleetQueries, error: fleetQueriesError } = useQuery<
     IFleetQueriesResponse,

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

@@ -30,7 +30,7 @@ const RenderOSPolicyModal = ({
   osPolicy,
   osPolicyLabel,
 }: IRenderOSPolicyModal): JSX.Element => {
-  const [copyMessage, setCopyMessage] = useState<string>("");
+  const [copyMessage, setCopyMessage] = useState("");
 
   const renderOsPolicyLabel = () => {
     const onCopyOsPolicy = (evt: React.MouseEvent) => {

frontend/pages/packs/EditPackPage/EditPackPage.tsx

@@ -89,20 +89,18 @@ const EditPacksPage = ({
     }
   );
 
-  const [targetsCount, setTargetsCount] = useState<number>(0);
-  const [
-    showPackQueryEditorModal,
-    setShowPackQueryEditorModal,
-  ] = useState<boolean>(false);
-  const [
-    showRemovePackQueryModal,
-    setShowRemovePackQueryModal,
-  ] = useState<boolean>(false);
+  const [targetsCount, setTargetsCount] = useState(0);
+  const [showPackQueryEditorModal, setShowPackQueryEditorModal] = useState(
+    false
+  );
+  const [showRemovePackQueryModal, setShowRemovePackQueryModal] = useState(
+    false
+  );
   const [selectedPackQuery, setSelectedPackQuery] = useState<IScheduledQuery>();
   const [selectedPackQueryIds, setSelectedPackQueryIds] = useState<
     number[] | never[]
   >([]);
-  const [isUpdatingPack, setIsUpdatingPack] = useState<boolean>(false);
+  const [isUpdatingPack, setIsUpdatingPack] = useState(false);
 
   const packTargets = storedPack
     ? [

frontend/pages/packs/EditPackPage/components/PackQueryEditorModal/PackQueryEditorModal.tsx

@@ -69,28 +69,27 @@ const PackQueryEditorModal = ({
   const [selectedQuery, setSelectedQuery] = useState<
     IScheduledQuery | INoQueryOption
   >();
-  const [selectedFrequency, setSelectedFrequency] = useState<string>(
+  const [selectedFrequency, setSelectedFrequency] = useState(
     editQuery?.interval.toString() || ""
   );
-  const [errorFrequency, setErrorFrequency] = useState<string>("");
-  const [
-    selectedPlatformOptions,
-    setSelectedPlatformOptions,
-  ] = useState<string>(editQuery?.platform || "");
-  const [selectedLoggingType, setSelectedLoggingType] = useState<string>(
+  const [errorFrequency, setErrorFrequency] = useState("");
+  const [selectedPlatformOptions, setSelectedPlatformOptions] = useState(
+    editQuery?.platform || ""
+  );
+  const [selectedLoggingType, setSelectedLoggingType] = useState(
     editQuery ? generateLoggingType(editQuery) : "snapshot"
   );
-  const [selectedSnapshot, setSelectedSnapshot] = useState<boolean>(
+  const [selectedSnapshot, setSelectedSnapshot] = useState(
     selectedLoggingType === "snapshot"
   );
-  const [selectedRemoved, setSelectedRemoved] = useState<boolean>(
+  const [selectedRemoved, setSelectedRemoved] = useState(
     selectedLoggingType === "differential"
   );
   const [
     selectedMinOsqueryVersionOptions,
     setSelectedMinOsqueryVersionOptions,
-  ] = useState<string>(editQuery?.version || "");
-  const [selectedShard, setSelectedShard] = useState<string>(
+  ] = useState(editQuery?.version || "");
+  const [selectedShard, setSelectedShard] = useState(
     editQuery?.shard ? editQuery?.shard.toString() : ""
   );
 

frontend/pages/packs/EditPackPage/components/RemovePackQueryModal/RemovePackQueryModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";

frontend/pages/packs/ManagePacksPage/ManagePacksPage.tsx

@@ -61,10 +61,8 @@ const ManagePacksPage = ({ router }: IManagePacksPageProps): JSX.Element => {
   const onCreatePackClick = () => router.push(PATHS.NEW_PACK);
 
   const [selectedPackIds, setSelectedPackIds] = useState<number[]>([]);
-  const [showDeletePackModal, setShowDeletePackModal] = useState<boolean>(
-    false
-  );
-  const [isUpdatingPack, setIsUpdatingPack] = useState<boolean>(false);
+  const [showDeletePackModal, setShowDeletePackModal] = useState(false);
+  const [isUpdatingPack, setIsUpdatingPack] = useState(false);
 
   const {
     data: packs,

frontend/pages/packs/ManagePacksPage/components/DeletePackModal/DeletePackModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";

frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx

@@ -32,7 +32,7 @@ const PacksTable = ({
   const [filteredPacks, setFilteredPacks] = useState<IPack[] | undefined>(
     packs
   );
-  const [searchString, setSearchString] = useState<string>("");
+  const [searchString, setSearchString] = useState("");
 
   useEffect(() => {
     setFilteredPacks(packs);

frontend/pages/packs/PackComposerPage/PackComposerPage.tsx

@@ -28,8 +28,8 @@ const PackComposerPage = ({ router }: IPackComposerPageProps): JSX.Element => {
   const { isPremiumTier } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
 
-  const [selectedTargetsCount, setSelectedTargetsCount] = useState<number>(0);
-  const [isUpdatingPack, setIsUpdatingPack] = useState<boolean>(false);
+  const [selectedTargetsCount, setSelectedTargetsCount] = useState(0);
+  const [isUpdatingPack, setIsUpdatingPack] = useState(false);
 
   const onFetchTargets = (
     query: IQuery,

frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx

@@ -75,10 +75,8 @@ const ManagePolicyPage = ({
   } = useContext(PolicyContext);
 
   const { setResetSelectedRows } = useContext(TableContext);
-  const [isUpdatingAutomations, setIsUpdatingAutomations] = useState<boolean>(
-    false
-  );
-  const [isUpdatingPolicies, setIsUpdatingPolicies] = useState<boolean>(false);
+  const [isUpdatingAutomations, setIsUpdatingAutomations] = useState(false);
+  const [isUpdatingPolicies, setIsUpdatingPolicies] = useState(false);
   const [selectedPolicyIds, setSelectedPolicyIds] = useState<number[]>([]);
   const [showManageAutomationsModal, setShowManageAutomationsModal] = useState(
     false

frontend/pages/policies/ManagePoliciesPage/components/DeletePolicyModal/DeletePolicyModal.tsx

@@ -2,7 +2,6 @@ import React from "react";
 
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";
-import Spinner from "components/Spinner";
 
 const baseClass = "delete-policy-modal";
 

frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/ManageAutomationsModal.tsx

@@ -19,7 +19,6 @@ import Dropdown from "components/forms/fields/Dropdown";
 import InputField from "components/forms/fields/InputField";
 import Radio from "components/forms/fields/Radio";
 
-import Spinner from "components/Spinner";
 import PreviewPayloadModal from "../PreviewPayloadModal";
 import PreviewTicketModal from "../PreviewTicketModal";
 
@@ -112,10 +111,7 @@ const ManageAutomationsModal = ({
     automationsConfig.integrations
   );
 
-  const [
-    isPolicyAutomationsEnabled,
-    setIsPolicyAutomationsEnabled,
-  ] = useState<boolean>(
+  const [isPolicyAutomationsEnabled, setIsPolicyAutomationsEnabled] = useState(
     !!webhook.enable_failing_policies_webhook || !!serverEnabledIntegration
   );
 
@@ -123,7 +119,7 @@ const ManageAutomationsModal = ({
     !isPolicyAutomationsEnabled || webhook.enable_failing_policies_webhook
   );
 
-  const [destinationUrl, setDestinationUrl] = useState<string>(
+  const [destinationUrl, setDestinationUrl] = useState(
     webhook.destination_url || ""
   );
 

frontend/pages/policies/PolicyPage/PolicyPage.tsx

@@ -91,18 +91,17 @@ const PolicyPage = ({
     }
   }
 
-  const [step, setStep] = useState<string>(QUERIES_PAGE_STEPS[1]);
+  const [step, setStep] = useState(QUERIES_PAGE_STEPS[1]);
   const [selectedTargets, setSelectedTargets] = useState<ITarget[]>([]);
   const [targetedHosts, setTargetedHosts] = useState<IHost[]>([]);
   const [targetedLabels, setTargetedLabels] = useState<ILabel[]>([]);
   const [targetedTeams, setTargetedTeams] = useState<ITeam[]>([]);
-  const [targetsTotalCount, setTargetsTotalCount] = useState<number>(0);
-  const [isLiveQueryRunnable, setIsLiveQueryRunnable] = useState<boolean>(true);
-  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
-  const [
-    showOpenSchemaActionText,
-    setShowOpenSchemaActionText,
-  ] = useState<boolean>(false);
+  const [targetsTotalCount, setTargetsTotalCount] = useState(0);
+  const [isLiveQueryRunnable, setIsLiveQueryRunnable] = useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [showOpenSchemaActionText, setShowOpenSchemaActionText] = useState(
+    false
+  );
 
   const {
     isLoading: isStoredPolicyLoading,

frontend/pages/policies/PolicyPage/components/NewPolicyModal/NewPolicyModal.tsx

@@ -12,7 +12,6 @@ import InputField from "components/forms/fields/InputField";
 import Button from "components/buttons/Button";
 import Modal from "components/Modal";
 import ReactTooltip from "react-tooltip";
-import Spinner from "components/Spinner";
 
 export interface INewPolicyModalProps {
   baseClass: string;
@@ -51,13 +50,9 @@ const NewPolicyModal = ({
     setLastEditedQueryPlatform,
   } = useContext(PolicyContext);
 
-  const [name, setName] = useState<string>(lastEditedQueryName);
-  const [description, setDescription] = useState<string>(
-    lastEditedQueryDescription
-  );
-  const [resolution, setResolution] = useState<string>(
-    lastEditedQueryResolution
-  );
+  const [name, setName] = useState(lastEditedQueryName);
+  const [description, setDescription] = useState(lastEditedQueryDescription);
+  const [resolution, setResolution] = useState(lastEditedQueryResolution);
   const [errors, setErrors] = useState<{ [key: string]: string }>(
     backendValidators
   );

frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx

@@ -73,18 +73,11 @@ const PolicyForm = ({
   backendValidators,
 }: IPolicyFormProps): JSX.Element => {
   const [errors, setErrors] = useState<{ [key: string]: any }>({}); // string | null | undefined or boolean | undefined
-  const [isNewPolicyModalOpen, setIsNewPolicyModalOpen] = useState<boolean>(
-    false
-  );
-  const [showQueryEditor, setShowQueryEditor] = useState<boolean>(false);
-  const [isEditingName, setIsEditingName] = useState<boolean>(false);
-  const [isEditingDescription, setIsEditingDescription] = useState<boolean>(
-    false
-  );
-  const [isEditingResolution, setIsEditingResolution] = useState<boolean>(
-    false
-  );
-  const [isPolicySaving, setIsPolicySaving] = useState<boolean>(false);
+  const [isNewPolicyModalOpen, setIsNewPolicyModalOpen] = useState(false);
+  const [showQueryEditor, setShowQueryEditor] = useState(false);
+  const [isEditingName, setIsEditingName] = useState(false);
+  const [isEditingDescription, setIsEditingDescription] = useState(false);
+  const [isEditingResolution, setIsEditingResolution] = useState(false);
 
   // Note: The PolicyContext values should always be used for any mutable policy data such as query name
   // The storedPolicy prop should only be used to access immutable metadata such as author id

frontend/pages/policies/PolicyPage/components/QueryResults/QueryResults.tsx

@@ -56,7 +56,7 @@ const QueryResults = ({
 
   const totalRowsCount = get(campaign, ["hosts_count", "successful"], 0);
 
-  const [pageTitle, setPageTitle] = useState<string>(PAGE_TITLES.RUNNING);
+  const [pageTitle, setPageTitle] = useState(PAGE_TITLES.RUNNING);
   const [navTabIndex, setNavTabIndex] = useState(0);
   const [
     targetsRespondedPercent,

frontend/pages/policies/PolicyPage/screens/QueryEditor.tsx

@@ -67,7 +67,7 @@ const QueryEditor = ({
     }
   }, []);
 
-  const [isUpdatingPolicy, setIsUpdatingPolicy] = useState<boolean>(false);
+  const [isUpdatingPolicy, setIsUpdatingPolicy] = useState(false);
   const [backendValidators, setBackendValidators] = useState<{
     [key: string]: string;
   }>({});

frontend/pages/policies/PolicyPage/screens/RunQuery.tsx

@@ -33,7 +33,7 @@ const RunQuery = ({
 }: IRunQueryProps): JSX.Element => {
   const { renderFlash } = useContext(NotificationContext);
 
-  const [isQueryFinished, setIsQueryFinished] = useState<boolean>(false);
+  const [isQueryFinished, setIsQueryFinished] = useState(false);
   const [campaignState, setCampaignState] = useState<ICampaignState>(
     DEFAULT_CAMPAIGN_STATE
   );

frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx

@@ -93,14 +93,10 @@ const ManageQueriesPage = ({
   const [queriesList, setQueriesList] = useState<IQueryTableData[] | null>(
     null
   );
-  const [selectedDropdownFilter, setSelectedDropdownFilter] = useState<string>(
-    "all"
-  );
+  const [selectedDropdownFilter, setSelectedDropdownFilter] = useState("all");
   const [selectedQueryIds, setSelectedQueryIds] = useState<number[]>([]);
-  const [showDeleteQueryModal, setShowDeleteQueryModal] = useState<boolean>(
-    false
-  );
-  const [isUpdatingQueries, setIsUpdatingQueries] = useState<boolean>(false);
+  const [showDeleteQueryModal, setShowDeleteQueryModal] = useState(false);
+  const [isUpdatingQueries, setIsUpdatingQueries] = useState(false);
 
   const {
     data: fleetQueries,

frontend/pages/queries/ManageQueriesPage/components/DeleteQueryModal/DeleteQueryModal.tsx

@@ -2,7 +2,6 @@ import React from "react";
 
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";
-import Spinner from "components/Spinner";
 
 const baseClass = "delete-query-modal";
 

frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx

@@ -37,7 +37,7 @@ const QueriesTable = ({
   isOnlyObserver,
 }: IQueriesTableProps): JSX.Element | null => {
   const { currentUser } = useContext(AppContext);
-  const [searchString, setSearchString] = useState<string>("");
+  const [searchString, setSearchString] = useState("");
 
   const handleSearchChange = ({ searchQuery }: ITableQueryData) => {
     setSearchString(searchQuery);

frontend/pages/queries/QueryPage/QueryPage.tsx

@@ -65,21 +65,18 @@ const QueryPage = ({
     setLastEditedQueryObserverCanRun,
   } = useContext(QueryContext);
 
-  const [queryParamHostsAdded, setQueryParamHostsAdded] = useState<boolean>(
-    false
-  );
-  const [step, setStep] = useState<string>(QUERIES_PAGE_STEPS[1]);
+  const [queryParamHostsAdded, setQueryParamHostsAdded] = useState(false);
+  const [step, setStep] = useState(QUERIES_PAGE_STEPS[1]);
   const [selectedTargets, setSelectedTargets] = useState<ITarget[]>([]);
   const [targetedHosts, setTargetedHosts] = useState<IHost[]>([]);
   const [targetedLabels, setTargetedLabels] = useState<ILabel[]>([]);
   const [targetedTeams, setTargetedTeams] = useState<ITeam[]>([]);
-  const [targetsTotalCount, setTargetsTotalCount] = useState<number>(0);
-  const [isLiveQueryRunnable, setIsLiveQueryRunnable] = useState<boolean>(true);
-  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
-  const [
-    showOpenSchemaActionText,
-    setShowOpenSchemaActionText,
-  ] = useState<boolean>(false);
+  const [targetsTotalCount, setTargetsTotalCount] = useState(0);
+  const [isLiveQueryRunnable, setIsLiveQueryRunnable] = useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [showOpenSchemaActionText, setShowOpenSchemaActionText] = useState(
+    false
+  );
 
   // disabled on page load so we can control the number of renders
   // else it will re-populate the context on occasion

frontend/pages/queries/QueryPage/components/NewQueryModal/NewQueryModal.tsx

@@ -9,7 +9,6 @@ import Checkbox from "components/forms/fields/Checkbox";
 import InputField from "components/forms/fields/InputField";
 import Button from "components/buttons/Button";
 import Modal from "components/Modal";
-import Spinner from "components/Spinner";
 
 export interface INewQueryModalProps {
   baseClass: string;
@@ -39,9 +38,9 @@ const NewQueryModal = ({
   setIsSaveModalOpen,
   backendValidators,
 }: INewQueryModalProps): JSX.Element => {
-  const [name, setName] = useState<string>("");
-  const [description, setDescription] = useState<string>("");
-  const [observerCanRun, setObserverCanRun] = useState<boolean>(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [observerCanRun, setObserverCanRun] = useState(false);
   const [errors, setErrors] = useState<{ [key: string]: string }>(
     backendValidators
   );

frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx

@@ -78,13 +78,11 @@ const QueryForm = ({
 }: IQueryFormProps): JSX.Element => {
   const isEditMode = !!queryIdForEdit;
   const [errors, setErrors] = useState<{ [key: string]: any }>({}); // string | null | undefined or boolean | undefined
-  const [isSaveModalOpen, setIsSaveModalOpen] = useState<boolean>(false);
-  const [showQueryEditor, setShowQueryEditor] = useState<boolean>(false);
-  const [isEditingName, setIsEditingName] = useState<boolean>(false);
-  const [isEditingDescription, setIsEditingDescription] = useState<boolean>(
-    false
-  );
-  const [isSaveAsNewLoading, setIsSaveAsNewLoading] = useState<boolean>(false);
+  const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
+  const [showQueryEditor, setShowQueryEditor] = useState(false);
+  const [isEditingName, setIsEditingName] = useState(false);
+  const [isEditingDescription, setIsEditingDescription] = useState(false);
+  const [isSaveAsNewLoading, setIsSaveAsNewLoading] = useState(false);
 
   // Note: The QueryContext values should always be used for any mutable query data such as query name
   // The storedQuery prop should only be used to access immutable metadata such as author id

frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx

@@ -83,9 +83,9 @@ const QueryResults = ({
       ? Math.round((hostsCount.total / targetsTotalCount) * 100)
       : 0;
 
-  const [pageTitle, setPageTitle] = useState<string>(PAGE_TITLES.RUNNING);
+  const [pageTitle, setPageTitle] = useState(PAGE_TITLES.RUNNING);
   const [navTabIndex, setNavTabIndex] = useState(0);
-  const [showQueryModal, setShowQueryModal] = useState<boolean>(false);
+  const [showQueryModal, setShowQueryModal] = useState(false);
   const [filteredResults, setFilteredResults] = useState<Row[]>([]);
   const [filteredErrors, setFilteredErrors] = useState<Row[]>([]);
 

frontend/pages/queries/QueryPage/screens/QueryEditor.tsx

@@ -61,8 +61,8 @@ const QueryEditor = ({
     lastEditedQueryObserverCanRun,
   } = useContext(QueryContext);
 
-  const [isQuerySaving, setIsQuerySaving] = useState<boolean>(false);
-  const [isQueryUpdating, setIsQueryUpdating] = useState<boolean>(false);
+  const [isQuerySaving, setIsQuerySaving] = useState(false);
+  const [isQueryUpdating, setIsQueryUpdating] = useState(false);
 
   useEffect(() => {
     if (storedQueryError) {

frontend/pages/queries/QueryPage/screens/RunQuery.tsx

@@ -37,7 +37,7 @@ const RunQuery = ({
   const { lastEditedQueryBody } = useContext(QueryContext);
   const { renderFlash } = useContext(NotificationContext);
 
-  const [isQueryFinished, setIsQueryFinished] = useState<boolean>(false);
+  const [isQueryFinished, setIsQueryFinished] = useState(false);
   const [campaignState, setCampaignState] = useState<ICampaignState>(
     DEFAULT_CAMPAIGN_STATE
   );

frontend/pages/schedule/ManageSchedulePage/ManageSchedulePage.tsx

@@ -295,13 +295,10 @@ const ManageSchedulePage = ({
   const selectedTeamData =
     teams?.find((team: ITeam) => selectedTeam === team.id) || undefined;
 
-  const [
-    isUpdatingScheduledQuery,
-    setIsUpdatingScheduledQuery,
-  ] = useState<boolean>(false);
-  const [showInheritedQueries, setShowInheritedQueries] = useState<boolean>(
+  const [isUpdatingScheduledQuery, setIsUpdatingScheduledQuery] = useState(
     false
   );
+  const [showInheritedQueries, setShowInheritedQueries] = useState(false);
   const [showScheduleEditorModal, setShowScheduleEditorModal] = useState(false);
   const [showShowQueryModal, setShowShowQueryModal] = useState(false);
   const [showPreviewDataModal, setShowPreviewDataModal] = useState(false);

frontend/pages/schedule/ManageSchedulePage/components/RemoveScheduledQueryModal/RemoveScheduledQueryModal.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect } from "react";
+import React from "react";
 
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";
-import Spinner from "components/Spinner";
 
 const baseClass = "remove-scheduled-query-modal";
 

frontend/pages/schedule/ManageSchedulePage/components/ScheduleEditorModal/ScheduleEditorModal.tsx

@@ -1,6 +1,6 @@
 /* This component is used for creating and editing both global and team scheduled queries */
 
-import React, { useState, useCallback, useContext, useEffect } from "react";
+import React, { useState, useCallback, useContext } from "react";
 import { pull } from "lodash";
 import { AppContext } from "context/app";
 
@@ -15,7 +15,6 @@ import InfoBanner from "components/InfoBanner/InfoBanner";
 import Dropdown from "components/forms/fields/Dropdown";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
-import Spinner from "components/Spinner";
 import {
   FREQUENCY_DROPDOWN_OPTIONS,
   PLATFORM_DROPDOWN_OPTIONS,
@@ -100,27 +99,24 @@ const ScheduleEditorModal = ({
 
   const loggingConfig = config?.logging.result.plugin || "unknown";
 
-  const [showAdvancedOptions, setShowAdvancedOptions] = useState<boolean>(
-    false
-  );
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
   const [selectedQuery, setSelectedQuery] = useState<
     IEditScheduledQuery | INoQueryOption
   >();
-  const [selectedFrequency, setSelectedFrequency] = useState<number>(
+  const [selectedFrequency, setSelectedFrequency] = useState(
     editQuery ? editQuery.interval : 86400
   );
-  const [
-    selectedPlatformOptions,
-    setSelectedPlatformOptions,
-  ] = useState<string>(editQuery?.platform || "");
-  const [selectedLoggingType, setSelectedLoggingType] = useState<string>(
+  const [selectedPlatformOptions, setSelectedPlatformOptions] = useState(
+    editQuery?.platform || ""
+  );
+  const [selectedLoggingType, setSelectedLoggingType] = useState(
     editQuery ? generateLoggingType(editQuery) : "snapshot"
   );
   const [
     selectedMinOsqueryVersionOptions,
     setSelectedMinOsqueryVersionOptions,
-  ] = useState<string>(editQuery?.version || "");
-  const [selectedShard, setSelectedShard] = useState<string>(
+  ] = useState(editQuery?.version || "");
+  const [selectedShard, setSelectedShard] = useState(
     editQuery?.shard ? editQuery?.shard.toString() : ""
   );
 

frontend/pages/software/ManageSoftwarePage/ManageSoftwarePage.tsx

@@ -99,11 +99,11 @@ const ManageSoftwarePage = ({
 
   const DEFAULT_SORT_HEADER = isPremiumTier ? "vulnerabilities" : "hosts_count";
 
-  const [isSoftwareEnabled, setIsSoftwareEnabled] = useState<boolean>();
+  const [isSoftwareEnabled, setIsSoftwareEnabled] = useState(false);
   const [
     isVulnerabilityAutomationsEnabled,
     setIsVulnerabilityAutomationsEnabled,
-  ] = useState<boolean>();
+  ] = useState(false);
   const [
     recentVulnerabilityMaxAge,
     setRecentVulnerabilityMaxAge,

frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/ManageAutomationsModal.tsx

@@ -73,15 +73,14 @@ const ManageAutomationsModal = ({
   currentDestinationUrl,
   recentVulnerabilityMaxAge,
 }: IManageAutomationsModalProps): JSX.Element => {
-  const [destinationUrl, setDestinationUrl] = useState<string>(
+  const [destinationUrl, setDestinationUrl] = useState(
     currentDestinationUrl || ""
   );
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
-  const [
-    softwareAutomationsEnabled,
-    setSoftwareAutomationsEnabled,
-  ] = useState<boolean>(softwareVulnerabilityAutomationEnabled || false);
-  const [integrationEnabled, setIntegrationEnabled] = useState<boolean>(
+  const [softwareAutomationsEnabled, setSoftwareAutomationsEnabled] = useState(
+    softwareVulnerabilityAutomationEnabled || false
+  );
+  const [integrationEnabled, setIntegrationEnabled] = useState(
     !softwareVulnerabilityWebhookEnabled
   );
   const [jiraIntegrationsIndexed, setJiraIntegrationsIndexed] = useState<