Skip to content

Commit 19c0aae

Browse files
mathieumousniermathieumousnier
committed
refactor(okms): use useController for generic form fields
ref: #MANAGER-18318 Signed-off-by: Mathieu Mousnier <[email protected]>
1 parent d91e235 commit 19c0aae

File tree

3 files changed

+85
-97
lines changed

3 files changed

+85
-97
lines changed

‎packages/manager/apps/okms/src/modules/secret-manager/components/form/SecretCasRequiredFormField.component.tsx‎

Lines changed: 41 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Controller, UseControllerProps } from 'react-hook-form';
2+
import { useController, UseControllerProps } from 'react-hook-form';
33
import {
44
OdsFormField,
55
OdsRadio,
@@ -28,54 +28,50 @@ export const SecretCasRequiredFormField = <T extends FormFieldInput>({
2828
isCasRequiredSetOnOkms,
2929
}: SecretCasRequiredFormFieldProps<T>) => {
3030
const { t } = useTranslation(['secret-manager', NAMESPACES.STATUS]);
31+
const { field, fieldState } = useController({ name, control });
32+
3133
return (
32-
<Controller
33-
name={name}
34-
control={control}
35-
render={({ field, fieldState }) => (
36-
<OdsFormField error={fieldState.error?.message}>
37-
<label slot="label" className="flex items-center gap-2 relative mb-1">
38-
<span>{t('cas_with_description')}</span>
39-
<HelpIconWithTooltip label={t('cas_with_description_tooltip')} />
34+
<OdsFormField error={fieldState.error?.message}>
35+
<label slot="label" className="flex items-center gap-2 relative mb-1">
36+
<span>{t('cas_with_description')}</span>
37+
<HelpIconWithTooltip label={t('cas_with_description_tooltip')} />
38+
</label>
39+
<div className="flex gap-4">
40+
<div className="flex items-center gap-2">
41+
<OdsRadio
42+
inputId={`${field.name}-active`}
43+
name={field.name}
44+
value="active"
45+
isChecked={field.value === 'active'}
46+
onOdsChange={field.onChange}
47+
data-testid={SECRET_FORM_FIELD_TEST_IDS.CAS_REQUIRED_ACTIVE}
48+
/>
49+
<label htmlFor={`${field.name}-active`}>
50+
<OdsText preset="paragraph">{t('activated')}</OdsText>
4051
</label>
41-
<div className="flex gap-4">
42-
<div className="flex items-center gap-2">
43-
<OdsRadio
44-
inputId={`${field.name}-active`}
45-
name={field.name}
46-
value="active"
47-
isChecked={field.value === 'active'}
48-
onOdsChange={field.onChange}
49-
data-testid={SECRET_FORM_FIELD_TEST_IDS.CAS_REQUIRED_ACTIVE}
50-
/>
51-
<label htmlFor={`${field.name}-active`}>
52-
<OdsText preset="paragraph">{t('activated')}</OdsText>
53-
</label>
54-
</div>
55-
<div className="flex items-center gap-2">
56-
<OdsRadio
57-
inputId={`${field.name}-inactive`}
58-
name={field.name}
59-
value="inactive"
60-
isChecked={field.value === 'inactive'}
61-
onOdsChange={field.onChange}
62-
data-testid={SECRET_FORM_FIELD_TEST_IDS.CAS_REQUIRED_INACTIVE}
63-
/>
64-
<label htmlFor={`${field.name}-inactive`}>
65-
<OdsText preset="paragraph">
66-
{t('disabled', { ns: NAMESPACES.STATUS })}
67-
</OdsText>
68-
</label>
69-
</div>
70-
</div>
71-
{isCasRequiredSetOnOkms && (
72-
<OdsText slot="helper" preset="caption">
73-
{t('form_helper_cas_required_okms')}
52+
</div>
53+
<div className="flex items-center gap-2">
54+
<OdsRadio
55+
inputId={`${field.name}-inactive`}
56+
name={field.name}
57+
value="inactive"
58+
isChecked={field.value === 'inactive'}
59+
onOdsChange={field.onChange}
60+
data-testid={SECRET_FORM_FIELD_TEST_IDS.CAS_REQUIRED_INACTIVE}
61+
/>
62+
<label htmlFor={`${field.name}-inactive`}>
63+
<OdsText preset="paragraph">
64+
{t('disabled', { ns: NAMESPACES.STATUS })}
7465
</OdsText>
75-
)}
76-
</OdsFormField>
66+
</label>
67+
</div>
68+
</div>
69+
{isCasRequiredSetOnOkms && (
70+
<OdsText slot="helper" preset="caption">
71+
{t('form_helper_cas_required_okms')}
72+
</OdsText>
7773
)}
78-
/>
74+
</OdsFormField>
7975
);
8076
};
8177

‎packages/manager/apps/okms/src/modules/secret-manager/components/form/SecretDeactivateVersionAfterFormField.component.tsx‎

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Controller, UseControllerProps } from 'react-hook-form';
2+
import { useController, UseControllerProps } from 'react-hook-form';
33
import {
44
OdsText,
55
OdsFormField,
@@ -20,31 +20,27 @@ export const SecretDeactivateVersionAfterFormField = <
2020
control,
2121
}: UseControllerProps<T>) => {
2222
const { t } = useTranslation('secret-manager');
23+
const { field, fieldState } = useController({ name, control });
24+
2325
return (
24-
<Controller
25-
name={name}
26-
control={control}
27-
render={({ field, fieldState }) => (
28-
<OdsFormField error={fieldState.error?.message}>
29-
<label slot="label" className="flex items-center gap-2 relative mb-1">
30-
{t('deactivate_version_after')}
31-
<HelpIconWithTooltip
32-
label={t('form_tooltip_deactivate_version_after')}
33-
/>
34-
</label>
35-
<OdsInput
36-
id={field.name}
37-
name={field.name}
38-
value={field.value.toString()}
39-
onOdsBlur={field.onBlur}
40-
onOdsChange={field.onChange}
41-
data-testid={SECRET_FORM_FIELD_TEST_IDS.DEACTIVATE_VERSION_AFTER}
42-
/>
43-
<OdsText slot="helper" preset="caption">
44-
{t('form_helper_deactivate_version_after')}
45-
</OdsText>
46-
</OdsFormField>
47-
)}
48-
/>
26+
<OdsFormField error={fieldState.error?.message}>
27+
<label slot="label" className="flex items-center gap-2 relative mb-1">
28+
{t('deactivate_version_after')}
29+
<HelpIconWithTooltip
30+
label={t('form_tooltip_deactivate_version_after')}
31+
/>
32+
</label>
33+
<OdsInput
34+
id={field.name}
35+
name={field.name}
36+
value={field.value.toString()}
37+
onOdsBlur={field.onBlur}
38+
onOdsChange={field.onChange}
39+
data-testid={SECRET_FORM_FIELD_TEST_IDS.DEACTIVATE_VERSION_AFTER}
40+
/>
41+
<OdsText slot="helper" preset="caption">
42+
{t('form_helper_deactivate_version_after')}
43+
</OdsText>
44+
</OdsFormField>
4945
);
5046
};

‎packages/manager/apps/okms/src/modules/secret-manager/components/form/SecretMaxVersionsFormField.component.tsx‎

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Controller, UseControllerProps } from 'react-hook-form';
2+
import { useController, UseControllerProps } from 'react-hook-form';
33
import {
44
OdsText,
55
OdsFormField,
@@ -28,31 +28,27 @@ export const SecretMaxVersionsFormField = <T extends FormFieldInput>({
2828
defaultMaxVersions,
2929
}: SecretMaxVersionsFormFieldProps<T>) => {
3030
const { t } = useTranslation('secret-manager');
31+
const { field, fieldState } = useController({ name, control });
32+
3133
return (
32-
<Controller
33-
name={name}
34-
control={control}
35-
render={({ field, fieldState }) => (
36-
<OdsFormField error={fieldState.error?.message}>
37-
<label htmlFor={field.name} slot="label" className="mb-1">
38-
{t('maximum_number_of_versions')}
39-
</label>
40-
<OdsQuantity
41-
id={field.name}
42-
name={field.name}
43-
value={Number(field.value)}
44-
onOdsBlur={field.onBlur}
45-
onOdsChange={field.onChange}
46-
data-testid={SECRET_FORM_FIELD_TEST_IDS.MAX_VERSIONS}
47-
min={MAX_VERSIONS_MIN_VALUE}
48-
max={MAX_VERSIONS_MAX_VALUE}
49-
className="justify-start"
50-
/>
51-
<OdsText slot="helper" preset="caption">
52-
{t('form_helper_max_versions', { default: defaultMaxVersions })}
53-
</OdsText>
54-
</OdsFormField>
55-
)}
56-
/>
34+
<OdsFormField error={fieldState.error?.message}>
35+
<label htmlFor={field.name} slot="label" className="mb-1">
36+
{t('maximum_number_of_versions')}
37+
</label>
38+
<OdsQuantity
39+
id={field.name}
40+
name={field.name}
41+
value={Number(field.value)}
42+
onOdsBlur={field.onBlur}
43+
onOdsChange={field.onChange}
44+
data-testid={SECRET_FORM_FIELD_TEST_IDS.MAX_VERSIONS}
45+
min={MAX_VERSIONS_MIN_VALUE}
46+
max={MAX_VERSIONS_MAX_VALUE}
47+
className="justify-start"
48+
/>
49+
<OdsText slot="helper" preset="caption">
50+
{t('form_helper_max_versions', { default: defaultMaxVersions })}
51+
</OdsText>
52+
</OdsFormField>
5753
);
5854
};

0 commit comments

Comments
 (0)