[Web-UI] Update linter and build dependencies (#904)

ActiveChooN · dwesolow · web-flow · commit 42c4af4876cb · 2025-08-07T08:19:49.000Z
Co-authored-by: Dawid Wesołowski &lt;dawid.wesolowski@intel.com&gt;
diff --git a/web_ui/package-lock.json b/web_ui/package-lock.json
diff --git a/web_ui/package.json b/web_ui/package.json
@@ -9,8 +9,8 @@
   "dependencies": {
     "@doodle3d/clipper-js": "^1.0.11",
     "@geti/core": "*",
-    "@geti/ui": "*",
     "@geti/smart-tools": "*",
+    "@geti/ui": "*",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/core": "^1.26.0",
     "@opentelemetry/exporter-metrics-otlp-http": "^0.53.0",
@@ -112,18 +112,19 @@
   },
   "devDependencies": {
     "@apidevtools/swagger-cli": "^4.0.4",
-    "@eslint/compat": "^1.2.8",
+    "@eslint/compat": "^1.3.1",
     "@geti/config": "*",
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.5.1",
     "@mjackson/headers": "^0.10.0",
     "@playwright/test": "^1.51.1",
-    "@rsbuild/core": "^1.3.14",
-    "@rsbuild/plugin-react": "^1.3.0",
-    "@rsbuild/plugin-sass": "^1.3.1",
-    "@rsbuild/plugin-svgr": "^1.2.0",
-    "@rsdoctor/rspack-plugin": "^1.0.2",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^15.0.7",
+    "@rsbuild/core": "^1.4.14",
+    "@rsbuild/plugin-react": "^1.3.5",
+    "@rsbuild/plugin-sass": "^1.3.4",
+    "@rsbuild/plugin-svgr": "^1.2.2",
+    "@rsdoctor/rspack-plugin": "^1.1.11",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/adm-zip": "^0.5.7",
     "@types/jest": "^29.5.14",
@@ -135,13 +136,13 @@
     "@types/react-dom": "^18.3.5",
     "@types/utif": "^3.0.5",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.31.1",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
     "adm-zip": "^0.5.16",
     "babel-preset-react-app": "^10.1.0",
-    "eslint": "^9.25.1",
-    "eslint-import-resolver-typescript": "^4.3.4",
+    "eslint": "^9.31.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-playwright": "^2.2.0",
@@ -155,10 +156,10 @@
     "json-merger": "^3.0.0",
     "msw": "^1.3.5",
     "openapi-backend": "^5.12.0",
-    "openapi-typescript": "^7.6.1",
-    "openapi-typescript-fetch": "^2.1.0",
-    "prettier": "^3.5.3",
-    "typescript": "^5.7.2"
+    "openapi-typescript": "^7.8.0",
+    "openapi-typescript-fetch": "^2.2.1",
+    "prettier": "^3.6.2",
+    "typescript": "^5.8.3"
   },
   "overrides": {
     "msw": {
diff --git a/web_ui/packages/core/package.json b/web_ui/packages/core/package.json
@@ -7,19 +7,19 @@
   },
   "devDependencies": {
     "@geti/config": "*",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.15.3",
-    "eslint": "^9.25.1",
+    "eslint": "^9.31.0",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "jest": "^29.7.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.8.3"
   },
   "type": "module",
   "scripts": {
diff --git a/web_ui/packages/smart-tools/package.json b/web_ui/packages/smart-tools/package.json
@@ -17,13 +17,13 @@
     "@types/node": "^22.15.3",
     "@types/ndarray": "^1.0.14",
     "@types/ndarray-ops": "^1.2.7",
-    "eslint": "^9.25.1",
+    "eslint": "^9.31.0",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.8.3"
   },
   "exports": {
     ".": "./index.ts",
diff --git a/web_ui/packages/ui/package.json b/web_ui/packages/ui/package.json
@@ -12,20 +12,21 @@
   },
   "devDependencies": {
     "@geti/config": "*",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "eslint": "^9.25.1",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-playwright": "^2.2.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "jest": "^29.7.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.8.3"
   },
   "scripts": {
     "test:unit": "jest --config jest.config.js --watchAll=false",
diff --git a/web_ui/packages/ui/src/button/button.component.tsx b/web_ui/packages/ui/src/button/button.component.tsx
@@ -10,7 +10,7 @@ import {
     SpectrumButtonProps,
 } from '@adobe/react-spectrum';
 import { FocusableRef, FocusableRefValue } from '@react-types/shared';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { Link } from 'react-router-dom';
 
 import buttonClasses from './button.module.scss';
diff --git a/web_ui/src/intel-admin-app/pages/organizations/generate-onboarding-invitation-link-dialog/generate-onboarding-invitation-link-dialog.test.tsx b/web_ui/src/intel-admin-app/pages/organizations/generate-onboarding-invitation-link-dialog/generate-onboarding-invitation-link-dialog.test.tsx
@@ -15,7 +15,7 @@ jest.mock('../../../../hooks/use-clipboard/use-clipboard.hook', () => ({
 }));
 
 describe('GenerateOnboardingTokenDialog', () => {
-    let originalLocation: typeof window.location;
+    let originalLocation: Location;
 
     beforeAll(() => {
         originalLocation = window.location;
@@ -26,7 +26,10 @@ describe('GenerateOnboardingTokenDialog', () => {
     });
 
     afterAll(() => {
-        window.location = originalLocation;
+        Object.defineProperty(window, 'location', {
+            value: originalLocation,
+            writable: true,
+        });
     });
 
     afterEach(() => {
diff --git a/web_ui/src/notification/notification-toast/center-notification-toast.component.tsx b/web_ui/src/notification/notification-toast/center-notification-toast.component.tsx
@@ -5,7 +5,7 @@ import { CSSProperties, ReactChild, ReactElement } from 'react';
 
 import { ActionButton, Divider, Flex, Text } from '@geti/ui';
 import { CloseSmall } from '@geti/ui/icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { isEmpty, isString } from 'lodash-es';
 import { useId } from 'react-aria';
 
diff --git a/web_ui/src/notification/notification-toast/notification-toast.component.tsx b/web_ui/src/notification/notification-toast/notification-toast.component.tsx
@@ -5,7 +5,7 @@ import { ReactElement } from 'react';
 
 import { ActionButton, Flex, Heading, Text } from '@geti/ui';
 import { CloseSmall } from '@geti/ui/icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { isEmpty } from 'lodash-es';
 
 import { NOTIFICATION_TYPE } from './notification-type.enum';
diff --git a/web_ui/src/pages/annotator/annotation/list-item-grid.component.tsx b/web_ui/src/pages/annotator/annotation/list-item-grid.component.tsx
@@ -5,7 +5,7 @@ import { createContext, ReactNode, RefObject, useContext, useRef, useState } fro
 
 import { Flex, Grid, useUnwrapDOMRef, type FlexProps } from '@geti/ui';
 import { useInteractOutside } from '@react-aria/interactions';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 
 import classes from './list-item-grid.module.scss';
 
diff --git a/web_ui/src/pages/annotator/annotation/shapes/pose-edges.component.tsx b/web_ui/src/pages/annotator/annotation/shapes/pose-edges.component.tsx
@@ -4,7 +4,7 @@
 import { Fragment } from 'react';
 
 import { BoundingBox, getBoundingBox } from '@geti/smart-tools/utils';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { isEmpty, isNil } from 'lodash-es';
 
 import { isKeypointTask } from '../../../../core/projects/utils';
diff --git a/web_ui/src/pages/annotator/components/footer/annotator-footer.component.tsx b/web_ui/src/pages/annotator/components/footer/annotator-footer.component.tsx
@@ -2,7 +2,7 @@
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
 import { Flex, Footer as FooterView, View, type FooterProps } from '@geti/ui';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 
 import { MediaItem } from '../../../../core/media/media.interface';
 import { isVideo, isVideoFrame } from '../../../../core/media/video.interface';
diff --git a/web_ui/src/pages/annotator/components/footer/zoom-level/zoom-level.component.tsx b/web_ui/src/pages/annotator/components/footer/zoom-level/zoom-level.component.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 
 import { ActionButton, Tooltip, TooltipTrigger, useNumberFormatter } from '@geti/ui';
 import { Add, Remove } from '@geti/ui/icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { useControls } from 'react-zoom-pan-pinch';
 
 import { useEventListener } from '../../../../../hooks/event-listener/event-listener.hook';
diff --git a/web_ui/src/pages/annotator/providers/annotator-provider/annotator-provider.test.tsx b/web_ui/src/pages/annotator/providers/annotator-provider/annotator-provider.test.tsx
@@ -111,7 +111,9 @@ describe('Annotator provider', (): void => {
             return (
                 <div>
                     <ul aria-label='annotations'>
-                        {scene.annotations?.map((annotation) => <li key={annotation.id}>{annotation.id}</li>)}
+                        {scene.annotations?.map((annotation) => (
+                            <li key={annotation.id}>{annotation.id}</li>
+                        ))}
                     </ul>
                 </div>
             );
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-keypoint/rotation-anchor.component.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-keypoint/rotation-anchor.component.tsx
@@ -3,7 +3,7 @@
 
 import { radiansToDegrees, Vec2 } from '@geti/smart-tools/utils';
 import { Rotation } from '@geti/ui/icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 
 import { Point } from '../../../../../core/annotations/shapes.interface';
 import { Anchor } from '../anchor.component';
diff --git a/web_ui/src/pages/camera-page/components/sidebar/open-sidebar.test.tsx b/web_ui/src/pages/camera-page/components/sidebar/open-sidebar.test.tsx
@@ -3,8 +3,6 @@
 
 import { screen, waitFor } from '@testing-library/react';
 
-import '@testing-library/jest-dom/extend-expect';
-
 import { Label } from '../../../../core/labels/label.interface';
 import { getMockedScreenshot } from '../../../../test-utils/mocked-items-factory/mocked-camera';
 import { getMockedProjectIdentifier } from '../../../../test-utils/mocked-items-factory/mocked-identifiers';
diff --git a/web_ui/src/pages/create-project/components/card.component.tsx b/web_ui/src/pages/create-project/components/card.component.tsx
@@ -4,7 +4,7 @@
 import { FC, SVGProps } from 'react';
 
 import { dimensionValue, Heading, Image, Radio, RadioGroup, Text, View } from '@geti/ui';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { isString } from 'lodash-es';
 import { usePress } from 'react-aria';
 
diff --git a/web_ui/src/pages/create-project/components/pose-template/canvas/canvas-template.test.tsx b/web_ui/src/pages/create-project/components/pose-template/canvas/canvas-template.test.tsx
@@ -5,8 +5,6 @@ import '@wessberg/pointer-events';
 
 import { act, fireEvent, screen } from '@testing-library/react';
 
-import '@testing-library/jest-dom/extend-expect';
-
 import { SelectedProvider } from '../../../../../providers/selected-provider/selected-provider.component';
 import { getMockedKeypointNode } from '../../../../../test-utils/mocked-items-factory/mocked-keypoint';
 import { getMockedLabel } from '../../../../../test-utils/mocked-items-factory/mocked-labels';
diff --git a/web_ui/src/pages/create-project/components/pose-template/canvas/edge.component.tsx b/web_ui/src/pages/create-project/components/pose-template/canvas/edge.component.tsx
@@ -5,7 +5,7 @@ import { ReactNode, RefObject, useRef, useState } from 'react';
 
 import { useUnwrapDOMRef, type DOMRefValue } from '@geti/ui';
 import { useHover, useInteractOutside } from '@react-aria/interactions';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 
 import { KeypointNode, Point } from '../../../../../core/annotations/shapes.interface';
 import { CursorContextMenu } from './cursor-context-menu/cursor-context-menu.component';
diff --git a/web_ui/src/pages/create-project/components/pose-template/canvas/expandable-point-label.component.tsx b/web_ui/src/pages/create-project/components/pose-template/canvas/expandable-point-label.component.tsx
@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
 
 import { Flex, Text } from '@geti/ui';
 import { AiIcon } from '@geti/ui/icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { useHover, useNumberFormatter } from 'react-aria';
 
 import { AnnotationLabel } from '../../../../../core/annotations/annotation.interface';
diff --git a/web_ui/src/pages/create-project/components/pose-template/canvas/hidden-edge.component.tsx b/web_ui/src/pages/create-project/components/pose-template/canvas/hidden-edge.component.tsx
@@ -4,7 +4,7 @@
 import { PointerEvent, useRef, useState } from 'react';
 
 import { usePress } from '@react-aria/interactions';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 
 import { KeypointNode, Point } from '../../../../../core/annotations/shapes.interface';
 import { getMockedKeypointNode } from '../../../../../test-utils/mocked-items-factory/mocked-keypoint';
diff --git a/web_ui/src/pages/create-project/components/pose-template/pose-template.test.tsx b/web_ui/src/pages/create-project/components/pose-template/pose-template.test.tsx
@@ -3,8 +3,6 @@
 
 import { act, screen } from '@testing-library/react';
 
-import '@testing-library/jest-dom/extend-expect';
-
 import { annotatorRender } from '../../../annotator/test-utils/annotator-render';
 import { MIN_POINTS_MESSAGE } from '../../utils';
 import { EMPTY_POINT_MESSAGE } from './empty-point-message.component';
diff --git a/web_ui/src/pages/project-details/components/project-model/model-statistics/model-statistics.component.tsx b/web_ui/src/pages/project-details/components/project-model/model-statistics/model-statistics.component.tsx
@@ -5,7 +5,7 @@ import { Fragment, useMemo, useRef } from 'react';
 
 import { Content, Flex, Grid, Loading, useUnwrapDOMRef } from '@geti/ui';
 import { HttpStatusCode } from 'axios';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { isEmpty } from 'lodash-es';
 
 import { useModelStatistics } from '../../../../../core/statistics/hooks/use-model-statistics.hook';
diff --git a/web_ui/src/pages/project-details/components/project-model/model-variants/optimization/start-optimization/start-optimization.test.tsx b/web_ui/src/pages/project-details/components/project-model/model-variants/optimization/start-optimization/start-optimization.test.tsx
@@ -4,9 +4,6 @@
 import { fireEvent, screen } from '@testing-library/react';
 
 import { providersRender as render } from '../../../../../../../test-utils/required-providers-render';
-
-import '@testing-library/jest-dom/extend-expect';
-
 import { checkTooltip } from '../../../../../../../test-utils/utils';
 import { StartOptimization } from './start-optimization.component';
 
diff --git a/web_ui/src/pages/project-details/components/project-models/train-model-dialog/advanced-settings/data-management/training-subsets/subsets-distribution-slider/subsets-distribution-slider.component.tsx b/web_ui/src/pages/project-details/components/project-models/train-model-dialog/advanced-settings/data-management/training-subsets/subsets-distribution-slider/subsets-distribution-slider.component.tsx
@@ -4,7 +4,7 @@
 import { FC, RefObject, useRef } from 'react';
 
 import { Flex, Text, View, VisuallyHidden } from '@geti/ui';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { mergeProps, useFocusRing, useNumberFormatter, useSlider, useSliderThumb } from 'react-aria';
 import { SliderState, useSliderState } from 'react-stately';
 
diff --git a/web_ui/src/pages/project-details/components/project-models/train-model-dialog/advanced-settings/ui/accordion/accordion.component.tsx b/web_ui/src/pages/project-details/components/project-models/train-model-dialog/advanced-settings/ui/accordion/accordion.component.tsx
@@ -5,7 +5,7 @@ import { ComponentProps, FC, ReactNode } from 'react';
 
 import { Disclosure, DisclosurePanel, DisclosureTitle, Divider, Flex, Text, View } from '@geti/ui';
 import { AlertOutlined } from '@geti/ui/icons';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 
 import styles from './accordion.module.scss';
 
diff --git a/web_ui/src/pages/project-details/components/project-models/train-model-dialog/model-types/model-type.component.tsx b/web_ui/src/pages/project-details/components/project-models/train-model-dialog/model-types/model-type.component.tsx
@@ -4,7 +4,7 @@
 import { FC, ReactNode } from 'react';
 
 import { Divider, Flex, Grid, Heading, Radio, RadioGroup, repeat, Tooltip, TooltipTrigger, View } from '@geti/ui';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { isFunction } from 'lodash-es';
 
 import { SupportedAlgorithm } from '../../../../../../core/supported-algorithms/supported-algorithms.interface';
diff --git a/web_ui/src/pages/user-management/usage/month-picker/calendar-cell.component.tsx b/web_ui/src/pages/user-management/usage/month-picker/calendar-cell.component.tsx
@@ -6,7 +6,7 @@ import { useRef } from 'react';
 import { useDateFormatter, View } from '@geti/ui';
 import { AriaCalendarCellProps, useCalendarCell } from '@react-aria/calendar';
 import { CalendarState } from '@react-stately/calendar';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 
 import styles from './month-picker.module.scss';
 
diff --git a/web_ui/src/shared/components/header/jobs-management/jobs-discard-action.component.tsx b/web_ui/src/shared/components/header/jobs-management/jobs-discard-action.component.tsx
@@ -8,7 +8,7 @@ import { ActionButton, Loading, Text } from '@geti/ui';
 import { Delete } from '@geti/ui/icons';
 import { UseMutationResult } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 
 import { Job } from '../../../../core/jobs/jobs.interface';
 import { isJobTrain } from '../../../../core/jobs/utils';
diff --git a/web_ui/src/shared/components/media-preview-list/media-item.component.tsx b/web_ui/src/shared/components/media-preview-list/media-item.component.tsx
@@ -5,7 +5,7 @@ import { ReactNode, useEffect, useRef, useState } from 'react';
 
 import { Loading, useUnwrapDOMRef, View, type DimensionValue, type Responsive } from '@geti/ui';
 import { useOverlayTriggerState } from '@react-stately/overlays';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { isEmpty, isFunction, isNil } from 'lodash-es';
 
 import { Label } from '../../../core/labels/label.interface';
diff --git a/web_ui/src/shared/components/sidebar-menu/sidebar-menu.component.tsx b/web_ui/src/shared/components/sidebar-menu/sidebar-menu.component.tsx
@@ -4,7 +4,7 @@
 import { Fragment } from 'react';
 
 import { Text } from '@geti/ui';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { NavLink } from 'react-router-dom';
 
 import { MenuOption } from '../menu-option.interface';
diff --git a/web_ui/src/shared/drag-and-drop/drag-and-drop.component.tsx b/web_ui/src/shared/drag-and-drop/drag-and-drop.component.tsx
@@ -2,7 +2,7 @@
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
 import { DropZone as SpectrumDropZone, type SpectrumDropZoneProps as DropZoneProps } from '@geti/ui';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 
 import { GetElementType } from '../../types-utils/types';
 
