From ae09f0cd57be1df6d527785dfebd3607a9b28d18 Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Tue, 7 Feb 2023 12:23:41 +0800 Subject: [PATCH] refactor(console): i18n for documentation url (#3062) --- .../AppContent/components/Sidebar/hook.tsx | 4 ++-- packages/console/src/hooks/use-documentation-url.ts | 13 ++++++++----- .../ApiResourceSettings/index.tsx | 5 ++++- .../ApplicationDetails/components/Settings.tsx | 4 +++- .../console/src/pages/ApplicationDetails/index.tsx | 4 ++-- .../components/ConnectorContent.tsx | 4 +++- .../Connectors/components/ConnectorForm/index.tsx | 4 +++- packages/console/src/pages/GetStarted/hook.ts | 9 ++++++--- .../src/pages/UserDetails/UserSettings/index.tsx | 4 +++- 9 files changed, 34 insertions(+), 17 deletions(-) diff --git a/packages/console/src/components/AppContent/components/Sidebar/hook.tsx b/packages/console/src/components/AppContent/components/Sidebar/hook.tsx index 379bae176..16bf7ddfe 100644 --- a/packages/console/src/components/AppContent/components/Sidebar/hook.tsx +++ b/packages/console/src/components/AppContent/components/Sidebar/hook.tsx @@ -48,7 +48,7 @@ export const useSidebarMenuItems = (): { const { data: { getStartedHidden }, } = useUserPreferences(); - const documentationUrl = useDocumentationUrl(); + const { documentationSiteUrl } = useDocumentationUrl(); const sections: SidebarSection[] = [ { @@ -119,7 +119,7 @@ export const useSidebarMenuItems = (): { { Icon: Document, title: 'docs', - externalLink: documentationUrl, + externalLink: documentationSiteUrl, }, ], }, diff --git a/packages/console/src/hooks/use-documentation-url.ts b/packages/console/src/hooks/use-documentation-url.ts index d2352d1c8..d9745ff12 100644 --- a/packages/console/src/hooks/use-documentation-url.ts +++ b/packages/console/src/hooks/use-documentation-url.ts @@ -8,20 +8,23 @@ enum DocumentationLanguage { Chinese = 'zh-CN', } -const documentationSiteUrl = 'https://docs.logto.io'; +const documentationSiteRoot = 'https://docs.logto.io'; const useDocumentationUrl = () => { const { i18n: { language }, } = useTranslation(); - const documentationUrl = Object.values(DocumentationLanguage) + const documentationSiteUrl = Object.values(DocumentationLanguage) .filter((language) => language !== DocumentationLanguage.English) .includes(language) - ? `${documentationSiteUrl}/${language.toLocaleLowerCase()}` - : documentationSiteUrl; + ? `${documentationSiteRoot}/${language.toLocaleLowerCase()}` + : documentationSiteRoot; - return documentationUrl; + return { + documentationSiteUrl, + getDocumentationUrl: (pagePath: string) => `${documentationSiteUrl}${pagePath}`, + }; }; export default useDocumentationUrl; diff --git a/packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx b/packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx index 2b1cc2581..8e23ead34 100644 --- a/packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx +++ b/packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx @@ -10,6 +10,7 @@ import FormField from '@/components/FormField'; import TextInput from '@/components/TextInput'; import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal'; import useApi from '@/hooks/use-api'; +import useDocumentationUrl from '@/hooks/use-documentation-url'; import type { ApiResourceDetailsOutletContext } from '../types'; @@ -18,6 +19,8 @@ const ApiResourceSettings = () => { useOutletContext(); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { getDocumentationUrl } = useDocumentationUrl(); + const { handleSubmit, register, @@ -53,7 +56,7 @@ const ApiResourceSettings = () => { { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { getDocumentationUrl } = useDocumentationUrl(); const { control, register, @@ -41,7 +43,7 @@ const Settings = ({ data }: Props) => { { const api = useApi(); const navigate = useNavigate(); const formMethods = useForm(); - const documentationUrl = useDocumentationUrl(); + const { getDocumentationUrl } = useDocumentationUrl(); const { handleSubmit, @@ -150,7 +150,7 @@ const ApplicationDetails = () => { onClick={() => { if (data.type === ApplicationType.MachineToMachine) { window.open( - `${documentationUrl}/docs/recipes/integrate-logto/machine-to-machine/`, + getDocumentationUrl('/docs/recipes/integrate-logto/machine-to-machine'), '_blank' ); diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx index ff6ed294c..d814f71de 100644 --- a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx +++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx @@ -9,6 +9,7 @@ import DetailsForm from '@/components/DetailsForm'; import FormCard from '@/components/FormCard'; import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal'; import useApi from '@/hooks/use-api'; +import useDocumentationUrl from '@/hooks/use-documentation-url'; import ConnectorForm from '@/pages/Connectors/components/ConnectorForm'; import type { ConnectorFormType } from '@/pages/Connectors/types'; import { SyncProfileMode } from '@/pages/Connectors/types'; @@ -25,6 +26,7 @@ type Props = { const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Props) => { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { getDocumentationUrl } = useDocumentationUrl(); const api = useApi(); const methods = useForm({ reValidateMode: 'onBlur', @@ -101,7 +103,7 @@ const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Prop { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { getDocumentationUrl } = useDocumentationUrl(); const { control, register, @@ -110,7 +112,7 @@ const ConnectorForm = ({ components={{ a: ( diff --git a/packages/console/src/pages/GetStarted/hook.ts b/packages/console/src/pages/GetStarted/hook.ts index 6aabccf30..e76b46fa9 100644 --- a/packages/console/src/pages/GetStarted/hook.ts +++ b/packages/console/src/pages/GetStarted/hook.ts @@ -35,7 +35,7 @@ type GetStartedMetadata = { }; const useGetStartedMetadata = () => { - const documentationUrl = useDocumentationUrl(); + const { getDocumentationUrl } = useDocumentationUrl(); const { configs, updateConfigs } = useConfigs(); const theme = useTheme(); const isLightMode = theme === AppearanceMode.LightMode; @@ -123,14 +123,17 @@ const useGetStartedMetadata = () => { isComplete: configs?.furtherReadingsChecked, onClick: () => { void updateConfigs({ furtherReadingsChecked: true }); - window.open(`${documentationUrl}/docs/tutorials/get-started/further-readings/`, '_blank'); + window.open( + getDocumentationUrl('/docs/tutorials/get-started/further-readings'), + '_blank' + ); }, }, ]; return metadataItems.filter(({ isHidden }) => !isHidden); }, [ - documentationUrl, + getDocumentationUrl, hideDemo, isLightMode, navigate, diff --git a/packages/console/src/pages/UserDetails/UserSettings/index.tsx b/packages/console/src/pages/UserDetails/UserSettings/index.tsx index 43687047c..cc49b64fc 100644 --- a/packages/console/src/pages/UserDetails/UserSettings/index.tsx +++ b/packages/console/src/pages/UserDetails/UserSettings/index.tsx @@ -12,6 +12,7 @@ import FormField from '@/components/FormField'; import TextInput from '@/components/TextInput'; import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal'; import useApi from '@/hooks/use-api'; +import useDocumentationUrl from '@/hooks/use-documentation-url'; import { safeParseJson } from '@/utilities/json'; import { uriValidator } from '@/utilities/validator'; @@ -21,6 +22,7 @@ import UserSocialIdentities from './components/UserSocialIdentities'; const UserSettings = () => { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { getDocumentationUrl } = useDocumentationUrl(); const { user, isDeleting, onUserUpdated } = useOutletContext(); @@ -87,7 +89,7 @@ const UserSettings = () => { {getValues('primaryEmail') && (