Skip to content

Commit 64ec8ce

Browse files
authored
fix(dashboard): remove custom domains from settings (nhost#3782)
1 parent 86f5b73 commit 64ec8ce

File tree

4 files changed

+129
-76
lines changed

4 files changed

+129
-76
lines changed

dashboard/src/features/orgs/projects/custom-domains/settings/components/AuthDomain/AuthDomain.tsx

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
22
import { useDialog } from '@/components/common/DialogProvider';
3-
import { useUI } from '@/components/common/UIProvider';
43
import { Form } from '@/components/form/Form';
54
import { SettingsContainer } from '@/components/layout/SettingsContainer';
65
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
@@ -20,7 +19,7 @@ import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatfo
2019
import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
2120
import { useProject } from '@/features/orgs/projects/hooks/useProject';
2221
import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
23-
import { isNotEmptyValue } from '@/lib/utils';
22+
import { isEmptyValue, isNotEmptyValue } from '@/lib/utils';
2423

2524
const validationSchema = Yup.object({
2625
auth_fqdn: Yup.string(),
@@ -31,7 +30,6 @@ export type AuthDomainFormValues = Yup.InferType<typeof validationSchema>;
3130
export default function AuthDomain() {
3231
const { openDialog } = useDialog();
3332
const isPlatform = useIsPlatform();
34-
const { maintenanceActive } = useUI();
3533
const localMimirClient = useLocalMimirClient();
3634
const [isVerified, setIsVerified] = useState(false);
3735

@@ -61,6 +59,23 @@ export default function AuthDomain() {
6159
const { networking } = data?.config?.auth?.resources || {};
6260
const initialValue = networking?.ingresses?.[0]?.fqdn?.[0];
6361

62+
const { formState, watch, setValue } = form;
63+
const isDirty = Object.keys(formState.dirtyFields).length > 0;
64+
65+
const auth_fqdn = watch('auth_fqdn');
66+
67+
const submitButtonDisabled = (() => {
68+
if (!isPlatform) {
69+
return !isDirty;
70+
}
71+
72+
if (isEmptyValue(auth_fqdn) && isDirty) {
73+
return false;
74+
}
75+
76+
return !isDirty || !isVerified;
77+
})();
78+
6479
useEffect(() => {
6580
if (!loading && data) {
6681
form.reset({ auth_fqdn: initialValue });
@@ -81,17 +96,17 @@ export default function AuthDomain() {
8196
throw error;
8297
}
8398

84-
const { formState, register, watch } = form;
85-
const isDirty = Object.keys(formState.dirtyFields).length > 0;
86-
87-
const auth_fqdn = watch('auth_fqdn');
88-
8999
async function handleSubmit(formValues: AuthDomainFormValues) {
90-
const ingresses: ConfigIngressUpdateInput[] = isNotEmptyValue(
91-
formValues.auth_fqdn?.length,
92-
)
93-
? [{ fqdn: [formValues.auth_fqdn] }]
94-
: [];
100+
let ingresses: ConfigIngressUpdateInput[] | null;
101+
let successMessage = '';
102+
103+
if (isNotEmptyValue(formValues.auth_fqdn)) {
104+
ingresses = [{ fqdn: [formValues.auth_fqdn] }];
105+
successMessage = 'Auth domain has been updated successfully.';
106+
} else {
107+
ingresses = null;
108+
successMessage = 'Custom Auth domain has been removed successfully.';
109+
}
95110

96111
const updateConfigPromise = updateConfig({
97112
variables: {
@@ -128,21 +143,13 @@ export default function AuthDomain() {
128143
},
129144
{
130145
loadingMessage: 'Auth domain is being updated...',
131-
successMessage: 'Auth domain has been updated successfully.',
146+
successMessage,
132147
errorMessage:
133148
'An error occurred while trying to update the auth domain.',
134149
},
135150
);
136151
}
137152

138-
const isDisabled = () => {
139-
if (!isPlatform) {
140-
return !isDirty || maintenanceActive;
141-
}
142-
143-
return !isDirty || maintenanceActive || (!isVerified && !initialValue);
144-
};
145-
146153
return (
147154
<FormProvider {...form}>
148155
<Form onSubmit={handleSubmit}>
@@ -151,14 +158,20 @@ export default function AuthDomain() {
151158
description="Enter below your custom domain for the authentication service."
152159
slotProps={{
153160
submitButton: {
154-
disabled: isDisabled(),
161+
disabled: submitButtonDisabled,
155162
loading: formState.isSubmitting,
156163
},
157164
}}
158165
className="grid grid-flow-row gap-x-4 gap-y-4 px-4 lg:grid-cols-5"
159166
>
160167
<Input
161-
{...register('auth_fqdn')}
168+
value={auth_fqdn}
169+
onChange={(e) => {
170+
setValue('auth_fqdn', e.target.value, { shouldDirty: true });
171+
if (isVerified) {
172+
setIsVerified(false);
173+
}
174+
}}
162175
id="auth_fqdn"
163176
name="auth_fqdn"
164177
type="string"
@@ -175,6 +188,7 @@ export default function AuthDomain() {
175188
hostname={auth_fqdn}
176189
value={`lb.${project?.region.name}.${project?.region.domain}.`}
177190
onHostNameVerified={() => setIsVerified(true)}
191+
saveEnabled={!submitButtonDisabled}
178192
/>
179193
</div>
180194
</SettingsContainer>

dashboard/src/features/orgs/projects/custom-domains/settings/components/HasuraDomain/HasuraDomain.tsx

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
22
import { useDialog } from '@/components/common/DialogProvider';
3-
import { useUI } from '@/components/common/UIProvider';
43
import { Form } from '@/components/form/Form';
54
import { SettingsContainer } from '@/components/layout/SettingsContainer';
65
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
@@ -10,12 +9,12 @@ import { VerifyDomain } from '@/features/orgs/projects/custom-domains/settings/c
109
import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
1110
import { useProject } from '@/features/orgs/projects/hooks/useProject';
1211
import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
12+
import type { ConfigIngressUpdateInput } from '@/generated/graphql';
1313
import {
1414
useGetHasuraSettingsQuery,
1515
useUpdateConfigMutation,
16-
type ConfigIngressUpdateInput,
1716
} from '@/generated/graphql';
18-
import { isNotEmptyValue } from '@/lib/utils';
17+
import { isEmptyValue, isNotEmptyValue } from '@/lib/utils';
1918
import { yupResolver } from '@hookform/resolvers/yup';
2019
import { useEffect, useState } from 'react';
2120
import { FormProvider, useForm } from 'react-hook-form';
@@ -30,7 +29,6 @@ export type HasuraDomainFormValues = Yup.InferType<typeof validationSchema>;
3029
export default function HasuraDomain() {
3130
const { openDialog } = useDialog();
3231
const isPlatform = useIsPlatform();
33-
const { maintenanceActive } = useUI();
3432
const localMimirClient = useLocalMimirClient();
3533
const [isVerified, setIsVerified] = useState(false);
3634

@@ -66,6 +64,23 @@ export default function HasuraDomain() {
6664
}
6765
}, [data, loading, form, initialValue]);
6866

67+
const { formState, watch, setValue } = form;
68+
const isDirty = Object.keys(formState.dirtyFields).length > 0;
69+
70+
const hasura_fqdn = watch('hasura_fqdn');
71+
72+
const submitButtonDisabled = (() => {
73+
if (!isPlatform) {
74+
return !isDirty;
75+
}
76+
77+
if (isEmptyValue(hasura_fqdn) && isDirty) {
78+
return false;
79+
}
80+
81+
return !isDirty || !isVerified;
82+
})();
83+
6984
if (loadingProject || loading) {
7085
return (
7186
<ActivityIndicator
@@ -80,17 +95,17 @@ export default function HasuraDomain() {
8095
throw error;
8196
}
8297

83-
const { formState, register, watch } = form;
84-
const isDirty = Object.keys(formState.dirtyFields).length > 0;
85-
86-
const hasura_fqdn = watch('hasura_fqdn');
87-
8898
async function handleSubmit(formValues: HasuraDomainFormValues) {
89-
const ingresses: ConfigIngressUpdateInput[] = isNotEmptyValue(
90-
formValues.hasura_fqdn,
91-
)
92-
? [{ fqdn: [formValues.hasura_fqdn] }]
93-
: [];
99+
let ingresses: ConfigIngressUpdateInput[] | null;
100+
let successMessage = '';
101+
102+
if (isNotEmptyValue(formValues.hasura_fqdn)) {
103+
ingresses = [{ fqdn: [formValues.hasura_fqdn] }];
104+
successMessage = 'Hasura domain has been updated successfully.';
105+
} else {
106+
ingresses = null;
107+
successMessage = 'Custom Hasura domain has been removed successfully.';
108+
}
94109

95110
const updateConfigPromise = updateConfig({
96111
variables: {
@@ -127,21 +142,13 @@ export default function HasuraDomain() {
127142
},
128143
{
129144
loadingMessage: 'Hasura domain is being updated...',
130-
successMessage: 'Hasura domain has been updated successfully.',
145+
successMessage,
131146
errorMessage:
132147
'An error occurred while trying to update the Hasura domain.',
133148
},
134149
);
135150
}
136151

137-
const isDisabled = () => {
138-
if (!isPlatform) {
139-
return !isDirty || maintenanceActive;
140-
}
141-
142-
return !isDirty || maintenanceActive || (!isVerified && !initialValue);
143-
};
144-
145152
return (
146153
<FormProvider {...form}>
147154
<Form onSubmit={handleSubmit}>
@@ -150,14 +157,22 @@ export default function HasuraDomain() {
150157
description="Enter below your custom domain for the Hasura/GraphQL service."
151158
slotProps={{
152159
submitButton: {
153-
disabled: isDisabled(),
160+
disabled: submitButtonDisabled,
154161
loading: formState.isSubmitting,
155162
},
156163
}}
157164
className="grid grid-flow-row gap-x-4 gap-y-4 px-4 lg:grid-cols-5"
158165
>
159166
<Input
160-
{...register('hasura_fqdn')}
167+
value={hasura_fqdn}
168+
onChange={(e) => {
169+
setValue('hasura_fqdn', e.target.value, {
170+
shouldDirty: true,
171+
});
172+
if (isVerified) {
173+
setIsVerified(false);
174+
}
175+
}}
161176
id="hasura_fqdn"
162177
name="hasura_fqdn"
163178
type="string"
@@ -174,6 +189,7 @@ export default function HasuraDomain() {
174189
hostname={hasura_fqdn}
175190
value={`lb.${project?.region.name}.${project?.region.domain}.`}
176191
onHostNameVerified={() => setIsVerified(true)}
192+
saveEnabled={!submitButtonDisabled}
177193
/>
178194
</div>
179195
</SettingsContainer>

0 commit comments

Comments
 (0)