feat(console): add third-party doc links (#5374)

add third-party docs links to AC page

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

@@ -16,3 +16,8 @@ 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 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/';

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

@@ -8,6 +8,7 @@ import DetailsForm from '@/components/DetailsForm';
 import FormCard, { FormCardSkeleton } from '@/components/FormCard';
 import RequestDataError from '@/components/RequestDataError';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
+import { logtoThirdPartyAppBrandingLink } from '@/consts';
 import FormField from '@/ds-components/FormField';
 import TextInput from '@/ds-components/TextInput';
 import useApi from '@/hooks/use-api';
@@ -107,6 +108,10 @@ function Branding({ application, isActive }: Props) {
           <FormCard
             title="application_details.branding.name"
             description="application_details.branding.description"
+            learnMoreLink={{
+              href: logtoThirdPartyAppBrandingLink,
+              targetBlank: 'noopener',
+            }}
           >
             <FormField title="application_details.branding.display_name">
               <TextInput {...register('displayName')} placeholder={application.name} />

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

@@ -11,6 +11,7 @@ import ActionsButton from '@/components/ActionsButton';
 import Breakable from '@/components/Breakable';
 import FormCard from '@/components/FormCard';
 import TemplateTable from '@/components/TemplateTable';
+import { logtoThirdPartyAppPermissionsLink } from '@/consts';
 import Tag from '@/ds-components/Tag';
 import { type RequestError } from '@/hooks/use-api';
 
@@ -45,6 +46,10 @@ function Permissions({ application }: Props) {
       <FormCard
         title="application_details.permissions.name"
         description="application_details.permissions.description"
+        learnMoreLink={{
+          href: logtoThirdPartyAppPermissionsLink,
+          targetBlank: 'noopener',
+        }}
       >
         <TemplateTable
           className={styles.permissionsModal}

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

@@ -3,7 +3,6 @@ import {
   type ApplicationResponse,
   type SnakeCaseOidcConfig,
 } from '@logto/schemas';
-import { conditional } from '@silverhand/essentials';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -17,7 +16,7 @@ import DetailsForm from '@/components/DetailsForm';
 import DetailsPageHeader from '@/components/DetailsPage/DetailsPageHeader';
 import Drawer from '@/components/Drawer';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
-import { ApplicationDetailsTabs } from '@/consts';
+import { ApplicationDetailsTabs, logtoThirdPartyGuideLink } from '@/consts';
 import DeleteConfirmModal from '@/ds-components/DeleteConfirmModal';
 import TabNav, { TabNavItem } from '@/ds-components/TabNav';
 import TabWrapper from '@/ds-components/TabWrapper';
@@ -110,15 +109,19 @@ function ApplicationDetailsContent({ data, oidcConfig, onApplicationUpdated }: P
             : t(`${applicationTypeI18nKey[data.type]}.title`)
         }
         identifier={{ name: 'App ID', value: data.id }}
-        additionalActionButton={conditional(
-          !data.isThirdParty && {
-            title: 'application_details.check_guide',
-            icon: <File />,
-            onClick: () => {
-              setIsReadmeOpen(true);
-            },
-          }
-        )}
+        additionalActionButton={{
+          title: 'application_details.check_guide',
+          icon: <File />,
+          onClick: () => {
+            // Open IdP docs link in new tab if it's a third party app
+            if (data.isThirdParty) {
+              window.open(logtoThirdPartyGuideLink, '_blank');
+              return;
+            }
+
+            setIsReadmeOpen(true);
+          },
+        }}
         actionMenuItems={[
           {
             type: 'danger',