feat(workspace): add support for custom domain status toggle (#10114)

Introduce isCustomDomainEnabled field in Workspace entity to manage custom domain activation. Update related services, types, and logic to validate and toggle the custom domain's status dynamically based on its current state. This ensures accurate domain configurations are reflected across the system. --------- Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
2025-02-13 16:01:33 +01:00
parent b67e850011
commit 8a425456f2
45 changed files with 1320 additions and 352 deletions
--- a/packages/twenty-front/src/generated-metadata/graphql.ts
+++ b/packages/twenty-front/src/generated-metadata/graphql.ts
@ -384,15 +384,8 @@ export type CursorPaging = {
  last?: InputMaybe<Scalars['Int']['input']>;
 };

-export type CustomDomainDetails = {
-  __typename?: 'CustomDomainDetails';
-  customDomain: Scalars['String']['output'];
-  id: Scalars['String']['output'];
-  records: Array<CustomDomainVerification>;
-};
-
-export type CustomDomainVerification = {
-  __typename?: 'CustomDomainVerification';
+export type CustomDomainRecord = {
+  __typename?: 'CustomDomainRecord';
  key: Scalars['String']['output'];
  status: Scalars['String']['output'];
  type: Scalars['String']['output'];
@ -400,6 +393,13 @@ export type CustomDomainVerification = {
  value: Scalars['String']['output'];
 };

+export type CustomDomainValidRecords = {
+  __typename?: 'CustomDomainValidRecords';
+  customDomain: Scalars['String']['output'];
+  id: Scalars['String']['output'];
+  records: Array<CustomDomainRecord>;
+};
+
 export type DeleteOneFieldInput = {
  /** The id of the field to delete. */
  id: Scalars['UUID']['input'];
@ -1343,6 +1343,7 @@ export type PublishServerlessFunctionInput = {
 export type Query = {
  __typename?: 'Query';
  billingPortalSession: BillingSessionOutput;
+  checkCustomDomainValidRecords?: Maybe<CustomDomainValidRecords>;
  checkUserExists: UserExistsOutput;
  checkWorkspaceInviteHashIsValid: WorkspaceInviteHashValid;
  clientConfig: ClientConfig;
@ -1359,7 +1360,6 @@ export type Query = {
  findWorkspaceFromInviteHash: Workspace;
  findWorkspaceInvitations: Array<WorkspaceInvitation>;
  getAvailablePackages: Scalars['JSON']['output'];
-  getCustomDomainDetails?: Maybe<CustomDomainDetails>;
  getEnvironmentVariablesGrouped: EnvironmentVariablesOutput;
  getPostgresCredentials?: Maybe<PostgresCredentials>;
  getProductPrices: BillingProductPricesOutput;
@ -2099,6 +2099,7 @@ export type Workspace = {
  hasValidEnterpriseKey: Scalars['Boolean']['output'];
  id: Scalars['UUID']['output'];
  inviteHash?: Maybe<Scalars['String']['output']>;
+  isCustomDomainEnabled: Scalars['Boolean']['output'];
  isGoogleAuthEnabled: Scalars['Boolean']['output'];
  isMicrosoftAuthEnabled: Scalars['Boolean']['output'];
  isPasswordAuthEnabled: Scalars['Boolean']['output'];
--- a/packages/twenty-front/src/generated/graphql.tsx
+++ b/packages/twenty-front/src/generated/graphql.tsx
@ -321,15 +321,8 @@ export type CursorPaging = {
  last?: InputMaybe<Scalars['Int']>;
 };

-export type CustomDomainDetails = {
-  __typename?: 'CustomDomainDetails';
-  customDomain: Scalars['String'];
-  id: Scalars['String'];
-  records: Array<CustomDomainVerification>;
-};
-
-export type CustomDomainVerification = {
-  __typename?: 'CustomDomainVerification';
+export type CustomDomainRecord = {
+  __typename?: 'CustomDomainRecord';
  key: Scalars['String'];
  status: Scalars['String'];
  type: Scalars['String'];
@ -337,6 +330,13 @@ export type CustomDomainVerification = {
  value: Scalars['String'];
 };

+export type CustomDomainValidRecords = {
+  __typename?: 'CustomDomainValidRecords';
+  customDomain: Scalars['String'];
+  id: Scalars['String'];
+  records: Array<CustomDomainRecord>;
+};
+
 export type DeleteOneFieldInput = {
  /** The id of the field to delete. */
  id: Scalars['UUID'];
@ -734,6 +734,7 @@ export type Mutation = {
  activateWorkspace: Workspace;
  authorizeApp: AuthorizeApp;
  buildDraftServerlessFunction: ServerlessFunction;
+  checkCustomDomainValidRecords?: Maybe<CustomDomainValidRecords>;
  checkoutSession: BillingSessionOutput;
  computeStepOutputSchema: Scalars['JSON'];
  createDraftFromWorkflowVersion: WorkflowVersion;
@ -1223,7 +1224,6 @@ export type Query = {
  findWorkspaceFromInviteHash: Workspace;
  findWorkspaceInvitations: Array<WorkspaceInvitation>;
  getAvailablePackages: Scalars['JSON'];
-  getCustomDomainDetails?: Maybe<CustomDomainDetails>;
  getEnvironmentVariablesGrouped: EnvironmentVariablesOutput;
  getPostgresCredentials?: Maybe<PostgresCredentials>;
  getProductPrices: BillingProductPricesOutput;
@ -1877,6 +1877,7 @@ export type Workspace = {
  hasValidEnterpriseKey: Scalars['Boolean'];
  id: Scalars['UUID'];
  inviteHash?: Maybe<Scalars['String']>;
+  isCustomDomainEnabled: Scalars['Boolean'];
  isGoogleAuthEnabled: Scalars['Boolean'];
  isMicrosoftAuthEnabled: Scalars['Boolean'];
  isPasswordAuthEnabled: Scalars['Boolean'];
@ -2421,10 +2422,10 @@ export type UploadWorkspaceLogoMutationVariables = Exact<{

 export type UploadWorkspaceLogoMutation = { __typename?: 'Mutation', uploadWorkspaceLogo: string };

-export type GetCustomDomainDetailsQueryVariables = Exact<{ [key: string]: never; }>;
+export type CheckCustomDomainValidRecordsMutationVariables = Exact<{ [key: string]: never; }>;


-export type GetCustomDomainDetailsQuery = { __typename?: 'Query', getCustomDomainDetails?: { __typename?: 'CustomDomainDetails', customDomain: string, records: Array<{ __typename?: 'CustomDomainVerification', type: string, key: string, value: string, validationType: string, status: string }> } | null };
+export type CheckCustomDomainValidRecordsMutation = { __typename?: 'Mutation', checkCustomDomainValidRecords?: { __typename?: 'CustomDomainValidRecords', id: string, customDomain: string, records: Array<{ __typename?: 'CustomDomainRecord', type: string, key: string, value: string, validationType: string, status: string }> } | null };

 export type GetWorkspaceFromInviteHashQueryVariables = Exact<{
  inviteHash: Scalars['String'];
@ -4895,9 +4896,10 @@ export function useUploadWorkspaceLogoMutation(baseOptions?: Apollo.MutationHook
 export type UploadWorkspaceLogoMutationHookResult = ReturnType<typeof useUploadWorkspaceLogoMutation>;
 export type UploadWorkspaceLogoMutationResult = Apollo.MutationResult<UploadWorkspaceLogoMutation>;
 export type UploadWorkspaceLogoMutationOptions = Apollo.BaseMutationOptions<UploadWorkspaceLogoMutation, UploadWorkspaceLogoMutationVariables>;
-export const GetCustomDomainDetailsDocument = gql`
-    query GetCustomDomainDetails {
-  getCustomDomainDetails {
+export const CheckCustomDomainValidRecordsDocument = gql`
+    mutation CheckCustomDomainValidRecords {
+  checkCustomDomainValidRecords {
+    id
    customDomain
    records {
      type
@ -4909,33 +4911,31 @@ export const GetCustomDomainDetailsDocument = gql`
  }
 }
    `;
+export type CheckCustomDomainValidRecordsMutationFn = Apollo.MutationFunction<CheckCustomDomainValidRecordsMutation, CheckCustomDomainValidRecordsMutationVariables>;

 /**
- * __useGetCustomDomainDetailsQuery__
+ * __useCheckCustomDomainValidRecordsMutation__
 *
- * To run a query within a React component, call `useGetCustomDomainDetailsQuery` and pass it any options that fit your needs.
- * When your component renders, `useGetCustomDomainDetailsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
+ * To run a mutation, you first call `useCheckCustomDomainValidRecordsMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCheckCustomDomainValidRecordsMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
 *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
 *
 * @example
- * const { data, loading, error } = useGetCustomDomainDetailsQuery({
+ * const [checkCustomDomainValidRecordsMutation, { data, loading, error }] = useCheckCustomDomainValidRecordsMutation({
 *   variables: {
 *   },
 * });
 */
-export function useGetCustomDomainDetailsQuery(baseOptions?: Apollo.QueryHookOptions<GetCustomDomainDetailsQuery, GetCustomDomainDetailsQueryVariables>) {
+export function useCheckCustomDomainValidRecordsMutation(baseOptions?: Apollo.MutationHookOptions<CheckCustomDomainValidRecordsMutation, CheckCustomDomainValidRecordsMutationVariables>) {
        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetCustomDomainDetailsQuery, GetCustomDomainDetailsQueryVariables>(GetCustomDomainDetailsDocument, options);
+        return Apollo.useMutation<CheckCustomDomainValidRecordsMutation, CheckCustomDomainValidRecordsMutationVariables>(CheckCustomDomainValidRecordsDocument, options);
      }
-export function useGetCustomDomainDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetCustomDomainDetailsQuery, GetCustomDomainDetailsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetCustomDomainDetailsQuery, GetCustomDomainDetailsQueryVariables>(GetCustomDomainDetailsDocument, options);
-        }
-export type GetCustomDomainDetailsQueryHookResult = ReturnType<typeof useGetCustomDomainDetailsQuery>;
-export type GetCustomDomainDetailsLazyQueryHookResult = ReturnType<typeof useGetCustomDomainDetailsLazyQuery>;
-export type GetCustomDomainDetailsQueryResult = Apollo.QueryResult<GetCustomDomainDetailsQuery, GetCustomDomainDetailsQueryVariables>;
+export type CheckCustomDomainValidRecordsMutationHookResult = ReturnType<typeof useCheckCustomDomainValidRecordsMutation>;
+export type CheckCustomDomainValidRecordsMutationResult = Apollo.MutationResult<CheckCustomDomainValidRecordsMutation>;
+export type CheckCustomDomainValidRecordsMutationOptions = Apollo.BaseMutationOptions<CheckCustomDomainValidRecordsMutation, CheckCustomDomainValidRecordsMutationVariables>;
 export const GetWorkspaceFromInviteHashDocument = gql`
    query GetWorkspaceFromInviteHash($inviteHash: String!) {
  findWorkspaceFromInviteHash(inviteHash: $inviteHash) {
--- a/packages/twenty-front/src/modules/workspace/graphql/queries/checkCustomDomainValidRecords.ts
+++ b/packages/twenty-front/src/modules/workspace/graphql/queries/checkCustomDomainValidRecords.ts
@ -1,8 +1,9 @@
 import { gql } from '@apollo/client';

-export const GET_CUSTOM_DOMAIN_DETAILS = gql`
-  query GetCustomDomainDetails {
-    getCustomDomainDetails {
+export const CHECK_CUSTOM_DOMAIN_VALID_RECORDS = gql`
+  mutation CheckCustomDomainValidRecords {
+    checkCustomDomainValidRecords {
+      id
      customDomain
      records {
        type
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsCustomDomain.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsCustomDomain.tsx
@ -1,35 +1,48 @@
+/* @license Enterprise */
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { Controller, useFormContext } from 'react-hook-form';
 import { H2Title, Section } from 'twenty-ui';
-import { useGetCustomDomainDetailsQuery } from '~/generated/graphql';
 import { SettingsCustomDomainRecords } from '~/pages/settings/workspace/SettingsCustomDomainRecords';
+import { SettingsCustomDomainRecordsStatus } from '~/pages/settings/workspace/SettingsCustomDomainRecordsStatus';
+import { customDomainRecordsState } from '~/pages/settings/workspace/states/customDomainRecordsState';
+import { useRecoilValue } from 'recoil';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';

 const StyledDomainFormWrapper = styled.div`
  align-items: center;
  display: flex;
 `;

+const StyledRecordsWrapper = styled.div`
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
 export const SettingsCustomDomain = () => {
-  const { data: getCustomDomainDetailsData } = useGetCustomDomainDetailsQuery();
+  const customDomainRecords = useRecoilValue(customDomainRecordsState);
+
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);

  const { t } = useLingui();

-  const { control, getValues } = useFormContext<{
+  const { control } = useFormContext<{
    customDomain: string;
  }>();

  return (
    <Section>
-      <H2Title title={t`Domain`} description={t`Set the name of your domain`} />
+      <H2Title
+        title={t`Custom Domain`}
+        description={t`Set the name of your custom domain and configure your DNS records.`}
+      />
      <StyledDomainFormWrapper>
        <Controller
          name="customDomain"
          control={control}
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <TextInputV2
-              value={value ?? undefined}
+              value={value}
              type="text"
              onChange={onChange}
              error={error?.message}
@ -38,12 +51,17 @@ export const SettingsCustomDomain = () => {
          )}
        />
      </StyledDomainFormWrapper>
-      {getCustomDomainDetailsData?.getCustomDomainDetails &&
-        getValues('customDomain') ===
-          getCustomDomainDetailsData?.getCustomDomainDetails?.customDomain && (
-          <SettingsCustomDomainRecords
-            records={getCustomDomainDetailsData.getCustomDomainDetails.records}
-          />
+      {customDomainRecords &&
+        currentWorkspace?.customDomain &&
+        currentWorkspace.customDomain === customDomainRecords?.customDomain && (
+          <StyledRecordsWrapper>
+            <SettingsCustomDomainRecordsStatus
+              records={customDomainRecords.records}
+            />
+            <SettingsCustomDomainRecords
+              records={customDomainRecords.records}
+            />
+          </StyledRecordsWrapper>
        )}
    </Section>
  );
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsCustomDomainEffect.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsCustomDomainEffect.tsx
@ -1,20 +1,37 @@
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useEffect, useCallback } from 'react';
+import { useSetRecoilState, useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';
-import { useGetCustomDomainDetailsQuery } from '~/generated/graphql';
+import { useCheckCustomDomainValidRecordsMutation } from '~/generated/graphql';
+import { customDomainRecordsState } from '~/pages/settings/workspace/states/customDomainRecordsState';

 export const SettingsCustomDomainEffect = () => {
-  const { refetch } = useGetCustomDomainDetailsQuery();
+  const [checkCustomDomainValidRecords, { data: customDomainRecords }] =
+    useCheckCustomDomainValidRecordsMutation();
+
+  const setCustomDomainRecords = useSetRecoilState(customDomainRecordsState);

  const currentWorkspace = useRecoilValue(currentWorkspaceState);

+  const initInterval = useCallback(() => {
+    return setInterval(async () => {
+      await checkCustomDomainValidRecords();
+      if (isDefined(customDomainRecords?.checkCustomDomainValidRecords)) {
+        setCustomDomainRecords(
+          customDomainRecords.checkCustomDomainValidRecords,
+        );
+      }
+    }, 3000);
+  }, [
+    checkCustomDomainValidRecords,
+    customDomainRecords,
+    setCustomDomainRecords,
+  ]);
+
  useEffect(() => {
    let pollIntervalFn: null | ReturnType<typeof setInterval> = null;
    if (isDefined(currentWorkspace?.customDomain)) {
-      pollIntervalFn = setInterval(async () => {
-        refetch();
-      }, 3000);
+      pollIntervalFn = initInterval();
    }

    return () => {
@ -22,7 +39,7 @@ export const SettingsCustomDomainEffect = () => {
        clearInterval(pollIntervalFn);
      }
    };
-  }, [currentWorkspace?.customDomain, refetch]);
+  }, [currentWorkspace?.customDomain, initInterval]);

  return <></>;
 };
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsCustomDomainRecords.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsCustomDomainRecords.tsx
@ -1,75 +1,90 @@
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
-import { Separator } from '@/settings/components/Separator';
 import { TableBody } from '@/ui/layout/table/components/TableBody';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
-import { TextInputV2 } from '@/ui/input/components/TextInputV2';
+import { Button } from 'twenty-ui';
 import { Table } from '@/ui/layout/table/components/Table';
-import { CustomDomainDetails } from '~/generated/graphql';
+import { CustomDomainValidRecords } from '~/generated/graphql';
+import styled from '@emotion/styled';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useDebouncedCallback } from 'use-debounce';
+
+const StyledTable = styled(Table)`
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+`;
+
+const StyledTableCell = styled(TableCell)`
+  overflow: hidden;
+`;
+
+const StyledButton = styled(Button)`
+  -moz-user-select: text;
+  -ms-user-select: text;
+  -webkit-user-select: text;
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  height: ${({ theme }) => theme.spacing(7)};
+  overflow: hidden;
+  user-select: text;
+  width: 100%;
+`;

 export const SettingsCustomDomainRecords = ({
  records,
 }: {
-  records: CustomDomainDetails['records'];
+  records: CustomDomainValidRecords['records'];
 }) => {
+  const { enqueueSnackBar } = useSnackBar();
+
+  const copyToClipboard = (value: string) => {
+    navigator.clipboard.writeText(value);
+    enqueueSnackBar('Copied to clipboard!', {
+      variant: SnackBarVariant.Success,
+    });
+  };
+
+  const copyToClipboardDebounced = useDebouncedCallback(copyToClipboard, 200);
+
  return (
-    <Table>
-      <TableRow>
+    <StyledTable>
+      <TableRow gridAutoColumns="35% 16% auto">
        <TableHeader>Name</TableHeader>
-        <TableHeader>Record Type</TableHeader>
+        <TableHeader>Type</TableHeader>
        <TableHeader>Value</TableHeader>
-        <TableHeader>Validation Type</TableHeader>
-        <TableHeader>Status</TableHeader>
      </TableRow>
-      <Separator></Separator>
      <TableBody>
        {records.map((record) => {
          return (
-            <TableRow>
-              <TableCell>
-                <TextInputV2
-                  value={record.key}
-                  type="text"
-                  disabled
-                  sizeVariant="md"
+            <TableRow gridAutoColumns="30% 16% auto" key={record.key}>
+              <StyledTableCell>
+                <StyledButton
+                  title={record.key}
+                  onClick={() => copyToClipboardDebounced(record.key)}
                />
-              </TableCell>
-              <TableCell>
-                <TextInputV2
-                  value={record.type.toUpperCase()}
-                  type="text"
-                  disabled
-                  sizeVariant="md"
+              </StyledTableCell>
+              <StyledTableCell>
+                <StyledButton
+                  title={record.type.toUpperCase()}
+                  onClick={() =>
+                    copyToClipboardDebounced(record.type.toUpperCase())
+                  }
                />
-              </TableCell>
-              <TableCell>
-                <TextInputV2
-                  value={record.value}
-                  type="text"
-                  disabled
-                  sizeVariant="md"
+              </StyledTableCell>
+              <StyledTableCell>
+                <StyledButton
+                  title={record.value}
+                  onClick={() => copyToClipboardDebounced(record.value)}
                />
-              </TableCell>
-              <TableCell>
-                <TextInputV2
-                  value={record.validationType}
-                  type="text"
-                  disabled
-                  sizeVariant="md"
-                />
-              </TableCell>
-              <TableCell>
-                <TextInputV2
-                  value={record.status}
-                  type="text"
-                  disabled
-                  sizeVariant="md"
-                />
-              </TableCell>
+              </StyledTableCell>
            </TableRow>
          );
        })}
      </TableBody>
-    </Table>
+    </StyledTable>
  );
 };
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsCustomDomainRecordsStatus.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsCustomDomainRecordsStatus.tsx
@ -0,0 +1,76 @@
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { Status, ThemeColor } from 'twenty-ui';
+import styled from '@emotion/styled';
+import { CustomDomainValidRecords } from '~/generated/graphql';
+
+const StyledTable = styled(Table)`
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+`;
+
+const StyledTableRow = styled(TableRow)`
+  display: flex;
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  align-items: center;
+  justify-content: space-between;
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+export const SettingsCustomDomainRecordsStatus = ({
+  records,
+}: {
+  records: CustomDomainValidRecords['records'];
+}) => {
+  const rows = records.reduce(
+    (acc, record) => {
+      acc[record.validationType] = {
+        name: acc[record.validationType].name,
+        status: record.status,
+        color:
+          record.status === 'error'
+            ? 'red'
+            : record.status === 'pending'
+              ? 'yellow'
+              : 'green',
+      };
+      return acc;
+    },
+    {
+      ssl: {
+        name: 'SSL',
+        status: 'success',
+        color: 'green',
+      },
+      redirection: {
+        name: 'Redirection',
+        status: 'success',
+        color: 'green',
+      },
+      ownership: {
+        name: 'Ownership',
+        status: 'success',
+        color: 'green',
+      },
+    } as Record<string, { name: string; status: string; color: ThemeColor }>,
+  );
+
+  return (
+    <StyledTable>
+      {Object.values(rows).map((row) => {
+        return (
+          <StyledTableRow>
+            <TableCell>{row.name}</TableCell>
+            <TableCell>
+              <Status color={row.color} text={row.status} />
+            </TableCell>
+          </StyledTableRow>
+        );
+      })}
+    </StyledTable>
+  );
+};
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
@ -74,7 +74,7 @@ export const SettingsDomain = () => {
    delayError: 500,
    defaultValues: {
      subdomain: currentWorkspace?.subdomain ?? '',
-      customDomain: currentWorkspace?.customDomain ?? null,
+      customDomain: currentWorkspace?.customDomain ?? '',
    },
    resolver: zodResolver(validationSchema),
  });
@ -83,7 +83,7 @@ export const SettingsDomain = () => {
  const customDomainValue = form.watch('customDomain');

  const updateCustomDomain = (
-    customDomain: string | null | undefined,
+    customDomain: string | null,
    currentWorkspace: CurrentWorkspace,
  ) => {
    updateWorkspace({
@ -98,7 +98,8 @@ export const SettingsDomain = () => {
      onCompleted: () => {
        setCurrentWorkspace({
          ...currentWorkspace,
-          customDomain,
+          customDomain:
+            customDomain && customDomain.length > 0 ? customDomain : null,
        });
      },
      onError: (error) => {
@ -209,9 +210,7 @@ export const SettingsDomain = () => {
      <SettingsPageContainer>
        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
        <FormProvider {...form}>
-          {(!currentWorkspace?.customDomain || !isCustomDomainEnabled) && (
-            <SettingsSubdomain />
-          )}
+          <SettingsSubdomain />
          {isCustomDomainEnabled && (
            <>
              <SettingsCustomDomainEffect />
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsSubdomain.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsSubdomain.tsx
@ -7,6 +7,7 @@ import { H2Title, Section } from 'twenty-ui';
 import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';

 const StyledDomainFormWrapper = styled.div`
  align-items: center;
@ -26,6 +27,8 @@ export const SettingsSubdomain = () => {
  const domainConfiguration = useRecoilValue(domainConfigurationState);
  const { t } = useLingui();

+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+
  const { control } = useFormContext<{
    subdomain: string;
  }>();
@ -47,6 +50,7 @@ export const SettingsSubdomain = () => {
                type="text"
                onChange={onChange}
                error={error?.message}
+                disabled={!!currentWorkspace?.customDomain}
                fullWidth
              />
              {isDefined(domainConfiguration.frontDomain) && (
--- a/packages/twenty-front/src/pages/settings/workspace/states/customDomainRecordsState.ts
+++ b/packages/twenty-front/src/pages/settings/workspace/states/customDomainRecordsState.ts
@ -0,0 +1,8 @@
+import { createState } from '@ui/utilities/state/utils/createState';
+import { CustomDomainValidRecords } from '~/generated/graphql';
+
+export const customDomainRecordsState =
+  createState<CustomDomainValidRecords | null>({
+    key: 'customDomainRecordsState',
+    defaultValue: null,
+  });
--- a/packages/twenty-front/src/testing/mock-data/users.ts
+++ b/packages/twenty-front/src/testing/mock-data/users.ts
@ -48,6 +48,7 @@ export const mockCurrentWorkspace: Workspace = {
  hasValidEnterpriseKey: false,
  isGoogleAuthEnabled: true,
  isPasswordAuthEnabled: true,
+  isCustomDomainEnabled: false,
  workspaceUrls: {
    customUrl: undefined,
    subdomainUrl: 'twenty.twenty.com',