From c740c8a8d3d4d71413bd62aa6711647512b8b7b1 Mon Sep 17 00:00:00 2001
From: hemahg <hhg@redhat.com>
Date: Fri, 13 Sep 2024 01:17:53 +0530
Subject: [PATCH] Minor refactor

Signed-off-by: hemahg <hhg@redhat.com>
---
 .../reset-offset/LoadingPage.stories.tsx      |  13 +
 .../[groupId]/reset-offset/LoadingPage.tsx    |  27 ++
 .../reset-offset/ResetConsumerOffset.tsx      | 250 +++---------------
 ...et.stories.tsx => ResetOffset.stories.tsx} |  11 +-
 .../[groupId]/reset-offset/ResetOffset.tsx    | 243 +++++++++++++++++
 .../[groupId]/reset-offset/page.tsx           |   2 +-
 6 files changed, 322 insertions(+), 224 deletions(-)
 create mode 100644 ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/LoadingPage.stories.tsx
 create mode 100644 ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/LoadingPage.tsx
 rename ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/{ResetConsumerOffset.stories.tsx => ResetOffset.stories.tsx} (67%)
 create mode 100644 ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/LoadingPage.stories.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/LoadingPage.stories.tsx
new file mode 100644
index 000000000..8a93fd364
--- /dev/null
+++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/LoadingPage.stories.tsx
@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LoadingPage } from "./LoadingPage";
+
+export default {
+  component: LoadingPage,
+  args: {},
+} as Meta<typeof LoadingPage>;
+
+type Story = StoryObj<typeof LoadingPage>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/LoadingPage.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/LoadingPage.tsx
new file mode 100644
index 000000000..67a3c47d7
--- /dev/null
+++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/LoadingPage.tsx
@@ -0,0 +1,27 @@
+import {
+  Bullseye,
+  Grid,
+  GridItem,
+  Spinner,
+} from "@/libs/patternfly/react-core";
+import { useTranslations } from "next-intl";
+
+export function LoadingPage() {
+  const t = useTranslations("ConsumerGroupsTable");
+  return (
+    <Grid hasGutter={true}>
+      <GridItem>
+        <Bullseye>
+          <Spinner
+            size="xl"
+            aria-label={t("resetting_spinner")}
+            aria-valuetext={t("resetting_spinner")}
+          />
+        </Bullseye>
+      </GridItem>
+      <GridItem>
+        <Bullseye>{t("reseting_consumer_group_offsets_text")}</Bullseye>
+      </GridItem>
+    </Grid>
+  );
+}
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.tsx
index 1f10bdab5..69fc85477 100644
--- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.tsx
+++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.tsx
@@ -1,37 +1,5 @@
 "use client";
 
