From 806aa966b293b127df518e9d1030069fc251f2e7 Mon Sep 17 00:00:00 2001
From: hemahg <hhg@redhat.com>
Date: Tue, 20 Aug 2024 10:51:47 +0530
Subject: [PATCH] consumer group reset offset

Signed-off-by: hemahg <hhg@redhat.com>
---
 .../ConnectedConsumerGroupTable.tsx           |   4 +-
 .../[groupId]/ResetOffsetModal.stories.tsx    |   1 +
 .../[groupId]/ResetOffsetModal.tsx            |   6 +-
 .../reset-offset/ResetConsumerOffset.tsx      | 178 +++++++++---------
 ui/messages/en.json                           |   9 +-
 5 files changed, 102 insertions(+), 96 deletions(-)

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/ConnectedConsumerGroupTable.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/ConnectedConsumerGroupTable.tsx
index 1ea7c61a8..efc33e1d1 100644
--- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/ConnectedConsumerGroupTable.tsx
+++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/ConnectedConsumerGroupTable.tsx
@@ -144,11 +144,11 @@ export function ConnectedConsumerGroupsTable({
         onResetOffset={(row) => {
           startTransition(() => {
             if (row.attributes.state === "STABLE") {
-              router.push(`${baseurl}/${row.id}/reset-offset`);
-            } else if (row.attributes.state === "EMPTY") {
               setResetOffsetModalOpen(true)
               setConsumerGroupMembers(row.attributes.members?.map((member) => member.memberId) || []);
               router.push(`${baseurl}/${row.id}/reset-offset`);
+            } else if (row.attributes.state === "EMPTY") {
+              router.push(`${baseurl}/${row.id}/reset-offset`);
             }
           });
         }}
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.stories.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.stories.tsx
index 866f348fa..60aa663fb 100644
--- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.stories.tsx
+++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.stories.tsx
@@ -9,6 +9,7 @@ type Story = StoryObj<typeof ResetOffsetModal>;
 
 export const Default: Story = {
   args: {
+    isResetOffsetModalOpen: true,
     members: ["console-datagen-consumer-0", "console-datagen-consumer-1"]
   },
 };
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.tsx
index 2c67686ae..9ea286d0f 100644
--- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.tsx
+++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.tsx
@@ -24,7 +24,6 @@ export function ResetOffsetModal({
       titleIconVariant="warning"
       isOpen={isResetOffsetModalOpen}
       variant={ModalVariant.medium}
-      description={t("consumer_group_must_be_empty_description")}
       onClose={onClickClose}
       actions={[
         <Button key="close" variant="primary" onClick={onClickClose}>
@@ -39,7 +38,7 @@ export function ResetOffsetModal({
       ]}>
       <Stack hasGutter>
         <StackItem>
-          <Text>{t("member_list_to_shutdown")}</Text>
+          <Text>{t("member_shutdown_helper_text")}</Text>
         </StackItem>
         <StackItem>
           <List>
@@ -48,6 +47,9 @@ export function ResetOffsetModal({
             ))}
           </List>
         </StackItem>
+        <StackItem>
+          <Text>{t("shutdown_active_members")}</Text>
+        </StackItem>
         <StackItem>
           <ExternalLink
             testId={"learn_to_shutdown_members"}
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 561ed5cd1..93f4c7bcc 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
@@ -62,98 +62,96 @@ export function ResetConsumerOffset({
   };
 
   return (
-    <PageSection>
-      <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>
-            <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={selectedTopic}
-                    selectItems={topics}
-                    onChange={handleTopicChange} placeholder={"Select topic"} />
-                )}
-                <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={selectPartition}
-                    selectItems={partitions}
-                    onChange={handlePartitionChange}
-                    placeholder={"Select partition"}
+    <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>
+          <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={selectedTopic}
+                  selectItems={topics}
+                  onChange={handleTopicChange} placeholder={"Select topic"} />
+              )}
+              <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={selectPartition}
+                  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={customOffsetValue}
+                    onChange={(_event, value) => setcustomOffsetValue(value)}
+                    type="number"
                   />
-                )}
-              </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"
-                  >
+                </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="custom-offset-input"
-                      name={t("custom_offset")}
-                      value={customOffsetValue}
-                      onChange={(_event, value) => setcustomOffsetValue(value)}
-                      type="number"
+                      id="date-input"
+                      name={"date-input"}
+                      type="datetime-local"
                     />
-                  </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="datetime-local"
-                      />
-                    </FormGroup>
-                  </>}
-              </FormSection>
-              <ActionGroup>
-                <Button variant="primary">{t("save")}</Button>
-                <Button variant="secondary">{t("dry_run")}</Button>
-                <Button variant="link">{t("cancel")}</Button>
-              </ActionGroup>
-            </Form>
-          </PanelMainBody>
-        </PanelMain>
-      </Panel >
-    </PageSection>
+                  </FormGroup>
+                </>}
+            </FormSection>
+            <ActionGroup>
+              <Button variant="primary">{t("save")}</Button>
+              <Button variant="secondary">{t("dry_run")}</Button>
+              <Button variant="link">{t("cancel")}</Button>
+            </ActionGroup>
+          </Form>
+        </PanelMainBody>
+      </PanelMain>
+    </Panel >
   )
 }
diff --git a/ui/messages/en.json b/ui/messages/en.json
index 972b5c131..4f9e7868e 100644
--- a/ui/messages/en.json
+++ b/ui/messages/en.json
@@ -388,7 +388,8 @@
     "cancel": "Cancel",
     "reset_offset": "Reset consumer offset",
     "reset_offset_description": "Consumer group must be empty to reset offsets.",
-    "member_list_to_shutdown": "Active members of the group that need to shutdown:",
+    "member_shutdown_helper_text": "To reset the consumer group offsets, all the active members must be shut down.",
+    "shutdown_active_members": "Shut down active members before proceeding",
     "learn_to_shutdown_members": "Learn how to shut down members",
     "reset_consumer_offset": "Reset consumer offset",
     "consumer_name": "Consumer group: <b>{consumerGroupName}</b>",
@@ -412,7 +413,11 @@
     "selected_partition": "A selected partition",
     "select_date_time": "Select Date time",
     "iso_date_format": "ISO 8601 Date-Time Format",
-    "unix_date_format": "Unix Epoch Milliseconds"
+    "unix_date_format": "Unix Epoch Milliseconds",
+    "dry_run_result": "<b>Dry Run results</b>",
+    "download_dryrun_result": "Download Dry Run results",
+    "jump_to_topic": "Jump to topic"
+
   },
   "CreateTopic": {
     "title": "Topic creation wizard",