feat(console): add update endpoint notice for custom domain (#3992)

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

@@ -19,6 +19,7 @@ type Props = {
   href?: string;
   onClick?: () => void;
   variant?: 'plain' | 'shadow';
+  hasIcon?: boolean;
   className?: string;
 };
 
@@ -29,6 +30,7 @@ function InlineNotification({
   onClick,
   severity = 'info',
   variant = 'plain',
+  hasIcon = true,
   className,
 }: Props) {
   return (
@@ -40,11 +42,13 @@ function InlineNotification({
         className
       )}
     >
-      <div className={styles.icon}>
-        {(severity === 'info' || severity === 'alert') && <Info />}
-        {severity === 'success' && <Success />}
-        {severity === 'error' && <Error />}
-      </div>
+      {hasIcon && (
+        <div className={styles.icon}>
+          {(severity === 'info' || severity === 'alert') && <Info />}
+          {severity === 'success' && <Success />}
+          {severity === 'error' && <Error />}
+        </div>
+      )}
       <div className={styles.content}>{children}</div>
       {action && href && (
         <TextLink to={href}>

packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/index.module.scss

@@ -4,3 +4,7 @@
   border: 1px solid var(--color-divider);
   border-radius: 12px;
 }
+
+.notice {
+  margin-top: _.unit(3);
+}

packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/index.tsx

@@ -1,4 +1,8 @@
 import { type Domain, DomainStatus } from '@logto/schemas';
+import { Trans, useTranslation } from 'react-i18next';
+
+import InlineNotification from '@/components/InlineNotification';
+import TextLink from '@/components/TextLink';
 
 import ActivationProcess from './ActivationProcess';
 import CustomDomainHeader from './CustomDomainHeader';
@@ -10,13 +14,32 @@ type Props = {
 };
 
 function CustomDomain({ customDomain, onDeleteCustomDomain }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
   return (
-    <div className={styles.container}>
-      <CustomDomainHeader customDomain={customDomain} onDeleteCustomDomain={onDeleteCustomDomain} />
-      {customDomain.status !== DomainStatus.Active && (
-        <ActivationProcess customDomain={customDomain} />
+    <>
+      <div className={styles.container}>
+        <CustomDomainHeader
+          customDomain={customDomain}
+          onDeleteCustomDomain={onDeleteCustomDomain}
+        />
+        {customDomain.status !== DomainStatus.Active && (
+          <ActivationProcess customDomain={customDomain} />
+        )}
+      </div>
+      {customDomain.status === DomainStatus.Active && (
+        <InlineNotification className={styles.notice} severity="success" hasIcon={false}>
+          <Trans
+            components={{
+              // TODO LOG-6298 @xiaoyijun update this link when related docs are ready.
+              a: <TextLink to="#" />,
+            }}
+          >
+            {t('domain.update_endpoint_notice', { link: t('general.learn_more') })}
+          </Trans>
+        </InlineNotification>
       )}
-    </div>
+    </>
   );
 }