feat(settings): review custom domain (#10393)

Introduce improved validation logic for custom domains, including regex
validation with descriptive error messages. Implement asynchronous
domain update functionality with a loading indicator and polling to
check record statuses. Refactor components to streamline functionality
and align with updated state management.

Fix https://github.com/twentyhq/core-team-issues/issues/453

packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx

@@ -42,6 +42,12 @@ export const SettingsDomain = () => {
         }),
       customDomain: z
         .string()
+        .regex(
+          /^([a-zA-Z0-9][a-zA-Z0-9-]*\.)+[a-zA-Z0-9][a-zA-Z0-9-]*\.[a-zA-Z]{2,}$/,
+          {
+            message: t`Invalid custom domain. Please include at least one subdomain (e.g., sub.example.com).`,
+          },
+        )
         .regex(
           /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$/,
           {
@@ -70,7 +76,7 @@ export const SettingsDomain = () => {
     subdomain: string;
     customDomain: string | null;
   }>({
-    mode: 'onChange',
+    mode: 'onSubmit',
     delayError: 500,
     defaultValues: {
       subdomain: currentWorkspace?.subdomain ?? '',
@@ -169,6 +175,15 @@ export const SettingsDomain = () => {
       });
     }
 
+    if (
+      subdomainValue === currentWorkspace?.subdomain &&
+      customDomainValue === currentWorkspace?.customDomain
+    ) {
+      return enqueueSnackBar(t`No change detected`, {
+        variant: SnackBarVariant.Error,
+      });
+    }
+
     if (
       isDefined(values.subdomain) &&
       values.subdomain !== currentWorkspace.subdomain
@@ -197,24 +212,19 @@ export const SettingsDomain = () => {
       ]}
       actionButton={
         <SaveAndCancelButtons
-          isSaveDisabled={
-            !form.formState.isValid ||
-            (subdomainValue === currentWorkspace?.subdomain &&
-              customDomainValue === currentWorkspace?.customDomain)
-          }
           onCancel={() => navigate(SettingsPath.Workspace)}
-          onSave={handleSave}
+          onSave={form.handleSubmit(handleSave)}
         />
       }
     >
       <SettingsPageContainer>
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <FormProvider {...form}>
-          <SettingsSubdomain />
+          <SettingsSubdomain handleSave={handleSave} />
           {isCustomDomainEnabled && (
             <>
               <SettingsCustomDomainEffect />
-              <SettingsCustomDomain />
+              <SettingsCustomDomain handleSave={handleSave} />
             </>
           )}
         </FormProvider>