refactor

Author: lucasgoral

src/components/Dialogs/CreateProjectDialog.cy.tsx

@@ -22,7 +22,7 @@ export const CreateProjectWorkspaceDialogWrapper: React.FC<{
     setValue,
     formState: { errors },
     watch,
-    getValues,
+    watch,
   } = useForm<CreateDialogProps>({
     resolver: zodResolver(validationSchemaProjectWorkspace),
     defaultValues: {
@@ -47,7 +47,7 @@ export const CreateProjectWorkspaceDialogWrapper: React.FC<{
   };
   return (
     <CreateProjectWorkspaceDialog
-      getValues={getValues}
+      watch={watch}
       type={'workspace'}
       isOpen={isOpen}
       setIsOpen={setIsOpen}

src/components/Dialogs/CreateProjectDialogContainer.tsx

@@ -23,13 +23,12 @@ export function CreateProjectDialogContainer({
   setIsOpen: (isOpen: boolean) => void;
 }) {
   const {
-    getValues,
+    watch,
     register,
     handleSubmit,
     resetField,
     setValue,
     formState: { errors },
-    watch,
   } = useForm<CreateDialogProps>({
     resolver: zodResolver(validationSchemaProjectWorkspace),
     defaultValues: {
@@ -98,7 +97,7 @@ export function CreateProjectDialogContainer({
 
   return (
     <CreateProjectWorkspaceDialog
-      getValues={getValues}
+      watch={watch}
       isOpen={isOpen}
       setIsOpen={setIsOpen}
       errorDialogRef={errorDialogRef}

src/components/Dialogs/CreateProjectWorkspaceDialog.tsx

@@ -36,7 +36,7 @@ export interface CreateProjectWorkspaceDialogProps {
   setValue: UseFormSetValue<CreateDialogProps>;
   projectName?: string;
   type: 'workspace' | 'project';
-  getValues: UseFormGetValues<CreateDialogProps>;
+  watch: UseFormGetValues<CreateDialogProps>;
 }
 
 export function CreateProjectWorkspaceDialog({
@@ -51,7 +51,7 @@ export function CreateProjectWorkspaceDialog({
   setValue,
   projectName,
   type,
-  getValues,
+  watch,
 }: CreateProjectWorkspaceDialogProps) {
   const { t } = useTranslation();
   const [isKubectlDialogOpen, setIsKubectlDialogOpen] = useState(false);
@@ -86,7 +86,7 @@ export function CreateProjectWorkspaceDialog({
         onClose={() => setIsOpen(false)}
       >
         <MetadataForm
-          getValues={getValues}
+          watch={watch}
           register={register}
           errors={errors}
           setValue={setValue}

src/components/Dialogs/CreateWorkspaceDialogContainer.tsx

@@ -44,7 +44,6 @@ export function CreateWorkspaceDialogContainer({
     setValue,
     formState: { errors },
     watch,
-    getValues,
   } = useForm<CreateDialogProps>({
     resolver: zodResolver(validationSchemaProjectWorkspace),
     defaultValues: {
@@ -112,7 +111,7 @@ export function CreateWorkspaceDialogContainer({
 
   return (
     <CreateProjectWorkspaceDialog
-      getValues={getValues}
+      watch={watch}
       isOpen={isOpen}
       setIsOpen={setIsOpen}
       errorDialogRef={errorDialogRef}

src/components/Dialogs/MetadataForm.tsx

@@ -1,4 +1,4 @@
-import { FieldErrors, UseFormGetValues, UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { FieldErrors, UseFormGetValues, UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form';
 import { CreateDialogProps } from './CreateWorkspaceDialogContainer.tsx';
 import { useTranslation } from 'react-i18next';
 import { Form, FormGroup, Input, Label, Option, Select, SelectDomRef, Ui5CustomEvent } from '@ui5/webcomponents-react';
@@ -11,7 +11,7 @@ export interface MetadataFormProps {
   setValue: UseFormSetValue<CreateDialogProps>;
   sideFormContent?: React.ReactNode;
   requireChargingTarget?: boolean;
-  getValues: UseFormGetValues<CreateDialogProps>;
+  watch: UseFormWatch<CreateDialogProps>;
 }
 
 interface SelectOption {
@@ -20,7 +20,7 @@ interface SelectOption {
 }
 
 export function MetadataForm({
-  getValues,
+  watch,
   register,
   errors,
   setValue,
@@ -64,7 +64,7 @@ export function MetadataForm({
           ))}
         </Select>
 
-        <Label for={'chargingTarget'} required={!!getValues?.('chargingTargetType')}>
+        <Label for={'chargingTarget'} required={!!watch?.('chargingTargetType')}>
           {t('CreateProjectWorkspaceDialog.chargingTargetLabel')}
         </Label>
         <Input
@@ -73,7 +73,7 @@ export function MetadataForm({
           className={styles.input}
           valueState={errors.chargingTarget ? 'Negative' : 'None'}
           valueStateMessage={<span>{errors.chargingTarget?.message}</span>}
-          disabled={!getValues?.('chargingTargetType')}
+          disabled={!watch?.('chargingTargetType')}
         />
       </FormGroup>
 

src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx

@@ -69,9 +69,8 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
     resetField,
     setValue,
     reset,
-    getValues,
-    formState: { errors, isValid },
     watch,
+    formState: { errors, isValid },
   } = useForm<CreateDialogProps>({
     resolver: zodResolver(validationSchemaCreateManagedControlPlane),
     defaultValues: {
@@ -170,15 +169,15 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
         setSelectedStep('summarize');
         break;
       case 'summarize':
-        handleCreateManagedControlPlane(getValues());
+        handleCreateManagedControlPlane(watch());
         break;
       case 'success':
         resetFormAndClose();
         break;
       default:
         break;
     }
-  }, [selectedStep, handleSubmit, setSelectedStep, handleCreateManagedControlPlane, getValues, resetFormAndClose]);
+  }, [selectedStep, handleSubmit, setSelectedStep, handleCreateManagedControlPlane, watch, resetFormAndClose]);
 
   const setMembers = useCallback(
     (members: Member[]) => {
@@ -265,7 +264,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
           selected={selectedStep === 'metadata'}
           data-step="metadata"
         >
-          <MetadataForm getValues={getValues} setValue={setValue} register={register} errors={errors} />
+          <MetadataForm watch={watch} setValue={setValue} register={register} errors={errors} />
         </WizardStep>
         <WizardStep
           icon="user-edit"
@@ -302,7 +301,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
           data-step="summarize"
         >
           <SummarizeStep
-            getValues={getValues}
+            watch={watch}
             workspaceName={workspaceName}
             projectName={projectName}
             componentsList={componentsList}

src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx

@@ -12,73 +12,51 @@ import { UseFormGetValues } from 'react-hook-form';
 import { CreateDialogProps } from '../../Dialogs/CreateWorkspaceDialogContainer.tsx';
 
 interface SummarizeStepProps {
-  getValues: UseFormGetValues<CreateDialogProps>;
+  watch: UseFormGetValues<CreateDialogProps>;
   projectName: string;
   workspaceName: string;
   componentsList?: ComponentsListItem[];
 }
 
-export const SummarizeStep: React.FC<SummarizeStepProps> = ({
-  getValues,
-  projectName,
-  workspaceName,
-  componentsList,
-}) => {
+export const SummarizeStep: React.FC<SummarizeStepProps> = ({ watch, projectName, workspaceName, componentsList }) => {
   const { t } = useTranslation();
   return (
     <>
       <Title>{t('common.summarize')}</Title>
       <Grid defaultSpan="XL6 L6 M6 S6">
         <div>
           <List headerText={t('common.metadata')}>
-            <ListItemStandard
-              text={t('common.name')}
-              additionalText={getValues('name')}
-            />
-            <ListItemStandard
-              text={t('common.displayName')}
-              additionalText={getValues('displayName')}
-            />
+            <ListItemStandard text={t('common.name')} additionalText={watch('name')} />
+            <ListItemStandard text={t('common.displayName')} additionalText={watch('displayName')} />
             <ListItemStandard
               text={t('CreateProjectWorkspaceDialog.chargingTargetLabel')}
-              additionalText={getValues('chargingTarget')}
-            />
-            <ListItemStandard
-              text={t('common.namespace')}
-              additionalText={`${projectName}--ws-${workspaceName}`}
+              additionalText={watch('chargingTarget')}
             />
+            <ListItemStandard text={t('common.namespace')} additionalText={`${projectName}--ws-${workspaceName}`} />
           </List>
           <br />
           <List headerText={t('common.members')}>
-            {getValues('members').map((member) => (
-              <ListItemStandard
-                key={member.name}
-                text={member.name}
-                additionalText={member.roles[0]}
-              />
+            {watch('members').map((member) => (
+              <ListItemStandard key={member.name} text={member.name} additionalText={member.roles[0]} />
             ))}
           </List>
           <br />
           <List headerText={t('common.components')}>
             {getSelectedComponents(componentsList ?? []).map((component) => (
-              <ListItemStandard
-                key={component.name}
-                text={component.name}
-                additionalText={component.selectedVersion}
-              />
+              <ListItemStandard key={component.name} text={component.name} additionalText={component.selectedVersion} />
             ))}
           </List>
         </div>
         <div>
           <YamlViewer
             yamlString={stringify(
               CreateManagedControlPlane(
-                getValues('name'),
+                watch('name'),
                 `${projectName}--ws-${workspaceName}`,
                 {
-                  displayName: getValues('displayName'),
-                  chargingTarget: getValues('chargingTarget'),
-                  members: getValues('members'),
+                  displayName: watch('displayName'),
+                  chargingTarget: watch('chargingTarget'),
+                  members: watch('members'),
                   componentsList: componentsList ?? [],
                 },
                 idpPrefix,