[release-22.0] vtadmin: upgrade vite to the latest (#18803) (#18811)

Signed-off-by: Nick Van Wiggeren <[email protected]>
Co-authored-by: Nick Van Wiggeren <[email protected]>

Author: vitess-bot[bot]

web/vtadmin/package-lock.json

@@ -11,7 +11,6 @@
     "@headlessui/react": "^1.7.8",
     "@types/d3": "^7.4.3",
     "@types/jest": "^29.4.0",
-    "@types/node": "^16.11.7",
     "@types/react-router-dom": "^5.3.3",
     "classnames": "^2.3.2",
     "d3": "^7.9.0",
@@ -80,9 +79,10 @@
     "@testing-library/react-hooks": "^5.0.3",
     "@testing-library/user-event": "^14.2.0",
     "@types/lodash-es": "^4.17.4",
+    "@types/node": "^24.9.1",
     "@types/react": "^18.0.31",
     "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^5.1.0",
     "autoprefixer": "^10.4.2",
     "cross-fetch": "^3.1.5",
     "eslint": "^8.37.0",
@@ -100,9 +100,9 @@
     "stylelint-config-standard-scss": "^3.0.0",
     "tailwindcss": "^3.0.18",
     "typescript": "^5.0.2",
-    "vite": "^4.5.14",
+    "vite": "^7.1.12",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-svgr": "^2.4.0",
-    "vitest": "^0.29.8"
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^4.0.3"
   }
 }

web/vtadmin/package.json

@@ -24,10 +24,13 @@ import {
     MALFORMED_HTTP_RESPONSE_ERROR,
 } from '../errors/errorTypes';
 import * as errorHandler from '../errors/errorHandler';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 
 vi.mock('../errors/errorHandler');
 
+// Preserve import.meta.env to restore after each test
+const ORIGINAL_ENV = { ...import.meta.env };
+
 // mockServerJson configures an HttpOkResponse containing the given `json`
 // for all requests made against the given `endpoint`.
 const mockServerJson = (endpoint: string, json: object, status: number = 200) => {
@@ -36,6 +39,20 @@ const mockServerJson = (endpoint: string, json: object, status: number = 200) =>
 };
 
 describe('api/http', () => {
+    afterEach(() => {
+        // Restore import.meta.env after each test to prevent leakage
+        // First, delete any keys that weren't in the original
+        for (const key in import.meta.env) {
+            if (!(key in ORIGINAL_ENV)) {
+                delete import.meta.env[key];
+            }
+        }
+        // Then restore the original values
+        Object.assign(import.meta.env, ORIGINAL_ENV);
+        // Reset all mocks to prevent leakage
+        vi.clearAllMocks();
+    });
+
     describe('vtfetch', () => {
         it('parses and returns JSON, given an HttpOkResponse response', async () => {
             const endpoint = `/api/tablets`;
@@ -141,6 +158,9 @@ describe('api/http', () => {
             });
 
             it('uses the fetch default `credentials` property by default', async () => {
+                // Explicitly unset VITE_FETCH_CREDENTIALS to test default behavior
+                delete import.meta.env.VITE_FETCH_CREDENTIALS;
+
                 vi.spyOn(global, 'fetch');
 
                 const endpoint = `/api/tablets`;
@@ -157,7 +177,7 @@ describe('api/http', () => {
             });
 
             it('throws an error if an invalid value used for `credentials`', async () => {
-                (process as any).env.VITE_FETCH_CREDENTIALS = 'nope';
+                import.meta.env.VITE_FETCH_CREDENTIALS = 'nope';
 
                 vi.spyOn(global, 'fetch');
 
@@ -185,7 +205,7 @@ describe('api/http', () => {
         });
 
         it('allows GET requests when in read only mode', async () => {
-            (process as any).env.VITE_READONLY_MODE = 'true';
+            import.meta.env.VITE_READONLY_MODE = 'true';
 
             const endpoint = `/api/tablets`;
             const response = { ok: true, result: null };
@@ -199,7 +219,7 @@ describe('api/http', () => {
         });
 
         it('throws an error when executing a write request in read only mode', async () => {
-            (process as any).env.VITE_READONLY_MODE = 'true';
+            import.meta.env.VITE_READONLY_MODE = 'true';
 
             vi.spyOn(global, 'fetch');
 

web/vtadmin/src/api/http.test.ts

@@ -23,11 +23,11 @@ const ORIGINAL_PROCESS_ENV = { ...import.meta.env };
 
 describe('ReadOnlyGate', () => {
     afterEach(() => {
-        import.meta.env = ORIGINAL_PROCESS_ENV;
+        Object.assign(import.meta.env, ORIGINAL_PROCESS_ENV);
     });
 
     it('hides children when in read-only mode', () => {
-        (process as any).env.VITE_READONLY_MODE = 'true';
+        import.meta.env.VITE_READONLY_MODE = 'true';
 
         render(
             <ReadOnlyGate>
@@ -40,6 +40,8 @@ describe('ReadOnlyGate', () => {
     });
 
     it('shows children when not in read-only mode', () => {
+        import.meta.env.VITE_READONLY_MODE = 'false';
+
         render(
             <ReadOnlyGate>
                 <div data-testid="child">🌶🌶🌶</div>