From e4e1df8fe2d0818f3917619a4800321859e75b4e Mon Sep 17 00:00:00 2001 From: panteliselef Date: Fri, 25 Aug 2023 15:33:19 +0300 Subject: [PATCH] feat(clerk-js): Add tabs to VerifiedDomainPage (#1624) * feat(clerk-js): Add tabs to VerifiedDomainPage * chore(clerk-js): Add changeset * fix(clerk-js): Avoid littering all input props with groupSuffix --- .changeset/forty-cobras-confess.md | 2 + .../OrganizationProfile/AddDomainPage.tsx | 4 +- .../OrganizationProfile/RemoveDomainPage.tsx | 2 +- .../VerifiedDomainPage.tsx | 122 +++++++++++++----- .../OrganizationProfile/VerifyDomainPage.tsx | 12 +- .../clerk-js/src/ui/elements/FormControl.tsx | 2 - packages/localizations/src/en-US.ts | 11 +- 7 files changed, 110 insertions(+), 45 deletions(-) create mode 100644 .changeset/forty-cobras-confess.md diff --git a/.changeset/forty-cobras-confess.md b/.changeset/forty-cobras-confess.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/forty-cobras-confess.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx index acf9af7c9a..472b12fd97 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx @@ -26,7 +26,7 @@ export const AddDomainPage = withCardStateProvider(() => { return null; } - const canSubmit = organization.name !== nameField.value; + const canSubmit = nameField.value.trim() !== ''; const onSubmit = (e: React.FormEvent) => { nameField.setError(undefined); @@ -35,7 +35,7 @@ export const AddDomainPage = withCardStateProvider(() => { .createDomain(nameField.value) .then(res => { if (res.verification && res.verification.status === 'verified') { - return navigate(`../domain/${res.id}`); + return navigate(`../domain/${res.id}?mode=select`); } return navigate(`../domain/${res.id}/verify`); }) diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx index 0c0cc809b5..64339007f8 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx @@ -66,7 +66,7 @@ export const RemoveDomainPage = () => { successMessage={localizationKeys('organizationProfile.removeDomainPage.successMessage', { domain: ref.current?.name, })} - deleteResource={() => domain?.delete().then((domains as any).unstable__mutate())} + deleteResource={() => domain?.delete().then(() => (domains as any).unstable__mutate())} breadcrumbTitle={localizationKeys('organizationProfile.profilePage.domainSection.title')} Breadcrumbs={OrganizationProfileBreadcrumbs} /> diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx index 08fb1293f9..70accbe037 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx @@ -2,10 +2,23 @@ import type { OrganizationEnrollmentMode } from '@clerk/types'; import { useCoreOrganization, useEnvironment } from '../../contexts'; import { Col, Flex, localizationKeys, Spinner } from '../../customizables'; -import { ContentPage, Form, FormButtons, Header, useCardState, withCardStateProvider } from '../../elements'; +import { + ContentPage, + Form, + FormButtons, + Header, + Tab, + TabPanel, + TabPanels, + Tabs, + TabsList, + useCardState, + withCardStateProvider, +} from '../../elements'; import { useFetch, useNavigateToFlowStart } from '../../hooks'; import { useRouter } from '../../router'; import { handleError, useFormControl } from '../../utils'; +import { LinkButtonWithDescription } from '../UserProfile/LinkButtonWithDescription'; import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar'; export const VerifiedDomainPage = withCardStateProvider(() => { @@ -19,7 +32,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => { }); const { navigateToFlowStart } = useNavigateToFlowStart(); const { params, navigate, queryParams } = useRouter(); - const mode = (queryParams.mode ?? 'edit') as 'select' | 'edit'; + const mode = (queryParams.mode || 'edit') as 'select' | 'edit'; const breadcrumbTitle = localizationKeys('organizationProfile.profilePage.domainSection.title'); const allowsEdit = mode === 'edit'; @@ -87,6 +100,10 @@ export const VerifiedDomainPage = withCardStateProvider(() => { ); const isFormDirty = deletePending.checked || domain?.enrollmentMode !== enrollmentMode.value; + const subtitle = localizationKeys('organizationProfile.verifiedDomainPage.subtitle', { + domain: domain?.name, + }); + const updateEnrollmentMode = async () => { if (!domain || !organization) { return; @@ -134,39 +151,82 @@ export const VerifiedDomainPage = withCardStateProvider(() => { } return ( - - - - - - - - - - - - {allowsEdit && ( - - - - )} - - - + + + + + {allowsEdit && ( + + )} + + + + + + + + + + + + {allowsEdit && ( + + + + )} + + + + + + {allowsEdit && ( + ({ + padding: `${t.space.$none} ${t.space.$4}`, + }), + ]} + > + navigate(`../../domain/${domain.id}/remove`)} + /> + + )} + + ); diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx index 9de70cd2c7..583b3bc1c9 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx @@ -14,7 +14,7 @@ import { withCardStateProvider, } from '../../elements'; import { CodeForm } from '../../elements/CodeForm'; -import { useFetch, useLoadingStatus, useNavigateToFlowStart } from '../../hooks'; +import { useFetch, useLoadingStatus } from '../../hooks'; import { useRouter } from '../../router'; import { handleError, sleep, useFormControl } from '../../utils'; import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar'; @@ -23,8 +23,7 @@ export const VerifyDomainPage = withCardStateProvider(() => { const card = useCardState(); const { organizationSettings } = useEnvironment(); const { organization } = useCoreOrganization(); - const { params } = useRouter(); - const { navigateToFlowStart } = useNavigateToFlowStart(); + const { params, navigate } = useRouter(); const [success, setSuccess] = React.useState(false); @@ -72,7 +71,7 @@ export const VerifyDomainPage = withCardStateProvider(() => { .then(async res => { await resolve(); if (res.verification?.status === 'verified') { - return navigateToFlowStart(); + return navigate(`../../../domain/${res.id}?mode=select`); } return; }) @@ -105,16 +104,17 @@ export const VerifyDomainPage = withCardStateProvider(() => { const dataChanged = organization.name !== emailField.value; const canSubmit = dataChanged; + const emailDomainSuffix = `@${domain?.name}`; const onSubmitPrepare = (e: React.FormEvent) => { e.preventDefault(); if (!domain) { return; } - affiliationEmailAddressRef.current = `${emailField.value}@${domain.name}`; + affiliationEmailAddressRef.current = `${emailField.value}${emailDomainSuffix}`; return domain .prepareAffiliationVerification({ - affiliationEmailAddress: `${emailField.value}@${domain.name}`, + affiliationEmailAddress: affiliationEmailAddressRef.current, }) .then(wizard.nextStep) .catch(err => { diff --git a/packages/clerk-js/src/ui/elements/FormControl.tsx b/packages/clerk-js/src/ui/elements/FormControl.tsx index 9161df2c6f..b541fe6951 100644 --- a/packages/clerk-js/src/ui/elements/FormControl.tsx +++ b/packages/clerk-js/src/ui/elements/FormControl.tsx @@ -385,8 +385,6 @@ export const FormControl = forwardRef