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

systemtests/src/main/java/com/github/streamshub/systemtests/locators/CssSelectors.java

@@ -14,8 +14,7 @@ public class CssSelectors {
     private CssSelectors() {}
 
     public static final String PAGE_DIV = new CssBuilder()
-        .withElementBody().withChild()
-        .withElementDiv().nth(1)
+        .withElementDiv().withId("root")
         .build();
 
     // ----------------------------
@@ -31,22 +30,25 @@ private CssSelectors() {}
         .build();
 
     // Keycloak
-    public static final String LOGIN_KEYCLOAK_PAGE_TITLE = new CssBuilder(PAGE_DIV)
-        .withDesc()
+    public static final String LOGIN_KEYCLOAK_PAGE_TITLE = new CssBuilder()
         .withElementHeader().withId("kc-header")
         .build();
 
-    public static final String LOGIN_KEYCLOAK_USERNAME_INPUT = new CssBuilder(PAGE_DIV)
+    public static final String LOGIN_KEYCLOAK_FORM = new CssBuilder()
+        .withElementForm().withId("kc-form-login")
+        .build();
+
+    public static final String LOGIN_KEYCLOAK_USERNAME_INPUT = new CssBuilder(LOGIN_KEYCLOAK_FORM)
         .withDesc()
         .withElementInput().withId("username")
         .build();
 
-    public static final String LOGIN_KEYCLOAK_PASSWORD_INPUT = new CssBuilder(PAGE_DIV)
+    public static final String LOGIN_KEYCLOAK_PASSWORD_INPUT = new CssBuilder(LOGIN_KEYCLOAK_FORM)
         .withDesc()
         .withElementInput().withId("password")
         .build();
 
-    public static final String LOGIN_KEYCLOAK_SIGN_IN_BUTTON = new CssBuilder(PAGE_DIV)
+    public static final String LOGIN_KEYCLOAK_SIGN_IN_BUTTON = new CssBuilder(LOGIN_KEYCLOAK_FORM)
         .withDesc()
         .withElementButton().withId("kc-login")
         .build();
@@ -100,7 +102,7 @@ private CssSelectors() {}
         .withElementDiv().withChild()
         .withElementButton().withComponentButton()
         .build();
-    
+
     public static final String PAGES_CONTENT_HEADER_TITLE_CONTENT = new CssBuilder(PAGES_HEADER_CONTENT)
         .withElementDiv().withChild()
         .withElementH1().withComponentTitle()

systemtests/src/main/java/com/github/streamshub/systemtests/locators/MessagesPageSelectors.java

@@ -48,7 +48,7 @@ private MessagesPageSelectors() {}
 
     public static final String MPS_TOOLBAR_POPOVER_FORM = new CssBuilder()
         .withElementBody().withChild()
-        .withElementDiv().nth(3).withChild()
+        .withElementDiv().nth(4).withChild()
         .withElementDiv().withComponentPanel().withChild()
         .withElementDiv().withComponentPanel().withSubComponentMain().withChild()
         .withElementDiv().withComponentPanel().withSubComponentMainBody().withChild()
@@ -306,8 +306,8 @@ public static String getTableRowItem(int nthRow, int nthColumn) {
         .withElementSpan().withComponentFormControl().withChild()
         .withElementInput()
         .build();
-        
-    
+
+
     public static final String MPS_MESSAGE_SIDEBAR = new CssBuilder(CssSelectors.PAGES_CONTENT)
         .withChild()
         .withElementDiv().withComponentPage().withSubComponentMainBody().withChild()

systemtests/src/test/java/com/github/streamshub/systemtests/messages/MessagesST.java

@@ -15,7 +15,6 @@
 import com.github.streamshub.systemtests.logs.LogWrapper;
 import com.github.streamshub.systemtests.setup.console.ConsoleInstanceSetup;
 import com.github.streamshub.systemtests.setup.strimzi.KafkaSetup;
-import com.github.streamshub.systemtests.utils.Utils;
 import com.github.streamshub.systemtests.utils.WaitUtils;
 import com.github.streamshub.systemtests.utils.playwright.PwPageUrls;
 import com.github.streamshub.systemtests.utils.playwright.PwUtils;
@@ -36,7 +35,6 @@
 import org.junit.jupiter.params.provider.Arguments;
 import org.junit.jupiter.params.provider.MethodSource;
 
-import java.time.Duration;
 import java.time.Instant;
 import java.time.OffsetDateTime;
 import java.time.ZoneId;
@@ -70,7 +68,6 @@ public class MessagesST extends AbstractST {
     private static final String VALUE_FILTER = "package=sent";
     private static final String TIMESTAMP_FILTER = "messages=timestamp:";
     private static final String EPOCH_FILTER = "messages=epoch:";
-    private static final int MAX_MESSAGES_PER_PAGE = 50;
 
     /**
      * Provides parameterized scenarios for verifying message search functionality
@@ -194,40 +191,35 @@ void testMessageFilteringByTimestamps() {
         final String newMessageText = "testTimestampText";
         final String oldMessageText = "earlierMessages";
         final String topicPrefix = "timestamp-filter-topic";
-        final int offsetMinutes = 5;
 
         // Formatters
         final DateTimeFormatter timestampFormatterQuery = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss");
         final DateTimeFormatter dateFormatterForm = DateTimeFormatter.ofPattern("yyyy-MM-dd");
         final DateTimeFormatter timeFormatterForm = DateTimeFormatter.ofPattern("HH:mm");
 
-        String kafkaTopicName = KafkaTopicUtils.setupTopicsIfNeededAndReturn(tcc.namespace(), tcc.kafkaName(), topicPrefix, TOPIC_COUNT, 1, 1, 1)
-            .getFirst().getMetadata().getName();
+        String testTopic = KafkaTopicUtils
+                .setupTopicsIfNeededAndReturn(tcc.namespace(), tcc.kafkaName(), topicPrefix, TOPIC_COUNT, 1, 1, 1)
+                .getFirst()
+                .getMetadata()
+                .getName();
 
         // Set timestamps
-        final OffsetDateTime earlierUtcTime = Instant.now().atOffset(ZoneOffset.UTC).minusMinutes(offsetMinutes);
-        final OffsetDateTime currentUtcTime = earlierUtcTime.plusMinutes(offsetMinutes + 2);
-        final OffsetDateTime currentLocalTime = currentUtcTime.atZoneSameInstant(ZoneId.systemDefault()).toOffsetDateTime();
-
-        final String currentDateTimeQuery = currentUtcTime.format(timestampFormatterQuery);
+        final OffsetDateTime earlierUtcTime = Instant.now().atOffset(ZoneOffset.UTC);
         final String earlierTimeQuery = earlierUtcTime.format(timestampFormatterQuery);
-        final String currentDateTimeUnix = String.valueOf(currentUtcTime.toEpochSecond());
         final String earlierDateTimeUnix = String.valueOf(earlierUtcTime.toEpochSecond());
-        final String currentDateForm = currentUtcTime.format(dateFormatterForm);
-        final String currentTimeForm = currentLocalTime.format(timeFormatterForm);
-        final String earlierTimeForm = earlierUtcTime.format(timeFormatterForm);
+        final String earlierDateForm = earlierUtcTime.format(dateFormatterForm);
+        final String earlierTimeForm = earlierUtcTime.atZoneSameInstant(ZoneId.systemDefault()).format(timeFormatterForm);
 
-        LOGGER.info("Current ISO: {}, Earlier ISO: {}, Current Unix: {}, Earlier Unix: {}",
-            currentDateTimeQuery, earlierTimeQuery, currentDateTimeUnix, earlierDateTimeUnix);
+        LOGGER.info("Earlier ISO: {}, Earlier Unix: {}", earlierTimeQuery, earlierDateTimeUnix);
 
         KafkaClients clients = new KafkaClientsBuilder()
             .withNamespaceName(tcc.namespace())
-            .withTopicName(kafkaTopicName)
+            .withTopicName(testTopic)
             .withMessageCount(oldMessageCount)
             .withDelayMs(0)
-            .withProducerName(KafkaNamingUtils.producerName(kafkaTopicName))
-            .withConsumerName(KafkaNamingUtils.consumerName(kafkaTopicName))
-            .withConsumerGroup(KafkaNamingUtils.consumerGroupName(kafkaTopicName))
+            .withProducerName(KafkaNamingUtils.producerName(testTopic))
+            .withConsumerName(KafkaNamingUtils.consumerName(testTopic))
+            .withConsumerGroup(KafkaNamingUtils.consumerGroupName(testTopic))
             .withBootstrapAddress(KafkaUtils.getPlainScramShaBootstrapAddress(tcc.kafkaName()))
             .withUsername(tcc.kafkaUserName())
             .withMessage(oldMessageText)
@@ -237,22 +229,25 @@ void testMessageFilteringByTimestamps() {
         KubeResourceManager.get().createResourceWithWait(clients.producer(), clients.consumer());
         WaitUtils.waitForClientsSuccess(clients);
 
-        final String topicId = WaitUtils.waitForKafkaTopicToHaveIdAndReturn(tcc.namespace(), kafkaTopicName);
-        LOGGER.info("Using topic '{}' with id '{}'", kafkaTopicName, topicId);
+        final String topicId = WaitUtils.waitForKafkaTopicToHaveIdAndReturn(tcc.namespace(), testTopic);
+        LOGGER.info("Using topic '{}' with id '{}'", testTopic, topicId);
 
         PwUtils.navigate(tcc, PwPageUrls.getMessagesPage(tcc, tcc.kafkaName(), topicId));
-        PwUtils.waitForContainsText(tcc, CssSelectors.PAGES_CONTENT_HEADER_TITLE_CONTENT, kafkaTopicName, true);
+        PwUtils.waitForContainsText(tcc, CssSelectors.PAGES_CONTENT_HEADER_TITLE_CONTENT, testTopic, true);
 
         LOGGER.info("Filtering messages using ISO query timestamp (current) - expect 0 new messages");
-        MessagesChecks.checkQueryBarFilter(tcc, TIMESTAMP_FILTER, currentDateTimeQuery, 1, null);
+        MessagesChecks.checkQueryBarFilter(tcc, TIMESTAMP_FILTER, Instant.now().atOffset(ZoneOffset.UTC).format(timestampFormatterQuery), 1, null);
 
         LOGGER.info("Filtering messages using ISO query timestamp (earlier) - expect full page");
         MessagesChecks.checkQueryBarFilter(tcc, TIMESTAMP_FILTER, earlierTimeQuery, oldMessageCount, oldMessageText);
 
-        // Wait for a while to produce the new messages with
-        LOGGER.warn("Sleeping to delay messages timestamp");
-        Utils.sleepWait(Duration.ofMinutes(3).toMillis());
+        final OffsetDateTime currentUtcTime = Instant.now().atOffset(ZoneOffset.UTC);
+        final String currentDateTimeQuery = currentUtcTime.format(timestampFormatterQuery);
+        final String currentDateTimeUnix = String.valueOf(currentUtcTime.toEpochSecond());
+        final String currentDateForm = currentUtcTime.format(dateFormatterForm);
+        final String currentTimeForm = currentUtcTime.atZoneSameInstant(ZoneId.systemDefault()).format(timeFormatterForm);
 
+        LOGGER.info("Current ISO: {}, Current Unix: {}", currentDateTimeQuery, currentDateTimeUnix);
         LOGGER.info("Producing {} new messages with text '{}'", newMessageCount, newMessageText);
         clients = new KafkaClientsBuilder(clients)
             .withMessageCount(newMessageCount)
@@ -278,12 +273,14 @@ void testMessageFilteringByTimestamps() {
 
         // Verify via UI popover (ISO mode)
         PwUtils.navigate(tcc, PwPageUrls.getMessagesPage(tcc, tcc.kafkaName(), topicId));
-        PwUtils.waitForContainsText(tcc, CssSelectors.PAGES_CONTENT_HEADER_TITLE_CONTENT, kafkaTopicName, true);
+        PwUtils.waitForContainsText(tcc, CssSelectors.PAGES_CONTENT_HEADER_TITLE_CONTENT, testTopic, true);
         PwUtils.waitForLocatorVisible(tcc, MessagesPageSelectors.MPS_SEARCH_TOOLBAR_QUERY_INPUT);
 
         LOGGER.info("Verifying timestamp filtering using UI popover (ISO mode) (current)");
         MessagesChecks.checkPopoverIsoFilter(tcc, currentDateForm, currentTimeForm, newMessageCount, newMessageText);
-        MessagesChecks.checkPopoverIsoFilter(tcc, currentDateForm, earlierTimeForm, oldMessageCount, oldMessageText);
+
+        LOGGER.info("Verifying timestamp filtering using UI popover (ISO mode) (earlier)");
+        MessagesChecks.checkPopoverIsoFilter(tcc, earlierDateForm, earlierTimeForm, oldMessageCount, oldMessageText);
 
         // Verify via UI popover (Unix mode)
         LOGGER.info("Verifying timestamp filtering using UI popover (Unix mode) (current)");

systemtests/src/test/resources/upgrade/OlmUpgrade.yaml

@@ -1,6 +1,6 @@
 # OLM channel
-oldOlmChannel: 0.12.x
-newOlmChannel: alpha
+oldOlmChannel: 0.11.x
+newOlmChannel: 0.12.x
 # Operator version
-oldOperatorVersion: 0.12.0
+oldOperatorVersion: 0.11.0
 newOperatorVersion: 0.12.1-snapshot

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]/GroupBreadcrumb.tsx

@@ -13,10 +13,11 @@ import { HomeIcon } from "@/libs/patternfly/react-icons";
 import { getTranslations } from "next-intl/server";
 
 export async function GroupBreadcrumb({
-  params: { groupId, kafkaId },
+  params: paramsPromise,
 }: {
-  params: GroupParams;
+  params: Promise<GroupParams>;
 }) {
+  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: GroupParams;
+  params: Promise<GroupParams>;
 }) {
+  const { groupId, kafkaId } = await paramsPromise;
   const t = await getTranslations();
   const consumerGroup = (await getConsumerGroup(kafkaId, groupId));
 
@@ -42,13 +43,13 @@ export default async function DryrunActiveBreadcrumb({
       </BreadcrumbItem>
 
       <BreadcrumbLink
-        key={"cg"}
+        key={"groups-link-crumb"}
         href={`/kafka/${kafkaId}/groups`}
         showDivider={true}
       >
         {t("breadcrumbs.consumer_groups")}
       </BreadcrumbLink>
-      <BreadcrumbItem key={"cgm"} showDivider={true} isActive={true}>
+      <BreadcrumbItem key={"group-crumb"} showDivider={true} isActive={true}>
         {groupIdDisplay === "" ? (
           <RichText>{(tags) => t.rich("common.empty_name", tags)}</RichText>
         ) : (
@@ -57,13 +58,13 @@ export default async function DryrunActiveBreadcrumb({
       </BreadcrumbItem>
 
       <BreadcrumbLink
-        key={"cg"}
+        key={"group-reset-link-crumb"}
         href={`/kafka/${kafkaId}/groups/${groupId}/reset-offset`}
         showDivider={true}
       >
         {t("GroupsTable.reset_consumer_offset")}
       </BreadcrumbLink>
-      <BreadcrumbItem key={"cgm"} showDivider={true} isActive={true}>
+      <BreadcrumbItem key={"group-reset-dryrun"} showDivider={true} isActive={true}>
         {t("GroupsTable.dry_run_results_breadcrumb")}
       </BreadcrumbItem>
     </Breadcrumb>

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: GroupParams;
+  params: Promise<GroupParams>;
 }) {
+  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>