Upgrade to React Router v8

api/src/main/webui/package.json

@@ -29,7 +29,7 @@
     "react-dom": "^19.2.8",
     "react-i18next": "^17.0.11",
     "react-json-view-lite": "^2.5.0",
-    "react-router-dom": "^7.18.1",
+    "react-router": "^8.0.0",
     "victory": "^37.3.6",
     "zustand": "^5.0.14"
   },
@@ -47,4 +47,4 @@
     "typescript-eslint": "^8.65.0",
     "vite": "^8.1.5"
   }
-}
+}

api/src/main/webui/src/App.tsx

@@ -3,7 +3,7 @@
  * Provides the main layout and outlet for child routes
  */
 
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import { AppLayoutProvider } from '@/components/app/AppLayoutProvider';
 import { ThemeProvider } from '@/components/app/ThemeProvider';
 import { KafkaAuthProvider } from '@/components/auth/KafkaAuthProvider';

api/src/main/webui/src/components/auth/KafkaAuthProvider.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router';
 import { useQueryClient } from '@tanstack/react-query';
 import { KafkaLoginModal } from './KafkaLoginModal';
 import { QueryErrorHandler } from './QueryErrorHandler';

api/src/main/webui/src/components/common/ResourceListDataView.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState, useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   DataView,

api/src/main/webui/src/components/home/ClustersDataView.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   Button,

api/src/main/webui/src/components/kafka/ClusterSwitcher.tsx

@@ -22,7 +22,7 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 import { ArrowRightIcon, HomeIcon } from '@patternfly/react-icons';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { useRef, useState } from 'react';
 import { KafkaCluster } from '@/api/types';

api/src/main/webui/src/components/kafka/KafkaClusterSidebar.tsx

@@ -5,7 +5,7 @@
 
 import { Nav, NavItem, NavList, PageSidebar, PageSidebarBody } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { NavLink, useParams, useLocation } from 'react-router-dom';
+import { NavLink, useParams, useLocation } from 'react-router';
 import { useAppLayout } from '@/components/app/AppLayoutProvider';
 
 interface NavItemConfig {

api/src/main/webui/src/components/kafka/connect/ConnectClustersTable.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import {
   Toolbar,
   ToolbarContent,

api/src/main/webui/src/components/kafka/connect/ConnectorsTable.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import {
   Toolbar,
   ToolbarContent,

api/src/main/webui/src/components/kafka/groups/GroupsTable.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import {
   Label,
   LabelGroup,

api/src/main/webui/src/components/kafka/groups/LagTable.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, Link } from 'react-router';
 import {
   EmptyState,
   EmptyStateBody,

api/src/main/webui/src/components/kafka/nodes/NodesTable.tsx

@@ -37,7 +37,7 @@ import {
   useControllerStatusLabels,
 } from './NodeStatusLabel';
 import { formatNumber } from '@/utils/format';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 interface NodesTableProps {
   kafkaId: string;

api/src/main/webui/src/components/kafka/nodes/RebalancesTable.tsx

@@ -5,7 +5,7 @@
 
 import { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { formatDateTime } from '@/utils/dateTime';
 import {
   Table,

api/src/main/webui/src/components/kafka/overview/ClusterCard.tsx

@@ -10,7 +10,7 @@
  */
 
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   Card,

api/src/main/webui/src/components/kafka/overview/RecentTopicsCard.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   Card,

api/src/main/webui/src/components/kafka/overview/TopicsPartitionsCard.tsx

@@ -7,7 +7,7 @@
  * - Status breakdown (fully replicated, under-replicated, offline)
  */
 
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   Card,

api/src/main/webui/src/components/kafka/topics/TopicsDataView.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { ThProps } from '@patternfly/react-table';
 import { UseQueryResult } from '@tanstack/react-query';

api/src/main/webui/src/components/kafka/users/UsersTable.tsx

@@ -3,7 +3,7 @@
  * Displays a table of Kafka users with filtering and sorting
  */
 
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   Table,

api/src/main/webui/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { RouterProvider } from 'react-router-dom';
+import { RouterProvider } from 'react-router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { router } from './routes';
 import './i18n/config';

api/src/main/webui/src/pages/ErrorPage.tsx

@@ -2,7 +2,7 @@
  * Error Page - Displayed when routing errors occur
  */
 
-import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
+import { useRouteError, isRouteErrorResponse } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   Page,

api/src/main/webui/src/pages/kafka/KafkaLayout.tsx

@@ -2,7 +2,7 @@
  * Kafka Layout - Wrapper for Kafka cluster pages
  */
 
-import { Outlet, useParams, useLocation, Link } from 'react-router-dom';
+import { Outlet, useParams, useLocation, Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   Page,

api/src/main/webui/src/pages/kafka/connect/ConnectClustersTab.tsx

@@ -4,7 +4,7 @@
  * Displays the connect clusters table
  */
 
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { PageSection } from '@patternfly/react-core';
 import { ConnectClustersTable } from '@/components/kafka/connect/ConnectClustersTable';
 

api/src/main/webui/src/pages/kafka/connect/ConnectConnectorsTab.tsx

@@ -4,7 +4,7 @@
  * Displays the connectors table
  */
 
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { PageSection } from '@patternfly/react-core';
 import { ConnectorsTable } from '@/components/kafka/connect/ConnectorsTable';
 

api/src/main/webui/src/pages/kafka/connect/ConnectPage.tsx

@@ -4,7 +4,7 @@
  * Main page for Kafka Connect with tabs for Connectors and Connect Clusters
  */
 
-import { useParams, useNavigate, useLocation, Outlet } from 'react-router-dom';
+import { useParams, useNavigate, useLocation, Outlet } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   PageSection,

api/src/main/webui/src/pages/kafka/connect/detail/ConnectClusterDetailPage.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useState } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, Link } from 'react-router';
 import {
   PageSection,
   Tabs,

api/src/main/webui/src/pages/kafka/connect/detail/ConnectorDetailPage.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import {
   PageSection,
   Title,

api/src/main/webui/src/pages/kafka/groups/GroupsPage.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   PageSection,