feat(custom-domain): enable UI for custom domain (#10062)

2025-02-10 09:43:13 +01:00
parent f8c653f153
commit 1b98f40f17
13 changed files with 305 additions and 343 deletions
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
@ -1,5 +1,8 @@
 import { ApolloError } from '@apollo/client';
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import {
+  CurrentWorkspace,
+  currentWorkspaceState,
+} from '@/auth/states/currentWorkspaceState';
 import { useRecoilState } from 'recoil';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
@ -22,6 +25,7 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBa
 import { SettingsPath } from '@/types/SettingsPath';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsHostnameEffect } from '~/pages/settings/workspace/SettingsHostnameEffect';
+import { isDefined } from 'twenty-shared';

 export const SettingsDomain = () => {
  const navigate = useNavigateSettings();
@ -36,6 +40,17 @@ export const SettingsDomain = () => {
        .regex(/^[a-z0-9][a-z0-9-]{1,28}[a-z0-9]$/, {
          message: t`Use letter, number and dash only. Start and finish with a letter or a number`,
        }),
+      hostname: z
+        .string()
+        .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])$/,
+          {
+            message: t`Invalid custom hostname. Custom hostnames have to be smaller than 256 characters in length, cannot be IP addresses, cannot contain spaces, cannot contain any special characters such as _~\`!@#$%^*()=+{}[]|\\;:'",<>/? and cannot begin or end with a '-' character.`,
+          },
+        )
+        .max(256)
+        .optional()
+        .or(z.literal('')),
    })
    .required();

