mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
feat(console): add third-party doc links (#5374)
add third-party docs links to AC page
This commit is contained in:
parent
5a3d48ee8a
commit
db643be188
4 changed files with 29 additions and 11 deletions
|
@ -16,3 +16,8 @@ export const newPlansBlogLink = 'https://blog.logto.io/logto-pricing-v2';
|
||||||
|
|
||||||
/** Docs link */
|
/** Docs link */
|
||||||
export const envTagsFeatureLink = '/docs/recipes/tenant-type';
|
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/';
|
||||||
|
|
|
@ -8,6 +8,7 @@ import DetailsForm from '@/components/DetailsForm';
|
||||||
import FormCard, { FormCardSkeleton } from '@/components/FormCard';
|
import FormCard, { FormCardSkeleton } from '@/components/FormCard';
|
||||||
import RequestDataError from '@/components/RequestDataError';
|
import RequestDataError from '@/components/RequestDataError';
|
||||||
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
|
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
|
||||||
|
import { logtoThirdPartyAppBrandingLink } from '@/consts';
|
||||||
import FormField from '@/ds-components/FormField';
|
import FormField from '@/ds-components/FormField';
|
||||||
import TextInput from '@/ds-components/TextInput';
|
import TextInput from '@/ds-components/TextInput';
|
||||||
import useApi from '@/hooks/use-api';
|
import useApi from '@/hooks/use-api';
|
||||||
|
@ -107,6 +108,10 @@ function Branding({ application, isActive }: Props) {
|
||||||
<FormCard
|
<FormCard
|
||||||
title="application_details.branding.name"
|
title="application_details.branding.name"
|
||||||
description="application_details.branding.description"
|
description="application_details.branding.description"
|
||||||
|
learnMoreLink={{
|
||||||
|
href: logtoThirdPartyAppBrandingLink,
|
||||||
|
targetBlank: 'noopener',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<FormField title="application_details.branding.display_name">
|
<FormField title="application_details.branding.display_name">
|
||||||
<TextInput {...register('displayName')} placeholder={application.name} />
|
<TextInput {...register('displayName')} placeholder={application.name} />
|
||||||
|
|
|
@ -11,6 +11,7 @@ import ActionsButton from '@/components/ActionsButton';
|
||||||
import Breakable from '@/components/Breakable';
|
import Breakable from '@/components/Breakable';
|
||||||
import FormCard from '@/components/FormCard';
|
import FormCard from '@/components/FormCard';
|
||||||
import TemplateTable from '@/components/TemplateTable';
|
import TemplateTable from '@/components/TemplateTable';
|
||||||
|
import { logtoThirdPartyAppPermissionsLink } from '@/consts';
|
||||||
import Tag from '@/ds-components/Tag';
|
import Tag from '@/ds-components/Tag';
|
||||||
import { type RequestError } from '@/hooks/use-api';
|
import { type RequestError } from '@/hooks/use-api';
|
||||||
|
|
||||||
|
@ -45,6 +46,10 @@ function Permissions({ application }: Props) {
|
||||||
<FormCard
|
<FormCard
|
||||||
title="application_details.permissions.name"
|
title="application_details.permissions.name"
|
||||||
description="application_details.permissions.description"
|
description="application_details.permissions.description"
|
||||||
|
learnMoreLink={{
|
||||||
|
href: logtoThirdPartyAppPermissionsLink,
|
||||||
|
targetBlank: 'noopener',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<TemplateTable
|
<TemplateTable
|
||||||
className={styles.permissionsModal}
|
className={styles.permissionsModal}
|
||||||
|
|
|
@ -3,7 +3,6 @@ import {
|
||||||
type ApplicationResponse,
|
type ApplicationResponse,
|
||||||
type SnakeCaseOidcConfig,
|
type SnakeCaseOidcConfig,
|
||||||
} from '@logto/schemas';
|
} from '@logto/schemas';
|
||||||
import { conditional } from '@silverhand/essentials';
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { FormProvider, useForm } from 'react-hook-form';
|
import { FormProvider, useForm } from 'react-hook-form';
|
||||||
import { toast } from 'react-hot-toast';
|
import { toast } from 'react-hot-toast';
|
||||||
|
@ -17,7 +16,7 @@ import DetailsForm from '@/components/DetailsForm';
|
||||||
import DetailsPageHeader from '@/components/DetailsPage/DetailsPageHeader';
|
import DetailsPageHeader from '@/components/DetailsPage/DetailsPageHeader';
|
||||||
import Drawer from '@/components/Drawer';
|
import Drawer from '@/components/Drawer';
|
||||||
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
|
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
|
||||||
import { ApplicationDetailsTabs } from '@/consts';
|
import { ApplicationDetailsTabs, logtoThirdPartyGuideLink } from '@/consts';
|
||||||
import DeleteConfirmModal from '@/ds-components/DeleteConfirmModal';
|
import DeleteConfirmModal from '@/ds-components/DeleteConfirmModal';
|
||||||
import TabNav, { TabNavItem } from '@/ds-components/TabNav';
|
import TabNav, { TabNavItem } from '@/ds-components/TabNav';
|
||||||
import TabWrapper from '@/ds-components/TabWrapper';
|
import TabWrapper from '@/ds-components/TabWrapper';
|
||||||
|
@ -110,15 +109,19 @@ function ApplicationDetailsContent({ data, oidcConfig, onApplicationUpdated }: P
|
||||||
: t(`${applicationTypeI18nKey[data.type]}.title`)
|
: t(`${applicationTypeI18nKey[data.type]}.title`)
|
||||||
}
|
}
|
||||||
identifier={{ name: 'App ID', value: data.id }}
|
identifier={{ name: 'App ID', value: data.id }}
|
||||||
additionalActionButton={conditional(
|
additionalActionButton={{
|
||||||
!data.isThirdParty && {
|
title: 'application_details.check_guide',
|
||||||
title: 'application_details.check_guide',
|
icon: <File />,
|
||||||
icon: <File />,
|
onClick: () => {
|
||||||
onClick: () => {
|
// Open IdP docs link in new tab if it's a third party app
|
||||||
setIsReadmeOpen(true);
|
if (data.isThirdParty) {
|
||||||
},
|
window.open(logtoThirdPartyGuideLink, '_blank');
|
||||||
}
|
return;
|
||||||
)}
|
}
|
||||||
|
|
||||||
|
setIsReadmeOpen(true);
|
||||||
|
},
|
||||||
|
}}
|
||||||
actionMenuItems={[
|
actionMenuItems={[
|
||||||
{
|
{
|
||||||
type: 'danger',
|
type: 'danger',
|
||||||
|
|
Loading…
Reference in a new issue