Update UI deps

.github/workflows/ui-checks.yaml

@@ -40,7 +40,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install --frozen-lockfile --prefer-offline
       - name: Build
         run: pnpm build
       - name: Check formatting

deepfence_frontend/apps/dashboard/package.json

@@ -27,8 +27,8 @@
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "@vitejs/plugin-react": "^2.2.0",
     "@vitest/coverage-c8": "^0.25.3",
     "autoprefixer": "^10.4.13",

deepfence_frontend/packages/ui-components/package.json

@@ -28,8 +28,8 @@
     "@radix-ui/react-accordion": "^1.0.1",
     "@radix-ui/react-checkbox": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.0",
-    "@radix-ui/react-dropdown-menu": "^1.0.0",
-    "@radix-ui/react-label": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^2.0.1",
+    "@radix-ui/react-label": "^2.0.0",
     "@radix-ui/react-radio-group": "^1.0.0",
     "@radix-ui/react-separator": "^1.0.0",
     "@radix-ui/react-slot": "^1.0.1",
@@ -40,7 +40,7 @@
     "ariakit": "2.0.0-next.41",
     "classnames": "^2.3.2",
     "lodash-es": "^4.17.21",
-    "react-icons": "^4.4.0",
+    "react-icons": "^4.7.1",
     "tailwind-merge": "^1.6.0",
     "tailwindcss-radix": "^2.6.0"
   },
@@ -67,10 +67,10 @@
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.9",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "@vitejs/plugin-react": "^2.1.0",
-    "@vitest/coverage-c8": "^0.23.4",
+    "@vitest/coverage-c8": "^0.25.3",
     "autoprefixer": "^10.4.11",
     "babel-loader": "^8.2.5",
     "eslint": "^8.23.1",
@@ -93,7 +93,7 @@
     "typescript": "^4.8.3",
     "vite": "^3.1.2",
     "vite-plugin-dts": "^1.7.1",
-    "vitest": "^0.23.4"
+    "vitest": "^0.25.3"
   },
   "engines": {
     "node": ">=16"

deepfence_frontend/packages/ui-components/src/components/badge/Badge.tsx

@@ -40,7 +40,7 @@ const classes = {
   },
 };
 
-export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+export const Badge = forwardRef<HTMLLabelElement, BadgeProps>(
   (
     {
       label,

deepfence_frontend/packages/ui-components/src/components/input/HelperText.tsx

@@ -1,4 +1,3 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
 import cx from 'classnames';
 import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -29,7 +28,7 @@ export const classes = {
 
 export const HelperText: FC<Props> = ({ text, sizing = 'sm', color, className }) => {
   return (
-    <LabelPrimitive.Root
+    <p
       className={twMerge(
         cx(
           `${Typography.weight.normal} ${classes.color[color]}`,
@@ -39,7 +38,7 @@ export const HelperText: FC<Props> = ({ text, sizing = 'sm', color, className })
       )}
     >
       {text}
-    </LabelPrimitive.Root>
+    </p>
   );
 };
 

deepfence_frontend/packages/ui-components/src/components/input/TextInput.test.tsx

@@ -10,7 +10,7 @@ import { TextInput } from './TextInput';
 describe(`Component TextInput`, () => {
   it(`render with placehoder, label, onChange, startIcon, endIcon, helperText`, () => {
     const onChange = vi.fn();
-    const { getByTestId, getByPlaceholderText, getByRole } = renderUI(
+    const { getByTestId, getByPlaceholderText, getByText, getByLabelText } = renderUI(
       <TextInput
         placeholder="test@email.com"
         id="id"
@@ -23,17 +23,9 @@ describe(`Component TextInput`, () => {
     );
     expect(getByPlaceholderText('test@email.com')).toBeInTheDocument();
 
-    expect(
-      getByRole('label', {
-        name: 'Email',
-      }),
-    ).toBeInTheDocument();
+    expect(getByLabelText('Email')).toBeInTheDocument();
 
-    expect(
-      getByRole('label', {
-        name: 'Email length should not exceed 50 characters',
-      }),
-    ).toBeInTheDocument();
+    expect(getByText('Email length should not exceed 50 characters')).toBeInTheDocument();
 
     const textInput = getByTestId('textinput-id');
     const textInputStartIcon = getByTestId('textinput-start-icon-id');

deepfence_frontend/packages/ui-components/src/components/input/TextInputArea.test.tsx

@@ -9,7 +9,7 @@ import { TextInputArea } from './TextInputArea';
 describe(`Component TextInputArea`, () => {
   it(`render with placehoder, label, onChange, startIcon, endIcon, helperText, style width`, () => {
     const onChange = vi.fn();
-    const { getByTestId, getByPlaceholderText, getByRole } = renderUI(
+    const { getByTestId, getByPlaceholderText, getByText, getByLabelText } = renderUI(
       <TextInputArea
         placeholder="test@email.com"
         id="id"
@@ -21,17 +21,9 @@ describe(`Component TextInputArea`, () => {
     );
     expect(getByPlaceholderText('test@email.com')).toBeInTheDocument();
 
-    expect(
-      getByRole('label', {
-        name: 'Comments',
-      }),
-    ).toBeInTheDocument();
+    expect(getByLabelText('Comments')).toBeInTheDocument();
 
-    expect(
-      getByRole('label', {
-        name: 'Put your comments',
-      }),
-    ).toBeInTheDocument();
+    expect(getByText('Put your comments')).toBeInTheDocument();
 
     const textInputArea = getByTestId('textinputarea-id');