@ -53,30 +68,62 @@ export const SettingsDomain = () => {

  const form = useForm<{
    subdomain: string;
+    hostname: string | null;
  }>({
    mode: 'onChange',
    delayError: 500,
    defaultValues: {
      subdomain: currentWorkspace?.subdomain ?? '',
+      hostname: currentWorkspace?.hostname ?? null,
    },
    resolver: zodResolver(validationSchema),
  });

  const subdomainValue = form.watch('subdomain');
+  const hostnameValue = form.watch('hostname');

-  const handleSave = async () => {
-    const values = form.getValues();
-
-    if (!values || !form.formState.isValid || !currentWorkspace) {
-      return enqueueSnackBar(t`Invalid form values`, {
-        variant: SnackBarVariant.Error,
-      });
-    }
-
-    await updateWorkspace({
+  const updateHostname = (
+    hostname: string | null | undefined,
+    currentWorkspace: CurrentWorkspace,
+  ) => {
+    updateWorkspace({
      variables: {
        input: {
-          subdomain: values.subdomain,
+          hostname:
+            isDefined(hostname) && hostname.length > 0 ? hostname : null,
+        },
+      },
+      onCompleted: () => {
+        setCurrentWorkspace({
+          ...currentWorkspace,
+          hostname: hostname,
+        });
+      },
+      onError: (error) => {
+        if (
+          error instanceof ApolloError &&
+          error.graphQLErrors[0]?.extensions?.code === 'CONFLICT'
+        ) {
+          return form.control.setError('subdomain', {
+            type: 'manual',
+            message: t`Subdomain already taken`,
+          });
+        }
+        enqueueSnackBar((error as Error).message, {
+          variant: SnackBarVariant.Error,
+        });
+      },
+    });
+  };
+
+  const updateSubdomain = (
+    subdomain: string,
+    currentWorkspace: CurrentWorkspace,
+  ) => {
+    updateWorkspace({
+      variables: {
+        input: {
+          subdomain,
        },
      },
      onError: (error) => {
@ -98,11 +145,11 @@ export const SettingsDomain = () => {

        currentUrl.hostname = new URL(
          currentWorkspace.workspaceUrls.subdomainUrl,
-        ).hostname.replace(currentWorkspace.subdomain, values.subdomain);
+        ).hostname.replace(currentWorkspace.subdomain, subdomain);

        setCurrentWorkspace({
          ...currentWorkspace,
-          subdomain: values.subdomain,
+          subdomain,
        });

        redirectToWorkspaceDomain(currentUrl.toString());
@ -110,6 +157,27 @@ export const SettingsDomain = () => {
    });
  };

+  const handleSave = async () => {
+    const values = form.getValues();
+
+    if (!values || !form.formState.isValid || !currentWorkspace) {
+      return enqueueSnackBar(t`Invalid form values`, {
+        variant: SnackBarVariant.Error,
+      });
+    }
+
+    if (
+      isDefined(values.subdomain) &&
+      values.subdomain !== currentWorkspace.subdomain
+    ) {
+      return updateSubdomain(values.subdomain, currentWorkspace);
+    }
+
+    if (values.hostname !== currentWorkspace.hostname) {
+      return updateHostname(values.hostname, currentWorkspace);
+    }
+  };
+
  return (
    <SubMenuTopBarContainer
      title={t`Domain`}
@ -128,7 +196,8 @@ export const SettingsDomain = () => {
        <SaveAndCancelButtons
          isSaveDisabled={
            !form.formState.isValid ||
-            subdomainValue === currentWorkspace?.subdomain
+            (subdomainValue === currentWorkspace?.subdomain &&
+              hostnameValue === currentWorkspace?.hostname)
          }
          onCancel={() => navigate(SettingsPath.Workspace)}
          onSave={handleSave}
@ -138,15 +207,15 @@ export const SettingsDomain = () => {
      <SettingsPageContainer>
        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
        <FormProvider {...form}>
+          {(!currentWorkspace?.hostname || !isCustomDomainEnabled) && (
+            <SettingsSubdomain />
+          )}
          {isCustomDomainEnabled && (
            <>
              <SettingsHostnameEffect />
              <SettingsHostname />
            </>
          )}
-          {(!currentWorkspace?.hostname || !isCustomDomainEnabled) && (
-            <SettingsSubdomain />
-          )}
        </FormProvider>
      </SettingsPageContainer>
    </SubMenuTopBarContainer>
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsHostname.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsHostname.tsx
@ -1,35 +1,10 @@
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import styled from '@emotion/styled';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
-import { Controller, useForm } from 'react-hook-form';
-import { useRecoilState } from 'recoil';
-import { isDefined } from 'twenty-shared';
-import { Button, H2Title, Section } from 'twenty-ui';
-import { z } from 'zod';
-import {
-  useGetHostnameDetailsQuery,
-  useUpdateWorkspaceMutation,
-} from '~/generated/graphql';
-
-const validationSchema = z
-  .object({
-    hostname: z
-      .string()
-      .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])$/,
-        {
-          message:
-            "Invalid custom hostname. Custom hostnames have to be smaller than 256 characters in length, cannot be IP addresses, cannot contain spaces, cannot contain any special characters such as _~`!@#$%^*()=+{}[]|\\;:'\",<>/? and cannot begin or end with a '-' character.",
-        },
-      )
-      .max(256)
-      .nullable(),
-  })
-  .required();
-
-type Form = z.infer<typeof validationSchema>;
+import { Controller, useFormContext } from 'react-hook-form';
+import { H2Title, Section } from 'twenty-ui';
+import { useGetCustomHostnameDetailsQuery } from '~/generated/graphql';
+import { SettingsHostnameRecords } from '~/pages/settings/workspace/SettingsHostnameRecords';

 const StyledDomainFromWrapper = styled.div`
  align-items: center;
@ -37,78 +12,13 @@ const StyledDomainFromWrapper = styled.div`
 `;

 export const SettingsHostname = () => {
-  const [updateWorkspace] = useUpdateWorkspaceMutation();
-  const { data: getHostnameDetailsData } = useGetHostnameDetailsQuery();
+  const { data: getHostnameDetailsData } = useGetCustomHostnameDetailsQuery();

  const { t } = useLingui();

-  const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
-    currentWorkspaceState,
-  );
-
-  const {
-    control,
-    getValues,
-    clearErrors,
-    handleSubmit,
-    formState: { isValid },
-  } = useForm<Form>({
-    mode: 'onSubmit',
-    defaultValues: {
-      hostname: currentWorkspace?.hostname ?? '',
-    },
-    resolver: zodResolver(validationSchema),
-  });
-
-  const handleDelete = async () => {
-    try {
-      if (!currentWorkspace) {
-        throw new Error('Invalid form values');
-      }
-
-      await updateWorkspace({
-        variables: {
-          input: {
-            hostname: null,
-          },
-        },
-      });
-    } catch (error) {
-      control.setError('hostname', {
-        type: 'manual',
-        message: (error as Error).message,
-      });
-    }
-  };
-
-  const handleSave = async () => {
-    const values = getValues();
-    try {
-      clearErrors();
-
-      if (!values || !isValid || !currentWorkspace) {
-        throw new Error('Invalid form values');
-      }
-
-      await updateWorkspace({
-        variables: {
-          input: {
-            hostname: values.hostname,
-          },
-        },
-      });
-
-      setCurrentWorkspace({
-        ...currentWorkspace,
-        hostname: values.hostname,
-      });
-    } catch (error) {
-      control.setError('hostname', {
-        type: 'manual',
-        message: (error as Error).message,
-      });
-    }
-  };
+  const { control, getValues } = useFormContext<{
+    hostname: string;
+  }>();

  return (
    <Section>
@ -128,40 +38,12 @@ export const SettingsHostname = () => {
          )}
        />
      </StyledDomainFromWrapper>
-      <Button onClick={handleSubmit(handleSave)} title={'save'}></Button>
-      <Button onClick={handleSubmit(handleDelete)} title={'delete'}></Button>
-      {isDefined(getHostnameDetailsData?.getHostnameDetails?.hostname) && (
-        <pre>
-          {getHostnameDetailsData.getHostnameDetails.hostname} CNAME
-          twenty-main.com
-        </pre>
-      )}
-      {getHostnameDetailsData?.getHostnameDetails &&
-        getHostnameDetailsData.getHostnameDetails.ownershipVerifications.map(
-          (ownershipVerification) => {
-            if (
-              ownershipVerification.__typename ===
-              'CustomHostnameOwnershipVerificationTxt'
-            ) {
-              return (
-                <pre>
-                  {ownershipVerification.name} TXT {ownershipVerification.value}
-                </pre>
-              );
-            }
-
-            if (
-              ownershipVerification.__typename ===
-              'CustomHostnameOwnershipVerificationHttp'
-            ) {
-              return (
-                <pre>
-                  {ownershipVerification.url} HTTP {ownershipVerification.body}
-                </pre>
-              );
-            }
-            return <></>;
-          },
+      {getHostnameDetailsData?.getCustomHostnameDetails &&
+        getValues('hostname') ===
+          getHostnameDetailsData?.getCustomHostnameDetails?.hostname && (
+          <SettingsHostnameRecords
+            records={getHostnameDetailsData.getCustomHostnameDetails.records}
+          />
        )}
    </Section>
  );
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsHostnameEffect.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsHostnameEffect.tsx
@ -2,10 +2,10 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';
-import { useGetHostnameDetailsQuery } from '~/generated/graphql';
+import { useGetCustomHostnameDetailsQuery } from '~/generated/graphql';

 export const SettingsHostnameEffect = () => {
-  const { refetch } = useGetHostnameDetailsQuery();
+  const { refetch } = useGetCustomHostnameDetailsQuery();

  const currentWorkspace = useRecoilValue(currentWorkspaceState);

--- a/packages/twenty-front/src/pages/settings/workspace/SettingsHostnameRecords.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsHostnameRecords.tsx
@ -0,0 +1,75 @@
+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 { Table } from '@/ui/layout/table/components/Table';
+import { CustomHostnameDetails } from '~/generated/graphql';
+
+export const SettingsHostnameRecords = ({
+  records,
+}: {
+  records: CustomHostnameDetails['records'];
+}) => {
+  return (
+    <Table>
+      <TableRow>
+        <TableHeader>Name</TableHeader>
+        <TableHeader>Record 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"
+                />
+              </TableCell>
+              <TableCell>
+                <TextInputV2
+                  value={record.type.toUpperCase()}
+                  type="text"
+                  disabled
+                  sizeVariant="md"
+                />
+              </TableCell>
+              <TableCell>
+                <TextInputV2
+                  value={record.value}
+                  type="text"
+                  disabled
+                  sizeVariant="md"
+                />
+              </TableCell>
+              <TableCell>
+                <TextInputV2
+                  value={record.validationType}
+                  type="text"
+                  disabled
+                  sizeVariant="md"
+                />
+              </TableCell>
+              <TableCell>
+                <TextInputV2
+                  value={record.status}
+                  type="text"
+                  disabled
+                  sizeVariant="md"
+                />
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+};