refactor(console): add tooltips (#1457)

packages/console/src/pages/ApiResources/components/CreateForm/index.tsx

@@ -61,7 +61,11 @@ const CreateForm = ({ onClose }: Props) => {
             placeholder={t('api_resources.api_name_placeholder')}
           />
         </FormField>
-        <FormField isRequired title="admin_console.api_resources.api_identifier">
+        <FormField
+          isRequired
+          title="admin_console.api_resources.api_identifier"
+          tooltip="admin_console.api_resources.api_identifier_tip"
+        >
           <TextInput
             {...register('indicator', { required: true })}
             placeholder={t('api_resources.api_identifier_placeholder')}

packages/console/src/pages/ApplicationDetails/components/Settings.tsx

@@ -66,6 +66,7 @@ const Settings = ({ applicationType, oidcConfig, defaultData }: Props) => {
       <FormField
         title="admin_console.application_details.authorization_endpoint"
         className={styles.textField}
+        tooltip="admin_console.application_details.authorization_endpoint_tip"
       >
         <CopyToClipboard
           className={styles.textField}
@@ -77,6 +78,7 @@ const Settings = ({ applicationType, oidcConfig, defaultData }: Props) => {
         isRequired
         title="admin_console.application_details.redirect_uri"
         className={styles.textField}
+        tooltip="admin_console.application_details.redirect_uri_tip"
       >
         <Controller
           name="oidcClientMetadata.redirectUris"
@@ -106,6 +108,7 @@ const Settings = ({ applicationType, oidcConfig, defaultData }: Props) => {
       <FormField
         title="admin_console.application_details.post_sign_out_redirect_uri"
         className={styles.textField}
+        tooltip="admin_console.application_details.post_sign_out_redirect_uri_tip"
       >
         <Controller
           name="oidcClientMetadata.postLogoutRedirectUris"

packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx

@@ -46,7 +46,10 @@ const LanguagesForm = () => {
         />
       </FormField>
       {mode === LanguageMode.Auto && (
-        <FormField title="admin_console.sign_in_exp.others.languages.fallback_language">
+        <FormField
+          title="admin_console.sign_in_exp.others.languages.fallback_language"
+          tooltip="admin_console.sign_in_exp.others.languages.fallback_language_tip"
+        >
           <Controller
             name="languageInfo.fallbackLanguage"
             control={control}

packages/console/src/pages/UserDetails/components/UserSettings.tsx

@@ -129,6 +129,7 @@ const UserSettings = ({ userData, userFormData, onUserUpdated }: Props) => {
           isRequired
           title="admin_console.user_details.field_custom_data"
           className={styles.textField}
+          tooltip="admin_console.user_details.field_custom_data_tip"
         >
           <CodeEditor language="json" value={value} onChange={onChange} />
         </FormField>

packages/phrases/src/locales/en.ts

@@ -130,14 +130,21 @@ const translation = {
       description: 'Description',
       description_placeholder: 'Enter your application description',
       authorization_endpoint: 'Authorization endpoint',
+      authorization_endpoint_tip:
+        "The endpoint to perform authentication and authorization. It's used for OpenID Connect Authentication.",
       redirect_uri: 'Redirect URIs',
       redirect_uri_placeholder: 'https://your.website.com/app',
       redirect_uri_placeholder_native: 'io.logto://callback',
+      redirect_uri_tip:
+        'The URI redirects after a user sign-in (whether successful or not). See OpenID Connect AuthRequest for more info.',
       post_sign_out_redirect_uri: 'Post Sign-out Redirect URIs',
       post_sign_out_redirect_uri_placeholder: 'https://your.website.com/home',
+      post_sign_out_redirect_uri_tip:
+        'The URI redirects after a user sign-out (optional). It may have no practical effect in some app types.',
       cors_allowed_origins: 'CORS allowed origins',
       cors_allowed_origins_placeholder: 'https://your.website.com',
-      cors_allowed_origins_tip: 'By default, all the origins of Redirect URIs will be allowed.',
+      cors_allowed_origins_tip:
+        'By default, all the origins of Redirect URIs will be allowed. Usually no action is required for this field.',
       add_another: 'Add Another',
       id_token_expiration: 'ID Token expiration',
       refresh_token_expiration: 'Refresh Token expiration',
@@ -156,6 +163,8 @@ const translation = {
       api_name: 'API name',
       api_name_placeholder: 'Enter your API name',
       api_identifier: 'API identifier',
+      api_identifier_tip:
+        'The unique identifier to the API resource. It must be an absolute URI and has no fragment (#) component. Equals to the resource parameter in OAuth 2.0.',
       api_resource_created: 'The API resource {{name}} has been successfully created',
       api_identifier_placeholder: 'https://your-api-identifier/',
     },
@@ -283,6 +292,8 @@ const translation = {
       field_avatar: 'Avatar image URL',
       field_avatar_placeholder: 'https://your.cdn.domain/avatar.png',
       field_custom_data: 'Custom data',
+      field_custom_data_tip:
+        'Additional user info not listed in the pre-defined user properties, such as user-preferred color and language.',
       field_connectors: 'Social connections',
       custom_data_invalid: 'Custom data must be a valid JSON',
       connectors: {
@@ -391,6 +402,8 @@ const translation = {
           auto: 'Auto',
           fixed: 'Fixed',
           fallback_language: 'Fallback language',
+          fallback_language_tip:
+            'Which language to fall back if Logto finds no proper language phrase-set.',
           fixed_language: 'Fixed language',
           languages: {
             english: 'English',

packages/phrases/src/locales/zh-cn.ts

@@ -126,14 +126,21 @@ const translation = {
       description: '描述',
       description_placeholder: '请输入应用描述',
       authorization_endpoint: 'Authorization Endpoint',
+      authorization_endpoint_tip:
+        '进行鉴权与授权的端点 endpoint。用于 OpenID Connect 中的鉴权流程。',
       redirect_uri: 'Redirect URIs',
       redirect_uri_placeholder: 'https://your.website.com/app',
       redirect_uri_placeholder_native: 'io.logto://callback',
+      redirect_uri_tip:
+        '在用户登录完成（不论成功与否）后重定向的目标 URI。参见 OpenID Connect AuthRequest 以了解更多。',
       post_sign_out_redirect_uri: 'Post sign out redirect URIs',
       post_sign_out_redirect_uri_placeholder: 'https://your.website.com/home',
+      post_sign_out_redirect_uri_tip:
+        '在用户登出后重定向的目标 URI（可选）。在某些应用类型中可能无实质作用。',
       cors_allowed_origins: 'CORS Allowed Origins',
       cors_allowed_origins_placeholder: 'https://your.website.com',
-      cors_allowed_origins_tip: '所有 Redirect URI 的 origin 将默认被允许。',
+      cors_allowed_origins_tip:
+        '所有 Redirect URI 的 origin 将默认被允许。通常不需要对此字段进行操作。',
       add_another: '新增',
       id_token_expiration: 'ID Token 过期时间',
       refresh_token_expiration: 'Refresh Token 过期时间',
@@ -153,6 +160,8 @@ const translation = {
       api_name_placeholder: '输入API名称',
       api_identifier: 'API Identifier',
       api_identifier_placeholder: 'https://your-api-identifier/',
+      api_identifier_tip:
+        '对于 API 资源的唯一标识符。它必须是一个绝对 URI 并没有 fragment (#) 组件。等价于 OAuth 2.0 中的 resource parameter。',
       api_resource_created: ' API 资源 {{name}} 已成功创建！',
     },
     api_resource_details: {
@@ -276,6 +285,7 @@ const translation = {
       field_avatar: '头像图片链接',
       field_avatar_placeholder: 'https://your.cdn.domain/avatar.png',
       field_custom_data: '自定义数据',
+      field_custom_data_tip: '预定义属性之外的用户信息，例如用户偏好的颜色和语言。',
       field_connectors: '社交帐号',
       custom_data_invalid: '自定义数据必须是有效的 JSON',
       connectors: {
@@ -380,6 +390,7 @@ const translation = {
           auto: '自动',
           fixed: '固定',
           fallback_language: '备用语言',
+          fallback_language_tip: '如果 Logto 找不到合适的语言包，将回退至哪种语言。',
           fixed_language: '固定语言',
           languages: {
             english: '英文',