feat: Add dropdown with actions to run and copy CLI command (#1054)

* feat: Add dropdown with actions to run and copy CLI command Signed-off-by: hemahg <[email protected]> * add tooltip Signed-off-by: hemahg <[email protected]> --------- Signed-off-by: hemahg <[email protected]>
streamshub · Sep 17, 2024 · 9b5e8b8 · 9b5e8b8
1 parent 7a09ccf
commit 9b5e8b8
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 11 deletions.
diff --git a/...thorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/DryrunSelect.stories.tsx b/...thorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/DryrunSelect.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { DryrunSelect } from "./DryrunSelect";
+
+export default {
+  component: DryrunSelect,
+  args: {},
+} as Meta<typeof DryrunSelect>;
+
+type Story = StoryObj<typeof DryrunSelect>;
+
+export const Default: Story = {
+  args: {
+    cliCommand:
+      "$kafka-consumer-groups --bootstrap-server localhost:9092 --group my-consumer-group --reset-offsets --topic mytopic --to-earliest --dry-run",
+  },
+};
diff --git a/...ale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/DryrunSelect.tsx b/...ale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/DryrunSelect.tsx
@@ -0,0 +1,91 @@
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleAction,
+  MenuToggleElement,
+  Tooltip,
+} from "@/libs/patternfly/react-core";
+import { CopyIcon, PlayIcon } from "@patternfly/react-icons";
+import { useTranslations } from "next-intl";
+import React from "react";
+import { useState } from "react";
+
+export function DryrunSelect({
+  openDryrun,
+  cliCommand,
+}: {
+  openDryrun: () => void;
+  cliCommand: string;
+}) {
+  const t = useTranslations("ConsumerGroupsTable");
+
+  const tooltipRef = React.useRef<HTMLButtonElement>(null);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [isCopied, setIsCopied] = useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+  };
+
+  return (
+    <Dropdown
+      isOpen={isOpen}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          variant="secondary"
+          splitButtonOptions={{
+            variant: "action",
+            items: [
+              <MenuToggleAction
+                id="split-button-action-secondary-with-toggle-button"
+                key="split-action-secondary"
+                aria-label={t("dry_run")}
+              >
+                {t("dry_run")}
+              </MenuToggleAction>,
+            ],
+          }}
+          aria-label="dryrun toggle button"
+          onClick={onToggleClick}
+        />
+      )}
+    >
+      <DropdownList>
+        <DropdownItem
+          value={0}
+          key={t("run_and_show_result")}
+          onClick={openDryrun}
+        >
+          <PlayIcon /> {t("run_and_show_result")}
+        </DropdownItem>
+        <DropdownItem
+          value={1}
+          key={t("copy_dry_run_command")}
+          onClick={() => {
+            navigator.clipboard.writeText(cliCommand);
+            setIsCopied(true);
+          }}
+          aria-describedby="tooltip-ref1"
+          ref={tooltipRef}
+        >
+          <CopyIcon /> {t("copy_dry_run_command")}
+          {isCopied && (
+            <Tooltip
+              id="tooltip-ref1"
+              isVisible={isCopied}
+              content={<div>cli command copied</div>}
+              triggerRef={tooltipRef}
+              flipBehavior={"flip"}
+              position="right"
+              onTooltipHidden={() => setIsCopied(false)}
+            />
+          )}
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+}
diff --git a/...uthorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.tsx b/...uthorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useTranslations } from "next-intl";
 import { useState } from "react";
 import {
   DateTimeFormatSelection,
@@ -202,8 +201,6 @@ export function ResetConsumerOffset({
     );
   };
 
-  const isDryRunDisable = !selectedConsumerTopic || !selectedOffset;
-
   const openDryrun = async () => {
     const uniqueOffsets = generateOffsets();
     const res = await getDryrunResult(
@@ -297,6 +294,7 @@ export function ResetConsumerOffset({
           openDryrun={openDryrun}
           handleDateTimeChange={handleDateTimeChange}
           handleSave={handleSave}
+          cliCommand={generateCliCommand()}
         />
       )}
     </Page>

diff --git a/...uthorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.stories.tsx b/...uthorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.stories.tsx
@@ -20,5 +20,7 @@ export const Default: Story = {
     partitions: [1, 2, 3],
     selectOffset: "latest",
     isLoading: false,
+    cliCommand:
+      "$ kafka-consumer-groups --bootstrap-server localhost:9092 --group my-consumer-group --reset-offsets --topic mytopic --to-earliest --dry-run",
   },
 };
diff --git a/...cale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx b/...cale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx
@@ -25,6 +25,7 @@ import {
 } from "../types";
 import { TypeaheadSelect } from "./TypeaheadSelect";
 import { OffsetSelect } from "./OffsetSelect";
+import { DryrunSelect } from "./DryrunSelect";
 
 export type Offset = {
   topicId: string;
@@ -35,6 +36,7 @@ export type Offset = {
 };
 
 export function ResetOffset({
+  cliCommand,
   consumerGroupName,
   topics,
   partitions,
@@ -57,6 +59,7 @@ export function ResetOffset({
   onDateTimeSelect,
   onOffsetSelect,
 }: {
+  cliCommand: string;
   consumerGroupName: string;
   topics: { topicId: string; topicName: string }[];
   partitions: number[];
@@ -220,13 +223,7 @@ export function ResetOffset({
               >
                 {t("save")}
               </Button>
-              <Button
-                variant="secondary"
-                onClick={openDryrun}
-                isDisabled={isLoading}
-              >
-                {t("dry_run")}
-              </Button>
+              <DryrunSelect openDryrun={openDryrun} cliCommand={cliCommand} />
               <Button
                 variant="link"
                 onClick={closeResetOffset}

diff --git a/ui/messages/en.json b/ui/messages/en.json
@@ -423,7 +423,9 @@
     "partition": "Partition",
     "cli_command": "$kafka-consumer-groups --bootstrap-server localhost:9092 --group my-consumer-group --reset-offsets --topic mytopic --to-earliest --dry-run",
     "resetting_spinner": "Resetting consumer group offsets.",
-    "reseting_consumer_group_offsets_text": "Resetting consumer group offsets. This might take a few moments"
+    "reseting_consumer_group_offsets_text": "Resetting consumer group offsets. This might take a few moments",
+    "run_and_show_result": "Run and show result in console",
+    "copy_dry_run_command": "Copy Dry Run command to clipboard"
   },
   "CreateTopic": {
     "title": "Topic creation wizard",