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
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged
+yarn 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": [
-    "index.js",
-    "build"
-  ],
+  "files": ["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": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">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,15 +9,15 @@ import {
 } from '@mui/material';
 import { Autocomplete } from '@mui/material';
 
-import {
+import type {
     AutocompleteRenderGroupParams,
     AutocompleteRenderInputParams,
     AutocompleteRenderOptionState,
 } from '@mui/material/Autocomplete';
 
 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 { IApiToken } from 'hooks/api/getters/useApiTokens/useApiTokens';
+import type { IAdminCount } from 'hooks/api/getters/useAdminCount/useAdminCount';
+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 { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
+import type { BannerVariant } from 'interfaces/banner';
+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 { BannerVariant, IInternalBanner } from 'interfaces/banner';
+import { type FormEvent, useEffect, useState } from 'react';
+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 { VFC } from 'react';
+import type { IInstanceStatus } from 'interfaces/instance';
+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');