chore: Bump biome and configure husky (#6589)

Upgrades biome to 1.6.1, and updates husky pre-commit hook.

Most changes here are making type imports explicit.

.husky/pre-commit

@@ -1,7 +1,4 @@
-#!/usr/bin/env sh
+yarn lint-staged
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged
 
 node .husky/update-openapi-spec-list.js
 

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.5.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
   "linter": {
     "enabled": true,
     "rules": {
@@ -20,21 +20,21 @@
         "noInferrableTypes": "off",
         "noUnusedTemplateLiteral": "off",
         "useSingleVarDeclarator": "off",
-        "noUselessElse": "off"
+        "noUselessElse": "off",
+        "useNodejsImportProtocol": "off"
       },
       "suspicious": {
         "noExplicitAny": "off",
         "noExtraNonNullAssertion": "off",
         "noRedeclare": "off",
         "noPrototypeBuiltins": "off",
-        "noConfusingVoidType": "off"
+        "noConfusingVoidType": "off",
+        "noArrayIndexKey": "off",
+        "noThenProperty": "off"
       },
       "performance": {
         "noAccumulatingSpread": "off",
         "noDelete": "off"
-      },
-      "nursery": {
-        "noUnusedImports": "warn"
       }
     },
     "ignore": [

frontend/cypress/integration/projects/overview.spec.ts

@@ -76,7 +76,7 @@ describe('project overview', () => {
         cy.get(counter)
             .invoke('text')
             .then((text) => {
-                const number = parseFloat(text);
+                const number = Number.parseFloat(text);
                 expect(number).to.be.at.least(2);
             });
         cy.get(selectAll).click();
@@ -110,7 +110,7 @@ describe('project overview', () => {
         cy.get(counter)
             .invoke('text')
             .then((text) => {
-                const number = parseFloat(text);
+                const number = Number.parseFloat(text);
                 expect(number).to.be.at.least(2);
             });
         cy.get('table td')

frontend/package.json

@@ -2,10 +2,7 @@
   "name": "unleash-frontend-local",
   "version": "0.0.0",
   "private": true,
-  "files": [
+  "files": ["index.js", "build"],
-    "index.js",
-    "build"
-  ],
   "engines": {
     "node": ">=18"
   },
@@ -37,7 +34,7 @@
     "gen:api:clean": "yarn gen:api && rm -rf src/openapi/apis && sed -i.bak '1q' src/openapi/index.ts && rm src/openapi/index.ts.bak"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.5.1",
+    "@biomejs/biome": "1.6.1",
     "@codemirror/lang-json": "6.0.1",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
@@ -146,11 +143,7 @@
     }
   },
   "browserslist": {
-    "production": [
+    "production": [">0.2%", "not dead", "not op_mini all"],
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

frontend/src/component/admin/AdminIndex.tsx

@@ -1,8 +1,8 @@
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import { VFC } from 'react';
+import type { VFC } from 'react';
 import { adminGroups } from './adminRoutes';
-import { INavigationMenuItem } from 'interfaces/route';
+import type { INavigationMenuItem } from 'interfaces/route';
 import { Box, Link, Typography } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import { useAdminRoutes } from './useAdminRoutes';

frontend/src/component/admin/adminRoutes.ts

@@ -1,4 +1,4 @@
-import { INavigationMenuItem } from 'interfaces/route';
+import type { INavigationMenuItem } from 'interfaces/route';
 
 export const adminGroups: Record<string, string> = {
     users: 'User administration',

frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx

@@ -1,5 +1,6 @@
 import { Alert, Link } from '@mui/material';
-import React, { ReactNode } from 'react';
+import type React from 'react';
+import type { ReactNode } from 'react';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { CancelButton, StyledBox, StyledForm } from './ApiTokenForm.styles';

frontend/src/component/admin/apiToken/ApiTokenForm/EnvironmentSelector/EnvironmentSelector.tsx

@@ -1,6 +1,6 @@
 import { TokenType } from '../../../../../interfaces/token';
 import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutlined';
-import React from 'react';
+import type React from 'react';
 import {
     StyledInputDescription,
     StyledSelectInput,

frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/ProjectSelector.tsx

@@ -1,9 +1,9 @@
 import { SelectProjectInput } from './SelectProjectInput/SelectProjectInput';
 import { TokenType } from '../../../../../interfaces/token';
-import React from 'react';
+import type React from 'react';
 import { StyledInputDescription } from '../ApiTokenForm.styles';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
-import { ApiTokenFormErrorType } from '../useApiTokenForm';
+import type { ApiTokenFormErrorType } from '../useApiTokenForm';
 import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
 
 interface IProjectSelectorProps {

frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectAllButton/SelectAllButton.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { Box, Link, styled } from '@mui/material';
 
 type SelectAllButtonProps = {

frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectProjectInput.test.tsx

@@ -3,7 +3,7 @@ import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from 'utils/testRenderer';
 import {
-    ISelectProjectInputProps,
+    type ISelectProjectInputProps,
     SelectProjectInput,
 } from './SelectProjectInput';
 import { testServerRoute, testServerSetup } from 'utils/testServer';

frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectProjectInput.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState, ChangeEvent, VFC } from 'react';
+import { Fragment, useState, type ChangeEvent, type VFC } from 'react';
 import {
     Checkbox,
     FormControlLabel,
@@ -9,7 +9,7 @@ import {
 } from '@mui/material';
 import { Autocomplete } from '@mui/material';
 
-import {
+import type {
     AutocompleteRenderGroupParams,
     AutocompleteRenderInputParams,
     AutocompleteRenderOptionState,
@@ -17,7 +17,7 @@ import {
 
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import { IAutocompleteBoxOption } from 'component/common/AutocompleteBox/AutocompleteBox';
+import type { IAutocompleteBoxOption } from 'component/common/AutocompleteBox/AutocompleteBox';
 import { SelectAllButton } from './SelectAllButton/SelectAllButton';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 

frontend/src/component/admin/apiToken/ApiTokenForm/TokenInfo/TokenInfo.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import type React from 'react';
 import { StyledInput, StyledInputDescription } from '../ApiTokenForm.styles';
-import { ApiTokenFormErrorType } from '../useApiTokenForm';
+import type { ApiTokenFormErrorType } from '../useApiTokenForm';
 
 interface ITokenInfoProps {
     username: string;

frontend/src/component/admin/apiToken/ApiTokenForm/TokenTypeSelector/TokenTypeSelector.tsx

@@ -7,7 +7,7 @@ import {
     RadioGroup,
     Typography,
 } from '@mui/material';
-import { TokenType } from 'interfaces/token';
+import type { TokenType } from 'interfaces/token';
 
 export type SelectOption = {
     key: string;

frontend/src/component/admin/apiToken/ApiTokenForm/useApiTokenForm.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
-import { IApiTokenCreate } from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
+import type { IApiTokenCreate } from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
 import { TokenType } from 'interfaces/token';
 import {
     ADMIN,
@@ -10,7 +10,7 @@ import {
     CREATE_PROJECT_API_TOKEN,
 } from '@server/types/permissions';
 import { useHasRootAccess } from 'hooks/useHasAccess';
-import { SelectOption } from './TokenTypeSelector/TokenTypeSelector';
+import type { SelectOption } from './TokenTypeSelector/TokenTypeSelector';
 import { useUiFlag } from '../../../../hooks/useUiFlag';
 
 export type ApiTokenFormErrorType = 'username' | 'projects';

frontend/src/component/admin/apiToken/ProjectsList/ProjectsList.tsx

@@ -2,7 +2,7 @@ import { styled } from '@mui/material';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
-import { Fragment, VFC } from 'react';
+import { Fragment, type VFC } from 'react';
 import { Link } from 'react-router-dom';
 
 const StyledLink = styled(Link)(({ theme }) => ({

frontend/src/component/admin/auth/AuthSettings.tsx

@@ -113,7 +113,6 @@ export const AuthSettings = () => {
                             <div>
                                 {tabs.map((tab, index) => (
                                     <TabPanel
-                                        // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                                         key={index}
                                         value={activeTab}
                                         index={index}

frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, Fragment } from 'react';
+import { type ChangeEvent, Fragment } from 'react';
 import {
     FormControl,
     FormControlLabel,
@@ -8,7 +8,7 @@ import {
 } from '@mui/material';
 import { RoleSelect } from 'component/common/RoleSelect/RoleSelect';
 import { useRoles } from 'hooks/api/getters/useRoles/useRoles';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 
 interface IAutoCreateFormProps {
     data?: {

frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 import {
     Box,
     Button,

frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 import {
     Button,
     FormControl,
@@ -19,7 +20,7 @@ import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
 import { SsoGroupSettings } from '../SsoGroupSettings';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 
 const initialState = {
     enabled: false,

frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 import { Button, FormControlLabel, Grid, Switch } from '@mui/material';
 import { Alert } from '@mui/material';
 import useAuthSettings from 'hooks/api/getters/useAuthSettings/useAuthSettings';
 import useAuthSettingsApi, {
-    ISimpleAuthSettings,
+    type ISimpleAuthSettings,
 } from 'hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';

frontend/src/component/admin/auth/PasswordAuth/PasswordAuthDialog.tsx

@@ -1,7 +1,7 @@
 import { Alert, Typography } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import { IAdminCount } from 'hooks/api/getters/useAdminCount/useAdminCount';
+import type { IAdminCount } from 'hooks/api/getters/useAdminCount/useAdminCount';
-import { IApiToken } from 'hooks/api/getters/useApiTokens/useApiTokens';
+import type { IApiToken } from 'hooks/api/getters/useApiTokens/useApiTokens';
 
 interface IPasswordAuthDialogProps {
     open: boolean;

frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 import {
     Button,
     FormControlLabel,
@@ -15,7 +16,7 @@ import useAuthSettingsApi from 'hooks/api/actions/useAuthSettingsApi/useAuthSett
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
 import { SsoGroupSettings } from '../SsoGroupSettings';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 
 const initialState = {
     enabled: false,

frontend/src/component/admin/auth/SsoGroupSettings.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { FormControlLabel, Grid, Switch, TextField } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 

frontend/src/component/admin/banners/BannerModal/BannerForm.tsx

@@ -5,8 +5,13 @@ import { FormSwitch } from 'component/common/FormSwitch/FormSwitch';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 import Input from 'component/common/Input/Input';
-import { BannerVariant } from 'interfaces/banner';
+import type { BannerVariant } from 'interfaces/banner';
-import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
+import {
+    type ChangeEvent,
+    type Dispatch,
+    type SetStateAction,
+    useState,
+} from 'react';
 import Visibility from '@mui/icons-material/Visibility';
 import { BannerDialog } from 'component/banners/Banner/BannerDialog/BannerDialog';
 

frontend/src/component/admin/banners/BannerModal/BannerModal.tsx

@@ -4,11 +4,11 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
-import { FormEvent, useEffect, useState } from 'react';
+import { type FormEvent, useEffect, useState } from 'react';
-import { BannerVariant, IInternalBanner } from 'interfaces/banner';
+import type { BannerVariant, IInternalBanner } from 'interfaces/banner';
 import { useBanners } from 'hooks/api/getters/useBanners/useBanners';
 import {
-    AddOrUpdateBanner,
+    type AddOrUpdateBanner,
     useBannersApi,
 } from 'hooks/api/actions/useBannersApi/useBannersApi';
 import { BannerForm } from './BannerForm';

frontend/src/component/admin/banners/BannersTable/BannerDeleteDialog.tsx

@@ -1,5 +1,5 @@
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import { IInternalBanner } from 'interfaces/banner';
+import type { IInternalBanner } from 'interfaces/banner';
 
 interface IBannerDeleteDialogProps {
     banner?: IInternalBanner;

frontend/src/component/admin/banners/BannersTable/BannersTable.tsx

@@ -17,7 +17,7 @@ import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColum
 import { useSearch } from 'hooks/useSearch';
 import { useBanners } from 'hooks/api/getters/useBanners/useBanners';
 import { useBannersApi } from 'hooks/api/actions/useBannersApi/useBannersApi';
-import { IInternalBanner } from 'interfaces/banner';
+import type { IInternalBanner } from 'interfaces/banner';
 import { Banner } from 'component/banners/Banner/Banner';
 import { BannersActionsCell } from './BannersActionsCell';
 import { BannerDeleteDialog } from './BannerDeleteDialog';

frontend/src/component/admin/billing/BillingDashboard/BillingDashboard.tsx

@@ -1,6 +1,6 @@
 import { Grid } from '@mui/material';
-import { IInstanceStatus } from 'interfaces/instance';
+import type { IInstanceStatus } from 'interfaces/instance';
-import { VFC } from 'react';
+import type { VFC } from 'react';
 import { BillingInformation } from './BillingInformation/BillingInformation';
 import { BillingPlan } from './BillingPlan/BillingPlan';
 

frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { Alert, Divider, Grid, styled, Typography } from '@mui/material';
 import { BillingInformationButton } from './BillingInformationButton/BillingInformationButton';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { IInstanceStatus, InstanceState } from 'interfaces/instance';
+import { type IInstanceStatus, InstanceState } from 'interfaces/instance';
 
 const StyledInfoBox = styled('aside')(({ theme }) => ({
     padding: theme.spacing(4),

frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformationButton/BillingInformationButton.tsx

@@ -1,5 +1,5 @@
 import { Button, styled } from '@mui/material';
-import { VFC } from 'react';
+import type { VFC } from 'react';
 import { formatApiPath } from 'utils/formatPath';
 
 const PORTAL_URL = formatApiPath('api/admin/invoices');

frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx

@@ -1,11 +1,11 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { Alert, Divider, Grid, styled, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
 import CheckIcon from '@mui/icons-material/Check';
 import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
-    IInstanceStatus,
+    type IInstanceStatus,
     InstanceState,
     InstancePlan,
 } from 'interfaces/instance';

frontend/src/component/admin/billing/BillingDashboard/BillingPlan/GridColLink/GridColLink.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
-import { FC } from 'react';
+import type { FC } from 'react';
 
 const StyledSpan = styled('span')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,

frontend/src/component/admin/billing/BillingHistory/BillingHistory.tsx

@@ -8,7 +8,7 @@ import {
 } from 'component/common/Table';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
-import { useMemo, VFC } from 'react';
+import { useMemo, type VFC } from 'react';
 import { useGlobalFilter, useSortBy, useTable } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';

frontend/src/component/admin/cors/CorsForm.tsx

@@ -1,5 +1,6 @@
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
-import React, { useState } from 'react';
+import type React from 'react';
+import { useState } from 'react';
 import { TextField, Box } from '@mui/material';
 import { UpdateButton } from 'component/common/UpdateButton/UpdateButton';
 import { useUiConfigApi } from 'hooks/api/actions/useUiConfigApi/useUiConfigApi';

frontend/src/component/admin/filterAdminRoutes.ts

@@ -1,4 +1,4 @@
-import { INavigationMenuItem } from 'interfaces/route';
+import type { INavigationMenuItem } from 'interfaces/route';
 
 export const filterAdminRoutes = (
     menu: INavigationMenuItem['menu'],

frontend/src/component/admin/groups/EditGroup/EditGroup.tsx

@@ -13,7 +13,7 @@ import { useGroup } from 'hooks/api/getters/useGroup/useGroup';
 import { UG_SAVE_BTN_ID } from 'utils/testIds';
 import { GO_BACK } from 'constants/navigate';
 import { useGroups } from 'hooks/api/getters/useGroups/useGroups';
-import { IGroup } from 'interfaces/group';
+import type { IGroup } from 'interfaces/group';
 
 export const EditGroupContainer = () => {
     const groupId = Number(useRequiredPathParam('groupId'));

frontend/src/component/admin/groups/Group/EditGroupUsers/EditGroupUsers.tsx

@@ -5,8 +5,8 @@ import { useGroupApi } from 'hooks/api/actions/useGroupApi/useGroupApi';
 import { useGroup } from 'hooks/api/getters/useGroup/useGroup';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import useToast from 'hooks/useToast';
-import { IGroup } from 'interfaces/group';
+import type { IGroup } from 'interfaces/group';
-import { FC, FormEvent, useEffect } from 'react';
+import { type FC, type FormEvent, useEffect } from 'react';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { GroupFormUsersSelect } from 'component/admin/groups/GroupForm/GroupFormUsersSelect/GroupFormUsersSelect';
 import { GroupFormUsersTable } from 'component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable';

frontend/src/component/admin/groups/Group/Group.tsx

@@ -1,7 +1,12 @@
-import { useEffect, useMemo, useState, VFC } from 'react';
+import { useEffect, useMemo, useState, type VFC } from 'react';
 import { IconButton, Tooltip, useMediaQuery, useTheme } from '@mui/material';
 import { useSearchParams, Link } from 'react-router-dom';
-import { SortingRule, useFlexLayout, useSortBy, useTable } from 'react-table';
+import {
+    type SortingRule,
+    useFlexLayout,
+    useSortBy,
+    useTable,
+} from 'react-table';
 import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
 import { useGroup } from 'hooks/api/getters/useGroup/useGroup';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
@@ -11,7 +16,7 @@ import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { sortTypes } from 'utils/sortTypes';
 import { createLocalStorage } from 'utils/createLocalStorage';
-import { IGroupUser } from 'interfaces/group';
+import type { IGroupUser } from 'interfaces/group';
 import { useSearch } from 'hooks/useSearch';
 import { Search } from 'component/common/Search/Search';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';

frontend/src/component/admin/groups/Group/RemoveGroupUser/RemoveGroupUser.tsx

@@ -3,8 +3,8 @@ import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { useGroupApi } from 'hooks/api/actions/useGroupApi/useGroupApi';
 import { useGroup } from 'hooks/api/getters/useGroup/useGroup';
 import useToast from 'hooks/useToast';
-import { IGroup, IGroupUser } from 'interfaces/group';
+import type { IGroup, IGroupUser } from 'interfaces/group';
-import { FC } from 'react';
+import type { FC } from 'react';
 import { formatUnknownError } from 'utils/formatUnknownError';
 
 interface IRemoveGroupUserProps {

frontend/src/component/admin/groups/GroupForm/GroupForm.tsx

@@ -1,8 +1,9 @@
-import React, { FC } from 'react';
+import type React from 'react';
+import type { FC } from 'react';
 import { Box, Button, styled } from '@mui/material';
 import { UG_DESC_ID, UG_NAME_ID } from 'utils/testIds';
 import Input from 'component/common/Input/Input';
-import { IGroupUser } from 'interfaces/group';
+import type { IGroupUser } from 'interfaces/group';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { GroupFormUsersSelect } from './GroupFormUsersSelect/GroupFormUsersSelect';
 import { GroupFormUsersTable } from './GroupFormUsersTable/GroupFormUsersTable';
@@ -10,7 +11,7 @@ import { ItemList } from 'component/common/ItemList/ItemList';
 import useAuthSettings from 'hooks/api/getters/useAuthSettings/useAuthSettings';
 import { Link } from 'react-router-dom';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
 import { RoleSelect } from 'component/common/RoleSelect/RoleSelect';
 

frontend/src/component/admin/groups/GroupForm/GroupFormUsersSelect/GroupFormUsersSelect.tsx

@@ -1,14 +1,14 @@
 import { Autocomplete, Checkbox, styled, TextField } from '@mui/material';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import { IUser } from 'interfaces/user';
+import type { IUser } from 'interfaces/user';
-import { VFC } from 'react';
+import type { VFC } from 'react';
 import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
-import { IGroupUser } from 'interfaces/group';
+import type { IGroupUser } from 'interfaces/group';
 import { UG_USERS_ID } from 'utils/testIds';
 import { caseInsensitiveSearch } from 'utils/search';
 import { useServiceAccounts } from 'hooks/api/getters/useServiceAccounts/useServiceAccounts';
-import { IServiceAccount } from 'interfaces/service-account';
+import type { IServiceAccount } from 'interfaces/service-account';
 
 const StyledOption = styled('div')(({ theme }) => ({
     display: 'flex',

frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx

@@ -1,7 +1,7 @@
-import { useMemo, useState, VFC } from 'react';
+import { useMemo, useState, type VFC } from 'react';
 import { IconButton, Tooltip, useMediaQuery } from '@mui/material';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
-import { IGroupUser } from 'interfaces/group';
+import type { IGroupUser } from 'interfaces/group';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
 import Delete from '@mui/icons-material/Delete';

frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx

@@ -1,5 +1,5 @@
 import { styled, Tooltip } from '@mui/material';
-import { IGroup } from 'interfaces/group';
+import type { IGroup } from 'interfaces/group';
 import { Link, useNavigate } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { GroupCardAvatars } from './GroupCardAvatars/GroupCardAvatars';

frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { type FC, useState } from 'react';
 import {
     IconButton,
     ListItemIcon,

frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupCardAvatars.tsx

@@ -1,7 +1,8 @@
 import { styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { IGroupUser } from 'interfaces/group';
+import type { IGroupUser } from 'interfaces/group';
-import React, { useMemo, useState } from 'react';
+import type React from 'react';
+import { useMemo, useState } from 'react';
 import { GroupPopover } from './GroupPopover/GroupPopover';
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 

frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupPopover/GroupPopover.tsx

@@ -1,5 +1,5 @@
 import { Popover, styled } from '@mui/material';
-import { IGroupUser } from 'interfaces/group';
+import type { IGroupUser } from 'interfaces/group';
 
 const StyledPopover = styled(Popover)(({ theme }) => ({
     pointerEvents: 'none',

frontend/src/component/admin/groups/GroupsList/GroupsList.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useMemo, useState, VFC } from 'react';
+import { useEffect, useMemo, useState, type VFC } from 'react';
 import { useGroups } from 'hooks/api/getters/useGroups/useGroups';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { IGroup } from 'interfaces/group';
+import type { IGroup } from 'interfaces/group';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';

frontend/src/component/admin/groups/RemoveGroup/RemoveGroup.tsx

@@ -3,8 +3,8 @@ import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { useGroupApi } from 'hooks/api/actions/useGroupApi/useGroupApi';
 import { useGroups } from 'hooks/api/getters/useGroups/useGroups';
 import useToast from 'hooks/useToast';
-import { IGroup } from 'interfaces/group';
+import type { IGroup } from 'interfaces/group';
-import { FC } from 'react';
+import type { FC } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { formatUnknownError } from 'utils/formatUnknownError';
 

frontend/src/component/admin/groups/hooks/useGroupForm.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import useQueryParams from 'hooks/useQueryParams';
-import { IGroupUser } from 'interfaces/group';
+import type { IGroupUser } from 'interfaces/group';
 
 export const useGroupForm = (
     initialName = '',

frontend/src/component/admin/instance-admin/InstanceStats/InstanceStats.tsx

@@ -8,7 +8,7 @@ import {
     TableRow,
 } from '@mui/material';
 import { Box } from '@mui/system';
-import { VFC } from 'react';
+import type { VFC } from 'react';
 import { useInstanceStats } from 'hooks/api/getters/useInstanceStats/useInstanceStats';
 import { formatApiPath } from '../../../../utils/formatPath';
 import { PageContent } from '../../../common/PageContent/PageContent';

frontend/src/component/admin/invoice/InvoiceList.tsx

@@ -13,7 +13,7 @@ import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { formatApiPath } from 'utils/formatPath';
 import useInvoices from 'hooks/api/getters/useInvoices/useInvoices';
-import { IInvoice } from 'interfaces/invoice';
+import type { IInvoice } from 'interfaces/invoice';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { formatDateYMD } from 'utils/formatDate';
 

frontend/src/component/admin/menu/AdminTabsMenu.tsx

@@ -2,7 +2,7 @@ import { useLocation } from 'react-router-dom';
 import { Paper, styled, Tab, Tabs } from '@mui/material';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { CenteredNavLink } from './CenteredNavLink';
-import { VFC } from 'react';
+import type { VFC } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
 import { useAdminRoutes } from '../useAdminRoutes';

frontend/src/component/admin/menu/CenteredNavLink.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
-import { FC } from 'react';
+import type { FC } from 'react';
 import { NavLink } from 'react-router-dom';
 
 const StyledNavLink = styled(NavLink)(({ theme }) => ({

frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx

@@ -4,7 +4,7 @@ import { useInstanceMetrics } from 'hooks/api/getters/useInstanceMetrics/useInst
 import { Alert, Typography, styled, useTheme } from '@mui/material';
 import { unknownify } from 'utils/unknownify';
 import { useMemo } from 'react';
-import {
+import type {
     RequestsPerSecondSchema,
     RequestsPerSecondSchemaDataResultItem,
 } from 'openapi';
@@ -73,7 +73,7 @@ const asNetworkAppData = (
 ) => {
     const values = (result.values || []) as ResultValue[];
     const data = values.filter((value) => isRecent(value));
-    const reqs = data.length ? parseFloat(data[data.length - 1][1]) : 0;
+    const reqs = data.length ? Number.parseFloat(data[data.length - 1][1]) : 0;
     return {
         label: result.label,
         reqs,

frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx

@@ -1,11 +1,11 @@
 import { useInstanceMetrics } from 'hooks/api/getters/useInstanceMetrics/useInstanceMetrics';
-import { useMemo, VFC } from 'react';
+import { useMemo, type VFC } from 'react';
 import { Line } from 'react-chartjs-2';
 import {
     CategoryScale,
     Chart as ChartJS,
-    ChartDataset,
+    type ChartDataset,
-    ChartOptions,
+    type ChartOptions,
     Legend,
     LinearScale,
     LineElement,
@@ -15,11 +15,11 @@ import {
     Tooltip,
 } from 'chart.js';
 import {
-    ILocationSettings,
+    type ILocationSettings,
     useLocationSettings,
 } from 'hooks/useLocationSettings';
 import { formatDateHM } from 'utils/formatDate';
-import { RequestsPerSecondSchema } from 'openapi';
+import type { RequestsPerSecondSchema } from 'openapi';
 import 'chartjs-adapter-date-fns';
 import { Alert, useTheme } from '@mui/material';
 import { Box } from '@mui/system';
@@ -27,7 +27,7 @@ import { CyclicIterator } from 'utils/cyclicIterator';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { usePageTitle } from 'hooks/usePageTitle';
 import { unknownify } from 'utils/unknownify';
-import { Theme } from '@mui/material/styles/createTheme';
+import type { Theme } from '@mui/material/styles/createTheme';
 
 const pointStyles = ['circle', 'rect', 'rectRounded', 'rectRot', 'triangle'];
 
@@ -173,7 +173,7 @@ const toChartData = (
                 label: `${endpoint}: ${appName}`,
                 borderColor: color.main,
                 backgroundColor: color.main,
-                data: createChartPoints(values, (y) => parseFloat(y)),
+                data: createChartPoints(values, (y) => Number.parseFloat(y)),
                 elements: {
                     point: {
                         radius: 4,

frontend/src/component/admin/roles/RoleForm/RoleForm.tsx

@@ -1,8 +1,8 @@
 import { Alert, styled } from '@mui/material';
 import Input from 'component/common/Input/Input';
-import { ICheckedPermissions } from 'interfaces/permissions';
+import type { ICheckedPermissions } from 'interfaces/permissions';
-import { IRoleFormErrors } from './useRoleForm';
+import type { IRoleFormErrors } from './useRoleForm';
-import { PredefinedRoleType } from 'interfaces/role';
+import type { PredefinedRoleType } from 'interfaces/role';
 import { ROOT_ROLE_TYPE } from '@server/util/constants';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { RolePermissionCategories } from './RolePermissionCategories/RolePermissionCategories';

frontend/src/component/admin/roles/RoleForm/RolePermissionCategories/RolePermissionCategories.tsx

@@ -7,8 +7,8 @@ import {
     PROJECT_ROLE_TYPES,
 } from '@server/util/constants';
 import usePermissions from 'hooks/api/getters/usePermissions/usePermissions';
-import { ICheckedPermissions, IPermission } from 'interfaces/permissions';
+import type { ICheckedPermissions, IPermission } from 'interfaces/permissions';
-import { PredefinedRoleType } from 'interfaces/role';
+import type { PredefinedRoleType } from 'interfaces/role';
 import {
     flattenProjectPermissions,
     getCategorizedProjectPermissions,

frontend/src/component/admin/roles/RoleForm/RolePermissionCategories/RolePermissionCategory.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useMemo, useState } from 'react';
+import { type ReactNode, useMemo, useState } from 'react';
 import {
     Accordion,
     AccordionDetails,
@@ -13,7 +13,7 @@ import {
     Typography,
 } from '@mui/material';
 import ExpandMore from '@mui/icons-material/ExpandMore';
-import { ICheckedPermissions, IPermission } from 'interfaces/permissions';
+import type { ICheckedPermissions, IPermission } from 'interfaces/permissions';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { getRoleKey } from 'utils/permissions';
 

frontend/src/component/admin/roles/RoleForm/useRoleForm.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { IPermission, ICheckedPermissions } from 'interfaces/permissions';
+import type { IPermission, ICheckedPermissions } from 'interfaces/permissions';
-import { IRole, PredefinedRoleType } from 'interfaces/role';
+import type { IRole, PredefinedRoleType } from 'interfaces/role';
 import { useRoles } from 'hooks/api/getters/useRoles/useRoles';
 import { permissionsToCheckedPermissions } from 'utils/permissions';
 import { ROOT_ROLE_TYPE } from '@server/util/constants';

frontend/src/component/admin/roles/RoleModal/RoleModal.tsx

@@ -7,10 +7,10 @@ import { RoleForm } from '../RoleForm/RoleForm';
 import { useRoles } from 'hooks/api/getters/useRoles/useRoles';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
-import { FormEvent, useEffect } from 'react';
+import { type FormEvent, useEffect } from 'react';
 import { useRolesApi } from 'hooks/api/actions/useRolesApi/useRolesApi';
 import { useRole } from 'hooks/api/getters/useRole/useRole';
-import { PredefinedRoleType } from 'interfaces/role';
+import type { PredefinedRoleType } from 'interfaces/role';
 import { ROOT_ROLE_TYPE } from '@server/util/constants';
 
 const StyledForm = styled('form')(() => ({

frontend/src/component/admin/roles/RolesPage.tsx

@@ -12,7 +12,7 @@ import theme from 'themes/theme';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import Add from '@mui/icons-material/Add';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 import { TabLink } from 'component/common/TabNav/TabLink';
 
 const StyledHeader = styled('div')(() => ({

frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialog.tsx

@@ -1,4 +1,4 @@
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 import { RoleDeleteDialogRootRole } from './RoleDeleteDialogRootRole/RoleDeleteDialogRootRole';
 import { RoleDeleteDialogProjectRole } from './RoleDeleteDialogProjectRole/RoleDeleteDialogProjectRole';
 import { CUSTOM_PROJECT_ROLE_TYPE } from 'constants/roles';

frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogProjectRole/RoleDeleteDialogProjectRole.tsx

@@ -1,7 +1,7 @@
 import { Alert, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 import { useProjectRoleAccessUsage } from 'hooks/api/getters/useProjectRoleAccessUsage/useProjectRoleAccessUsage';
 import { RoleDeleteDialogProjectRoleTable } from './RoleDeleteDialogProjectRoleTable';
 

frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogProjectRole/RoleDeleteDialogProjectRoleTable.tsx

@@ -1,9 +1,9 @@
 import { VirtualizedTable } from 'component/common/Table';
 import { useMemo, useState } from 'react';
-import { useTable, useSortBy, useFlexLayout, Column } from 'react-table';
+import { useTable, useSortBy, useFlexLayout, type Column } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
-import { IProjectRoleUsageCount } from 'interfaces/project';
+import type { IProjectRoleUsageCount } from 'interfaces/project';
 import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
 
 interface IRoleDeleteDialogProjectRoleTableProps {

frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogGroups.tsx

@@ -2,9 +2,9 @@ import { VirtualizedTable } from 'component/common/Table';
 import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import { useMemo, useState } from 'react';
-import { useTable, useSortBy, useFlexLayout, Column } from 'react-table';
+import { useTable, useSortBy, useFlexLayout, type Column } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
-import { IGroup } from 'interfaces/group';
+import type { IGroup } from 'interfaces/group';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 
 export type PageQueryType = Partial<

frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogRootRole.tsx

@@ -3,7 +3,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { useServiceAccounts } from 'hooks/api/getters/useServiceAccounts/useServiceAccounts';
 import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 import { RoleDeleteDialogUsers } from './RoleDeleteDialogUsers';
 import { RoleDeleteDialogServiceAccounts } from './RoleDeleteDialogServiceAccounts';
 import { useGroups } from 'hooks/api/getters/useGroups/useGroups';

frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogServiceAccounts.tsx

@@ -2,10 +2,10 @@ import { VirtualizedTable } from 'component/common/Table';
 import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import { useMemo, useState } from 'react';
-import { useTable, useSortBy, useFlexLayout, Column } from 'react-table';
+import { useTable, useSortBy, useFlexLayout, type Column } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
-import { IServiceAccount } from 'interfaces/service-account';
+import type { IServiceAccount } from 'interfaces/service-account';
 import { ServiceAccountTokensCell } from 'component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountTokensCell/ServiceAccountTokensCell';
 
 export type PageQueryType = Partial<

frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogUsers.tsx

@@ -2,10 +2,10 @@ import { VirtualizedTable } from 'component/common/Table';
 import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import { useMemo, useState } from 'react';
-import { useTable, useSortBy, useFlexLayout, Column } from 'react-table';
+import { useTable, useSortBy, useFlexLayout, type Column } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
-import { IUser } from 'interfaces/user';
+import type { IUser } from 'interfaces/user';
 
 export type PageQueryType = Partial<
     Record<'sort' | 'order' | 'search', string>

frontend/src/component/admin/roles/RolesTable/RolePermissionsCell/RolePermissionsCell.tsx

@@ -1,7 +1,7 @@
-import { VFC } from 'react';
+import type { VFC } from 'react';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 import { useRole } from 'hooks/api/getters/useRole/useRole';
 import { RoleDescription } from 'component/common/RoleDescription/RoleDescription';
 import { PREDEFINED_ROLE_TYPES } from '@server/util/constants';

frontend/src/component/admin/roles/RolesTable/RolesActionsCell/RolesActionsCell.tsx

@@ -4,8 +4,8 @@ import { Box, styled } from '@mui/material';
 import { PREDEFINED_ROLE_TYPES } from '@server/util/constants';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
-import { VFC } from 'react';
+import type { VFC } from 'react';
 
 const StyledBox = styled(Box)(() => ({
     display: 'flex',

frontend/src/component/admin/roles/RolesTable/RolesCell/RolesCell.tsx

@@ -1,7 +1,7 @@
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Badge } from 'component/common/Badge/Badge';
 import { styled } from '@mui/material';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import { PREDEFINED_ROLE_TYPES } from '@server/util/constants';
 

frontend/src/component/admin/roles/RolesTable/RolesTable.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { IRole, PredefinedRoleType } from 'interfaces/role';
+import type { IRole, PredefinedRoleType } from 'interfaces/role';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { PageContent } from 'component/common/PageContent/PageContent';

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountDeleteDialog/ServiceAccountDeleteDialog.tsx

@@ -1,7 +1,7 @@
 import { Alert, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import { IServiceAccount } from 'interfaces/service-account';
+import type { IServiceAccount } from 'interfaces/service-account';
 import { ServiceAccountTokens } from '../ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens';
 
 const StyledTableContainer = styled('div')(({ theme }) => ({

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx

@@ -11,13 +11,13 @@ import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import useToast from 'hooks/useToast';
-import { FormEvent, useEffect, useState } from 'react';
+import { type FormEvent, useEffect, useState } from 'react';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import Input from 'component/common/Input/Input';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { IUser } from 'interfaces/user';
+import type { IUser } from 'interfaces/user';
 import {
-    IServiceAccountPayload,
+    type IServiceAccountPayload,
     useServiceAccountsApi,
 } from 'hooks/api/actions/useServiceAccountsApi/useServiceAccountsApi';
 import { useServiceAccounts } from 'hooks/api/getters/useServiceAccounts/useServiceAccounts';
@@ -25,15 +25,15 @@ import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
 import {
     calculateExpirationDate,
     ExpirationOption,
-    IPersonalAPITokenFormErrors,
+    type IPersonalAPITokenFormErrors,
     PersonalAPITokenForm,
 } from 'component/user/Profile/PersonalAPITokensTab/CreatePersonalAPIToken/PersonalAPITokenForm/PersonalAPITokenForm';
 import { useServiceAccountTokensApi } from 'hooks/api/actions/useServiceAccountTokensApi/useServiceAccountTokensApi';
-import { INewPersonalAPIToken } from 'interfaces/personalAPIToken';
+import type { INewPersonalAPIToken } from 'interfaces/personalAPIToken';
 import { ServiceAccountTokens } from './ServiceAccountTokens/ServiceAccountTokens';
-import { IServiceAccount } from 'interfaces/service-account';
+import type { IServiceAccount } from 'interfaces/service-account';
 import { RoleSelect } from 'component/common/RoleSelect/RoleSelect';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 
 const StyledForm = styled('form')(() => ({
     display: 'flex',

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountCreateTokenDialog/ServiceAccountCreateTokenDialog.tsx

@@ -3,11 +3,11 @@ import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import {
     calculateExpirationDate,
     ExpirationOption,
-    IPersonalAPITokenFormErrors,
+    type IPersonalAPITokenFormErrors,
     PersonalAPITokenForm,
 } from 'component/user/Profile/PersonalAPITokensTab/CreatePersonalAPIToken/PersonalAPITokenForm/PersonalAPITokenForm';
-import { ICreateServiceAccountTokenPayload } from 'hooks/api/actions/useServiceAccountTokensApi/useServiceAccountTokensApi';
+import type { ICreateServiceAccountTokenPayload } from 'hooks/api/actions/useServiceAccountTokensApi/useServiceAccountTokensApi';
-import { IPersonalAPIToken } from 'interfaces/personalAPIToken';
+import type { IPersonalAPIToken } from 'interfaces/personalAPIToken';
 
 const DEFAULT_EXPIRATION = ExpirationOption['30DAYS'];
 

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx

@@ -18,12 +18,17 @@ import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightC
 import { PAT_LIMIT } from '@server/util/constants';
 import { useServiceAccountTokens } from 'hooks/api/getters/useServiceAccountTokens/useServiceAccountTokens';
 import { useSearch } from 'hooks/useSearch';
-import {
+import type {
     INewPersonalAPIToken,
     IPersonalAPIToken,
 } from 'interfaces/personalAPIToken';
 import { useMemo, useState } from 'react';
-import { useTable, SortingRule, useSortBy, useFlexLayout } from 'react-table';
+import {
+    useTable,
+    type SortingRule,
+    useSortBy,
+    useFlexLayout,
+} from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { ServiceAccountCreateTokenDialog } from './ServiceAccountCreateTokenDialog/ServiceAccountCreateTokenDialog';
 import { ServiceAccountTokenDialog } from 'component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountTokenDialog/ServiceAccountTokenDialog';
@@ -32,12 +37,12 @@ import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColum
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import {
-    ICreateServiceAccountTokenPayload,
+    type ICreateServiceAccountTokenPayload,
     useServiceAccountTokensApi,
 } from 'hooks/api/actions/useServiceAccountTokensApi/useServiceAccountTokensApi';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
-import { IServiceAccount } from 'interfaces/service-account';
+import type { IServiceAccount } from 'interfaces/service-account';
 import { useServiceAccounts } from 'hooks/api/getters/useServiceAccounts/useServiceAccounts';
 
 const StyledHeader = styled('div')(({ theme }) => ({

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountTokenDialog/ServiceAccountTokenDialog.tsx

@@ -1,8 +1,8 @@
 import { Alert, styled, Typography } from '@mui/material';
 import { UserToken } from 'component/admin/apiToken/ConfirmToken/UserToken/UserToken';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import { INewPersonalAPIToken } from 'interfaces/personalAPIToken';
+import type { INewPersonalAPIToken } from 'interfaces/personalAPIToken';
-import { FC } from 'react';
+import type { FC } from 'react';
 
 const StyledAlert = styled(Alert)(({ theme }) => ({
     marginBottom: theme.spacing(3),

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountTokensCell/ServiceAccountTokensCell.tsx

@@ -1,9 +1,9 @@
-import { VFC } from 'react';
+import type { VFC } from 'react';
 import { styled, Typography } from '@mui/material';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
-import { IServiceAccount } from 'interfaces/service-account';
+import type { IServiceAccount } from 'interfaces/service-account';
 import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
 import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
 

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsActionsCell/ServiceAccountsActionsCell.tsx

@@ -3,7 +3,7 @@ import Edit from '@mui/icons-material/Edit';
 import { Box, styled } from '@mui/material';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
-import { VFC } from 'react';
+import type { VFC } from 'react';
 
 const StyledBox = styled(Box)(() => ({
     display: 'flex',

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { PageContent } from 'component/common/PageContent/PageContent';
@@ -23,11 +23,11 @@ import { useServiceAccountsApi } from 'hooks/api/actions/useServiceAccountsApi/u
 import { ServiceAccountModal } from './ServiceAccountModal/ServiceAccountModal';
 import { ServiceAccountDeleteDialog } from './ServiceAccountDeleteDialog/ServiceAccountDeleteDialog';
 import { ServiceAccountsActionsCell } from './ServiceAccountsActionsCell/ServiceAccountsActionsCell';
-import { INewPersonalAPIToken } from 'interfaces/personalAPIToken';
+import type { INewPersonalAPIToken } from 'interfaces/personalAPIToken';
 import { ServiceAccountTokenDialog } from './ServiceAccountTokenDialog/ServiceAccountTokenDialog';
 import { ServiceAccountTokensCell } from './ServiceAccountTokensCell/ServiceAccountTokensCell';
 import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
-import { IServiceAccount } from 'interfaces/service-account';
+import type { IServiceAccount } from 'interfaces/service-account';
 import { RoleCell } from 'component/common/Table/cells/RoleCell/RoleCell';
 
 export const ServiceAccountsTable = () => {

frontend/src/component/admin/users/AccessMatrix/AccessMatrixSelect.tsx

@@ -1,4 +1,4 @@
-import { Autocomplete, AutocompleteProps, TextField } from '@mui/material';
+import { Autocomplete, type AutocompleteProps, TextField } from '@mui/material';
 
 interface IAccessMatrixSelectProps<T>
     extends Partial<AutocompleteProps<T, false, false, false>> {

frontend/src/component/admin/users/AccessMatrix/PermissionsTable.tsx

@@ -7,7 +7,7 @@ import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
 import Check from '@mui/icons-material/Check';
 import Close from '@mui/icons-material/Close';
 import { Box } from '@mui/material';
-import { IMatrixPermission } from 'interfaces/permissions';
+import type { IMatrixPermission } from 'interfaces/permissions';
 
 export const PermissionsTable = ({
     permissions,

frontend/src/component/admin/users/CreateUser/SeatCostWarning/SeatCostWarning.tsx

@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import type { VFC } from 'react';
 import { Alert } from '@mui/material';
 import { useUsersPlan } from 'hooks/useUsersPlan';
 import { useUsers } from 'hooks/api/getters/useUsers/useUsers';

frontend/src/component/admin/users/InactiveUsersList/DeleteInactiveUsers/DeleteInactiveUsers.tsx

@@ -3,7 +3,7 @@ import useLoading from '../../../../../hooks/useLoading';
 import { Alert, Typography } from '@mui/material';
 import { DEL_INACTIVE_USERS_ERROR } from '../../../../../hooks/api/actions/useInactiveUsersApi/useInactiveUsersApi';
 import { ConditionallyRender } from '../../../../common/ConditionallyRender/ConditionallyRender';
-import { IInactiveUser } from '../../../../../hooks/api/getters/useInactiveUsers/useInactiveUsers';
+import type { IInactiveUser } from '../../../../../hooks/api/getters/useInactiveUsers/useInactiveUsers';
 import { flexRow } from '../../../../../themes/themeStyles';
 
 interface IDeleteInactiveUsersProps {

frontend/src/component/admin/users/InactiveUsersList/DeleteUser/DeleteUser.tsx

@@ -6,7 +6,7 @@ import useLoading from 'hooks/useLoading';
 import { Typography } from '@mui/material';
 import { useThemeStyles } from 'themes/themeStyles';
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
-import { IInactiveUser } from '../../../../../hooks/api/getters/useInactiveUsers/useInactiveUsers';
+import type { IInactiveUser } from '../../../../../hooks/api/getters/useInactiveUsers/useInactiveUsers';
 
 const StyledUserAvatar = styled(UserAvatar)(({ theme }) => ({
     width: theme.spacing(5),

frontend/src/component/admin/users/InactiveUsersList/InactiveUsersActionCell/InactiveUsersActionCell.tsx

@@ -1,4 +1,5 @@
-import React, { VFC } from 'react';
+import type React from 'react';
+import type { VFC } from 'react';
 import { Box, styled } from '@mui/material';
 import PermissionIconButton from '../../../../common/PermissionIconButton/PermissionIconButton';
 import { ADMIN } from '../../../../providers/AccessProvider/permissions';

frontend/src/component/admin/users/InactiveUsersList/InactiveUsersList.tsx

@@ -1,5 +1,5 @@
 import {
-    IInactiveUser,
+    type IInactiveUser,
     useInactiveUsers,
 } from 'hooks/api/getters/useInactiveUsers/useInactiveUsers';
 import { useUsers } from '../../../../hooks/api/getters/useUsers/useUsers';
@@ -7,10 +7,11 @@ import useAdminUsersApi from '../../../../hooks/api/actions/useAdminUsersApi/use
 import { useInactiveUsersApi } from '../../../../hooks/api/actions/useInactiveUsersApi/useInactiveUsersApi';
 import useToast from '../../../../hooks/useToast';
 import { formatUnknownError } from '../../../../utils/formatUnknownError';
-import { IUser } from '../../../../interfaces/user';
+import type { IUser } from '../../../../interfaces/user';
-import React, { useMemo, useState } from 'react';
+import type React from 'react';
+import { useMemo, useState } from 'react';
 import { TimeAgoCell } from '../../../common/Table/cells/TimeAgoCell/TimeAgoCell';
-import { IRole } from '../../../../interfaces/role';
+import type { IRole } from '../../../../interfaces/role';
 import { RoleCell } from '../../../common/Table/cells/RoleCell/RoleCell';
 import { HighlightCell } from '../../../common/Table/cells/HighlightCell/HighlightCell';
 import { PageContent } from '../../../common/PageContent/PageContent';

frontend/src/component/admin/users/InviteLink/InviteLink.tsx

@@ -1,4 +1,4 @@
-import { FormEventHandler, useState, VFC } from 'react';
+import { type FormEventHandler, useState, type VFC } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useSWRConfig } from 'swr';
 import { Box, Button, Typography } from '@mui/material';

frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx

@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import type { VFC } from 'react';
 import { Box } from '@mui/material';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { InviteLinkBarContent } from './InviteLinkBarContent';

frontend/src/component/admin/users/UserForm/UserForm.tsx

@@ -1,11 +1,11 @@
 import Input from 'component/common/Input/Input';
 import { Button, FormControl, Typography, Switch, styled } from '@mui/material';
-import React from 'react';
+import type React from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { EDIT } from 'constants/misc';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { RoleSelect } from 'component/common/RoleSelect/RoleSelect';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
 
 const StyledForm = styled('form')(() => ({

frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import type React from 'react';
+import { useState } from 'react';
 import classnames from 'classnames';
 import { styled, TextField, Typography } from '@mui/material';
 import { trim } from 'component/common/util';
@@ -9,7 +10,7 @@ import PasswordChecker, {
 } from 'component/user/common/ResetPasswordForm/PasswordChecker';
 import { useThemeStyles } from 'themes/themeStyles';
 import PasswordMatcher from 'component/user/common/ResetPasswordForm/PasswordMatcher';
-import { IUser } from 'interfaces/user';
+import type { IUser } from 'interfaces/user';
 import useAdminUsersApi from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 

frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx

@@ -5,7 +5,7 @@ import { Alert, styled } from '@mui/material';
 import useLoading from 'hooks/useLoading';
 import { Typography } from '@mui/material';
 import { useThemeStyles } from 'themes/themeStyles';
-import { IUser } from 'interfaces/user';
+import type { IUser } from 'interfaces/user';
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 
 const StyledUserAvatar = styled(UserAvatar)(({ theme }) => ({

frontend/src/component/admin/users/UsersList/ResetPassword/ResetPassword.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import type React from 'react';
+import { useState } from 'react';
 import classnames from 'classnames';
 import { Box, styled, Typography } from '@mui/material';
 import { modalStyles } from 'component/admin/users/util';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { useThemeStyles } from 'themes/themeStyles';
-import { IUser } from 'interfaces/user';
+import type { IUser } from 'interfaces/user';
 import useAdminUsersApi from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 import useToast from 'hooks/useToast';

frontend/src/component/admin/users/UsersList/UserLimitWarning/UserLimitWarning.tsx

@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import type { VFC } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { Alert, Link } from '@mui/material';
 import { useUsersPlan } from 'hooks/useUsersPlan';

frontend/src/component/admin/users/UsersList/UsersActionsCell/UsersActionsCell.tsx

@@ -7,7 +7,7 @@ import { Box, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
-import { VFC } from 'react';
+import type { VFC } from 'react';
 
 const StyledBox = styled(Box)(() => ({
     display: 'flex',

frontend/src/component/admin/users/UsersList/UsersList.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from 'react';
+import type React from 'react';
+import { useMemo, useState } from 'react';
 import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
 import ChangePassword from './ChangePassword/ChangePassword';
 import ResetPassword from './ResetPassword/ResetPassword';
@@ -8,8 +9,8 @@ import ConfirmUserAdded from '../ConfirmUserAdded/ConfirmUserAdded';
 import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
 import useAdminUsersApi from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
 import { useAccessOverviewApi } from 'hooks/api/actions/useAccessOverviewApi/useAccessOverviewApi';
-import { IUser } from 'interfaces/user';
+import type { IUser } from 'interfaces/user';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { useUsersPlan } from 'hooks/useUsersPlan';

frontend/src/component/admin/users/hooks/useAddUserForm.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { IRole } from 'interfaces/role';
+import type { IRole } from 'interfaces/role';
 
 const useCreateUserForm = (
     initialName = '',

frontend/src/component/application/Application.tsx

@@ -1,5 +1,6 @@
 /* eslint react/no-multi-comp:off */
-import React, { useContext, useState } from 'react';
+import type React from 'react';
+import { useContext, useState } from 'react';
 import {
     Box,
     IconButton,

frontend/src/component/application/ApplicationChart.tsx

@@ -1,8 +1,8 @@
 import { Box, Divider, styled, Typography, useTheme } from '@mui/material';
 import { ArcherContainer, ArcherElement } from 'react-archer';
 import { useNavigate } from 'react-router-dom';
-import { FC, useLayoutEffect, useRef, useState } from 'react';
+import { type FC, useLayoutEffect, useRef, useState } from 'react';
-import {
+import type {
     ApplicationOverviewEnvironmentSchema,
     ApplicationOverviewSchema,
 } from 'openapi';