upgrade to patternfly v6

Signed-off-by: hemahg <[email protected]>
streamshub · Nov 15, 2024 · b30e874 · b30e874
1 parent 81c6706
commit b30e874
Show file tree

Hide file tree

Showing 86 changed files with 3,145 additions and 3,681 deletions.
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/page.tsx
@@ -7,7 +7,6 @@ import {
   Label,
   Nav,
   NavList,
-  PageNavigation,
   Spinner,
   Split,
   SplitItem,
@@ -67,20 +66,18 @@ function Header({
         </Split>
       }
       navigation={
-        <PageNavigation>
-          <Nav aria-label="Node navigation" variant="tertiary">
-            <NavList>
-              <NavItemLink url={`/kafka/${kafkaId}/nodes`} exact={true}>
-                Overview
+        <Nav aria-label="Node navigation" variant="horizontal">
+          <NavList>
+            <NavItemLink url={`/kafka/${kafkaId}/nodes`} exact={true}>
+              Overview
+            </NavItemLink>
+            {cruiseControlEnable && (
+              <NavItemLink url={`/kafka/${kafkaId}/nodes/rebalances`}>
+                Rebalance
               </NavItemLink>
-              {cruiseControlEnable && (
-                <NavItemLink url={`/kafka/${kafkaId}/nodes/rebalances`}>
-                  Rebalance
-                </NavItemLink>
-              )}
-            </NavList>
-          </Nav>
-        </PageNavigation>
+            )}
+          </NavList>
+        </Nav>
       }
     />
   );

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/rebalances/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/rebalances/page.tsx
@@ -7,7 +7,6 @@ import {
   Label,
   Nav,
   NavList,
-  PageNavigation,
   Spinner,
   Split,
   SplitItem,
@@ -67,20 +66,16 @@ function Header({
         </Split>
       }
       navigation={
-        <PageNavigation>
-          <Nav aria-label="Node navigation" variant="tertiary">
-            <NavList>
-              <NavItemLink url={`/kafka/${kafkaId}/nodes`}>
-                Overview
+        <Nav aria-label="Node navigation" variant="horizontal">
+          <NavList>
+            <NavItemLink url={`/kafka/${kafkaId}/nodes`}>Overview</NavItemLink>
+            {cruiseControlEnable && (
+              <NavItemLink url={`/kafka/${kafkaId}/nodes/rebalances`}>
+                Rebalance
               </NavItemLink>
-              {cruiseControlEnable && (
-                <NavItemLink url={`/kafka/${kafkaId}/nodes/rebalances`}>
-                  Rebalance
-                </NavItemLink>
-              )}
-            </NavList>
-          </Nav>
-        </PageNavigation>
+            )}
+          </NavList>
+        </Nav>
       }
     />
   );

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx
@@ -5,13 +5,7 @@ import { AppHeader } from "@/components/AppHeader";
 import { Number } from "@/components/Format/Number";
 import { ManagedTopicLabel } from "@/components/ManagedTopicLabel";
 import { NavItemLink } from "@/components/Navigation/NavItemLink";
-import {
-  Label,
-  Nav,
-  NavList,
-  PageNavigation,
-  Spinner,
-} from "@/libs/patternfly/react-core";
+import { Label, Nav, NavList, Spinner } from "@/libs/patternfly/react-core";
 import { Skeleton } from "@patternfly/react-core";
 import { notFound } from "next/navigation";
 import { ReactNode, Suspense } from "react";
@@ -33,48 +27,46 @@ export function TopicHeader({
           title={<Skeleton width="35%" />}
           showRefresh={showRefresh}
           navigation={
-            <PageNavigation>
-              <Nav aria-label="Group section navigation" variant="tertiary">
-                <NavList>
-                  <NavItemLink
-                    url={`/kafka/${kafkaId}/topics/${topicId}/messages`}
-                  >
-                    Messages&nbsp;
-                    <Label isCompact={true}>
-                      <Spinner size="sm" />
-                    </Label>
-                  </NavItemLink>
-                  <NavItemLink
-                    url={`/kafka/${kafkaId}/topics/${topicId}/partitions`}
-                  >
-                    Partitions&nbsp;
-                    <Label isCompact={true}>
-                      <Spinner size="sm" />
-                    </Label>
-                  </NavItemLink>
-                  <NavItemLink
-                    url={`/kafka/${kafkaId}/topics/${topicId}/consumer-groups`}
-                  >
-                    Consumer groups&nbsp;
-                    <Label isCompact={true}>
-                      <Spinner size="sm" />
-                    </Label>
-                  </NavItemLink>
-                  {/*
+            <Nav aria-label="Group section navigation" variant="horizontal">
+              <NavList>
+                <NavItemLink
+                  url={`/kafka/${kafkaId}/topics/${topicId}/messages`}
+                >
+                  Messages&nbsp;
+                  <Label isCompact={true}>
+                    <Spinner size="sm" />
+                  </Label>
+                </NavItemLink>
+                <NavItemLink
+                  url={`/kafka/${kafkaId}/topics/${topicId}/partitions`}
+                >
+                  Partitions&nbsp;
+                  <Label isCompact={true}>
+                    <Spinner size="sm" />
+                  </Label>
+                </NavItemLink>
+                <NavItemLink
+                  url={`/kafka/${kafkaId}/topics/${topicId}/consumer-groups`}
+                >
+                  Consumer groups&nbsp;
+                  <Label isCompact={true}>
+                    <Spinner size="sm" />
+                  </Label>
+                </NavItemLink>
+                {/*
                   <NavItemLink
                     url={`/kafka/${kafkaId}/topics/${topicId}/schema-registry`}
                   >
                     Schema
                   </NavItemLink>
 */}
-                  <NavItemLink
-                    url={`/kafka/${kafkaId}/topics/${topicId}/configuration`}
-                  >
-                    Configuration
-                  </NavItemLink>
-                </NavList>
-              </Nav>
-            </PageNavigation>
+                <NavItemLink
+                  url={`/kafka/${kafkaId}/topics/${topicId}/configuration`}
+                >
+                  Configuration
+                </NavItemLink>
+              </NavList>
+            </Nav>
           }
           actions={[portal]}
         />
@@ -113,47 +105,43 @@ async function ConnectedTopicHeader({
       }
       showRefresh={showRefresh}
       navigation={
-        <PageNavigation>
-          <Nav aria-label="Group section navigation" variant="tertiary">
-            <NavList>
-              <NavItemLink url={`/kafka/${kafkaId}/topics/${topicId}/messages`}>
-                Messages&nbsp;
-              </NavItemLink>
-              <NavItemLink
-                url={`/kafka/${kafkaId}/topics/${topicId}/partitions`}
-              >
-                Partitions&nbsp;
-                <Label isCompact={true}>
-                  <Suspense fallback={<Spinner size="sm" />}>
-                    <Number value={topic?.attributes.numPartitions} />
-                  </Suspense>
-                </Label>
-              </NavItemLink>
-              <NavItemLink
-                url={`/kafka/${kafkaId}/topics/${topicId}/consumer-groups`}
-              >
-                Consumer groups&nbsp;
-                <Label isCompact={true}>
-                  <Number
-                    value={topic?.relationships.consumerGroups?.data.length ?? 0}
-                  />
-                </Label>
-              </NavItemLink>
-              {/*
+        <Nav aria-label="Group section navigation" variant="horizontal">
+          <NavList>
+            <NavItemLink url={`/kafka/${kafkaId}/topics/${topicId}/messages`}>
+              Messages&nbsp;
+            </NavItemLink>
+            <NavItemLink url={`/kafka/${kafkaId}/topics/${topicId}/partitions`}>
+              Partitions&nbsp;
+              <Label isCompact={true}>
+                <Suspense fallback={<Spinner size="sm" />}>
+                  <Number value={topic?.attributes.numPartitions} />
+                </Suspense>
+              </Label>
+            </NavItemLink>
+            <NavItemLink
+              url={`/kafka/${kafkaId}/topics/${topicId}/consumer-groups`}
+            >
+              Consumer groups&nbsp;
+              <Label isCompact={true}>
+                <Number
+                  value={topic?.relationships.consumerGroups?.data.length ?? 0}
+                />
+              </Label>
+            </NavItemLink>
+            {/*
               <NavItemLink
                 url={`/kafka/${kafkaId}/topics/${topicId}/schema-registry`}
               >
                 Schema
               </NavItemLink>
               */}
-              <NavItemLink
-                url={`/kafka/${kafkaId}/topics/${topicId}/configuration`}
-              >
-                Configuration
-              </NavItemLink>
-            </NavList>
-          </Nav>
-        </PageNavigation>
+            <NavItemLink
+              url={`/kafka/${kafkaId}/topics/${topicId}/configuration`}
+            >
+              Configuration
+            </NavItemLink>
+          </NavList>
+        </Nav>
       }
       actions={[portal]}
     />

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/page.tsx
@@ -72,7 +72,7 @@ function Header({
                     <CheckCircleIcon />
                   )
                 }
-                color={"cyan"}
+                color={"teal"}
               >
                 {ok !== undefined && <Number value={ok} />}
               </Label>

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/KafkaSwitcher.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/KafkaSwitcher.tsx
@@ -69,7 +69,7 @@ export function KafkaSwitcher<T extends string>({
             {
               "--pf-v5-c-menu-toggle__toggle-icon--MarginRight": 0,
               "--pf-v5-c-menu-toggle__controls--PaddingLeft":
-                "var(--pf-v5-global--spacer--sm)",
+                "var(--pf-t--global--spacer--sm)",
             } as CSSProperties
           }
         >

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/LagTable.stories.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/LagTable.stories.tsx
@@ -49,7 +49,7 @@ const sampleData = [
     lag: 342,
     offset: 3068518,
     logEndOffset: 3068869,
-  }
+  },
 ];
 
 export default {
@@ -60,7 +60,6 @@ type Story = StoryObj<typeof LagTable>;
 export const Default: Story = {
   args: {
     kafkaId: "kafka1",
-    offsets: sampleData
-
-  }
+    offsets: sampleData,
+  },
 };
diff --git a/.../[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/MembersTable.stories.tsx b/.../[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/MembersTable.stories.tsx
@@ -5,7 +5,8 @@ const sampleConsumerGroup = {
   attributes: {
     members: [
       {
-        memberId: "console-datagen-consumer-0-2-f57582e3-523b-4a1e-97a8-02cb2e3b6592",
+        memberId:
+          "console-datagen-consumer-0-2-f57582e3-523b-4a1e-97a8-02cb2e3b6592",
         clientId: "console-datagen-consumer-0-2",
         assignments: [
           {
@@ -89,7 +90,7 @@ const sampleConsumerGroup = {
         lag: 342,
         offset: 3068518,
         logEndOffset: 3068869,
-      }
+      },
     ],
   },
 };