feat(frontend): upgrade to vite 6, use vite plugin-react-swc (#13716)

Co-authored-by: Andrew Sikowitz <andrew.sikowitz@acryl.io>

datahub-web-react/build.gradle

@@ -19,7 +19,7 @@ node {
   }
 
   // Version of node to use.
-  version = '22.12.0'
+  version = '22.16.0'
 
   // Version of Yarn to use.
   yarnVersion = '1.22.22'

datahub-web-react/package.json

@@ -132,7 +132,7 @@
         ]
     },
     "devDependencies": {
-        "@codecov/vite-plugin": "^1.9.0",
+        "@codecov/vite-plugin": "^1.9.1",
         "@graphql-codegen/cli": "^5.0.0",
         "@graphql-codegen/near-operation-file-preset": "^1.17.13",
         "@graphql-codegen/typescript-operations": "1.17.13",
@@ -154,8 +154,8 @@
         "@types/styled-components": "^5.1.7",
         "@typescript-eslint/eslint-plugin": "^5.38.1",
         "@typescript-eslint/parser": "^5.38.1",
-        "@vitejs/plugin-react": "^4.1.1",
+        "@vitejs/plugin-react-swc": "^3.10.1",
-        "@vitest/coverage-v8": "^0.34.6",
+        "@vitest/coverage-v8": "^3.2.4",
         "eslint": "^8.2.0",
         "eslint-config-airbnb": "19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
@@ -168,15 +168,15 @@
         "eslint-plugin-react-refresh": "^0.4.6",
         "eslint-plugin-vitest": "^0.3.17",
         "jsdom": "^22.1.0",
-        "less": "^4.2.0",
+        "less": "^4.3.0",
         "prettier": "^3.5.3",
         "source-map-explorer": "^2.5.2",
         "storybook": "^8.1.11",
-        "vite": "^4.5.14",
+        "vite": "^6",
         "vite-plugin-babel-macros": "^1.0.6",
-        "vite-plugin-static-copy": "^0.17.0",
+        "vite-plugin-static-copy": "^3.0.0",
-        "vite-plugin-svgr": "^4.1.0",
+        "vite-plugin-svgr": "^4.3.0",
-        "vitest": "^0.34.6"
+        "vitest": "^3.2.2"
     },
     "resolutions": {
         "@ant-design/colors": "6.0.0",
@@ -184,7 +184,6 @@
         "json-schema": "0.4.0",
         "@babel/traverse": ">=7.23.2",
         "ansi-regex": "3.0.1",
-        "minimatch": "3.0.5",
         "prismjs": "^1.27.0",
         "nth-check": "^2.0.1",
         "prosemirror-model": "1.8.2",

datahub-web-react/src/app/entityV2/dataset/profile/__tests__/Schema.test.tsx

@@ -55,7 +55,7 @@ describe('Schema', () => {
         expect(getByText('the name of the order')).toBeInTheDocument();
         expect(getByText('shipping_address')).toBeInTheDocument();
         expect(getByText('the address the order ships to')).toBeInTheDocument();
-    });
+    }, 10_000);
 
     it('renders raw', () => {
         const { getByText, queryAllByTestId } = render(

datahub-web-react/src/app/entityV2/dataset/profile/__tests__/SchemaDescriptionField.test.tsx

@@ -24,7 +24,7 @@ describe('SchemaDescriptionField', () => {
         expect(getByRole('img')).toBeInTheDocument();
         expect(getByText('test description updated')).toBeInTheDocument();
         expect(queryByText('Update description')).not.toBeInTheDocument();
-    });
+    }, 10_000);
 
     it('renders update description modal', async () => {
         const { getByText, getByRole, queryByText } = render(

datahub-web-react/src/app/entityV2/shared/__tests__/utils.test.ts

@@ -99,7 +99,7 @@ describe('entity V2 utils test ->', () => {
         });
     });
     describe('handleBatchError ->', () => {
-        it('should return entities from EntityRelationshipsResult', () => {
+        describe('should return entities from EntityRelationshipsResult', () => {
             const urns = ['urn1', 'urn2'];
             const defaultMessage = { content: 'Default message', duration: 3 };
             test('should return custom message if urns length is greater than 1 and error code is 403', () => {

datahub-web-react/src/app/entityV2/shared/containers/profile/__tests__/EntityProfile.test.tsx

@@ -105,7 +105,7 @@ describe('EntityProfile', () => {
         await waitFor(() =>
             expect(getByText('This and here we have yet another Dataset (YAN). Are there more?')).toBeInTheDocument(),
         );
-    }, 10000);
+    }, 20_000);
 
     it('renders tab content', async () => {
         const { getByText } = render(

datahub-web-react/src/app/lineage/__tests__/LineageEdges.test.tsx

@@ -19,8 +19,8 @@ describe('LineageEdges', () => {
                 lineageDirection={Direction.Upstream}
                 entitiesToAdd={[]}
                 entitiesToRemove={[]}
-                setEntitiesToAdd={vi.fn}
+                setEntitiesToAdd={vi.fn()}
-                setEntitiesToRemove={vi.fn}
+                setEntitiesToRemove={vi.fn()}
             />,
         );
 
@@ -35,8 +35,8 @@ describe('LineageEdges', () => {
                 lineageDirection={Direction.Upstream}
                 entitiesToAdd={[]}
                 entitiesToRemove={[]}
-                setEntitiesToAdd={vi.fn}
+                setEntitiesToAdd={vi.fn()}
-                setEntitiesToRemove={vi.fn}
+                setEntitiesToRemove={vi.fn()}
             />,
         );
 
@@ -55,8 +55,8 @@ describe('LineageEdges', () => {
                 lineageDirection={Direction.Downstream}
                 entitiesToAdd={[]}
                 entitiesToRemove={[]}
-                setEntitiesToAdd={vi.fn}
+                setEntitiesToAdd={vi.fn()}
-                setEntitiesToRemove={vi.fn}
+                setEntitiesToRemove={vi.fn()}
             />,
         );
 
@@ -76,8 +76,8 @@ describe('LineageEdges', () => {
                 lineageDirection={Direction.Upstream}
                 entitiesToAdd={[]}
                 entitiesToRemove={[dataset4WithLineage.upstream.relationships[1].entity]}
-                setEntitiesToAdd={vi.fn}
+                setEntitiesToAdd={vi.fn()}
-                setEntitiesToRemove={vi.fn}
+                setEntitiesToRemove={vi.fn()}
             />,
         );
 
@@ -98,8 +98,8 @@ describe('LineageEdges', () => {
                 lineageDirection={Direction.Upstream}
                 entitiesToAdd={[dataset1]}
                 entitiesToRemove={[]}
-                setEntitiesToAdd={vi.fn}
+                setEntitiesToAdd={vi.fn()}
-                setEntitiesToRemove={vi.fn}
+                setEntitiesToRemove={vi.fn()}
             />,
         );
 

datahub-web-react/src/vite-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
+/// <reference types="@testing-library/jest-dom" />

datahub-web-react/vite.config.ts

@@ -1,9 +1,8 @@
-import react from '@vitejs/plugin-react';
+import { codecovVitePlugin } from '@codecov/vite-plugin';
+import react from '@vitejs/plugin-react-swc';
 import * as path from 'path';
 import { defineConfig, loadEnv } from 'vite';
 import macrosPlugin from 'vite-plugin-babel-macros';
-import { viteStaticCopy } from 'vite-plugin-static-copy';
-import { codecovVitePlugin } from "@codecov/vite-plugin";
 import svgr from 'vite-plugin-svgr';
 
 const injectMeticulous = () => {
@@ -29,13 +28,16 @@ const injectMeticulous = () => {
 };
 
 // https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
+export default defineConfig(async ({ mode }) => {
+    const { viteStaticCopy } = await import('vite-plugin-static-copy');
+
     // Via https://stackoverflow.com/a/66389044.
     const env = loadEnv(mode, process.cwd(), '');
     process.env = { ...process.env, ...env };
 
+    const themeConfigFile = `./src/conf/theme/${process.env.REACT_APP_THEME_CONFIG}`;
     // eslint-disable-next-line global-require, import/no-dynamic-require, @typescript-eslint/no-var-requires
-    const themeConfig = require(`./src/conf/theme/${process.env.REACT_APP_THEME_CONFIG}`);
+    const themeConfig = require(themeConfigFile);
 
     // Setup proxy to the datahub-frontend service.
     const frontendProxy = {
@@ -89,9 +91,9 @@ export default defineConfig(({ mode }) => {
             }),
             codecovVitePlugin({
                 enableBundleAnalysis: true,
-                bundleName: "datahub-react-web",
+                bundleName: 'datahub-react-web',
                 uploadToken: process.env.CODECOV_TOKEN,
-                gitService: "github",
+                gitService: 'github',
             }),
         ],
         // optimizeDeps: {