changed to use ui-shared (#27848)

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/admin-ui/src/components/time-selector/TimeSelector.tsx

@@ -22,7 +22,10 @@ const allTimes: TimeUnit[] = [
   { unit: "day", label: "times.days", multiplier: 86400 },
 ];
 
-export type TimeSelectorProps = Omit<TextInputProps, "onChange"> &
+export type TimeSelectorProps = Omit<
+  TextInputProps,
+  "onChange" | "defaultValue"
+> &
   Pick<DropdownProps, "menuAppendTo"> & {
     value?: number;
     units?: Unit[];

js/apps/admin-ui/src/realm-settings/event-config/EventConfigForm.tsx

@@ -5,12 +5,12 @@ import {
   FormGroup,
   Switch,
 } from "@patternfly/react-core";
-import { Controller, UseFormReturn } from "react-hook-form";
+import { Controller, FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
-import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { HelpItem } from "ui-shared";
-import { TimeSelector } from "../../components/time-selector/TimeSelector";
+import { DefaultSwitchControl } from "../../components/SwitchControl";
+import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
+import { TimeSelectorControl } from "../../components/time-selector/TimeSelectorControl";
 
 export type EventsType = "admin" | "user";
 
@@ -45,7 +45,7 @@ export const EventConfigForm = ({
   });
 
   return (
-    <>
+    <FormProvider {...form}>
       <DisableConfirm />
       <FormGroup
         hasNoPaddingTop
@@ -84,60 +84,24 @@ export const EventConfigForm = ({
       {eventsEnabled && (
         <>
           {type === "admin" && (
-            <FormGroup
-              hasNoPaddingTop
+            <DefaultSwitchControl
+              name="adminEventsDetailsEnabled"
               label={t("includeRepresentation")}
-              fieldId="includeRepresentation"
-              labelIcon={
-                <HelpItem
-                  helpText={t("includeRepresentationHelp")}
-                  fieldLabelId="includeRepresentation"
-                />
-              }
-            >
-              <Controller
-                name="adminEventsDetailsEnabled"
-                defaultValue={false}
-                control={control}
-                render={({ field }) => (
-                  <Switch
-                    data-testid="includeRepresentation"
-                    id="includeRepresentation"
-                    label={t("on")}
-                    labelOff={t("off")}
-                    isChecked={field.value}
-                    onChange={field.onChange}
-                    aria-label={t("includeRepresentation")}
-                  />
-                )}
-              />
-            </FormGroup>
-          )}
-          <FormGroup
-            label={t("expiration")}
-            fieldId="expiration"
-            labelIcon={
-              <HelpItem
-                helpText={t("expirationHelp")}
-                fieldLabelId="expiration"
-              />
-            }
-          >
-            <Controller
-              name={
-                type === "user" ? "eventsExpiration" : "adminEventsExpiration"
-              }
-              defaultValue=""
-              control={control}
-              render={({ field }) => (
-                <TimeSelector
-                  value={field.value}
-                  onChange={field.onChange}
-                  units={["minute", "hour", "day"]}
-                />
-              )}
+              labelIcon={t("includeRepresentationHelp")}
             />
-          </FormGroup>
+          )}
+          <TimeSelectorControl
+            name={
+              type === "user" ? "eventsExpiration" : "adminEventsExpiration"
+            }
+            label={t("expiration")}
+            labelIcon={t("expirationHelp")}
+            defaultValue=""
+            units={["minute", "hour", "day"]}
+            controller={{
+              defaultValue: "",
+            }}
+          />
         </>
       )}
       <ActionGroup>
@@ -174,6 +138,6 @@ export const EventConfigForm = ({
           {type === "user" ? t("clearUserEvents") : t("clearAdminEvents")}
         </Button>
       </FormGroup>
-    </>
+    </FormProvider>
   );
 };

js/apps/admin-ui/src/realm-settings/event-config/EventListenersForm.tsx

@@ -1,16 +1,7 @@
-import {
-  ActionGroup,
-  Button,
-  FormGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
-} from "@patternfly/react-core";
-import { useState } from "react";
-import { Controller, UseFormReturn } from "react-hook-form";
+import { ActionGroup, Button, SelectVariant } from "@patternfly/react-core";
+import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
-import { HelpItem } from "ui-shared";
+import { SelectControl } from "ui-shared";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
 
 type EventListenersFormProps = {
@@ -24,66 +15,31 @@ export const EventListenersForm = ({
 }: EventListenersFormProps) => {
   const { t } = useTranslation();
   const {
-    control,
     formState: { isDirty },
   } = form;
 
-  const [selectEventListenerOpen, setSelectEventListenerOpen] = useState(false);
   const serverInfo = useServerInfo();
   const eventListeners = serverInfo.providers?.eventsListener.providers;
 
   return (
-    <>
-      <FormGroup
-        hasNoPaddingTop
+    <FormProvider {...form}>
+      <SelectControl
+        name="eventsListeners"
         label={t("eventListeners")}
-        fieldId={"kc-eventListeners"}
-        labelIcon={
-          <HelpItem
-            helpText={t("eventListenersHelpTextHelp")}
-            fieldLabelId="eventListeners"
-          />
-        }
-      >
-        <Controller
-          name="eventsListeners"
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              name="eventsListeners"
-              className="kc_eventListeners_select"
-              data-testid="eventListeners-select"
-              chipGroupProps={{
-                numChips: 3,
-                expandedText: t("hide"),
-                collapsedText: t("showRemaining"),
-              }}
-              variant={SelectVariant.typeaheadMulti}
-              typeAheadAriaLabel="Select"
-              onToggle={(isOpen) => setSelectEventListenerOpen(isOpen)}
-              selections={field.value}
-              onSelect={(_, selectedValue) => {
-                const option = selectedValue.toString();
-                const changedValue = field.value.includes(option)
-                  ? field.value.filter((item: string) => item !== option)
-                  : [...field.value, option];
-                field.onChange(changedValue);
-              }}
-              onClear={(operation) => {
-                operation.stopPropagation();
-                field.onChange([]);
-              }}
-              isOpen={selectEventListenerOpen}
-              aria-label={"selectEventsListeners"}
-            >
-              {Object.keys(eventListeners!).map((event) => (
-                <SelectOption key={event} value={event} />
-              ))}
-            </Select>
-          )}
-        />
-      </FormGroup>
+        labelIcon={t("eventListenersHelpTextHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        className="kc_eventListeners_select"
+        chipGroupProps={{
+          numChips: 3,
+          expandedText: t("hide"),
+          collapsedText: t("showRemaining"),
+        }}
+        variant={SelectVariant.typeaheadMulti}
+        options={Object.keys(eventListeners!)}
+        typeAheadAriaLabel="Select"
+      />
       <ActionGroup>
         <Button
           variant="primary"
@@ -101,6 +57,6 @@ export const EventListenersForm = ({
           {t("revert")}
         </Button>
       </ActionGroup>
-    </>
+    </FormProvider>
   );
 };