chore(console): update documentation links (#5382)

packages/console/src/consts/external-links.ts

@@ -15,9 +15,9 @@ export const pricingLink = 'https://logto.io/pricing';
 export const newPlansBlogLink = 'https://blog.logto.io/logto-pricing-v2';
 
 /** Docs link */
-export const envTagsFeatureLink = '/docs/recipes/tenant-type';
-export const logtoThirdPartyGuideLink = 'https://docs.logto.io/docs/recipes/logto-as-idp';
+export const envTagsFeatureLink = '/docs/recipes/tenant-type/';
+export const protectedAppLink = '/docs/recipes/protected-app/';
+export const logtoThirdPartyGuideLink = '/docs/recipes/logto-as-idp/';
 export const logtoThirdPartyAppPermissionsLink =
-  'https://docs.logto.io/docs/recipes/logto-as-idp/permissions-management/';
-export const logtoThirdPartyAppBrandingLink =
-  'https://docs.logto.io/docs/recipes/logto-as-idp/branding-customization/';
+  '/docs/recipes/logto-as-idp/permissions-management/';
+export const logtoThirdPartyAppBrandingLink = '/docs/recipes/logto-as-idp/branding-customization/';

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Branding/index.tsx

@@ -12,6 +12,7 @@ import { logtoThirdPartyAppBrandingLink } from '@/consts';
 import FormField from '@/ds-components/FormField';
 import TextInput from '@/ds-components/TextInput';
 import useApi from '@/hooks/use-api';
+import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useUserAssetsService from '@/hooks/use-user-assets-service';
 import { trySubmitSafe } from '@/utils/form';
 import { uriValidator } from '@/utils/validator';
@@ -28,6 +29,7 @@ type Props = {
 
 function Branding({ application, isActive }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { getDocumentationUrl } = useDocumentationUrl();
 
   const formMethods = useForm<ApplicationSignInExperience>({
     defaultValues: {
@@ -109,7 +111,7 @@ function Branding({ application, isActive }: Props) {
             title="application_details.branding.name"
             description="application_details.branding.description"
             learnMoreLink={{
-              href: logtoThirdPartyAppBrandingLink,
+              href: getDocumentationUrl(logtoThirdPartyAppBrandingLink),
               targetBlank: 'noopener',
             }}
           >

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/index.tsx

@@ -14,6 +14,7 @@ import TemplateTable from '@/components/TemplateTable';
 import { logtoThirdPartyAppPermissionsLink } from '@/consts';
 import Tag from '@/ds-components/Tag';
 import { type RequestError } from '@/hooks/use-api';
+import useDocumentationUrl from '@/hooks/use-documentation-url';
 
 import ApplicationScopesAssignmentModal from './ApplicationScopesAssignmentModal';
 import ApplicationScopesManagementModal, {
@@ -28,6 +29,7 @@ type Props = {
 
 function Permissions({ application }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { getDocumentationUrl } = useDocumentationUrl();
 
   const [isAssignScopesModalOpen, setIsAssignScopesModalOpen] = useState(false);
   const [editScopeModalData, setEditScopeModalData] = useState<EditableScopeData>();
@@ -47,7 +49,7 @@ function Permissions({ application }: Props) {
         title="application_details.permissions.name"
         description="application_details.permissions.description"
         learnMoreLink={{
-          href: logtoThirdPartyAppPermissionsLink,
+          href: getDocumentationUrl(logtoThirdPartyAppPermissionsLink),
           targetBlank: 'noopener',
         }}
       >

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx

@@ -253,9 +253,8 @@ function ProtectedAppSettings({ data }: Props) {
               components={{
                 a: (
                   <TextLink
-                    // TODO: @charles please update the doc link
                     href={getDocumentationUrl(
-                      '/docs/recipes/protect-your-api/#validate-the-api-requests-authorization-token'
+                      '/docs/recipes/protected-app/#protect-your-origin-server'
                     )}
                     targetBlank="noopener"
                   />

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/index.tsx

@@ -16,11 +16,12 @@ import DetailsForm from '@/components/DetailsForm';
 import DetailsPageHeader from '@/components/DetailsPage/DetailsPageHeader';
 import Drawer from '@/components/Drawer';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
-import { ApplicationDetailsTabs, logtoThirdPartyGuideLink } from '@/consts';
+import { ApplicationDetailsTabs, logtoThirdPartyGuideLink, protectedAppLink } from '@/consts';
 import DeleteConfirmModal from '@/ds-components/DeleteConfirmModal';
 import TabNav, { TabNavItem } from '@/ds-components/TabNav';
 import TabWrapper from '@/ds-components/TabWrapper';
 import useApi from '@/hooks/use-api';
+import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 import { applicationTypeI18nKey } from '@/types/applications';
 import { trySubmitSafe } from '@/utils/form';
@@ -46,6 +47,7 @@ function ApplicationDetailsContent({ data, oidcConfig, onApplicationUpdated }: P
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { tab } = useParams();
   const { navigate } = useTenantPathname();
+  const { getDocumentationUrl } = useDocumentationUrl();
 
   const formMethods = useForm<ApplicationForm>({
     defaultValues: applicationFormDataParser.fromResponse(data),
@@ -115,7 +117,12 @@ function ApplicationDetailsContent({ data, oidcConfig, onApplicationUpdated }: P
           onClick: () => {
             // Open IdP docs link in new tab if it's a third party app
             if (data.isThirdParty) {
-              window.open(logtoThirdPartyGuideLink, '_blank');
+              window.open(getDocumentationUrl(logtoThirdPartyGuideLink), '_blank');
+              return;
+            }
+            // Open protected app docs link in new tab
+            if (data.type === ApplicationType.Protected) {
+              window.open(getDocumentationUrl(protectedAppLink), '_blank');
               return;
             }
 

packages/console/src/pages/Applications/components/ProtectedAppCard/index.tsx

@@ -32,7 +32,7 @@ function ProtectedAppCard({
   onCreateSuccess,
 }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.protected_app' });
-  const { documentationSiteUrl } = useDocumentationUrl();
+  const { getDocumentationUrl } = useDocumentationUrl();
   const [showCreateModal, setShowCreateModal] = useState<boolean>(false);
   const theme = useTheme();
   const Icon = theme === Theme.Light ? ProtectedAppIcon : ProtectedAppDarkIcon;
@@ -53,8 +53,12 @@ function ProtectedAppCard({
             <div className={styles.description}>
               <Trans
                 components={{
-                  // TODO: @charles Update documentation URL when it's ready
-                  a: <TextLink href={documentationSiteUrl} targetBlank="noopener" />,
+                  a: (
+                    <TextLink
+                      href={getDocumentationUrl('/docs/recipes/protected-app/')}
+                      targetBlank="noopener"
+                    />
+                  ),
                 }}
               >
                 {t('description')}