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/SettingsCustomDomain.tsx

@@ -17,16 +17,26 @@ const StyledDomainFormWrapper = styled.div`
 
 const StyledRecordsWrapper = styled.div`
   margin-top: ${({ theme }) => theme.spacing(2)};
+
+  & > :not(:first-of-type) {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
 `;
 
-export const SettingsCustomDomain = () => {
-  const customDomainRecords = useRecoilValue(customDomainRecordsState);
+export const SettingsCustomDomain = ({
+  handleSave,
+}: {
+  handleSave: () => void;
+}) => {
+  const { customDomainRecords, loading } = useRecoilValue(
+    customDomainRecordsState,
+  );
 
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const { t } = useLingui();
 
-  const { control } = useFormContext<{
+  const { control, handleSubmit } = useFormContext<{
     customDomain: string;
   }>();
 
@@ -45,24 +55,29 @@ export const SettingsCustomDomain = () => {
               value={value}
               type="text"
               onChange={onChange}
+              placeholder="crm.yourdomain.com"
               error={error?.message}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleSubmit(handleSave);
+                }
+              }}
+              loading={!!loading}
               fullWidth
             />
           )}
         />
       </StyledDomainFormWrapper>
-      {customDomainRecords &&
-        currentWorkspace?.customDomain &&
-        currentWorkspace.customDomain === customDomainRecords?.customDomain && (
-          <StyledRecordsWrapper>
-            <SettingsCustomDomainRecordsStatus
-              records={customDomainRecords.records}
-            />
+      {currentWorkspace?.customDomain && (
+        <StyledRecordsWrapper>
+          <SettingsCustomDomainRecordsStatus />
+          {customDomainRecords && (
             <SettingsCustomDomainRecords
               records={customDomainRecords.records}
             />
-          </StyledRecordsWrapper>
-        )}
+          )}
+        </StyledRecordsWrapper>
+      )}
     </Section>
   );
 };