fix: When selecting “A selected partition” the partition dropdown has…

… a redundant “0” on the right side (#1346) Signed-off-by: hemahg <[email protected]>
streamshub · Jan 9, 2025 · 551d9b9 · 551d9b9
1 parent 65034b2
commit 551d9b9
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 353 deletions.
diff --git a/...thorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/OffsetSelect.stories.tsx b/...thorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/OffsetSelect.stories.tsx
diff --git a/...ale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/OffsetSelect.tsx b/...ale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/OffsetSelect.tsx
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
@@ -24,8 +24,8 @@ import {
   partitionSelection,
 } from "../types";
 import { TypeaheadSelect } from "./TypeaheadSelect";
-import { OffsetSelect } from "./OffsetSelect";
 import { DryrunSelect } from "./DryrunSelect";
+import { SelectComponent } from "./SelectComponent";
 
 export type Offset = {
   topicId: string;
@@ -73,7 +73,7 @@ export function ResetOffset({
   isLoading: boolean;
   selectDateTimeFormat: DateTimeFormatSelection;
   handleTopichange: (topicName: string | number) => void;
-  handlePartitionChange: (partition: number | string) => void;
+  handlePartitionChange: (partition: number) => void;
   handleOffsetChange: (value: string) => void;
   closeResetOffset: () => void;
   openDryrun: () => void;
@@ -163,17 +163,35 @@ export function ResetOffset({
               )}
               {selectTopic === "selectedTopic" &&
                 selectPartition === "selectedPartition" && (
-                  <TypeaheadSelect
+                  <SelectComponent<number>
+                    options={Array.from(new Set(partitions))
+                      .sort((a, b) => a - b)
+                      .map((partition) => ({
+                        value: partition,
+                        label: `${partition}`,
+                      }))}
                     value={offset.partition}
-                    selectItems={partitions}
-                    onChange={handlePartitionChange}
                     placeholder={"Select partition"}
+                    onChange={handlePartitionChange}
                   />
                 )}
             </FormSection>
             <FormSection title={t("offset_details")}>
               <FormGroup label={t("new_offset")}>
-                <OffsetSelect value={selectOffset} onChange={onOffsetSelect} />
+                <SelectComponent<OffsetValue>
+                  options={[
+                    { value: "custom", label: t("offset.custom") },
+                    { value: "latest", label: t("offset.latest") },
+                    { value: "earliest", label: t("offset.earliest") },
+                    {
+                      value: "specificDateTime",
+                      label: t("offset.specific_date_time"),
+                    },
+                  ]}
+                  value={selectOffset}
+                  onChange={onOffsetSelect}
+                  placeholder="Select an offset"
+                />
               </FormGroup>
               {selectOffset === "custom" && (
                 <FormGroup