From 926da108e86d05450edf3b2992b00ca072fb30bc Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Fri, 15 Sep 2023 09:57:41 +0800 Subject: [PATCH] fix(console): should display custom domain as alternative endpoint in app details and guides (#4501) fix(console): should display custom domain as alternative endpoint in app guide and details --- .../ConnectorForm/ConfigForm/index.tsx | 9 ++---- .../console/src/hooks/use-custom-domain.ts | 32 +++++++++++++------ .../components/AdvancedSettings.tsx | 14 +++----- .../components/AppGuide/index.tsx | 6 ++-- .../components/Settings.tsx | 4 ++- packages/console/src/utils/domain.ts | 1 - 6 files changed, 35 insertions(+), 31 deletions(-) delete mode 100644 packages/console/src/utils/domain.ts diff --git a/packages/console/src/components/ConnectorForm/ConfigForm/index.tsx b/packages/console/src/components/ConnectorForm/ConfigForm/index.tsx index f88945d12..576c29676 100644 --- a/packages/console/src/components/ConnectorForm/ConfigForm/index.tsx +++ b/packages/console/src/components/ConnectorForm/ConfigForm/index.tsx @@ -12,7 +12,6 @@ import DynamicT from '@/ds-components/DynamicT'; import FormField from '@/ds-components/FormField'; import useCustomDomain from '@/hooks/use-custom-domain'; import type { ConnectorFormType } from '@/types/connector'; -import { applyDomain } from '@/utils/domain'; import { jsonValidator } from '@/utils/validator'; import ConfigFormFields from './ConfigFormFields'; @@ -32,7 +31,7 @@ function ConfigForm({ formItems, className, connectorId, connectorType }: Props) formState: { errors }, } = useFormContext(); const { tenantEndpoint } = useContext(AppDataContext); - const { data: customDomain } = useCustomDomain(); + const { data: customDomain, applyDomain: applyCustomDomain } = useCustomDomain(); const callbackUri = new URL(`/callback/${connectorId}`, tenantEndpoint).toString(); return ( @@ -45,11 +44,7 @@ function ConfigForm({ formItems, className, connectorId, connectorType }: Props) {customDomain?.status === DomainStatus.Active && tenantEndpoint && (
diff --git a/packages/console/src/hooks/use-custom-domain.ts b/packages/console/src/hooks/use-custom-domain.ts index f17dbbcd5..99a89e562 100644 --- a/packages/console/src/hooks/use-custom-domain.ts +++ b/packages/console/src/hooks/use-custom-domain.ts @@ -1,9 +1,11 @@ -import { type Domain } from '@logto/schemas'; +import { DomainStatus, type Domain } from '@logto/schemas'; import { conditional } from '@silverhand/essentials'; +import { useCallback, useMemo } from 'react'; import useSWR from 'swr'; import { customDomainSyncInterval } from '@/consts/custom-domain'; import { isCloud } from '@/consts/env'; +import { isAbsoluteUrl } from '@/utils/url'; import { type RequestError } from './use-api'; @@ -22,18 +24,30 @@ const useCustomDomain = (autoSync = false) => { /** * Note: we can only create a custom domain, and we don't have a default id for it, so the first element of the array is the custom domain. */ - const customDomain = conditional(!isLoading && data)?.[0]; + const customDomain = useMemo(() => data?.[0], [data]); + + const mutateDomain = useCallback( + (domain?: Domain) => { + void mutate(domain ? [domain] : undefined); + }, + [mutate] + ); + + const applyDomain = useCallback( + (url: string) => { + if (customDomain?.status !== DomainStatus.Active || !isAbsoluteUrl(url)) { + return url; + } + return url.replace(new URL(url).host, customDomain.domain); + }, + [customDomain] + ); return { data: customDomain, isLoading, - mutate: (domain?: Domain) => { - if (domain) { - void mutate([domain]); - return; - } - void mutate(); - }, + mutate: mutateDomain, + applyDomain, }; }; diff --git a/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx b/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx index f572db3a4..16ab5a8d3 100644 --- a/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx +++ b/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx @@ -20,7 +20,6 @@ import Switch from '@/ds-components/Switch'; import TextInput from '@/ds-components/TextInput'; import TextLink from '@/ds-components/TextLink'; import useCustomDomain from '@/hooks/use-custom-domain'; -import { applyDomain } from '@/utils/domain'; import * as styles from '../index.module.scss'; @@ -44,10 +43,7 @@ function AdvancedSettings({ app: { type }, oidcConfig }: Props) { min: minTtl, max: maxTtl, }); - const { data: customDomain } = useCustomDomain(); - - const tryApplyCustomDomain = (url: string) => - customDomain?.status === DomainStatus.Active ? applyDomain(url, customDomain.domain) : url; + const { data: customDomain, applyDomain: applyCustomDomain } = useCustomDomain(); return ( @@ -84,21 +80,21 @@ function AdvancedSettings({ app: { type }, oidcConfig }: Props) { > diff --git a/packages/console/src/pages/ApplicationDetails/components/AppGuide/index.tsx b/packages/console/src/pages/ApplicationDetails/components/AppGuide/index.tsx index acf583a6c..bea7d984a 100644 --- a/packages/console/src/pages/ApplicationDetails/components/AppGuide/index.tsx +++ b/packages/console/src/pages/ApplicationDetails/components/AppGuide/index.tsx @@ -21,8 +21,6 @@ function AppGuide({ className, guideId, app, isCompact, onClose }: Props) { const isCustomDomainActive = customDomain?.status === DomainStatus.Active; const guide = guides.find(({ id }) => id === guideId); - const GuideComponent = guide?.Component; - const memorizedContext = useMemo( () => conditional( @@ -32,7 +30,7 @@ function AppGuide({ className, guideId, app, isCompact, onClose }: Props) { Logo: guide.Logo, app, endpoint: tenantEndpoint?.toString() ?? '', - alternativeEndpoint: conditional(isCustomDomainActive && tenantEndpoint?.toString()), + alternativeEndpoint: conditional(isCustomDomainActive && customDomain.domain), redirectUris: app.oidcClientMetadata.redirectUris, postLogoutRedirectUris: app.oidcClientMetadata.postLogoutRedirectUris, isCompact: Boolean(isCompact), @@ -42,7 +40,7 @@ function AppGuide({ className, guideId, app, isCompact, onClose }: Props) { }, } ) satisfies GuideContextType | undefined, - [guide, app, tenantEndpoint, isCustomDomainActive, isCompact] + [guide, app, tenantEndpoint, isCustomDomainActive, customDomain?.domain, isCompact] ); return memorizedContext ? ( diff --git a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx index 4a1f631df..6b43ed478 100644 --- a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx +++ b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx @@ -17,6 +17,7 @@ import { } from '@/ds-components/MultiTextInput/utils'; import TextInput from '@/ds-components/TextInput'; import TextLink from '@/ds-components/TextLink'; +import useCustomDomain from '@/hooks/use-custom-domain'; import useDocumentationUrl from '@/hooks/use-documentation-url'; import * as styles from '../index.module.scss'; @@ -27,6 +28,7 @@ type Props = { function Settings({ data }: Props) { const { tenantEndpoint } = useContext(AppDataContext); + const { applyDomain: applyCustomDomain } = useCustomDomain(); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { getDocumentationUrl } = useDocumentationUrl(); @@ -62,7 +64,7 @@ function Settings({ data }: Props) { {tenantEndpoint && ( diff --git a/packages/console/src/utils/domain.ts b/packages/console/src/utils/domain.ts deleted file mode 100644 index 1e30d6b21..000000000 --- a/packages/console/src/utils/domain.ts +++ /dev/null @@ -1 +0,0 @@ -export const applyDomain = (url: string, domain: string) => url.replace(new URL(url).host, domain);