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>
This commit is contained in:
Antoine Moreaux
2025-02-13 16:01:33 +01:00
committed by GitHub
parent b67e850011
commit 8a425456f2
45 changed files with 1320 additions and 352 deletions

View File

@ -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>
);