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/modules/settings/components/SettingsCard.tsx

@@ -12,6 +12,7 @@ type SettingsCardProps = {
   onClick?: () => void;
   title: string;
   className?: string;
+  Status?: ReactNode;
 };
 
 const StyledCard = styled(Card)<{
@@ -77,6 +78,7 @@ export const SettingsCard = ({
   onClick,
   title,
   className,
+  Status,
 }: SettingsCardProps) => {
   const theme = useTheme();
 
@@ -94,6 +96,7 @@ export const SettingsCard = ({
             {title}
             {soon && <Pill label="Soon" />}
           </StyledTitle>
+          {Status && Status}
           <StyledIconChevronRight size={theme.icon.size.sm} />
         </StyledHeader>
         {description && <StyledDescription>{description}</StyledDescription>}

packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx

@@ -11,7 +11,13 @@ import {
   useRef,
   useState,
 } from 'react';
-import { AutogrowWrapper, IconComponent, IconEye, IconEyeOff } from 'twenty-ui';
+import {
+  AutogrowWrapper,
+  IconComponent,
+  IconEye,
+  IconEyeOff,
+  Loader,
+} from 'twenty-ui';
 import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 
@@ -158,6 +164,7 @@ export type TextInputV2ComponentProps = Omit<
   dataTestId?: string;
   sizeVariant?: TextInputV2Size;
   inheritFontStyles?: boolean;
+  loading?: boolean;
 };
 
 type TextInputV2WithAutoGrowWrapperProps = TextInputV2ComponentProps;
@@ -193,6 +200,7 @@ const TextInputV2Component = forwardRef<
       inheritFontStyles = false,
       dataTestId,
       autoGrow = false,
+      loading = false,
     },
     ref,
   ) => {
@@ -284,6 +292,12 @@ const TextInputV2Component = forwardRef<
                 <RightIcon size={theme.icon.size.md} />
               </StyledTrailingIcon>
             )}
+
+            {!error && type !== INPUT_TYPE_PASSWORD && !!loading && (
+              <StyledTrailingIcon>
+                <Loader color={'gray'} />
+              </StyledTrailingIcon>
+            )}
           </StyledTrailingIconContainer>
         </StyledInputContainer>
         <InputErrorHelper isVisible={!noErrorHelper}>{error}</InputErrorHelper>