refactor(console): update tips for connector redirect uris (#7815)

Author: xiaoyijun

packages/console/src/components/ConnectorForm/ConfigForm/index.tsx

@@ -3,13 +3,17 @@ import { ConnectorType } from '@logto/connector-kit';
 import { appendPath, conditional } from '@silverhand/essentials';
 import { useContext } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
+import { isCloud } from '@/consts/env';
+import { customDomainFeatureLink } from '@/consts/external-links';
 import { AppDataContext } from '@/contexts/AppDataProvider';
 import CodeEditor from '@/ds-components/CodeEditor';
 import CopyToClipboard from '@/ds-components/CopyToClipboard';
 import FormField from '@/ds-components/FormField';
+import TextLink from '@/ds-components/TextLink';
 import useAvailableDomains from '@/hooks/use-available-domains';
+import useDocumentationUrl from '@/hooks/use-documentation-url';
 import type { ConnectorFormType } from '@/types/connector';
 import { applyDomain } from '@/utils/url';
 import { jsonValidator } from '@/utils/validator';
@@ -46,13 +50,38 @@ function ConfigForm({
   const isSamlConnector = connectorFactoryId === 'saml';
   // This is an auto-generated URL serve as the connector's internal property and should be configured on the identity provider side.
   const displayUrl = isSamlConnector ? acsUrl : callbackUri;
+  const { getDocumentationUrl } = useDocumentationUrl();
 
   return (
     <div className={className}>
       {connectorType === ConnectorType.Social && displayUrl && (
         <FormField
           title={isSamlConnector ? 'connectors.guide.acs_url' : 'connectors.guide.callback_uri'}
-          tip={conditional(!isSamlConnector && t('connectors.guide.callback_uri_description'))}
+          tip={conditional(
+            !isSamlConnector &&
+              ((closeTipHandler) => (
+                <>
+                  <p>{t('connectors.guide.callback_uri_description')}</p>
+                  {isCloud && (
+                    <p>
+                      <Trans
+                        components={{
+                          a: (
+                            <TextLink
+                              href={getDocumentationUrl(customDomainFeatureLink)}
+                              targetBlank="noopener"
+                              onClick={closeTipHandler}
+                            />
+                          ),
+                        }}
+                      >
+                        {t('connectors.guide.callback_uri_custom_domain_description')}
+                      </Trans>
+                    </p>
+                  )}
+                </>
+              ))
+          )}
         >
           <div className={styles.callbackUriContent}>
             {availableDomains.map((domain) => (

packages/console/src/pages/EnterpriseSsoDetails/Connection/ServiceProviderInfo/OidcConnectorSpInfo.tsx

@@ -1,8 +1,11 @@
 import { useContext } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
+import { isCloud } from '@/consts/env';
 import { AppDataContext } from '@/contexts/AppDataProvider';
 import CopyToClipboard from '@/ds-components/CopyToClipboard';
 import FormField from '@/ds-components/FormField';
+import TextLink from '@/ds-components/TextLink';
 import useAvailableDomains from '@/hooks/use-available-domains';
 import { applyDomain } from '@/utils/url';
 
@@ -12,12 +15,39 @@ type Props = {
   readonly ssoConnectorId: string;
 };
 
+const customDomainSettingsLink = 'https://cloud.logto.io/to/tenant-settings/domains';
+
 function OidcConnectorSpInfo({ ssoConnectorId }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { tenantEndpoint } = useContext(AppDataContext);
   const availableDomains = useAvailableDomains();
 
   return (
-    <FormField title="enterprise_sso.basic_info.oidc.redirect_uri_field_name">
+    <FormField
+      title="enterprise_sso.basic_info.oidc.redirect_uri_field_name"
+      tip={(closeTipHandler) => (
+        <>
+          <p>{t('enterprise_sso.basic_info.oidc.redirect_uri_field_description')}</p>
+          {isCloud && (
+            <p>
+              <Trans
+                components={{
+                  a: (
+                    <TextLink
+                      href={customDomainSettingsLink}
+                      targetBlank="noopener"
+                      onClick={closeTipHandler}
+                    />
+                  ),
+                }}
+              >
+                {t('enterprise_sso.basic_info.oidc.redirect_uri_field_custom_domain_description')}
+              </Trans>
+            </p>
+          )}
+        </>
+      )}
+    >
       {/* Generated and passed in by Admin console. */}
       <div className={styles.uriContent}>
         {availableDomains.map((domain) => (

packages/phrases/src/locales/ar/translation/admin-console/connectors.ts

@@ -63,9 +63,11 @@ const connectors = {
       description:
         'تخزين رموز الوصول والتحديث في المخزن السري. يتيح مكالمات API تلقائية دون موافقة المستخدم المتكررة. مثال: دع وكيل الذكاء الاصطناعي الخاص بك يضيف أحداثًا إلى تقويم Google بتفويض دائم. <a>تعلم كيفية استدعاء واجهات برمجة التطبيقات للطرف الثالث</a>',
     },
-    callback_uri: 'عنوان URI للرد',
+    callback_uri: 'عنوان URI لإعادة التوجيه (عنوان URI للرد)',
     callback_uri_description:
-      'يُطلق عليه أيضًا اسم عنوان URI للتوجيه ، وهو عنوان URI في Logto الذي سيتم إرسال المستخدمين إليه بعد المصادقة الاجتماعية ، قم بنسخه ولصقه في صفحة تكوين مزود الخدمة الاجتماعية.',
+      'عنوان URI لإعادة التوجيه هو الوجهة التي يُعاد توجيه المستخدمين إليها بعد التفويض عبر وسائل التواصل الاجتماعي. أضف هذا العنوان إلى إعدادات موفر الهوية (IdP) الخاص بك.',
+    callback_uri_custom_domain_description:
+      'إذا كنت تستخدم عدة <a>نطاقات مخصصة</a> في Logto، فتأكد من إضافة جميع عناوين URI لرد الاتصال المقابلة إلى موفر الهوية لديك لضمان عمل تسجيل الدخول الاجتماعي عبر كل نطاق.\n\nيظل نطاق Logto الافتراضي (*.logto.app) صالحًا دائمًا؛ قم بتضمينه فقط إذا كنت ترغب أيضًا في دعم تسجيلات الدخول تحت ذلك النطاق.',
     acs_url: 'عنوان URL لخدمة استهلاك الادعاء',
   },
   platform: {

packages/phrases/src/locales/ar/translation/admin-console/enterprise-sso.ts

@@ -35,6 +35,10 @@ const enterprise_sso = {
     },
     oidc: {
       redirect_uri_field_name: 'عنوان URL لإعادة التوجيه (عنوان URL للرد)',
+      redirect_uri_field_description:
+        'عنوان URI لإعادة التوجيه هو الوجهة التي يُعاد توجيه المستخدمين إليها بعد مصادقة SSO. أضف هذا العنوان إلى إعدادات موفر الهوية (IdP) الخاص بك.',
+      redirect_uri_field_custom_domain_description:
+        'إذا كنت تستخدم عدة <a>نطاقات مخصصة</a> في Logto، فتأكد من إضافة جميع عناوين URI لرد الاتصال المقابلة إلى موفر الهوية لديك لضمان عمل تسجيل الدخول الأحادي (SSO) عبر كل نطاق.\n\nيظل نطاق Logto الافتراضي (*.logto.app) صالحًا دائمًا؛ قم بتضمينه فقط إذا كنت ترغب أيضًا في دعم SSO ضمن ذلك النطاق.',
     },
   },
   attribute_mapping: {

packages/phrases/src/locales/de/translation/admin-console/connectors.ts

@@ -64,9 +64,11 @@ const connectors = {
       description:
         'Speichern Sie Zugriffs- und Auffrischungstokens im Secret Vault. Ermöglicht automatisierte API-Aufrufe ohne wiederholte Zustimmung der Benutzer. Beispiel: Lassen Sie Ihren AI-Agenten Ereignisse mit dauerhafter Genehmigung zu Google Kalender hinzufügen. <a>Erfahren Sie, wie man Drittanbieter-APIs aufruft</a>',
     },
-    callback_uri: 'Callback-URI',
+    callback_uri: 'Redirect-URI (Callback-URI)',
     callback_uri_description:
-      'Auch als Redirect-URI bezeichnet, ist die URI in Logto, zu der Benutzer nach der Social-Autorisierung zurückgesendet werden. Kopieren und fügen Sie sie in die Konfigurationsseite des Social Providers ein.',
+      'Die Redirect-URI ist die Adresse, zu der Benutzer nach der Social-Autorisierung zurückgeleitet werden. Fügen Sie diese URI zur Konfiguration Ihres IdP hinzu.',
+    callback_uri_custom_domain_description:
+      'Wenn Sie in Logto mehrere <a>benutzerdefinierte Domains</a> verwenden, fügen Sie alle entsprechenden Callback-URIs zu Ihrem IdP hinzu, damit Social Login in jeder Domain funktioniert.\n\nDie standardmäßige Logto-Domain (*.logto.app) ist immer gültig - fügen Sie sie nur hinzu, wenn Sie auch Anmeldungen unter dieser Domain unterstützen möchten.',
     acs_url: 'Assertion Consumer Service URL',
   },
   platform: {

packages/phrases/src/locales/de/translation/admin-console/enterprise-sso.ts

@@ -35,6 +35,10 @@ const enterprise_sso = {
     },
     oidc: {
       redirect_uri_field_name: 'Weiterleitungs-URI (Callback-URL)',
+      redirect_uri_field_description:
+        'Die Redirect-URI ist die Adresse, zu der Benutzer nach der SSO-Authentifizierung zurückgeleitet werden. Fügen Sie diese URI zur Konfiguration Ihres IdP hinzu.',
+      redirect_uri_field_custom_domain_description:
+        'Wenn Sie in Logto mehrere <a>benutzerdefinierte Domains</a> verwenden, fügen Sie alle entsprechenden Callback-URIs zu Ihrem IdP hinzu, damit SSO in jeder Domain funktioniert.\n\nDie standardmäßige Logto-Domain (*.logto.app) ist immer gültig – fügen Sie sie nur hinzu, wenn Sie auch SSO unter dieser Domain unterstützen möchten.',
     },
   },
   attribute_mapping: {

packages/phrases/src/locales/en/translation/admin-console/connectors.ts

@@ -63,9 +63,11 @@ const connectors = {
       description:
         'Store access and refresh tokens in the Secret Vault. Allows automated API calls without repeated user consent. Example: let your AI Agent add events to Google Calendar with persistent authorization. <a>Learn how to call third-party APIs</a>',
     },
-    callback_uri: 'Callback URI',
+    callback_uri: 'Redirect URI (Callback URI)',
     callback_uri_description:
-      "Also called redirect URI, is the URI in Logto where users will be sent back after social authorization, copy and paste to the social provider's config page.",
+      "Redirect URI is where users are redirected after social authorization. Add this URI to your IdP's configuration.",
+    callback_uri_custom_domain_description:
+      'If you use multiple <a>custom domains</a> in Logto, be sure to add all corresponding callback URIs to your IdP to make social login work across every domain.\n\nThe default Logto domain (*.logto.app) is always valid — include it only if you also wish to support logins under that domain.',
     acs_url: 'Assertion consumer service URL',
   },
   platform: {

packages/phrases/src/locales/en/translation/admin-console/enterprise-sso.ts

@@ -36,6 +36,10 @@ const enterprise_sso = {
     },
     oidc: {
       redirect_uri_field_name: 'Redirect URI (Callback URL)',
+      redirect_uri_field_description:
+        "Redirect URI is where users are redirected after SSO authentication. Add this URI to your IdP's configuration.",
+      redirect_uri_field_custom_domain_description:
+        'If you use multiple <a>custom domains</a> in Logto, be sure to add all corresponding callback URIs to your IdP to make SSO work across every domain.\n\nThe default Logto domain (*.logto.app) is always valid — include it only if you also wish to support SSO under that domain.',
     },
   },
   attribute_mapping: {

packages/phrases/src/locales/es/translation/admin-console/connectors.ts

@@ -64,9 +64,11 @@ const connectors = {
       description:
         'Almacene tokens de acceso y actualización en el Secret Vault. Permite llamadas API automatizadas sin un consentimiento repetido del usuario. Ejemplo: permite que tu agente de IA agregue eventos a Google Calendar con autorización persistente. <a>Aprende a llamar a APIs de terceros</a>',
     },
-    callback_uri: 'URI de devolución de llamada',
+    callback_uri: 'URI de redirección (URI de devolución de llamada)',
     callback_uri_description:
-      'También llamado URI de redireccionamiento, es la URI en Logto a la que se enviarán los usuarios después de la autorización social, copie y pegue en la página de configuración del proveedor social.',
+      'La URI de redirección es donde se redirige a los usuarios tras la autorización social. Añade esta URI a la configuración de tu IdP.',
+    callback_uri_custom_domain_description:
+      'Si usas varios <a>dominios personalizados</a> en Logto, asegúrate de añadir todas las URI de callback correspondientes a tu IdP para que el inicio de sesión social funcione en cada dominio.\n\nEl dominio predeterminado de Logto (*.logto.app) siempre es válido; inclúyelo solo si también deseas admitir inicios de sesión bajo ese dominio.',
     acs_url: 'URL del servicio de consumo de afirmaciones',
   },
   platform: {

packages/phrases/src/locales/es/translation/admin-console/enterprise-sso.ts

@@ -36,6 +36,10 @@ const enterprise_sso = {
     },
     oidc: {
       redirect_uri_field_name: 'URI de redireccionamiento (URL de devolución de llamada)',
+      redirect_uri_field_description:
+        'La URI de redirección es donde se redirige a los usuarios tras la autenticación SSO. Añade esta URI a la configuración de tu IdP.',
+      redirect_uri_field_custom_domain_description:
+        'Si usas varios <a>dominios personalizados</a> en Logto, asegúrate de añadir todas las URI de callback correspondientes a tu IdP para que el SSO funcione en cada dominio.\n\nEl dominio predeterminado de Logto (*.logto.app) siempre es válido; inclúyelo solo si también deseas admitir SSO bajo ese dominio.',
     },
   },
   attribute_mapping: {