Files
twenty/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
Antoine Moreaux 92462b3ae5 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
2025-02-24 11:31:45 +01:00

82 lines
3.0 KiB
TypeScript

import { useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
import {
H2Title,
IconWorld,
Section,
UndecoratedLink,
Status,
} from 'twenty-ui';
import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
import { SettingsCard } from '@/settings/components/SettingsCard';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
import { NameField } from '@/settings/workspace/components/NameField';
import { ToggleImpersonate } from '@/settings/workspace/components/ToggleImpersonate';
import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
import { SettingsPath } from '@/types/SettingsPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
export const SettingsWorkspace = () => {
const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
const { t } = useLingui();
const currentWorkspace = useRecoilValue(currentWorkspaceState);
return (
<SubMenuTopBarContainer
title={t`General`}
links={[
{
children: t`Workspace`,
href: getSettingsPath(SettingsPath.Workspace),
},
{ children: t`General` },
]}
>
<SettingsPageContainer>
<Section>
<H2Title title={t`Picture`} />
<WorkspaceLogoUploader />
</Section>
<Section>
<H2Title title={t`Name`} description={t`Name of your workspace`} />
<NameField />
</Section>
{isMultiWorkspaceEnabled && (
<>
<Section>
<H2Title
title={t`Domain`}
description={t`Edit your subdomain name or set a custom domain.`}
/>
<UndecoratedLink to={getSettingsPath(SettingsPath.Domain)}>
<SettingsCard
title={t`Customize Domain`}
Icon={<IconWorld />}
Status={
currentWorkspace?.customDomain ? (
<Status text={'Active'} color={'turquoise'} />
) : undefined
}
/>
</UndecoratedLink>
</Section>
<Section>
<H2Title
title={t`Support`}
adornment={<ToggleImpersonate />}
description={t`Grant Twenty support temporary access to your workspace so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time.`}
/>
</Section>
</>
)}
<Section>
<DeleteWorkspace />
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
};