feat(console): add rbac related learn more links (#3424)

packages/console/src/components/CardTitle/index.module.scss

@@ -16,6 +16,10 @@
     color: var(--color-text-secondary);
   }
 
+  .learnMore:not(:first-child) {
+    margin-left: _.unit(1);
+  }
+
   &.large {
     .title {
       font: var(--font-title-1);

packages/console/src/components/CardTitle/index.tsx

@@ -4,12 +4,14 @@ import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type DangerousRaw from '../DangerousRaw';
+import TextLink from '../TextLink';
 import * as styles from './index.module.scss';
 
-type Props = {
+export type Props = {
   title: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
   subtitle?: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
   size?: 'small' | 'medium' | 'large';
+  learnMoreLink?: string;
   isWordWrapEnabled?: boolean;
   className?: string;
 };
@@ -22,6 +24,7 @@ const CardTitle = ({
   subtitle,
   size = 'large',
   isWordWrapEnabled = false,
+  learnMoreLink,
   className,
 }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -31,9 +34,14 @@ const CardTitle = ({
       <div className={classNames(styles.title, !isWordWrapEnabled && styles.titleEllipsis)}>
         {typeof title === 'string' ? t(title) : title}
       </div>
-      {subtitle && (
+      {Boolean(subtitle ?? learnMoreLink) && (
         <div className={styles.subtitle}>
-          {typeof subtitle === 'string' ? t(subtitle) : subtitle}
+          {subtitle && <span>{typeof subtitle === 'string' ? t(subtitle) : subtitle}</span>}
+          {learnMoreLink && (
+            <TextLink href={learnMoreLink} target="_blank" className={styles.learnMore}>
+              {t('general.learn_more')}
+            </TextLink>
+          )}
         </div>
       )}
     </div>

packages/console/src/components/ModalLayout/index.tsx

@@ -1,40 +1,34 @@
-import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import Close from '@/assets/images/close.svg';
 
 import Card from '../Card';
+import type { Props as CardTitleProps } from '../CardTitle';
 import CardTitle from '../CardTitle';
-import type DangerousRaw from '../DangerousRaw';
 import IconButton from '../IconButton';
 import * as styles from './index.module.scss';
 
 type Props = {
-  title: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
-  subtitle?: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
   children: ReactNode;
   footer?: ReactNode;
   onClose?: () => void;
   className?: string;
   size?: 'medium' | 'large' | 'xlarge';
-  isTitleWordWrapEnabled?: boolean;
-};
+} & Pick<CardTitleProps, 'learnMoreLink' | 'title' | 'subtitle' | 'isWordWrapEnabled'>;
 
 const ModalLayout = ({
-  title,
-  subtitle,
   children,
   footer,
   onClose,
   className,
   size = 'medium',
-  isTitleWordWrapEnabled = false,
+  ...cardTitleProps
 }: Props) => {
   return (
     <Card className={classNames(styles.container, styles[size])}>
       <div className={styles.header}>
-        <CardTitle title={title} subtitle={subtitle} isWordWrapEnabled={isTitleWordWrapEnabled} />
+        <CardTitle {...cardTitleProps} />
         {onClose && (
           <IconButton
             onClick={() => {

packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.tsx

@@ -24,7 +24,7 @@ const GiftModal = ({ isOpen, onClose }: Props) => {
       onRequestClose={onClose}
     >
       <ModalLayout
-        isTitleWordWrapEnabled
+        isWordWrapEnabled
         title="cloud.gift.title"
         className={styles.content}
         onClose={onClose}

packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx

@@ -53,6 +53,7 @@ const CreatePermissionModal = ({ resourceId, onClose }: Props) => {
       <ModalLayout
         title="api_resource_details.permission.create_title"
         subtitle="api_resource_details.permission.create_subtitle"
+        learnMoreLink="https://docs.logto.io/docs/recipes/rbac/manage-permissions-and-roles#manage-role-permissions"
         footer={
           <Button
             isLoading={isSubmitting}

packages/console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx

@@ -55,6 +55,7 @@ const AssignPermissionsModal = ({ roleId, onClose }: Props) => {
       <ModalLayout
         title="role_details.permission.assign_title"
         subtitle="role_details.permission.assign_subtitle"
+        learnMoreLink="https://docs.logto.io/docs/recipes/rbac/manage-permissions-and-roles#manage-role-permissions"
         size="large"
         footer={
           <Button

packages/console/src/pages/RoleDetails/RoleSettings/index.tsx

@@ -46,7 +46,11 @@ const RoleSettings = () => {
         onDiscard={reset}
         onSubmit={onSubmit}
       >
-        <FormCard title="role_details.settings" description="role_details.settings_description">
+        <FormCard
+          title="role_details.settings"
+          description="role_details.settings_description"
+          learnMoreLink="https://docs.logto.io/docs/recipes/rbac/manage-permissions-and-roles#manage-roles"
+        >
           <FormField isRequired title="role_details.field_name">
             <TextInput {...register('name', { required: true })} hasError={Boolean(errors.name)} />
           </FormField>

packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx

@@ -53,6 +53,7 @@ const CreateRoleForm = ({ onClose }: Props) => {
     <ModalLayout
       title="roles.create_role_title"
       subtitle="roles.create_role_description"
+      learnMoreLink="https://docs.logto.io/docs/recipes/rbac/manage-permissions-and-roles#manage-roles"
       size="large"
       footer={
         <Button

packages/console/src/pages/Roles/index.tsx

@@ -57,7 +57,11 @@ const Roles = () => {
   return (
     <div className={pageStyles.container}>
       <div className={pageStyles.headline}>
-        <CardTitle title="roles.title" subtitle="roles.subtitle" />
+        <CardTitle
+          title="roles.title"
+          subtitle="roles.subtitle"
+          learnMoreLink="https://docs.logto.io/docs/recipes/rbac/manage-permissions-and-roles#manage-roles"
+        />
         <Button
           icon={<Plus />}
           title="roles.create"