Migrate from Next.js 14 / React 18 to Next.js 15 / React 19

Signed-off-by: Michael Edgar <medgar@redhat.com>
Co-authored-by: hemahg <hhg@redhat.com>
Co-Authored-By: dependabot[bot] <support@github.com>
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Assisted-by: Claude Code (Sonnet 4.5) <noreply@anthropic.com>

Author: 4 people

ui/.gitignore

@@ -45,3 +45,4 @@ yarn.lock
 tests/playwright/.auth/*.json
 /test-results/
 /.pino-prettyrc
+/.claude/

ui/.storybook/main.ts

@@ -35,16 +35,6 @@ const config: StorybookConfig = {
           new TsconfigPathsPlugin(),
       ];
 
-      // This is a workaround to a bug in storybook that prevents storybook v10.x.x working with Next.js v14.x.x
-      // See: https://github.com/storybookjs/storybook/issues/32950
-      //
-      // This can be removed when we upgrade to Next.js v15.0.0+ or if storybook releases a fix in a newer
-      // version.
-      config.resolve.alias = {
-          ...(config.resolve.alias || {}),
-          'next/dist/server/request/draft-mode': false,
-      };
-
       return config;
   }
 };

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/groups/[groupId]/page.tsx

@@ -13,10 +13,11 @@ import { HomeIcon } from "@/libs/patternfly/react-icons";
 import { getTranslations } from "next-intl/server";
 
 export default async function ConsumerGroupsActiveBreadcrumb({
-  params: { groupId, kafkaId },
+  params: paramsPromise,
 }: {
-  params: KafkaConsumerGroupMembersParams;
+  params: Promise<KafkaConsumerGroupMembersParams>;
 }) {
+  const { groupId, kafkaId } = await paramsPromise;
   const t = await getTranslations();
   const consumerGroup = (await getConsumerGroup(kafkaId, groupId));
 

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/groups/[groupId]/reset-offset/dryrun/page.tsx

@@ -13,10 +13,11 @@ import { HomeIcon } from "@/libs/patternfly/react-icons";
 import { getTranslations } from "next-intl/server";
 
 export default async function DryrunActiveBreadcrumb({
-  params: { groupId, kafkaId },
+  params: paramsPromise,
 }: {
-  params: KafkaConsumerGroupMembersParams;
+  params: Promise<KafkaConsumerGroupMembersParams>;
 }) {
+  const { groupId, kafkaId } = await paramsPromise;
   const t = await getTranslations();
   const consumerGroup = (await getConsumerGroup(kafkaId, groupId));
 

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/groups/[groupId]/reset-offset/page.tsx

@@ -13,10 +13,11 @@ import { HomeIcon } from "@/libs/patternfly/react-icons";
 import { getTranslations } from "next-intl/server";
 
 export default async function ConsumerGroupsActiveBreadcrumb({
-  params: { groupId, kafkaId },
+  params: paramsPromise,
 }: {
-  params: KafkaConsumerGroupMembersParams;
+  params: Promise<KafkaConsumerGroupMembersParams>;
 }) {
+  const { groupId, kafkaId } = await paramsPromise;
   const t = await getTranslations();
   const consumerGroup = (await getConsumerGroup(kafkaId, groupId));
 

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/groups/page.tsx

@@ -4,19 +4,20 @@ import {
   Tooltip,
 } from "@/libs/patternfly/react-core";
 import { HomeIcon } from "@/libs/patternfly/react-icons";
-import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
 import { KafkaParams } from "../../kafka.params";
 
-export default function ConsumerGroupsActiveBreadcrumbPage({
-  params: { kafkaId },
+export default async function ConsumerGroupsActiveBreadcrumbPage({
+  params: paramsPromise,
 }: {
-  params: KafkaParams;
+  params: Promise<KafkaParams>;
 }) {
+  const { kafkaId } = await paramsPromise;
   return <ConsumerGroupsActiveBreadcrumb kafkaId={kafkaId} />;
 }
 
-function ConsumerGroupsActiveBreadcrumb({ kafkaId }: { kafkaId: string }) {
-  const t = useTranslations("breadcrumbs");
+async function ConsumerGroupsActiveBreadcrumb({ kafkaId }: { kafkaId: string }) {
+  const t = await getTranslations("breadcrumbs");
 
   return (
     <Breadcrumb>

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/kafka-connect/[connectorId]/page.tsx

@@ -5,11 +5,12 @@ import { NoDataErrorState } from "@/components/NoDataErrorState";
 import { KafkaConnectorParams } from "../../../kafka-connect/kafkaConnectors.params";
 import { ConnectorBreadcrumb } from "./ConnectorBreadcrumb";
 
-export default function Page({
-  params: { kafkaId, connectorId },
+export default async function Page({
+  params: paramsPromise,
 }: {
-  params: KafkaConnectorParams;
+  params: Promise<KafkaConnectorParams>;
 }) {
+  const { kafkaId, connectorId } = await paramsPromise;
   return (
     <Suspense
       fallback={<ConnectorActiveBreadcrumb params={{ kafkaId, connectorId }} />}

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/kafka-connect/connect-clusters/[clusterId]/page.tsx

@@ -6,11 +6,12 @@ import { getConnectCluster } from "@/api/kafkaConnect/action";
 import { NoDataErrorState } from "@/components/NoDataErrorState";
 import { ConnectClusterBreadcrumb } from "./ConnectClusterBreadcrumb";
 
-export default function Page({
-  params: { kafkaId, clusterId },
+export default async function Page({
+  params: paramsPromise,
 }: {
-  params: KafkaConnectParams;
+  params: Promise<KafkaConnectParams>;
 }) {
+  const { kafkaId, clusterId } = await paramsPromise;
   return (
     <Suspense
       fallback={

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/kafka-connect/connect-clusters/page.tsx

@@ -4,23 +4,24 @@ import {
   Tooltip,
 } from "@/libs/patternfly/react-core";
 import { HomeIcon } from "@/libs/patternfly/react-icons";
-import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
 import { KafkaParams } from "../../../kafka.params";
 
-export default function KafkaConnectClustersActiveBreadcrumbPage({
-  params: { kafkaId },
+export default async function KafkaConnectClustersActiveBreadcrumbPage({
+  params: paramsPromise,
 }: {
-  params: KafkaParams;
+  params: Promise<KafkaParams>;
 }) {
+  const { kafkaId } = await paramsPromise;
   return <KafkaConnectClustersActiveBreadcrumb kafkaId={kafkaId} />;
 }
 
-function KafkaConnectClustersActiveBreadcrumb({
+async function KafkaConnectClustersActiveBreadcrumb({
   kafkaId,
 }: {
   kafkaId: string;
 }) {
-  const t = useTranslations();
+  const t = await getTranslations();
 
   return (
     <Breadcrumb>

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/kafka-connect/page.tsx

@@ -4,19 +4,20 @@ import {
   Tooltip,
 } from "@/libs/patternfly/react-core";
 import { HomeIcon } from "@/libs/patternfly/react-icons";
-import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
 import { KafkaParams } from "../../kafka.params";
 
-export default function KafkaConnectActiveBreadcrumbPage({
-  params: { kafkaId },
+export default async function KafkaConnectActiveBreadcrumbPage({
+  params: paramsPromise,
 }: {
-  params: KafkaParams;
+  params: Promise<KafkaParams>;
 }) {
+  const { kafkaId } = await paramsPromise;
   return <KafkaConnectActiveBreadcrumb kafkaId={kafkaId} />;
 }
 
-function KafkaConnectActiveBreadcrumb({ kafkaId }: { kafkaId: string }) {
-  const t = useTranslations();
+async function KafkaConnectActiveBreadcrumb({ kafkaId }: { kafkaId: string }) {
+  const t = await getTranslations();
 
   return (
     <Breadcrumb>