-import {
-  Divider,
-  Panel,
-  PanelHeader,
-  PanelMain,
-  PanelMainBody,
-  TextContent,
-  Text,
-  TextVariants,
-  Radio,
-  Form,
-  FormGroup,
-  FormSection,
-  Select,
-  SelectList,
-  SelectOption,
-  MenuToggle,
-  MenuToggleElement,
-  TextInput,
-  ActionGroup,
-  Button,
-  SelectProps,
-  PageSection,
-  Page,
-  Bullseye,
-  Spinner,
-  Flex,
-  FlexItem,
-  Grid,
-  GridItem,
-  Alert,
-} from "@/libs/patternfly/react-core";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 import {
@@ -40,8 +8,6 @@ import {
   TopicSelection,
   partitionSelection,
 } from "../types";
-import { TypeaheadSelect } from "./TypeaheadSelect";
-import { OffsetSelect } from "./OffsetSelect";
 import { useRouter } from "@/navigation";
 import {
   getDryrunResult,
@@ -49,6 +15,9 @@ import {
 } from "@/api/consumerGroups/actions";
 import { UpdateConsumerGroupErrorSchema } from "@/api/consumerGroups/schema";
 import { Dryrun } from "./Dryrun";
+import { LoadingPage } from "./LoadingPage";
+import { ResetOffset } from "./ResetOffset";
+import { Page } from "@/libs/patternfly/react-core";
 
 export type Offset = {
   topicId: string;
@@ -71,15 +40,13 @@ export function ResetConsumerOffset({
   partitions: number[];
   baseurl: string;
 }) {
-  const t = useTranslations("ConsumerGroupsTable");
-
   const router = useRouter();
 
   const [selectedConsumerTopic, setSelectedConsumerTopic] =
-    useState<TopicSelection>();
+    useState<TopicSelection>("allTopics");
 
   const [selectedPartition, setSelectedPartition] =
-    useState<partitionSelection>();
+    useState<partitionSelection>("allPartitions");
 
   const [selectedOffset, setSelectedOffset] = useState<OffsetValue>("custom");
 
@@ -109,6 +76,8 @@ export function ResetConsumerOffset({
     setSelectedPartition(value);
   };
 
+  const onOffsetSelect = (value: OffsetValue) => setSelectedOffset(value);
+
   const onDateTimeSelect = (value: DateTimeFormatSelection) => {
     setSelectDateTimeFormat(value);
   };
@@ -297,20 +266,7 @@ export function ResetConsumerOffset({
   return (
     <Page>
       {isLoading ? (
-        <Grid hasGutter={true}>
-          <GridItem>
-            <Bullseye>
-              <Spinner
-                size="xl"
-                aria-label={t("resetting_spinner")}
-                aria-valuetext={t("resetting_spinner")}
-              />
-            </Bullseye>
-          </GridItem>
-          <GridItem>
-            <Bullseye>{t("reseting_consumer_group_offsets_text")}</Bullseye>
-          </GridItem>
-        </Grid>
+        <LoadingPage />
       ) : showDryRun ? (
         <Dryrun
           consumerGroupName={consumerGroupName}
@@ -319,173 +275,29 @@ export function ResetConsumerOffset({
           cliCommand={generateCliCommand()}
         />
       ) : (
-        <Panel>
-          <PanelHeader>
-            <TextContent>
-              <Text component={TextVariants.h1}>
-                {t("reset_consumer_offset")}
-              </Text>
-            </TextContent>
-            <TextContent>
-              <Text>{t.rich("consumer_name", { consumerGroupName })}</Text>
-            </TextContent>
-          </PanelHeader>
-          <Divider />
-          <PanelMain>
-            <PanelMainBody>
-              {error && <Alert variant="danger" isInline title={error} />}
-              <Form>
-                <FormSection title={t("target")}>
-                  <FormGroup
-                    role="radiogroup"
-                    isInline
-                    fieldId="select-consumer"
-                    hasNoPaddingTop
-                    label={t("apply_action_on")}
-                  >
-                    <Radio
-                      name={"consumer-topic-select"}
-                      id={"all-consumer-topic"}
-                      label={t("all_consumer_topics")}
-                      isChecked={selectedConsumerTopic === "allTopics"}
-                      onChange={() => onTopicSelect("allTopics")}
-                    />
-                    <Radio
-                      name={"consumer-topic-select"}
-                      id={"selected-topic"}
-                      label={t("selected_topic")}
-                      isChecked={selectedConsumerTopic === "selectedTopic"}
-                      onChange={() => onTopicSelect("selectedTopic")}
-                    />
-                  </FormGroup>
-                  {selectedConsumerTopic === "selectedTopic" && (
-                    <TypeaheadSelect
-                      value={offset.topicName || ""}
-                      selectItems={topics.map((topic) => topic.topicName)}
-                      onChange={handleTopicChange}
-                      placeholder={"Select topic"}
-                    />
-                  )}
-                  {selectedConsumerTopic === "selectedTopic" && (
-                    <FormGroup label={t("partitions")} isInline>
-                      <Radio
-                        name={"partition-select"}
-                        id={"all-partitions"}
-                        label={t("all_partitions")}
-                        isChecked={selectedPartition === "allPartitions"}
-                        onChange={() => onPartitionSelect("allPartitions")}
-                      />
-                      <Radio
-                        name={"partition-select"}
-                        id={"selected_partition"}
-                        label={t("selected_partition")}
-                        isChecked={selectedPartition === "selectedPartition"}
-                        onChange={() => onPartitionSelect("selectedPartition")}
-                      />
-                    </FormGroup>
-                  )}
-                  {selectedConsumerTopic === "selectedTopic" &&
-                    selectedPartition === "selectedPartition" && (
-                      <TypeaheadSelect
-                        value={offset.partition}
-                        selectItems={partitions}
-                        onChange={handlePartitionChange}
-                        placeholder={"Select partition"}
-                      />
-                    )}
-                </FormSection>
-                <FormSection title={t("offset_details")}>
-                  <FormGroup label={t("new_offset")}>
-                    <OffsetSelect
-                      value={selectedOffset}
-                      onChange={setSelectedOffset}
-                    />
-                  </FormGroup>
-                  {selectedOffset === "custom" && (
-                    <FormGroup
-                      label={t("custom_offset")}
-                      fieldId="custom-offset-input"
-                    >
-                      <TextInput
-                        id="custom-offset-input"
-                        name={t("custom_offset")}
-                        value={offset.offset}
-                        onChange={(_event, value) => handleOffsetChange(value)}
-                        type="number"
-                      />
-                    </FormGroup>
-                  )}
-                  {selectedOffset === "specificDateTime" && (
-                    <>
-                      <FormGroup
-                        role="radiogroup"
-                        isInline
-                        fieldId="select-consumer"
-                        hasNoPaddingTop
-                        label={t("select_date_time")}
-                      >
-                        <Radio
-                          name={"select_time"}
-                          id={"iso_date_format"}
-                          label={t("iso_date_format")}
-                          isChecked={selectDateTimeFormat === "ISO"}
-                          onChange={() => onDateTimeSelect("ISO")}
-                        />
-                        <Radio
-                          name={"select_time"}
-                          id={"unix_date_format"}
-                          label={t("unix_date_format")}
-                          isChecked={selectDateTimeFormat === "Epoch"}
-                          onChange={() => onDateTimeSelect("Epoch")}
-                        />
-                      </FormGroup>
-                      <FormGroup>
-                        <TextInput
-                          id="date-input"
-                          name={"date-input"}
-                          type={
-                            selectDateTimeFormat === "ISO" ? "text" : "number"
-                          }
-                          placeholder={
-                            selectDateTimeFormat === "ISO"
-                              ? "yyyy-MM-dd'T'HH:mm:ss.SSS"
-                              : "specify epoch timestamp"
-                          }
-                          onChange={(_event, value) =>
-                            handleDateTimeChange(value)
-                          }
-                        />
-                      </FormGroup>
-                    </>
-                  )}
-                </FormSection>
-                <ActionGroup>
-                  <Button
-                    variant="primary"
-                    onClick={handleSave}
-                    isDisabled={isLoading || isDryRunDisable}
-                  >
-                    {t("save")}
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    onClick={openDryrun}
-                    isDisabled={isLoading || isDryRunDisable}
-                  >
-                    {t("dry_run")}
-                  </Button>
-                  <Button
-                    variant="link"
-                    onClick={closeResetOffset}
-                    isDisabled={isLoading}
-                  >
-                    {t("cancel")}
-                  </Button>
-                </ActionGroup>
-              </Form>
-            </PanelMainBody>
-          </PanelMain>
-        </Panel>
+        <ResetOffset
+          consumerGroupName={consumerGroupName}
+          topics={topics}
+          partitions={partitions}
+          selectTopic={selectedConsumerTopic}
+          selectPartition={selectedPartition}
+          selectOffset={selectedOffset}
+          error={error}
+          onTopicSelect={onTopicSelect}
+          onPartitionSelect={onPartitionSelect}
+          onOffsetSelect={onOffsetSelect}
+          offset={offset}
+          isLoading={isLoading}
+          selectDateTimeFormat={selectDateTimeFormat}
+          onDateTimeSelect={onDateTimeSelect}
+          handleTopichange={handleTopicChange}
+          handlePartitionChange={handlePartitionChange}
+          handleOffsetChange={handleOffsetChange}
+          closeResetOffset={closeResetOffset}
+          openDryrun={openDryrun}
+          handleDateTimeChange={handleDateTimeChange}
+          handleSave={handleSave}
+        />
       )}
     </Page>
   );
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.stories.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.stories.tsx
similarity index 67%
rename from ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.stories.tsx
rename to ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.stories.tsx
index 1d1840ebc..dcc6f7fb9 100644
--- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.stories.tsx
+++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.stories.tsx
@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { ResetConsumerOffset } from "./ResetConsumerOffset";
+import { ResetOffset } from "./ResetOffset";
 
 export default {
-  component: ResetConsumerOffset,
-} as Meta<typeof ResetConsumerOffset>;
+  component: ResetOffset,
+} as Meta<typeof ResetOffset>;
 
-type Story = StoryObj<typeof ResetConsumerOffset>;
+type Story = StoryObj<typeof ResetOffset>;
 
 export const Default: Story = {
   args: {
@@ -16,6 +16,9 @@ export const Default: Story = {
       { topicId: "234", topicName: "console_datagen_002-c" },
       { topicId: "431", topicName: "console_datagen_002-d" },
     ],
+    selectTopic: "allTopics",
     partitions: [1, 2, 3],
+    selectOffset: "latest",
+    isLoading: false,
   },
 };
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx
new file mode 100644
index 000000000..bf706f68e
--- /dev/null
+++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx
@@ -0,0 +1,243 @@
+import {
+  Divider,
+  Panel,
+  PanelHeader,
+  PanelMain,
+  PanelMainBody,
+  TextContent,
+  Text,
+  TextVariants,
+  Radio,
+  Form,
+  FormGroup,
+  FormSection,
+  TextInput,
+  ActionGroup,
+  Button,
+  Alert,
+} from "@/libs/patternfly/react-core";
+import { useTranslations } from "next-intl";
+import {
+  DateTimeFormatSelection,
+  OffsetValue,
+  TopicSelection,
+  partitionSelection,
+} from "../types";
+import { TypeaheadSelect } from "./TypeaheadSelect";
+import { OffsetSelect } from "./OffsetSelect";
+
+export type Offset = {
+  topicId: string;
+  topicName: string;
+  partition: number;
+  offset: string | number;
+  metadeta?: string;
+};
+
+export function ResetOffset({
+  consumerGroupName,
+  topics,
+  partitions,
+  selectTopic,
+  selectPartition,
+  error,
+  onTopicSelect,
+  selectOffset,
+  onPartitionSelect,
+  offset,
+  isLoading,
+  selectDateTimeFormat,
+  openDryrun,
+  closeResetOffset,
+  handleDateTimeChange,
+  handleOffsetChange,
+  handlePartitionChange,
+  handleTopichange,
+  handleSave,
+  onDateTimeSelect,
+  onOffsetSelect,
+}: {
+  consumerGroupName: string;
+  topics: { topicId: string; topicName: string }[];
+  partitions: number[];
+  selectTopic: TopicSelection;
+  selectPartition: partitionSelection;
+  selectOffset: OffsetValue;
+  error: string | undefined;
+  onTopicSelect: (value: TopicSelection) => void;
+  onPartitionSelect: (value: partitionSelection) => void;
+  offset: Offset;
+  isLoading: boolean;
+  selectDateTimeFormat: DateTimeFormatSelection;
+  handleTopichange: (topicName: string | number) => void;
+  handlePartitionChange: (partition: number | string) => void;
+  handleOffsetChange: (value: string) => void;
+  closeResetOffset: () => void;
+  openDryrun: () => void;
+  handleDateTimeChange: (value: string) => void;
+  handleSave: () => void;
+  onDateTimeSelect: (value: DateTimeFormatSelection) => void;
+  onOffsetSelect: (value: OffsetValue) => void;
+}) {
+  const t = useTranslations("ConsumerGroupsTable");
+  return (
+    <Panel>
+      <PanelHeader>
+        <TextContent>
+          <Text component={TextVariants.h1}>{t("reset_consumer_offset")}</Text>
+        </TextContent>
+        <TextContent>
+          <Text>{t.rich("consumer_name", { consumerGroupName })}</Text>
+        </TextContent>
+      </PanelHeader>
+      <Divider />
+      <PanelMain>
+        <PanelMainBody>
+          {error && <Alert variant="danger" isInline title={error} />}
+          <Form>
+            <FormSection title={t("target")}>
+              <FormGroup
+                role="radiogroup"
+                isInline
+                fieldId="select-consumer"
+                hasNoPaddingTop
+                label={t("apply_action_on")}
+              >
+                <Radio
+                  name={"consumer-topic-select"}
+                  id={"all-consumer-topic"}
+                  label={t("all_consumer_topics")}
+                  isChecked={selectTopic === "allTopics"}
+                  onChange={() => onTopicSelect("allTopics")}
+                />
+                <Radio
+                  name={"consumer-topic-select"}
+                  id={"selected-topic"}
+                  label={t("selected_topic")}
+                  isChecked={selectTopic === "selectedTopic"}
+                  onChange={() => onTopicSelect("selectedTopic")}
+                />
+              </FormGroup>
+              {selectTopic === "selectedTopic" && (
+                <TypeaheadSelect
+                  value={offset.topicName || ""}
+                  selectItems={topics?.map((topic) => topic.topicName)}
+                  onChange={handleTopichange}
+                  placeholder={"Select topic"}
+                />
+              )}
+              {selectTopic === "selectedTopic" && (
+                <FormGroup label={t("partitions")} isInline>
+                  <Radio
+                    name={"partition-select"}
+                    id={"all-partitions"}
+                    label={t("all_partitions")}
+                    isChecked={selectPartition === "allPartitions"}
+                    onChange={() => onPartitionSelect("allPartitions")}
+                  />
+                  <Radio
+                    name={"partition-select"}
+                    id={"selected_partition"}
+                    label={t("selected_partition")}
+                    isChecked={selectPartition === "selectedPartition"}
+                    onChange={() => onPartitionSelect("selectedPartition")}
+                  />
+                </FormGroup>
+              )}
+              {selectTopic === "selectedTopic" &&
+                selectPartition === "selectedPartition" && (
+                  <TypeaheadSelect
+                    value={offset.partition}
+                    selectItems={partitions}
+                    onChange={handlePartitionChange}
+                    placeholder={"Select partition"}
+                  />
+                )}
+            </FormSection>
+            <FormSection title={t("offset_details")}>
+              <FormGroup label={t("new_offset")}>
+                <OffsetSelect value={selectOffset} onChange={onOffsetSelect} />
+              </FormGroup>
+              {selectOffset === "custom" && (
+                <FormGroup
+                  label={t("custom_offset")}
+                  fieldId="custom-offset-input"
+                >
+                  <TextInput
+                    id="custom-offset-input"
+                    name={t("custom_offset")}
+                    value={offset.offset}
+                    onChange={(_event, value) => handleOffsetChange(value)}
+                    type="number"
+                  />
+                </FormGroup>
+              )}
+              {selectOffset === "specificDateTime" && (
+                <>
+                  <FormGroup
+                    role="radiogroup"
+                    isInline
+                    fieldId="select-consumer"
+                    hasNoPaddingTop
+                    label={t("select_date_time")}
+                  >
+                    <Radio
+                      name={"select_time"}
+                      id={"iso_date_format"}
+                      label={t("iso_date_format")}
+                      isChecked={selectDateTimeFormat === "ISO"}
+                      onChange={() => onDateTimeSelect("ISO")}
+                    />
+                    <Radio
+                      name={"select_time"}
+                      id={"unix_date_format"}
+                      label={t("unix_date_format")}
+                      isChecked={selectDateTimeFormat === "Epoch"}
+                      onChange={() => onDateTimeSelect("Epoch")}
+                    />
+                  </FormGroup>
+                  <FormGroup>
+                    <TextInput
+                      id="date-input"
+                      name={"date-input"}
+                      type={selectDateTimeFormat === "ISO" ? "text" : "number"}
+                      placeholder={
+                        selectDateTimeFormat === "ISO"
+                          ? "yyyy-MM-dd'T'HH:mm:ss.SSS"
+                          : "specify epoch timestamp"
+                      }
+                      onChange={(_event, value) => handleDateTimeChange(value)}
+                    />
+                  </FormGroup>
+                </>
+              )}
+            </FormSection>
+            <ActionGroup>
+              <Button
+                variant="primary"
+                onClick={handleSave}
+                isDisabled={isLoading}
+              >
+                {t("save")}
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={openDryrun}
+                isDisabled={isLoading}
+              >
+                {t("dry_run")}
+              </Button>
+              <Button
+                variant="link"
+                onClick={closeResetOffset}
+                isDisabled={isLoading}
+              >
+                {t("cancel")}
+              </Button>
+            </ActionGroup>
+          </Form>
+        </PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+}
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/page.tsx
index e81829e7f..3a3e74eec 100644
--- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/page.tsx
+++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/page.tsx
@@ -20,7 +20,7 @@ export default function ResetOffsetPage({
             consumerGroupName={groupId}
             topics={[]}
             partitions={[]}
-            baseurl={`/kafka/${kafkaId}/consumer-groups/${groupId}`}
+            baseurl={`/kafka/${kafkaId}/consumer-groups`}
           />
         }
       >