changed to use ui-shared (#27996)

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

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/tabs/InitialAccessTokenTab.ts

@@ -6,10 +6,9 @@ export default class InitialAccessTokenTab extends CommonPage {
   #emptyAction = "no-initial-access-tokens-empty-action";
 
   #expirationNumberInput = "expiration";
-  #expirationInput = 'input[name="count"]';
   #expirationText = "#expiration-helper";
-  #countInput = '[data-testid="count"] input';
-  #countPlusBtn = '[data-testid="count"] [aria-label="Plus"]';
+  #countInput = "#count input";
+  #countPlusBtn = '#count [aria-label="Plus"]';
   #saveBtn = "save";
 
   goToInitialAccessTokenTab() {
@@ -42,7 +41,8 @@ export default class InitialAccessTokenTab extends CommonPage {
   }
 
   fillNewTokenData(expiration: number, count: number) {
-    cy.findByTestId(this.#expirationNumberInput).clear().type(`${expiration}`);
+    cy.findByTestId(this.#expirationNumberInput).clear();
+    cy.findByTestId(this.#expirationNumberInput).type(`${expiration}`);
     cy.get(this.#countInput).clear();
 
     for (let i = 0; i < count; i++) {
@@ -66,7 +66,7 @@ export default class InitialAccessTokenTab extends CommonPage {
   }
 
   checkCountValue(value: number) {
-    cy.get(this.#expirationInput).should("have.value", value);
+    cy.get(this.#countInput).should("have.value", value);
     return this;
   }
 

js/apps/admin-ui/src/clients/initial-access/CreateInitialAccessToken.tsx

@@ -3,32 +3,29 @@ import {
   ActionGroup,
   AlertVariant,
   Button,
-  FormGroup,
-  NumberInput,
   PageSection,
 } from "@patternfly/react-core";
 import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
-import { FormAccess } from "../../components/form/FormAccess";
-import { ViewHeader } from "../../components/view-header/ViewHeader";
-import { HelpItem } from "ui-shared";
-import { TimeSelector } from "../../components/time-selector/TimeSelector";
 import { Link, useNavigate } from "react-router-dom";
+import { NumberControl } from "ui-shared";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
+import { FormAccess } from "../../components/form/FormAccess";
+import { TimeSelectorControl } from "../../components/time-selector/TimeSelectorControl";
+import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { toClients } from "../routes/Clients";
 import { AccessTokenDialog } from "./AccessTokenDialog";
 
 export default function CreateInitialAccessToken() {
   const { t } = useTranslation();
+  const form = useForm({ mode: "onChange" });
   const {
     handleSubmit,
-    control,
-    formState: { isValid, errors },
-  } = useForm({ mode: "onChange" });
+    formState: { isValid },
+  } = form;
 
   const { realm } = useRealm();
   const { addAlert, addError } = useAlerts();
@@ -49,7 +46,7 @@ export default function CreateInitialAccessToken() {
   };
 
   return (
-    <>
+    <FormProvider {...form}>
       {token && (
         <AccessTokenDialog
           token={token}
@@ -67,64 +64,29 @@ export default function CreateInitialAccessToken() {
           role="create-client"
           onSubmit={handleSubmit(save)}
         >
-          <FormGroup
+          <TimeSelectorControl
+            name="expiration"
             label={t("expiration")}
-            fieldId="expiration"
-            labelIcon={
-              <HelpItem
-                helpText={t("tokenExpirationHelp")}
-                fieldLabelId="expiration"
-              />
-            }
-            helperTextInvalid={t("expirationValueNotValid")}
-            validated={errors.expiration ? "error" : "default"}
-          >
-            <Controller
-              name="expiration"
-              defaultValue={86400}
-              control={control}
-              rules={{ min: 1 }}
-              render={({ field }) => (
-                <TimeSelector
-                  data-testid="expiration"
-                  value={field.value}
-                  onChange={field.onChange}
-                  min={1}
-                  validated={errors.expiration ? "error" : "default"}
-                />
-              )}
-            />
-          </FormGroup>
-          <FormGroup
+            labelIcon={t("tokenExpirationHelp")}
+            controller={{
+              defaultValue: 86400,
+              rules: {
+                min: {
+                  value: 1,
+                  message: t("expirationValueNotValid"),
+                },
+              },
+            }}
+          />
+          <NumberControl
+            name="count"
             label={t("count")}
-            fieldId="count"
-            labelIcon={
-              <HelpItem helpText={t("countHelp")} fieldLabelId="count" />
-            }
-          >
-            <Controller
-              name="count"
-              defaultValue={1}
-              control={control}
-              render={({ field }) => (
-                <NumberInput
-                  data-testid="count"
-                  inputName="count"
-                  inputAriaLabel={t("count")}
-                  min={1}
-                  value={field.value}
-                  onPlus={() => field.onChange(field.value + 1)}
-                  onMinus={() => field.onChange(field.value - 1)}
-                  onChange={(event) => {
-                    const value = Number(
-                      (event.target as HTMLInputElement).value,
-                    );
-                    field.onChange(value < 1 ? 1 : value);
-                  }}
-                />
-              )}
-            />
-          </FormGroup>
+            labelIcon={t("countHelp")}
+            controller={{
+              defaultValue: 1,
+            }}
+            min={1}
+          />
           <ActionGroup>
             <Button
               variant="primary"
@@ -149,6 +111,6 @@ export default function CreateInitialAccessToken() {
           </ActionGroup>
         </FormAccess>
       </PageSection>
-    </>
+    </FormProvider>
   );
 }