Minor refactor

Signed-off-by: hemahg <[email protected]>

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: {},
+};

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>
+  );
+}

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,15 +8,16 @@ import {
   TopicSelection,
   partitionSelection,
 } from "../types";
-import { TypeaheadSelect } from "./TypeaheadSelect";
-import { OffsetSelect } from "./OffsetSelect";
 import { useRouter } from "@/navigation";
 import {
   getDryrunResult,
   updateConsumerGroup,
 } 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>
   );

ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.stories.tsx → 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,
   },
 };