upgrade nextjs to latest version 16

ui/.storybook/main.ts

@@ -34,17 +34,6 @@ const config: StorybookConfig = {
           ...(config.resolve.plugins || []),
           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/consumer-groups/[groupId]/page.tsx

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

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

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

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

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

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

@@ -7,11 +7,17 @@ import { HomeIcon } from "@/libs/patternfly/react-icons";
 import { useTranslations } from "next-intl";
 import { KafkaParams } from "../../kafka.params";
 
-export default function ConsumerGroupsActiveBreadcrumbPage({
-  params: { kafkaId },
-}: {
-  params: KafkaParams;
-}) {
+export default async function ConsumerGroupsActiveBreadcrumbPage(
+  props: {
+    params: Promise<KafkaParams>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    kafkaId
+  } = params;
+
   return <ConsumerGroupsActiveBreadcrumb kafkaId={kafkaId} />;
 }
 

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

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

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

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

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

@@ -7,11 +7,17 @@ import { HomeIcon } from "@/libs/patternfly/react-icons";
 import { useTranslations } from "next-intl";
 import { KafkaParams } from "../../../kafka.params";
 
-export default function KafkaConnectClustersActiveBreadcrumbPage({
-  params: { kafkaId },
-}: {
-  params: KafkaParams;
-}) {
+export default async function KafkaConnectClustersActiveBreadcrumbPage(
+  props: {
+    params: Promise<KafkaParams>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    kafkaId
+  } = params;
+
   return <KafkaConnectClustersActiveBreadcrumb kafkaId={kafkaId} />;
 }
 

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

@@ -7,11 +7,17 @@ import { HomeIcon } from "@/libs/patternfly/react-icons";
 import { useTranslations } from "next-intl";
 import { KafkaParams } from "../../kafka.params";
 
-export default function KafkaConnectActiveBreadcrumbPage({
-  params: { kafkaId },
-}: {
-  params: KafkaParams;
-}) {
+export default async function KafkaConnectActiveBreadcrumbPage(
+  props: {
+    params: Promise<KafkaParams>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    kafkaId
+  } = params;
+
   return <KafkaConnectActiveBreadcrumb kafkaId={kafkaId} />;
 }
 

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

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

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

@@ -7,11 +7,17 @@ import { HomeIcon } from "@/libs/patternfly/react-icons";
 import { useTranslations } from "next-intl";
 import { KafkaParams } from "../../kafka.params";
 
-export default function KafkaUsersActiveBreadcrumbPage({
-  params: { kafkaId },
-}: {
-  params: KafkaParams;
-}) {
+export default async function KafkaUsersActiveBreadcrumbPage(
+  props: {
+    params: Promise<KafkaParams>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    kafkaId
+  } = params;
+
   return <KafkaUsersActiveBreadcrumb kafkaId={kafkaId} />;
 }
 

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

@@ -7,11 +7,17 @@ import { HomeIcon } from "@/libs/patternfly/react-icons";
 import { useTranslations } from "next-intl";
 import { KafkaParams } from "../../kafka.params";
 
-export default function NodesActiveBreadcrumbPage({
-  params: { kafkaId },
-}: {
-  params: KafkaParams;
-}) {
+export default async function NodesActiveBreadcrumbPage(
+  props: {
+    params: Promise<KafkaParams>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    kafkaId
+  } = params;
+
   return <NodesActiveBreadcrumb kafkaId={kafkaId} />;
 }
 

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

@@ -7,11 +7,17 @@ import { HomeIcon } from "@/libs/patternfly/react-icons";
 import { useTranslations } from "next-intl";
 import { KafkaParams } from "../../../kafka.params";
 
-export default function RebalanceActiveBreadcrumbPage({
-  params: { kafkaId },
-}: {
-  params: KafkaParams;
-}) {
+export default async function RebalanceActiveBreadcrumbPage(
+  props: {
+    params: Promise<KafkaParams>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    kafkaId
+  } = params;
+
   return <RebalanceActiveBreadcrumb kafkaId={kafkaId} />;
 }
 

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

@@ -1,3 +1,4 @@
+import { use } from "react";
 import { KafkaParams } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/kafka.params";
 import { BreadcrumbLink } from "@/components/Navigation/BreadcrumbLink";
 import {
@@ -8,11 +9,17 @@ import {
 import { HomeIcon } from "@/libs/patternfly/react-icons";
 import { useTranslations } from "next-intl";
 
-export default function TopicsActiveBreadcrumb({
-  params: { kafkaId },
-}: {
-  params: KafkaParams;
-}) {
+export default function TopicsActiveBreadcrumb(
+  props: {
+    params: Promise<KafkaParams>;
+  }
+) {
+  const params = use(props.params);
+
+  const {
+    kafkaId
+  } = params;
+
   const t = useTranslations("breadcrumbs");
   return (
     <Breadcrumb>

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

@@ -7,11 +7,17 @@ import { HomeIcon } from "@/libs/patternfly/react-icons";
 import { useTranslations } from "next-intl";
 import { KafkaParams } from "../../kafka.params";
 
-export default function TopicsActiveBreadcrumbPage({
-  params: { kafkaId },
-}: {
-  params: KafkaParams;
-}) {
+export default async function TopicsActiveBreadcrumbPage(
+  props: {
+    params: Promise<KafkaParams>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    kafkaId
+  } = params;
+
   return <TopicsActiveBreadcrumb kafkaId={kafkaId} />;
 }
 

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

@@ -7,11 +7,18 @@ import { ConsumerGroupActionButton } from "./ConsumerGroupActionButton";
 import RichText from "@/components/RichText";
 import { hasPrivilege } from "@/utils/privileges";
 
-export default function Page({
-  params: { kafkaId, groupId },
-}: {
-  params: KafkaConsumerGroupMembersParams;
-}) {
+export default async function Page(
+  props: {
+    params: Promise<KafkaConsumerGroupMembersParams>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    kafkaId,
+    groupId
+  } = params;
+
   return (
     <Suspense
       fallback={<Header params={{ kafkaId, groupId, groupIdDisplay: "" }} disabled={true} />}