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

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>

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

@@ -5,11 +5,12 @@ import { KafkaUserDetailsBreadcrumb } from "./KafkaUserDetailsBreadcrumb";
 import { getKafkaUser } from "@/api/kafkaUsers/action";
 import { KafkaUserParams } from "../../../kafka-users/kafkaUser.params";
 
-export default function Page({
-  params: { kafkaId, userId },
+export default async function Page({
+  params: paramsPromise,
 }: {
-  params: KafkaUserParams;
+  params: Promise<KafkaUserParams>;
 }) {
+  const { kafkaId, userId } = await paramsPromise;
   return (
     <Suspense
       fallback={<KafkaUserActiveBreadcrumb params={{ kafkaId, userId }} />}

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/kafka-users/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 KafkaUsersActiveBreadcrumbPage({
-  params: { kafkaId },
+export default async function KafkaUsersActiveBreadcrumbPage({
+  params: paramsPromise,
 }: {
-  params: KafkaParams;
+  params: Promise<KafkaParams>;
 }) {
+  const { kafkaId } = await paramsPromise;
   return <KafkaUsersActiveBreadcrumb kafkaId={kafkaId} />;
 }
 
-function KafkaUsersActiveBreadcrumb({ kafkaId }: { kafkaId: string }) {
-  const t = useTranslations();
+async function KafkaUsersActiveBreadcrumb({ kafkaId }: { kafkaId: string }) {
+  const t = await getTranslations();
 
   return (
     <Breadcrumb>

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/nodes/[nodeId]/NodeBreadcrumb.tsx

@@ -6,14 +6,15 @@ 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";
 
-export function NodeBreadcrumb({
-  params: { kafkaId, nodeId },
+export async function NodeBreadcrumb({
+  params: paramsPromise,
 }: {
-  params: KafkaNodeParams;
+  params: Promise<KafkaNodeParams>;
 }) {
-  const t = useTranslations();
+  const { kafkaId, nodeId } = await paramsPromise;
+  const t = await getTranslations();
   return (
     <Breadcrumb>
       <BreadcrumbItem key="home" to="/" showDivider>

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/nodes/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 NodesActiveBreadcrumbPage({
-  params: { kafkaId },
+export default async function NodesActiveBreadcrumbPage({
+  params: paramsPromise,
 }: {
-  params: KafkaParams;
+  params: Promise<KafkaParams>;
 }) {
+  const { kafkaId } = await paramsPromise;
   return <NodesActiveBreadcrumb kafkaId={kafkaId} />;
 }
 
-function NodesActiveBreadcrumb({ kafkaId }: { kafkaId: string }) {
-  const t = useTranslations();
+async function NodesActiveBreadcrumb({ kafkaId }: { kafkaId: string }) {
+  const t = await getTranslations();
 
   return (
     <Breadcrumb>

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/nodes/rebalances/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 RebalanceActiveBreadcrumbPage({
-  params: { kafkaId },
+export default async function RebalanceActiveBreadcrumbPage({
+  params: paramsPromise,
 }: {
-  params: KafkaParams;
+  params: Promise<KafkaParams>;
 }) {
+  const { kafkaId } = await paramsPromise;
   return <RebalanceActiveBreadcrumb kafkaId={kafkaId} />;
 }
 
-function RebalanceActiveBreadcrumb({ kafkaId }: { kafkaId: string }) {
-  const t = useTranslations();
+async function RebalanceActiveBreadcrumb({ kafkaId }: { kafkaId: string }) {
+  const t = await getTranslations();
 
   return (
     <Breadcrumb>

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/topics/[topicId]/TopicBreadcrumb.tsx

@@ -7,23 +7,17 @@ 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";
 
 export async function TopicBreadcrumb({
-  params: { kafkaId, topicId },
+  params: paramsPromise,
 }: {
-  params: KafkaTopicParams;
+  params: Promise<KafkaTopicParams>;
 }) {
-  return <ConnectedTopicBreadcrumb params={{ kafkaId, topicId }} />;
-}
-
-async function ConnectedTopicBreadcrumb({
-  params: { kafkaId, topicId },
-}: {
-  params: KafkaTopicParams;
-}) {
-  const t = useTranslations("breadcrumbs");
+  const { kafkaId, topicId } = await paramsPromise;
+  const t = await getTranslations("breadcrumbs");
   const response = await getTopic(kafkaId, topicId);
+
   return (
     <Breadcrumb>
       <BreadcrumbItem key="home" to="/" showDivider>

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

@@ -6,14 +6,15 @@ 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";
 
-export default function TopicsActiveBreadcrumb({
-  params: { kafkaId },
+export default async function TopicsActiveBreadcrumb({
+  params: paramsPromise,
 }: {
-  params: KafkaParams;
+  params: Promise<KafkaParams>;
 }) {
-  const t = useTranslations("breadcrumbs");
+  const { kafkaId } = await paramsPromise;
+  const t = await getTranslations("breadcrumbs");
   return (
     <Breadcrumb>
       <BreadcrumbItem key="home" to="/" showDivider>

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/topics/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 TopicsActiveBreadcrumbPage({
-  params: { kafkaId },
+export default async function TopicsActiveBreadcrumbPage({
+  params: paramsPromise,
 }: {
-  params: KafkaParams;
+  params: Promise<KafkaParams>;
 }) {
+  const { kafkaId } = await paramsPromise;
   return <TopicsActiveBreadcrumb kafkaId={kafkaId} />;
 }
 
-function TopicsActiveBreadcrumb({ kafkaId }: { kafkaId: string }) {
-  const t = useTranslations("breadcrumbs");
+async function TopicsActiveBreadcrumb({ kafkaId }: { kafkaId: string }) {
+  const t = await getTranslations("breadcrumbs");
 
   return (
     <Breadcrumb>

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/KafkaHeader.tsx

@@ -4,7 +4,12 @@ import { AppHeader } from "@/components/AppHeader";
 import { Skeleton } from "@/libs/patternfly/react-core";
 import { Suspense } from "react";
 
-export function KafkaHeader({ params: { kafkaId } }: { params: KafkaParams }) {
+export async function KafkaHeader({
+  params: paramsPromise,
+}: {
+  params: Promise<KafkaParams>;
+}) {
+  const { kafkaId } = await paramsPromise;
   return (
     <Suspense fallback={<AppHeader title={<Skeleton width="35%" />} />}>
       <ConnectedKafkaHeader params={{ kafkaId }} />