refactor(forms): simplify form handling and button behavior (#10441)
Removed redundant handleSave and handleSubmit props in domain settings. Integrated form submission logic directly into form components, ensuring consistent behavior and reducing complexity. Updated button components to explicitly support the "type" attribute for improved accessibility and functionality. --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Antoine Moreaux
@ -23,7 +23,7 @@ export const SettingsSecurityApprovedAccessDomain = () => {
|
||||
|
||||
const [createApprovedAccessDomain] = useCreateApprovedAccessDomainMutation();
|
||||
|
||||
const formConfig = useForm<{ domain: string; email: string }>({
|
||||
const form = useForm<{ domain: string; email: string }>({
|
||||
mode: 'onSubmit',
|
||||
resolver: zodResolver(
|
||||
z
|
||||
@ -49,21 +49,18 @@ export const SettingsSecurityApprovedAccessDomain = () => {
|
||||
},
|
||||
});
|
||||
|
||||
const domain = formConfig.watch('domain');
|
||||
const domain = form.watch('domain');
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
if (!formConfig.formState.isValid) {
|
||||
if (!form.formState.isValid || !form.formState.isSubmitting) {
|
||||
return;
|
||||
}
|
||||
createApprovedAccessDomain({
|
||||
variables: {
|
||||
input: {
|
||||
domain: formConfig.getValues('domain'),
|
||||
email:
|
||||
formConfig.getValues('email') +
|
||||
'@' +
|
||||
formConfig.getValues('domain'),
|
||||
domain: form.getValues('domain'),
|
||||
email: form.getValues('email') + '@' + form.getValues('domain'),
|
||||
},
|
||||
},
|
||||
onCompleted: () => {
|
||||
@ -86,67 +83,78 @@ export const SettingsSecurityApprovedAccessDomain = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<SubMenuTopBarContainer
|
||||
title="New Approved Access Domain"
|
||||
actionButton={
|
||||
<SaveAndCancelButtons
|
||||
onCancel={() => navigate(SettingsPath.Security)}
|
||||
onSave={formConfig.handleSubmit(handleSave)}
|
||||
/>
|
||||
}
|
||||
links={[
|
||||
{
|
||||
children: <Trans>Workspace</Trans>,
|
||||
href: getSettingsPath(SettingsPath.Workspace),
|
||||
},
|
||||
{
|
||||
children: <Trans>Security</Trans>,
|
||||
href: getSettingsPath(SettingsPath.Security),
|
||||
},
|
||||
{ children: <Trans>New Approved Access Domain</Trans> },
|
||||
]}
|
||||
>
|
||||
<SettingsPageContainer>
|
||||
<Section>
|
||||
<H2Title title={t`Domain`} description={t`The name of your Domain`} />
|
||||
<Controller
|
||||
name="domain"
|
||||
control={formConfig.control}
|
||||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||||
<TextInput
|
||||
autoComplete="off"
|
||||
value={value}
|
||||
onChange={(domain: string) => {
|
||||
onChange(domain);
|
||||
}}
|
||||
fullWidth
|
||||
placeholder="yourdomain.com"
|
||||
error={error?.message}
|
||||
/>
|
||||
)}
|
||||
<form onSubmit={form.handleSubmit(handleSave)}>
|
||||
<SubMenuTopBarContainer
|
||||
title="New Approved Access Domain"
|
||||
actionButton={
|
||||
<SaveAndCancelButtons
|
||||
onCancel={() => navigate(SettingsPath.Security)}
|
||||
isSaveDisabled={form.formState.isSubmitting}
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title
|
||||
title={t`Email verification`}
|
||||
description={t`We will send your a link to verify domain ownership`}
|
||||
/>
|
||||
<Controller
|
||||
name="email"
|
||||
control={formConfig.control}
|
||||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||||
<TextInput
|
||||
autoComplete="off"
|
||||
value={value.split('@')[0]}
|
||||
onChange={onChange}
|
||||
fullWidth
|
||||
error={error?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{domain}
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
}
|
||||
links={[
|
||||
{
|
||||
children: <Trans>Workspace</Trans>,
|
||||
href: getSettingsPath(SettingsPath.Workspace),
|
||||
},
|
||||
{
|
||||
children: <Trans>Security</Trans>,
|
||||
href: getSettingsPath(SettingsPath.Security),
|
||||
},
|
||||
{ children: <Trans>New Approved Access Domain</Trans> },
|
||||
]}
|
||||
>
|
||||
<SettingsPageContainer>
|
||||
<Section>
|
||||
<H2Title
|
||||
title={t`Domain`}
|
||||
description={t`The name of your Domain`}
|
||||
/>
|
||||
<Controller
|
||||
name="domain"
|
||||
control={form.control}
|
||||
render={({
|
||||
field: { onChange, value },
|
||||
fieldState: { error },
|
||||
}) => (
|
||||
<TextInput
|
||||
autoComplete="off"
|
||||
value={value}
|
||||
onChange={(domain: string) => {
|
||||
onChange(domain);
|
||||
}}
|
||||
fullWidth
|
||||
placeholder="yourdomain.com"
|
||||
error={error?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title
|
||||
title={t`Email verification`}
|
||||
description={t`We will send your a link to verify domain ownership`}
|
||||
/>
|
||||
<Controller
|
||||
name="email"
|
||||
control={form.control}
|
||||
render={({
|
||||
field: { onChange, value },
|
||||
fieldState: { error },
|
||||
}) => (
|
||||
<TextInput
|
||||
autoComplete="off"
|
||||
value={value.split('@')[0]}
|
||||
onChange={onChange}
|
||||
fullWidth
|
||||
error={error?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{domain}
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
@ -24,8 +24,8 @@ export const SettingsSecuritySSOIdentifyProvider = () => {
|
||||
const { enqueueSnackBar } = useSnackBar();
|
||||
const { createSSOIdentityProvider } = useCreateSSOIdentityProvider();
|
||||
|
||||
const formConfig = useForm<SettingSecurityNewSSOIdentityFormValues>({
|
||||
mode: 'onChange',
|
||||
const form = useForm<SettingSecurityNewSSOIdentityFormValues>({
|
||||
mode: 'onSubmit',
|
||||
resolver: zodResolver(SSOIdentitiesProvidersParamsSchema),
|
||||
defaultValues: Object.values(sSOIdentityProviderDefaultValues).reduce(
|
||||
(acc, fn) => ({ ...acc, ...fn() }),
|
||||
@ -35,12 +35,12 @@ export const SettingsSecuritySSOIdentifyProvider = () => {
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const type = formConfig.getValues('type');
|
||||
const type = form.getValues('type');
|
||||
|
||||
await createSSOIdentityProvider(
|
||||
SSOIdentitiesProvidersParamsSchema.parse(
|
||||
pick(
|
||||
formConfig.getValues(),
|
||||
form.getValues(),
|
||||
Object.keys(sSOIdentityProviderDefaultValues[type]()),
|
||||
),
|
||||
),
|
||||
@ -55,33 +55,34 @@ export const SettingsSecuritySSOIdentifyProvider = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<SubMenuTopBarContainer
|
||||
title={t`New SSO Configuration`}
|
||||
actionButton={
|
||||
<SaveAndCancelButtons
|
||||
isSaveDisabled={!formConfig.formState.isValid}
|
||||
onCancel={() => navigate(SettingsPath.Security)}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
}
|
||||
links={[
|
||||
{
|
||||
children: <Trans>Workspace</Trans>,
|
||||
href: getSettingsPath(SettingsPath.Workspace),
|
||||
},
|
||||
{
|
||||
children: <Trans>Security</Trans>,
|
||||
href: getSettingsPath(SettingsPath.Security),
|
||||
},
|
||||
{ children: <Trans>New SSO provider</Trans> },
|
||||
]}
|
||||
>
|
||||
<form onSubmit={form.handleSubmit(handleSave)}>
|
||||
<FormProvider
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...formConfig}
|
||||
{...form}
|
||||
>
|
||||
<SettingsSSOIdentitiesProvidersForm />
|
||||
<SubMenuTopBarContainer
|
||||
title={t`New SSO Configuration`}
|
||||
actionButton={
|
||||
<SaveAndCancelButtons
|
||||
onCancel={() => navigate(SettingsPath.Security)}
|
||||
isSaveDisabled={form.formState.isSubmitting}
|
||||
/>
|
||||
}
|
||||
links={[
|
||||
{
|
||||
children: <Trans>Workspace</Trans>,
|
||||
href: getSettingsPath(SettingsPath.Workspace),
|
||||
},
|
||||
{
|
||||
children: <Trans>Security</Trans>,
|
||||
href: getSettingsPath(SettingsPath.Security),
|
||||
},
|
||||
{ children: <Trans>New SSO provider</Trans> },
|
||||
]}
|
||||
>
|
||||
<SettingsSSOIdentitiesProvidersForm />
|
||||
</SubMenuTopBarContainer>
|
||||
</FormProvider>
|
||||
</SubMenuTopBarContainer>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user