From 4b3733de2e9cc1b8232d519d69cb0265ddc84f9f Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 12 Jun 2023 12:53:29 +0200
Subject: [PATCH] little wrapper around the time selector (#20881)

this makes it easier to use
---
 .../src/clients/advanced/ClusteringPanel.tsx  | 13 ++----------
 .../components/time-selector/TimeSelector.tsx | 21 +++++++++++--------
 .../time-selector/TimeSelectorForm.tsx        | 12 +++++++++++
 3 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 js/apps/admin-ui/src/components/time-selector/TimeSelectorForm.tsx

diff --git a/js/apps/admin-ui/src/clients/advanced/ClusteringPanel.tsx b/js/apps/admin-ui/src/clients/advanced/ClusteringPanel.tsx
index 3fda93b8d7..276509d843 100644
--- a/js/apps/admin-ui/src/clients/advanced/ClusteringPanel.tsx
+++ b/js/apps/admin-ui/src/clients/advanced/ClusteringPanel.tsx
@@ -9,7 +9,6 @@ import {
   ToolbarItem,
 } from "@patternfly/react-core";
 import { useState } from "react";
-import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { HelpItem } from "ui-shared";
 
@@ -22,7 +21,7 @@ import {
   Action,
   KeycloakDataTable,
 } from "../../components/table-toolbar/KeycloakDataTable";
-import { TimeSelector } from "../../components/time-selector/TimeSelector";
+import { TimeSelectorForm } from "../../components/time-selector/TimeSelectorForm";
 import useFormatDate, { FORMAT_DATE_AND_TIME } from "../../utils/useFormatDate";
 import { AddHostDialog } from ".././advanced/AddHostDialog";
 import { AdvancedProps, parseResult } from "../AdvancedTab";
@@ -37,7 +36,6 @@ export const ClusteringPanel = ({
   client: { id, registeredNodes, access },
 }: AdvancedProps) => {
   const { t } = useTranslation("clients");
-  const { control } = useFormContext();
   const { addAlert, addError } = useAlerts();
   const formatDate = useFormatDate();
 
@@ -101,14 +99,7 @@ export const ClusteringPanel = ({
         >
           <Split hasGutter>
             <SplitItem>
-              <Controller
-                name="nodeReRegistrationTimeout"
-                defaultValue=""
-                control={control}
-                render={({ field }) => (
-                  <TimeSelector value={field.value} onChange={field.onChange} />
-                )}
-              />
+              <TimeSelectorForm name="nodeReRegistrationTimeout" />
             </SplitItem>
             <SplitItem>
               <Button variant={ButtonVariant.secondary} onClick={() => save()}>
diff --git a/js/apps/admin-ui/src/components/time-selector/TimeSelector.tsx b/js/apps/admin-ui/src/components/time-selector/TimeSelector.tsx
index 67541910e5..4457311f57 100644
--- a/js/apps/admin-ui/src/components/time-selector/TimeSelector.tsx
+++ b/js/apps/admin-ui/src/components/time-selector/TimeSelector.tsx
@@ -22,15 +22,15 @@ const allTimes: TimeUnit[] = [
   { unit: "day", label: "times.days", multiplier: 86400 },
 ];
 
-export type TimeSelectorProps = TextInputProps &
+export type TimeSelectorProps = Omit<TextInputProps, "onChange"> &
   Pick<DropdownProps, "menuAppendTo"> & {
-    value: number;
+    value?: number;
     units?: Unit[];
-    onChange: (time: number | string) => void;
+    onChange?: (time: number | string) => void;
     className?: string;
   };
 
-export const getTimeUnit = (value: number) =>
+export const getTimeUnit = (value: number | undefined = 0) =>
   allTimes.reduce(
     (v, time) =>
       value % time.multiplier === 0 && v.multiplier < time.multiplier
@@ -73,7 +73,10 @@ export const TimeSelector = ({
     const filteredUnits = units.map(
       (unit) => allTimes.find((time) => time.unit === unit)!
     );
-    if (!filteredUnits.every((u) => u.multiplier === multiplier)) {
+    if (
+      !filteredUnits.every((u) => u.multiplier === multiplier) &&
+      filteredUnits[0] !== allTimes[0]
+    ) {
       filteredUnits.unshift(allTimes[0]);
     }
     return filteredUnits;
@@ -86,20 +89,20 @@ export const TimeSelector = ({
       setMultiplier(multiplier);
       setTimeValue(value / multiplier);
     } else {
-      setTimeValue(value);
+      setTimeValue(value || "");
       setMultiplier(defaultMultiplier);
     }
-  }, [value]);
+  }, [value, defaultMultiplier]);
 
   const updateTimeout = (
     timeout: "" | number,
     times: number | undefined = multiplier
   ) => {
     if (timeout !== "") {
-      onChange(timeout * (times || 1));
+      onChange?.(timeout * (times || 1));
       setTimeValue(timeout);
     } else {
-      onChange("");
+      onChange?.("");
     }
   };
 
diff --git a/js/apps/admin-ui/src/components/time-selector/TimeSelectorForm.tsx b/js/apps/admin-ui/src/components/time-selector/TimeSelectorForm.tsx
new file mode 100644
index 0000000000..35f716eddf
--- /dev/null
+++ b/js/apps/admin-ui/src/components/time-selector/TimeSelectorForm.tsx
@@ -0,0 +1,12 @@
+import { useController } from "react-hook-form";
+import { TimeSelector, TimeSelectorProps } from "./TimeSelector";
+
+type TimeSelectorFormProps = TimeSelectorProps & {
+  name: string;
+};
+
+export const TimeSelectorForm = (props: TimeSelectorFormProps) => {
+  const { field } = useController(props);
+
+  return <TimeSelector {...props} {...field} />;
+};