fix(console): use consistent field tags across list page and details page (#7688)

Author: charIeszhao

packages/console/src/pages/SignInExperience/PageContent/CollectUserProfile/ProfileFieldDetails/ProfileFieldDetailsForm/index.tsx

@@ -24,7 +24,7 @@ import { collectUserProfilePathname } from '../../consts';
 import { parseResponseToFormData, parseFormDataToRequestPayload } from '../../data-parser';
 import { type ProfileFieldForm } from '../../types';
 import useI18nFieldLabel from '../../use-i18n-field-label';
-import { isBuiltInCustomProfileFieldKey } from '../../utils';
+import { getFieldTags, isBuiltInCustomProfileFieldKey } from '../../utils';
 
 import styles from './index.module.scss';
 
@@ -120,11 +120,7 @@ function ProfileFieldDetailsForm({ data }: Props) {
         title={watch('label') || getI18nLabel(data.name)}
         identifier={{
           name: t('sign_in_exp.custom_profile_fields.details.key'),
-          tags: compositionParts
-            ?.filter(({ enabled }) => enabled)
-            .map(({ name }) => (data.name === 'address' ? `address.${name}` : name)) ?? [
-            isBuiltInFieldName ? data.name : `customData.${data.name}`,
-          ],
+          tags: getFieldTags(data.name, compositionParts),
         }}
         actionMenuItems={[
           {

packages/console/src/pages/SignInExperience/PageContent/CollectUserProfile/ProfileFieldList/index.tsx

@@ -13,6 +13,7 @@ import { trySubmitSafe } from '@/utils/form';
 
 import { collectUserProfilePathname } from '../consts';
 import useI18nFieldLabel from '../use-i18n-field-label';
+import { getFieldTags } from '../utils';
 
 import styles from './index.module.scss';
 
@@ -79,11 +80,7 @@ function ProfileFieldList({ data }: Props) {
             <div className={styles.cell}>{t(`sign_in_exp.custom_profile_fields.type.${type}`)}</div>
             <div className={styles.cell}>
               <div className={styles.tags}>
-                {(
-                  config.parts
-                    ?.filter(({ enabled }) => Boolean(enabled))
-                    .map((part) => part.name) ?? [name]
-                ).map((key) => (
+                {getFieldTags(name, config.parts).map((key) => (
                   <Tag key={key} variant="cell">
                     {key}
                   </Tag>

packages/console/src/pages/SignInExperience/PageContent/CollectUserProfile/utils.ts

@@ -1,6 +1,7 @@
 import {
   builtInCustomProfileFieldKeys,
   CustomProfileFieldType,
+  type FieldPart,
   userProfileAddressKeys,
 } from '@logto/schemas';
 
@@ -48,3 +49,19 @@ export const getProfileFieldTypeByName = (name: string): CustomProfileFieldType
     }
   }
 };
+
+/**
+ * Generates field tags based on the field name and its composition parts.
+ * For address fields, it prefixes the field name with 'address.'.
+ * For custom fields, it prefixes with 'customData.'.
+ * Other built-in fields are used as-is.
+ */
+export const getFieldTags = (fieldName: string, compositionParts?: FieldPart[]): string[] => {
+  if (compositionParts) {
+    return compositionParts
+      .filter(({ enabled }) => enabled)
+      .map(({ name }) => (fieldName === 'address' ? `address.${name}` : name));
+  }
+
+  return isBuiltInCustomProfileFieldKey(fieldName) ? [fieldName] : [`customData.${fieldName}`];
+};