feat(console): add docs link for env tag feature (#4891)

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

@@ -11,3 +11,6 @@ export const reservationLink = buildUrl('https://calendly.com/logto/30min', {
   month: new Date().toISOString().slice(0, 7),
 });
 export const trustAndSecurityLink = 'https://logto.io/trust-and-security';
+
+/** Docs link */
+export const envTagsFeatureLink = '/docs/recipes/environment-tags';

packages/console/src/pages/GetStarted/DevelopmentTenantNotification/index.module.scss

@@ -32,9 +32,4 @@
       margin-top: _.unit(1);
     }
   }
-
-  .button {
-    flex-shrink: 0;
-    background-color: transparent;
-  }
 }

packages/console/src/pages/GetStarted/DevelopmentTenantNotification/index.tsx

@@ -3,8 +3,10 @@ import { Trans, useTranslation } from 'react-i18next';
 
 import CongratsDark from '@/assets/images/congrats-dark.svg';
 import Congrats from '@/assets/images/congrats.svg';
-import Button from '@/ds-components/Button';
+import { envTagsFeatureLink } from '@/consts';
+import { LinkButton } from '@/ds-components/Button';
 import DynamicT from '@/ds-components/DynamicT';
+import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useTheme from '@/hooks/use-theme';
 
 import * as styles from './index.module.scss';
@@ -13,6 +15,7 @@ function DevelopmentTenantNotification() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const theme = useTheme();
   const Image = theme === Theme.Light ? Congrats : CongratsDark;
+  const { getDocumentationUrl } = useDocumentationUrl();
 
   return (
     <div className={styles.container}>
@@ -27,14 +30,12 @@ function DevelopmentTenantNotification() {
           <DynamicT forKey="tenants.notification.allow_pro_features_description" />
         </div>
       </div>
-      <Button
+      <LinkButton
+        targetBlank
         title="general.learn_more"
         type="outline"
-        className={styles.button}
         size="large"
-        onClick={() => {
-          // Todo - PRD-591 @xiaoyijun navigate to related posts
-        }}
+        href={getDocumentationUrl(envTagsFeatureLink)}
       />
     </div>
   );

packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantEnvironment/index.tsx

@@ -2,7 +2,9 @@ import { TenantTag } from '@logto/schemas';
 import { Trans, useTranslation } from 'react-i18next';
 
 import TenantEnvTag from '@/components/TenantEnvTag';
+import { envTagsFeatureLink } from '@/consts';
 import TextLink from '@/ds-components/TextLink';
+import useDocumentationUrl from '@/hooks/use-documentation-url';
 
 import * as styles from './index.module.scss';
 
@@ -12,6 +14,7 @@ type Props = {
 
 function TenantEnvironment({ tag }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { getDocumentationUrl } = useDocumentationUrl();
 
   return (
     <div className={styles.container}>
@@ -19,8 +22,13 @@ function TenantEnvironment({ tag }: Props) {
       <div className={styles.description}>
         <Trans
           components={{
-            // Todo PRD-591 @xiaoyijun Add related link
-            a: <TextLink href="" target="_blank" rel="noopener" />,
+            a: (
+              <TextLink
+                href={getDocumentationUrl(envTagsFeatureLink)}
+                target="_blank"
+                rel="noopener"
+              />
+            ),
           }}
         >
           {t(