fix(frontend): remove React 19 compatibility shim (#13264)

* chore(frontend): remove React 19 compatibility shim

Signed-off-by: Jeff Spahr <spahrj@gmail.com>

* fix(frontend): normalize mock query param typing

Signed-off-by: Jeff Spahr <spahrj@gmail.com>

* style(frontend): fix formatting for CI

Signed-off-by: Jeff Spahr <spahrj@gmail.com>

* fix(frontend): harden mock query decoding

Signed-off-by: Jeff Spahr <spahrj@gmail.com>

* docs(frontend): refresh React 19 checklist follow-up note

Signed-off-by: Jeff Spahr <spahrj@gmail.com>

* refactor(frontend): remove redundant mock query extraction

Signed-off-by: Jeff Spahr <spahrj@gmail.com>

---------

Signed-off-by: Jeff Spahr <spahrj@gmail.com>

Author: jeffspahr

frontend/docs/react-18-19-upgrade-checklist.md

@@ -27,8 +27,7 @@
 
 **Current focus**:
 
-- The React 18/19 upgrade track is complete through `#15`.
-- Remaining React 19 follow-up cleanup is limited to removing the temporary `frontend/src/react19-compat.d.ts` shim noted during `#13`.
+- The React 18/19 upgrade track is complete through `#15`, including the smaller React 19 follow-up cleanup items noted during `#13`.
 
 **How to contribute**: This checklist is now complete. Follow-up frontend work should track new issues directly and continue to pass `npm run test:ci` and `npm run build` before merge.
 
@@ -335,9 +334,7 @@ Run `npm run check:react-peers` (targeting React 19), upgrade any remaining Reac
 Completed by [#13153](https://github.com/kubeflow/pipelines/pull/13153), merged on March 27, 2026 UTC. `frontend/package.json` now pins `react`, `react-dom`, `@types/react`, and `@types/react-dom` to `^19`, and the default React peer gate target is React 19.
 
 **Current note**:
-The React 19 core bump is complete. One smaller follow-up cleanup item remains from the review thread:
-
-- remove the temporary `frontend/src/react19-compat.d.ts` shim by converting remaining `JSX.Element`-style annotations to `React.JSX.*` or inferred types
+The React 19 core bump and its smaller follow-up review-thread cleanup items are complete.
 
 **Description** (historical):
 Bump `react`, `react-dom`, `@types/react`, and `@types/react-dom` to v19, address any React 19-specific breakages, regenerate and review affected snapshots, and clear the temporary React core allowlist from the `#12` sweep.

frontend/mock-backend/mock-api-middleware.ts

@@ -62,6 +62,64 @@ interface BaseResource {
   error?: string;
 }
 
+function getQueryString(queryParam: unknown): string | undefined {
+  if (typeof queryParam === 'string') {
+    return queryParam;
+  }
+  if (Array.isArray(queryParam)) {
+    return queryParam.find((value): value is string => typeof value === 'string');
+  }
+  return undefined;
+}
+
+function getQueryNumber(queryParam: unknown): number | undefined {
+  const queryString = getQueryString(queryParam);
+  if (queryString === undefined || queryString === '') {
+    return undefined;
+  }
+  const queryNumber = Number(queryString);
+  return Number.isNaN(queryNumber) ? undefined : queryNumber;
+}
+
+function getDecodedQueryString(queryParam: unknown): string | undefined {
+  const queryString = getQueryString(queryParam);
+  if (queryString === undefined) {
+    return undefined;
+  }
+  try {
+    return decodeURIComponent(queryString);
+  } catch {
+    return undefined;
+  }
+}
+
+function getRequiredDecodedQueryString(
+  res: Response,
+  queryParam: unknown,
+  queryParamName: string,
+): string | undefined {
+  const queryString = getQueryString(queryParam);
+  if (queryString === undefined || queryString === '') {
+    res.status(400).send(`${queryParamName} argument is required`);
+    return undefined;
+  }
+
+  let decodedQueryString: string;
+  try {
+    decodedQueryString = decodeURIComponent(queryString);
+  } catch {
+    res.status(400).send(`${queryParamName} argument is invalid`);
+    return undefined;
+  }
+
+  if (decodedQueryString === '') {
+    res.status(400).send(`${queryParamName} argument is required`);
+    return undefined;
+  }
+
+  return decodedQueryString;
+}
+
 // tslint:disable-next-line:no-default-export
 export default (app: express.Application) => {
   app.use((req, _, next) => {
@@ -122,11 +180,15 @@ export default (app: express.Application) => {
     };
 
     let jobs: ApiJob[] = fixedData.jobs;
-    if (req.query.filter) {
-      jobs = filterResources(fixedData.jobs, req.query.filter);
+    const filterQuery = getQueryString(req.query.filter);
+    if (filterQuery) {
+      jobs = filterResources(fixedData.jobs, filterQuery);
     }
 
-    const { desc, key } = getSortKeyAndOrder(ExperimentSortKeys.CREATED_AT, req.query.sort_by);
+    const { desc, key } = getSortKeyAndOrder(
+      ExperimentSortKeys.CREATED_AT,
+      getQueryString(req.query.sort_by),
+    );
 
     jobs.sort((a, b) => {
       let result = 1;
@@ -139,8 +201,8 @@ export default (app: express.Application) => {
       return result * (desc ? -1 : 1);
     });
 
-    const start = req.query.page_token ? +req.query.page_token : 0;
-    const end = start + (+req.query.page_size || 20);
+    const start = getQueryNumber(req.query.page_token) || 0;
+    const end = start + (getQueryNumber(req.query.page_size) || 20);
     response.jobs = jobs.slice(start, end);
 
     if (end < jobs.length) {
@@ -159,11 +221,15 @@ export default (app: express.Application) => {
     };
 
     let experiments: ApiExperiment[] = fixedData.experiments;
-    if (req.query.filter) {
-      experiments = filterResources(fixedData.experiments, req.query.filter);
+    const filterQuery = getQueryString(req.query.filter);
+    if (filterQuery) {
+      experiments = filterResources(fixedData.experiments, filterQuery);
     }
 
-    const { desc, key } = getSortKeyAndOrder(ExperimentSortKeys.NAME, req.query.sortBy);
+    const { desc, key } = getSortKeyAndOrder(
+      ExperimentSortKeys.NAME,
+      getQueryString(req.query.sortBy),
+    );
 
     experiments.sort((a, b) => {
       let result = 1;
@@ -176,8 +242,8 @@ export default (app: express.Application) => {
       return result * (desc ? -1 : 1);
     });
 
-    const start = req.query.pageToken ? +req.query.pageToken : 0;
-    const end = start + (+req.query.pageSize || 20);
+    const start = getQueryNumber(req.query.pageToken) || 0;
+    const end = start + (getQueryNumber(req.query.pageSize) || 20);
     response.experiments = experiments.slice(start, end);
 
     if (end < experiments.length) {
@@ -275,21 +341,25 @@ export default (app: express.Application) => {
 
     let runs: ApiRun[] = fixedData.runs.map((r) => r.run!);
 
-    if (req.query.filter) {
-      runs = filterResources(runs, req.query.filter);
+    const filterQuery = getQueryString(req.query.filter);
+    if (filterQuery) {
+      runs = filterResources(runs, filterQuery);
     }
 
-    if (req.query['resource_reference_key.type'] === ApiResourceType.EXPERIMENT) {
+    const resourceReferenceType = getQueryString(req.query['resource_reference_key.type']);
+    const resourceReferenceId = getQueryString(req.query['resource_reference_key.id']);
+    if (resourceReferenceType === ApiResourceType.EXPERIMENT && resourceReferenceId) {
       runs = runs.filter((r) =>
         RunUtils.getAllExperimentReferences(r).some(
-          (ref) =>
-            (ref.key && ref.key.id && ref.key.id === req.query['resource_reference_key.id']) ||
-            false,
+          (ref) => (ref.key && ref.key.id && ref.key.id === resourceReferenceId) || false,
         ),
       );
     }
 
-    const { desc, key } = getSortKeyAndOrder(RunSortKeys.CREATED_AT, req.query.sort_by);
+    const { desc, key } = getSortKeyAndOrder(
+      RunSortKeys.CREATED_AT,
+      getQueryString(req.query.sort_by),
+    );
 
     runs.sort((a, b) => {
       let result = 1;
@@ -302,8 +372,8 @@ export default (app: express.Application) => {
       return result * (desc ? -1 : 1);
     });
 
-    const start = req.query.page_token ? +req.query.page_token : 0;
-    const end = start + (+req.query.page_size || 20);
+    const start = getQueryNumber(req.query.page_token) || 0;
+    const end = start + (getQueryNumber(req.query.page_size) || 20);
     response.runs = runs.slice(start, end);
 
     if (end < runs.length) {
@@ -446,11 +516,15 @@ export default (app: express.Application) => {
     };
 
     let pipelines: ApiPipeline[] = fixedData.pipelines;
-    if (req.query.filter) {
-      pipelines = filterResources(fixedData.pipelines, req.query.filter);
+    const filterQuery = getQueryString(req.query.filter);
+    if (filterQuery) {
+      pipelines = filterResources(fixedData.pipelines, filterQuery);
     }
 
-    const { desc, key } = getSortKeyAndOrder(PipelineSortKeys.CREATED_AT, req.query.sort_by);
+    const { desc, key } = getSortKeyAndOrder(
+      PipelineSortKeys.CREATED_AT,
+      getQueryString(req.query.sort_by),
+    );
 
     pipelines.sort((a, b) => {
       let result = 1;
@@ -463,8 +537,8 @@ export default (app: express.Application) => {
       return result * (desc ? -1 : 1);
     });
 
-    const start = req.query.page_token ? +req.query.page_token : 0;
-    const end = start + (+req.query.page_size || 20);
+    const start = getQueryNumber(req.query.page_token) || 0;
+    const end = start + (getQueryNumber(req.query.page_size) || 20);
     response.pipelines = pipelines.slice(start, end);
 
     if (end < pipelines.length) {
@@ -567,21 +641,19 @@ export default (app: express.Application) => {
     //   page_size: '50',
     //   sort_by: 'created_at desc'
     // },
-    if (
-      req.query['resource_key.id'] &&
-      req.query['resource_key.type'] === 'PIPELINE' &&
-      req.query.page_size > 0
-    ) {
+    const resourceKeyId = getQueryString(req.query['resource_key.id']);
+    const resourceKeyType = getQueryString(req.query['resource_key.type']);
+    const pageSize = getQueryNumber(req.query.page_size);
+    if (resourceKeyId && resourceKeyType === 'PIPELINE' && (pageSize || 0) > 0) {
       const response: ApiListPipelineVersionsResponse = {
         next_page_token: '',
         versions: [],
       };
 
-      let versions: ApiPipelineVersion[] =
-        PIPELINE_VERSIONS_LIST_MAP.get(req.query['resource_key.id']) || [];
+      let versions: ApiPipelineVersion[] = PIPELINE_VERSIONS_LIST_MAP.get(resourceKeyId) || [];
 
       if (versions.length === 0) {
-        const pipeline = fixedData.pipelines.find((p) => p.id === req.query['resource_key.id']);
+        const pipeline = fixedData.pipelines.find((p) => p.id === resourceKeyId);
 
         if (pipeline == null || !pipeline.default_version) {
           return;
@@ -596,8 +668,8 @@ export default (app: express.Application) => {
         return;
       }
 
-      const start = req.query.page_token ? +req.query.page_token : 0;
-      const end = start + (+req.query.page_size || 20);
+      const start = getQueryNumber(req.query.page_token) || 0;
+      const end = start + (pageSize || 20);
       response.versions = versions.slice(start, end);
 
       if (end < versions.length) {
@@ -666,11 +738,18 @@ export default (app: express.Application) => {
   });
 
   app.post(v1beta1Prefix + '/pipelines/upload', (req, res) => {
-    mockCreatePipeline(res, decodeURIComponent(req.query.name), req.body);
+    const pipelineName = getRequiredDecodedQueryString(res, req.query.name, 'name');
+    if (!pipelineName) {
+      return;
+    }
+    mockCreatePipeline(res, pipelineName, req.body);
   });
 
   app.get('/artifacts/get', (req, res) => {
-    const key = decodeURIComponent(req.query.key);
+    const key = getRequiredDecodedQueryString(res, req.query.key, 'key');
+    if (!key) {
+      return;
+    }
     res.header('Content-Type', 'application/json');
     if (key.endsWith('roc.csv')) {
       res.sendFile(_path.resolve(__dirname, rocDataPath));
@@ -710,7 +789,10 @@ export default (app: express.Application) => {
   });
 
   app.get('/k8s/pod/logs', (req, res) => {
-    const podName = decodeURIComponent(req.query.podname);
+    const podName = getRequiredDecodedQueryString(res, req.query.podname, 'podname');
+    if (!podName) {
+      return;
+    }
     if (podName === 'json-12abc') {
       res.status(404).send('pod not found');
       return;

frontend/mock-backend/tsconfig.json

@@ -24,6 +24,6 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
   },
-  "include": [".", "../src/react19-compat.d.ts"],
+  "include": ["."],
   "exclude": ["dist", "coverage"],
 }

frontend/server/integration-tests/mock-backend-query-validation.test.ts

@@ -0,0 +1,85 @@
+// Copyright 2026 The Kubeflow Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import requests from 'supertest';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const frontendRoot = path.resolve(__dirname, '..', '..');
+const originalCwd = process.cwd();
+
+async function createRequest(): Promise<ReturnType<typeof requests>> {
+  vi.resetModules();
+  const { default: mockApiMiddleware } = await import('../../mock-backend/mock-api-middleware.ts');
+  const app = express();
+  mockApiMiddleware(app as any);
+  return requests(app);
+}
+
+beforeAll(() => {
+  process.chdir(frontendRoot);
+});
+
+afterAll(() => {
+  process.chdir(originalCwd);
+});
+
+describe('mock backend decoded query validation', () => {
+  let request: ReturnType<typeof requests>;
+
+  beforeEach(async () => {
+    vi.restoreAllMocks();
+    vi.spyOn(console, 'info').mockImplementation(() => {});
+    vi.spyOn(console, 'log').mockImplementation(() => {});
+    request = await createRequest();
+  });
+
+  it('rejects pipeline upload requests without a name query param', async () => {
+    await request
+      .post('/apis/v1beta1/pipelines/upload')
+      .send({ uploaded: true })
+      .expect(400)
+      .expect('name argument is required');
+  });
+
+  it('rejects pipeline upload requests with invalid percent-encoding in the name query param', async () => {
+    await request
+      .post('/apis/v1beta1/pipelines/upload?name=%E0%A4%A')
+      .send({ uploaded: true })
+      .expect(400)
+      .expect('name argument is invalid');
+  });
+
+  it('rejects artifact requests without a key query param', async () => {
+    await request.get('/artifacts/get').expect(400).expect('key argument is required');
+  });
+
+  it('rejects artifact requests with invalid percent-encoding in the key query param', async () => {
+    await request.get('/artifacts/get?key=%E0%A4%A').expect(400).expect('key argument is invalid');
+  });
+
+  it('rejects pod log requests without a podname query param', async () => {
+    await request.get('/k8s/pod/logs').expect(400).expect('podname argument is required');
+  });
+
+  it('rejects pod log requests with invalid percent-encoding in the podname query param', async () => {
+    await request
+      .get('/k8s/pod/logs?podname=%E0%A4%A')
+      .expect(400)
+      .expect('podname argument is invalid');
+  });
+});