>) => {
return renderWithContext(
@@ -55,6 +59,11 @@ describe('UserPropertyDotMenu', () => {
);
};
+ beforeEach(() => {
+ jest.clearAllMocks();
+ getFields.mockReset();
+ });
+
it('renders dot menu button', () => {
renderComponent();
@@ -221,14 +230,66 @@ describe('UserPropertyDotMenu', () => {
// Wait for createField to be called
await waitFor(() => {
- // Verify createField was called with the correct parameters
+ // Verify createField was called with the slugified snake_case name
+ // ('Test Field' -> 'test_field') plus the _copy suffix.
expect(createField).toHaveBeenCalledWith(expect.objectContaining({
id: baseField.id,
- name: 'Test Field (copy)',
+ name: 'test_field_copy',
}));
});
});
+ it('duplicate produces _2 suffix when base name is already taken', async () => {
+ const existingCopy = {
+ ...baseField,
+ id: 'copy-id',
+ name: 'test_field_copy',
+ attrs: {
+ ...baseField.attrs,
+ sort_order: 1,
+ },
+ };
+ getFields.mockResolvedValueOnce([baseField, existingCopy]);
+
+ const Harness = () => {
+ const [fields, readIO,, itemOps] = useUserPropertyFields();
+
+ if (readIO.loading || !fields.data[baseField.id]) {
+ return null;
+ }
+
+ return (
+
+
+ {fields.order.map((id) => (
+
+ {fields.data[id].name}
+
+ ))}
+
+ );
+ };
+
+ renderWithContext();
+
+ const menuButton = await screen.findByTestId(`user-property-field_dotmenu-${baseField.id}`);
+ await userEvent.click(menuButton);
+ await userEvent.click(screen.getByText(/Duplicate attribute/));
+
+ await waitFor(() => {
+ expect(screen.getByText('test_field_copy_2')).toBeInTheDocument();
+ });
+ });
+
it('hides field duplication when at field limit', async () => {
renderComponent(undefined, {canCreate: false});
diff --git a/webapp/channels/src/components/admin_console/system_properties/user_properties_dot_menu.tsx b/webapp/channels/src/components/admin_console/system_properties/user_properties_dot_menu.tsx
index 162e2d54544..eb9d08fc653 100644
--- a/webapp/channels/src/components/admin_console/system_properties/user_properties_dot_menu.tsx
+++ b/webapp/channels/src/components/admin_console/system_properties/user_properties_dot_menu.tsx
@@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import React from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
import {useDispatch} from 'react-redux';
import {CheckIcon, ChevronRightIcon, DotsHorizontalIcon, EyeOutlineIcon, LockOutlineIcon, PencilOutlineIcon, SyncIcon, TrashCanOutlineIcon, ContentCopyIcon} from '@mattermost/compass-icons/components';
@@ -14,6 +14,7 @@ import * as Menu from 'components/menu';
import Toggle from 'components/toggle';
import {ModalIdentifiers} from 'utils/constants';
+import {slugifyForCEL} from 'utils/properties';
import AttributeModal from './attribute_modal';
import {useUserPropertyFieldDelete} from './user_properties_delete_modal';
@@ -114,18 +115,13 @@ const DotMenu = ({
updateField,
deleteField,
}: Props) => {
- const {formatMessage} = useIntl();
const {promptDelete} = useUserPropertyFieldDelete();
const {promptEditLdapLink, promptEditSamlLink} = useAttributeLinkModal(field, updateField);
const isProtected = Boolean(field.attrs?.protected);
const handleDuplicate = () => {
- const name = formatMessage({
- id: 'admin.system_properties.user_properties.dotmenu.duplicate.name_copy',
- defaultMessage: '{fieldName} (copy)',
- }, {fieldName: field.name});
-
+ const name = `${slugifyForCEL(field.name)}_copy`;
createField({...field, attrs: {...field.attrs}, name});
};
diff --git a/webapp/channels/src/components/admin_console/system_properties/user_properties_table.test.tsx b/webapp/channels/src/components/admin_console/system_properties/user_properties_table.test.tsx
index 49409f4add5..32dfc3960e8 100644
--- a/webapp/channels/src/components/admin_console/system_properties/user_properties_table.test.tsx
+++ b/webapp/channels/src/components/admin_console/system_properties/user_properties_table.test.tsx
@@ -1,14 +1,19 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
+import {act} from '@testing-library/react';
import React from 'react';
import type {UserPropertyField} from '@mattermost/types/properties';
import {collectionFromArray} from '@mattermost/types/utilities';
+import {Client4} from 'mattermost-redux/client';
+
import {fireEvent, renderWithContext, screen, userEvent, waitFor} from 'tests/react_testing_utils';
+import Constants from 'utils/constants';
-import {UserPropertiesTable} from './user_properties_table';
+import {UserPropertiesTable, useUserPropertiesTable} from './user_properties_table';
+import {ValidationWarningNameInvalidCEL} from './user_properties_utils';
jest.mock('./user_properties_delete_modal', () => ({
useUserPropertyFieldDelete: jest.fn(() => ({
@@ -67,9 +72,7 @@ describe('UserPropertiesTable', () => {
const deleteField = jest.fn();
const reorderField = jest.fn();
- const renderComponent = (fields = baseFields) => {
- const collection = collectionFromArray(fields);
-
+ const renderComponent = (fields = baseFields, collection = collectionFromArray(fields)) => {
return renderWithContext(
{
renderComponent();
// Check column headers
- expect(screen.getByText('Attribute')).toBeInTheDocument();
+ expect(screen.getByText('Name')).toBeInTheDocument();
+ expect(screen.getByText('Display Name')).toBeInTheDocument();
expect(screen.getByText('Type')).toBeInTheDocument();
expect(screen.getByText('Values')).toBeInTheDocument();
expect(screen.getByText('Actions')).toBeInTheDocument();
@@ -96,6 +100,19 @@ describe('UserPropertiesTable', () => {
expect(screen.getByDisplayValue('Field 2')).toBeInTheDocument();
expect(screen.getByText('Text')).toBeInTheDocument();
expect(screen.getByText('Select')).toBeInTheDocument();
+ expect(screen.getAllByTestId('property-display-name-input')[0]).toHaveValue('');
+ });
+
+ it('shows display_name value in the Display name column', () => {
+ const fields = baseFields.map((field, index) => ({
+ ...field,
+ attrs: {...field.attrs, display_name: `Display ${index + 1}`},
+ }));
+
+ renderComponent(fields);
+
+ expect(screen.getByDisplayValue('Display 1')).toBeInTheDocument();
+ expect(screen.getByDisplayValue('Display 2')).toBeInTheDocument();
});
it('allows editing field names', async () => {
@@ -103,17 +120,28 @@ describe('UserPropertiesTable', () => {
const field1Input = screen.getByDisplayValue('Field 1');
await userEvent.clear(field1Input);
- await userEvent.type(field1Input, 'Edited Field 1');
+ await userEvent.type(field1Input, 'EditedField1');
- // Trigger blur to save the edited field name - fireEvent used because userEvent doesn't have direct focus/blur methods
fireEvent.blur(field1Input);
expect(updateField).toHaveBeenCalledWith({
...baseFields[0],
- name: 'Edited Field 1',
+ name: 'EditedField1',
});
});
+ it('calls updateField with updated display_name on blur', async () => {
+ renderComponent();
+
+ const displayNameInput = screen.getAllByTestId('property-display-name-input')[0];
+ await userEvent.type(displayNameInput, 'Department Head');
+ fireEvent.blur(displayNameInput);
+
+ expect(updateField).toHaveBeenCalledWith(expect.objectContaining({
+ attrs: expect.objectContaining({display_name: 'Department Head'}),
+ }));
+ });
+
it('shows type selection menu', () => {
renderComponent();
@@ -174,6 +202,49 @@ describe('UserPropertiesTable', () => {
});
});
+ it('shows CEL validation error for invalid identifiers', async () => {
+ const collection = collectionFromArray(baseFields);
+ collection.warnings = {
+ field1: {name: ValidationWarningNameInvalidCEL},
+ };
+
+ renderComponent(baseFields, collection);
+
+ await waitFor(() => {
+ expect(screen.getByText(/Identifier must start with a letter or underscore/)).toBeInTheDocument();
+ });
+ expect(screen.getByTestId('property-field-validation-error')).toBeInTheDocument();
+ });
+
+ it('editing display_name of a legacy invalid-named field does not fire CEL warning', async () => {
+ const legacyField = {
+ ...baseFields[0],
+ name: 'My Legacy Field',
+ };
+
+ renderComponent([legacyField]);
+
+ const displayNameInput = screen.getByTestId('property-display-name-input');
+ await userEvent.type(displayNameInput, 'Legacy Display');
+ fireEvent.blur(displayNameInput);
+
+ expect(screen.queryByText(/Identifier must start with a letter or underscore/)).not.toBeInTheDocument();
+ });
+
+ it('editing identifier of a legacy field triggers CEL validation', async () => {
+ const legacyField = {...baseFields[0], name: 'My Legacy Field'};
+ const collection = collectionFromArray([legacyField]);
+ collection.warnings = {
+ [legacyField.id]: {name: ValidationWarningNameInvalidCEL},
+ };
+
+ renderComponent([legacyField], collection);
+
+ await waitFor(() => {
+ expect(screen.getByText(/Reserved CEL words are not allowed/)).toBeInTheDocument();
+ });
+ });
+
it('autofocuses name input for new text field', () => {
const pendingTextField: UserPropertyField = {
id: 'pending-text',
@@ -197,9 +268,9 @@ describe('UserPropertiesTable', () => {
renderComponent([...baseFields, pendingTextField]);
- // The name input for the new text field should be autofocused
- const nameInputs = screen.getAllByTestId('property-field-input');
- expect(document.activeElement).toBe(nameInputs[2]);
+ // The display name input for the new text field should be autofocused
+ const displayNameInputs = screen.getAllByTestId('property-display-name-input');
+ expect(document.activeElement).toBe(displayNameInputs[2]);
});
it('autofocuses values input for new select field', () => {
@@ -260,3 +331,442 @@ describe('UserPropertiesTable', () => {
expect(document.activeElement).toBe(comboboxes[comboboxes.length - 1]);
});
});
+
+describe('UserPropertiesTable input filtering', () => {
+ const baseFields: UserPropertyField[] = [
+ {
+ id: 'field1',
+ name: 'Field1',
+ type: 'text',
+ group_id: 'custom_profile_attributes',
+ create_at: 1736541716295,
+ delete_at: 0,
+ update_at: 0,
+ created_by: '',
+ updated_by: '',
+ target_id: '',
+ target_type: '',
+ object_type: '',
+ attrs: {
+ sort_order: 0,
+ visibility: 'when_set',
+ value_type: '',
+ },
+ },
+ ];
+
+ const createField = jest.fn();
+ const updateField = jest.fn();
+ const deleteField = jest.fn();
+ const reorderField = jest.fn();
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('Name column has sanitize prop that strips invalid characters', () => {
+ renderWithContext(
+ ,
+ );
+
+ const nameInput = screen.getByTestId('property-field-input');
+ expect(nameInput).toBeInTheDocument();
+
+ // filterCELIdentifier is tested in detail in properties.test.ts.
+ // Here we verify it's wired up: the input exists and carries an
+ // aria-label confirming it's the Name column input.
+ expect(nameInput).toHaveAttribute('aria-label', 'Attribute Name');
+ });
+
+ it('Display Name auto-fills Name for new pending text field via live preview', async () => {
+ const pendingField: UserPropertyField = {
+ id: 'pending-new',
+ name: '',
+ type: 'text',
+ group_id: 'custom_profile_attributes',
+ create_at: 0,
+ delete_at: 0,
+ update_at: 0,
+ created_by: '',
+ updated_by: '',
+ target_id: '',
+ target_type: '',
+ object_type: '',
+ attrs: {
+ sort_order: 1,
+ visibility: 'when_set',
+ value_type: '',
+ },
+ };
+
+ renderWithContext(
+ ,
+ );
+
+ // Type a single character in Display Name - each keystroke triggers
+ // handleDisplayNameChange which updates the Name column's live preview.
+ const displayNameInput = screen.getByTestId('property-display-name-input');
+ await userEvent.type(displayNameInput, 'D');
+
+ // The Name input should show the slugified snake_case preview
+ const nameInput = screen.getByTestId('property-field-input');
+ await waitFor(() => {
+ expect(nameInput).toHaveValue('d');
+ });
+ });
+
+ it('Auto-fill deactivates permanently when user manually edits the Name input', async () => {
+ const pendingField: UserPropertyField = {
+ id: 'pending-deactivate',
+ name: '',
+ type: 'text',
+ group_id: 'custom_profile_attributes',
+ create_at: 0,
+ delete_at: 0,
+ update_at: 0,
+ created_by: '',
+ updated_by: '',
+ target_id: '',
+ target_type: '',
+ object_type: '',
+ attrs: {
+ sort_order: 0,
+ visibility: 'when_set',
+ value_type: '',
+ },
+ };
+
+ renderWithContext(
+ ,
+ );
+
+ const nameInput = screen.getByTestId('property-field-input');
+
+ // Manually type in the Name input to diverge from any auto-fill
+ await userEvent.type(nameInput, 'custom');
+ fireEvent.blur(nameInput);
+
+ updateField.mockClear();
+
+ // Now type in Display Name and blur
+ const displayNameInput = screen.getByTestId('property-display-name-input');
+ await userEvent.type(displayNameInput, 'Department');
+ fireEvent.blur(displayNameInput);
+
+ // updateField should be called with display_name change but NOT with
+ // a name override — the manual edit deactivated auto-fill
+ const nameChangeCalls = updateField.mock.calls.filter(
+ (call: [UserPropertyField]) => call[0].name && call[0].name !== 'custom',
+ );
+ expect(nameChangeCalls).toHaveLength(0);
+ });
+
+ it('Auto-fill does not fire for existing fields', async () => {
+ renderWithContext(
+ ,
+ );
+
+ const displayNameInput = screen.getByTestId('property-display-name-input');
+ await userEvent.type(displayNameInput, 'New Display');
+ fireEvent.blur(displayNameInput);
+
+ const nameUpdateCalls = updateField.mock.calls.filter(
+ (call: [UserPropertyField]) => call[0].name !== baseFields[0].name,
+ );
+ expect(nameUpdateCalls).toHaveLength(0);
+ });
+
+ it('auto-fill freezes when Display Name slugifies to a reserved word', async () => {
+ const pendingField: UserPropertyField = {
+ id: 'pending-reserved',
+ name: '',
+ type: 'text',
+ group_id: 'custom_profile_attributes',
+ create_at: 0,
+ delete_at: 0,
+ update_at: 0,
+ created_by: '',
+ updated_by: '',
+ target_id: '',
+ target_type: '',
+ object_type: '',
+ attrs: {
+ sort_order: 0,
+ visibility: 'when_set',
+ value_type: '',
+ },
+ };
+
+ renderWithContext(
+ ,
+ );
+
+ const displayNameInput = screen.getByTestId('property-display-name-input');
+ const nameInput = screen.getByTestId('property-field-input');
+
+ fireEvent.change(displayNameInput, {target: {value: 'function'}});
+ expect(nameInput).toHaveValue('');
+
+ await userEvent.clear(displayNameInput);
+ await userEvent.type(displayNameInput, 'dept');
+ await waitFor(() => {
+ expect(nameInput).toHaveValue('dept');
+ });
+
+ fireEvent.change(displayNameInput, {target: {value: 'true'}});
+ expect(nameInput).toHaveValue('dept');
+ });
+
+ it('auto-fill converts multi-word display names to snake_case', async () => {
+ const pendingField: UserPropertyField = {
+ id: 'pending-snake-case',
+ name: '',
+ type: 'text',
+ group_id: 'custom_profile_attributes',
+ create_at: 0,
+ delete_at: 0,
+ update_at: 0,
+ created_by: '',
+ updated_by: '',
+ target_id: '',
+ target_type: '',
+ object_type: '',
+ attrs: {
+ sort_order: 0,
+ visibility: 'when_set',
+ value_type: '',
+ },
+ };
+
+ renderWithContext(
+ ,
+ );
+
+ const displayNameInput = screen.getByTestId('property-display-name-input');
+ const nameInput = screen.getByTestId('property-field-input');
+
+ fireEvent.change(displayNameInput, {target: {value: 'My Field Name'}});
+ await waitFor(() => {
+ expect(nameInput).toHaveValue('my_field_name');
+ });
+
+ fireEvent.change(displayNameInput, {target: {value: 'XMLParser'}});
+ await waitFor(() => {
+ expect(nameInput).toHaveValue('xml_parser');
+ });
+
+ fireEvent.change(displayNameInput, {target: {value: 'Does this work?'}});
+ await waitFor(() => {
+ expect(nameInput).toHaveValue('does_this_work');
+ });
+ });
+
+ it('auto-fill prepends underscore for leading-digit display names', async () => {
+ const pendingField: UserPropertyField = {
+ id: 'pending-leading-digit',
+ name: '',
+ type: 'text',
+ group_id: 'custom_profile_attributes',
+ create_at: 0,
+ delete_at: 0,
+ update_at: 0,
+ created_by: '',
+ updated_by: '',
+ target_id: '',
+ target_type: '',
+ object_type: '',
+ attrs: {
+ sort_order: 0,
+ visibility: 'when_set',
+ value_type: '',
+ },
+ };
+
+ renderWithContext(
+ ,
+ );
+
+ const displayNameInput = screen.getByTestId('property-display-name-input');
+ await userEvent.type(displayNameInput, '7Department');
+
+ const nameInput = screen.getByTestId('property-field-input');
+ await waitFor(() => {
+ // snake_case inserts a boundary between the digit and the
+ // following uppercase letter before lowercasing.
+ expect(nameInput).toHaveValue('_7_department');
+ });
+ });
+
+ it('auto-fill truncates display names longer than the max attribute name length', async () => {
+ const pendingField: UserPropertyField = {
+ id: 'pending-truncate',
+ name: '',
+ type: 'text',
+ group_id: 'custom_profile_attributes',
+ create_at: 0,
+ delete_at: 0,
+ update_at: 0,
+ created_by: '',
+ updated_by: '',
+ target_id: '',
+ target_type: '',
+ object_type: '',
+ attrs: {
+ sort_order: 0,
+ visibility: 'when_set',
+ value_type: '',
+ },
+ };
+
+ renderWithContext(
+ ,
+ );
+
+ const displayNameInput = screen.getByTestId('property-display-name-input');
+
+ // fireEvent.change bypasses the input's maxLength so an oversize value
+ // reaches the onChange handler and exercises the truncation branch.
+ const oversize = Constants.MAX_CUSTOM_ATTRIBUTE_NAME_LENGTH + 1;
+ fireEvent.change(displayNameInput, {target: {value: 'a'.repeat(oversize)}});
+
+ const nameInput = screen.getByTestId('property-field-input') as HTMLInputElement;
+ await waitFor(() => {
+ expect(nameInput.value).toHaveLength(Constants.MAX_CUSTOM_ATTRIBUTE_NAME_LENGTH);
+ });
+ });
+});
+
+describe('useUserPropertiesTable grandfather regression', () => {
+ const getFields = jest.spyOn(Client4, 'getCustomProfileAttributeFields');
+ const patchField = jest.spyOn(Client4, 'patchCustomProfileAttributeField');
+
+ afterEach(() => {
+ getFields.mockReset();
+ patchField.mockReset();
+ });
+
+ it('rename of legacy field clears grandfather: subsequent edits to the now-valid name trigger validation', async () => {
+ const legacyField: UserPropertyField = {
+ id: 'legacy-field',
+ name: 'dept head',
+ type: 'text',
+ group_id: 'custom_profile_attributes',
+ create_at: 1736541716295,
+ delete_at: 0,
+ update_at: 0,
+ created_by: '',
+ updated_by: '',
+ target_id: '',
+ target_type: '',
+ object_type: '',
+ attrs: {
+ sort_order: 0,
+ visibility: 'when_set',
+ value_type: '',
+ },
+ };
+
+ getFields.mockResolvedValue([legacyField]);
+ patchField.mockImplementation(async (id, patch) => ({
+ ...legacyField,
+ ...patch,
+ id,
+ attrs: {
+ ...legacyField.attrs,
+ ...patch.attrs,
+ },
+ update_at: Date.now(),
+ } as UserPropertyField));
+
+ let latestSection!: ReturnType;
+ const HookHarness = () => {
+ latestSection = useUserPropertiesTable();
+ return <>{latestSection.content};
+ };
+
+ renderWithContext();
+
+ await waitFor(() => {
+ expect(screen.getByDisplayValue('dept head')).toBeInTheDocument();
+ });
+
+ const identifierInput = screen.getByDisplayValue('dept head');
+ await userEvent.clear(identifierInput);
+ await userEvent.type(identifierInput, 'dept_head');
+ fireEvent.blur(identifierInput);
+
+ await act(async () => {
+ await latestSection.save();
+ });
+
+ await waitFor(() => {
+ expect(patchField).toHaveBeenCalledWith('legacy-field', expect.objectContaining({name: 'dept_head'}));
+ expect(screen.getByDisplayValue('dept_head')).toBeInTheDocument();
+ });
+
+ const renamedInput = screen.getByDisplayValue('dept_head');
+ await userEvent.clear(renamedInput);
+ await userEvent.type(renamedInput, 'for');
+ fireEvent.blur(renamedInput);
+
+ await waitFor(() => {
+ expect(screen.getByText(/Identifier must start with a letter or underscore/)).toBeInTheDocument();
+ });
+ });
+});
diff --git a/webapp/channels/src/components/admin_console/system_properties/user_properties_table.tsx b/webapp/channels/src/components/admin_console/system_properties/user_properties_table.tsx
index f30423460de..8c0e5be3257 100644
--- a/webapp/channels/src/components/admin_console/system_properties/user_properties_table.tsx
+++ b/webapp/channels/src/components/admin_console/system_properties/user_properties_table.tsx
@@ -3,17 +3,19 @@
import {createColumnHelper, getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef} from '@tanstack/react-table';
import type {ReactNode} from 'react';
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {FormattedMessage, useIntl} from 'react-intl';
import styled from 'styled-components';
-import {PlusIcon} from '@mattermost/compass-icons/components';
+import {InformationOutlineIcon, PlusIcon} from '@mattermost/compass-icons/components';
+import {WithTooltip} from '@mattermost/shared/components/tooltip';
import {supportsOptions, type UserPropertyField} from '@mattermost/types/properties';
import {collectionToArray} from '@mattermost/types/utilities';
import LoadingScreen from 'components/loading_screen';
import Constants from 'utils/constants';
+import {CPA_FIELD_NAME_RESERVED_WORDS, filterCELIdentifier, slugifyForCEL} from 'utils/properties';
import {DangerText, BorderlessInput, LinkButton} from './controls';
import {useIsFieldOrphaned} from './orphaned_fields_utils';
@@ -22,11 +24,13 @@ import DotMenu from './user_properties_dot_menu';
import OrphanedFieldDeleteButton from './user_properties_orphaned_delete_button';
import SelectType from './user_properties_type_menu';
import type {UserPropertyFields} from './user_properties_utils';
-import {isCreatePending, useUserPropertyFields, ValidationWarningNameRequired, ValidationWarningNameTaken, ValidationWarningNameUnique} from './user_properties_utils';
+import {isCreatePending, useUserPropertyFields, ValidationWarningNameInvalidCEL, ValidationWarningNameRequired, ValidationWarningNameTaken, ValidationWarningNameUnique} from './user_properties_utils';
import UserPropertyValues from './user_properties_values';
import {AdminConsoleListTable} from '../list_table';
+const columnHelper = createColumnHelper();
+
type FieldActions = {
createField: (field: UserPropertyField) => void;
updateField: (field: UserPropertyField) => void;
@@ -104,18 +108,149 @@ export function UserPropertiesTable({
}: Props & FieldActions) {
const {formatMessage} = useIntl();
const data = collectionToArray(collection);
- const col = createColumnHelper();
+
+ const autoFillActiveRef = useRef>(new Set());
+ const nameOverridesRef = useRef>({});
+ const [, forceNameUpdate] = useState(0);
+
+ const computeAutoFillSlug = useCallback((displayName: string): string | null => {
+ let slug = slugifyForCEL(displayName);
+
+ // slugifyForCEL returns '_copy' when the input normalizes to empty;
+ // treat that as "nothing to auto-fill" rather than writing '_copy'
+ // into the Name field.
+ if (slug === '_copy' || CPA_FIELD_NAME_RESERVED_WORDS.has(slug)) {
+ return null;
+ }
+ const runes = [...slug];
+ if (runes.length > Constants.MAX_CUSTOM_ATTRIBUTE_NAME_LENGTH) {
+ slug = runes.slice(0, Constants.MAX_CUSTOM_ATTRIBUTE_NAME_LENGTH).join('');
+ }
+ return slug;
+ }, []);
+
+ const handleDisplayNameChange = useCallback((rowId: string, value: string) => {
+ if (!autoFillActiveRef.current.has(rowId)) {
+ return;
+ }
+ const slug = computeAutoFillSlug(value);
+ if (slug === null) {
+ return;
+ }
+ if (nameOverridesRef.current[rowId] !== slug) {
+ nameOverridesRef.current = {...nameOverridesRef.current, [rowId]: slug};
+ forceNameUpdate((n) => n + 1);
+ }
+ }, [computeAutoFillSlug]);
+
+ // Returns the auto-filled name slug if auto-fill is active for this row,
+ // or null if auto-fill is inactive or the slug is invalid/reserved.
+ const getAutoFillSlug = useCallback((rowId: string, displayNameValue: string): string | null => {
+ if (!autoFillActiveRef.current.has(rowId)) {
+ return null;
+ }
+ return computeAutoFillSlug(displayNameValue);
+ }, [computeAutoFillSlug]);
+
+ // This callback only fires from manual user edits to the Name (the
+ // DOM onChange event). Auto-fill updates via liveValue → useEffect → setValue
+ // bypass the onChange handler entirely, so this comparison is always between
+ // what the user manually typed and the expected slug derived from the
+ // *committed* display_name. This invariant is what makes the deactivation
+ // check correct — do not refactor liveValue to go through onChange.
+ const handleNameChange = useCallback((rowId: string, value: string, currentField: UserPropertyField) => {
+ const displayName = currentField.attrs?.display_name ?? '';
+ const expectedSlug = slugifyForCEL(displayName);
+ if (value !== expectedSlug) {
+ autoFillActiveRef.current.delete(rowId);
+ if (Object.prototype.hasOwnProperty.call(nameOverridesRef.current, rowId)) {
+ const next = {...nameOverridesRef.current};
+ Reflect.deleteProperty(next, rowId);
+ nameOverridesRef.current = next;
+ }
+ }
+ }, []);
+
+ // Activate auto-fill for newly created pending rows with empty names
+ useEffect(() => {
+ for (const field of data) {
+ if (isCreatePending(field) && field.name === '' && !autoFillActiveRef.current.has(field.id)) {
+ autoFillActiveRef.current.add(field.id);
+ }
+ }
+ }, [data]);
+
const columns = useMemo>>(() => {
return [
- col.accessor('name', {
+ columnHelper.accessor((row) => row.attrs?.display_name ?? '', {
+ id: 'display_name',
+ size: 200,
+ header: () => (
+
+
+
+ ),
+ cell: ({getValue, row}) => {
+ const toDelete = row.original.delete_at !== 0;
+ const isProtected = Boolean(row.original.attrs?.protected);
+
+ return (
+ {
+ handleDisplayNameChange(row.original.id, value);
+ }}
+ setValue={(value: string) => {
+ const slug = getAutoFillSlug(row.original.id, value);
+ updateField({
+ ...row.original,
+ ...(slug === null ? {} : {name: slug}),
+ attrs: {
+ ...row.original.attrs,
+ display_name: value.trim() || undefined,
+ },
+ });
+ }}
+ />
+ );
+ },
+ enableHiding: false,
+ enableSorting: false,
+ }),
+ columnHelper.accessor('name', {
size: 180,
header: () => {
return (
-
+
+
+
+
+
+
+
+
);
},
@@ -150,18 +285,30 @@ export function UserPropertiesTable({
defaultMessage='Attribute name already taken.'
/>
);
+ } else if (warningId === ValidationWarningNameInvalidCEL) {
+ warning = (
+
+
+
+ );
}
return (
<>
{
+ handleNameChange(row.original.id, value, row.original);
+ }}
setValue={(value: string) => {
updateField({...row.original, name: value.trim()});
}}
@@ -174,7 +321,7 @@ export function UserPropertiesTable({
enableHiding: false,
enableSorting: false,
}),
- col.accessor('type', {
+ columnHelper.accessor('type', {
size: 100,
header: () => {
return (
@@ -197,7 +344,7 @@ export function UserPropertiesTable({
enableHiding: false,
enableSorting: false,
}),
- col.display({
+ columnHelper.display({
id: 'options',
size: 300,
header: () => (
@@ -220,7 +367,7 @@ export function UserPropertiesTable({
enableHiding: false,
enableSorting: false,
}),
- col.display({
+ columnHelper.display({
id: 'actions',
size: 40,
header: () => {
@@ -248,7 +395,8 @@ export function UserPropertiesTable({
enableSorting: false,
}),
];
- }, [createField, updateField, deleteField, collection.warnings, canCreate]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [createField, updateField, deleteField, collection.warnings, canCreate, handleDisplayNameChange, getAutoFillSlug, handleNameChange, formatMessage]);
const table = useReactTable({
data,
@@ -339,6 +487,19 @@ const ColHeaderRight = styled.div`
text-align: right;
`;
+const NameHeaderLabel = styled.span`
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+`;
+
+const InfoIconWrapper = styled.span`
+ display: inline-flex;
+ align-items: center;
+ color: rgba(var(--center-channel-color-rgb), 0.56);
+ cursor: pointer;
+`;
+
const ActionsRoot = styled.div`
text-align: right;
`;
@@ -376,9 +537,12 @@ const ActionsCell = ({field, canCreate, createField, updateField, deleteField}:
type EditCellProps = {
value: string;
+ liveValue?: string;
label?: string;
testid?: string;
setValue: (value: string) => void;
+ onChange?: (value: string) => void;
+ sanitize?: (value: string) => string;
autoFocus?: boolean;
disabled?: boolean;
deleted?: boolean;
@@ -393,6 +557,12 @@ const EditCell = (props: EditCellProps) => {
setValue(props.value);
}, [props.value]);
+ useEffect(() => {
+ if (props.liveValue !== undefined) {
+ setValue(props.liveValue);
+ }
+ }, [props.liveValue]);
+
return (
<>
{
}}
value={value}
onChange={(e: React.ChangeEvent) => {
- setValue(e.target.value);
+ let next = e.target.value;
+ if (props.sanitize) {
+ next = props.sanitize(next);
+ }
+ setValue(next);
+ props.onChange?.(next);
}}
onBlur={() => {
if (value !== props.value) {
diff --git a/webapp/channels/src/components/admin_console/system_properties/user_properties_utils.test.ts b/webapp/channels/src/components/admin_console/system_properties/user_properties_utils.test.ts
index 6870d718b1b..8aa164441e5 100644
--- a/webapp/channels/src/components/admin_console/system_properties/user_properties_utils.test.ts
+++ b/webapp/channels/src/components/admin_console/system_properties/user_properties_utils.test.ts
@@ -16,6 +16,7 @@ import type {GlobalState} from 'types/store';
import {
useUserPropertyFields,
+ ValidationWarningNameInvalidCEL,
ValidationWarningNameRequired,
ValidationWarningNameTaken,
ValidationWarningNameUnique,
@@ -50,7 +51,7 @@ describe('useUserPropertyFields', () => {
const baseField: UserPropertyField = {
id: 'test-id',
- name: 'Test Field',
+ name: 'test_field',
type: 'text' as const,
group_id: 'custom_profile_attributes',
create_at: 1736541716295,
@@ -68,10 +69,10 @@ describe('useUserPropertyFields', () => {
},
};
- const field0: UserPropertyField = {...baseField, id: 'test-id-0', name: 'test attribute 0', attrs: {...baseField.attrs, sort_order: 0}};
- const field1: UserPropertyField = {...baseField, id: 'test-id-1', name: 'test attribute 1', attrs: {...baseField.attrs, sort_order: 1}};
- const field2: UserPropertyField = {...baseField, id: 'test-id-2', name: 'test attribute 2', attrs: {...baseField.attrs, sort_order: 2}};
- const field3: UserPropertyField = {...baseField, id: 'test-id-3', name: 'test attribute 3', attrs: {...baseField.attrs, sort_order: 3}};
+ const field0: UserPropertyField = {...baseField, id: 'test-id-0', name: 'test_attribute_0', attrs: {...baseField.attrs, sort_order: 0}};
+ const field1: UserPropertyField = {...baseField, id: 'test-id-1', name: 'test_attribute_1', attrs: {...baseField.attrs, sort_order: 1}};
+ const field2: UserPropertyField = {...baseField, id: 'test-id-2', name: 'test_attribute_2', attrs: {...baseField.attrs, sort_order: 2}};
+ const field3: UserPropertyField = {...baseField, id: 'test-id-3', name: 'test_attribute_3', attrs: {...baseField.attrs, sort_order: 3}};
getFields.mockResolvedValue([field0, field1, field2, field3]);
@@ -121,12 +122,12 @@ describe('useUserPropertyFields', () => {
const [fields2,,, ops2] = result.current;
act(() => {
- ops2.update({...fields2.data[field1.id], name: 'changed attribute value'});
+ ops2.update({...fields2.data[field1.id], name: 'changed_attribute_value'});
});
rerender();
const [fields3, readIO3, pendingIO3] = result.current;
- expect(fields3.data[field1.id].name).toBe('changed attribute value');
+ expect(fields3.data[field1.id].name).toBe('changed_attribute_value');
expect(pendingIO3.hasChanges).toBe(true);
patchField.mockResolvedValue({...fields3.data[field1.id]});
@@ -145,12 +146,12 @@ describe('useUserPropertyFields', () => {
expect(pending.saving).toBe(false);
});
- expect(patchField).toHaveBeenCalledWith(field1.id, {type: 'text', name: 'changed attribute value', attrs: {sort_order: 1, value_type: '', visibility: 'when_set'}});
+ expect(patchField).toHaveBeenCalledWith(field1.id, {type: 'text', name: 'changed_attribute_value', attrs: {sort_order: 1, value_type: '', visibility: 'when_set'}});
const [fields4,, pendingIO4] = result.current;
expect(pendingIO4.hasChanges).toBe(false);
expect(pendingIO4.error).toBe(undefined);
- expect(fields4.data[field1.id].name).toBe('changed attribute value');
+ expect(fields4.data[field1.id].name).toBe('changed_attribute_value');
});
it('should successfully handle reordering', async () => {
@@ -197,8 +198,8 @@ describe('useUserPropertyFields', () => {
expect(pending.saving).toBe(false);
});
- expect(patchField).toHaveBeenCalledWith(field1.id, {type: 'text', name: 'test attribute 1', attrs: {sort_order: 0, value_type: '', visibility: 'when_set'}});
- expect(patchField).toHaveBeenCalledWith(field0.id, {type: 'text', name: 'test attribute 0', attrs: {sort_order: 1, value_type: '', visibility: 'when_set'}});
+ expect(patchField).toHaveBeenCalledWith(field1.id, {type: 'text', name: 'test_attribute_1', attrs: {sort_order: 0, value_type: '', visibility: 'when_set'}});
+ expect(patchField).toHaveBeenCalledWith(field0.id, {type: 'text', name: 'test_attribute_0', attrs: {sort_order: 1, value_type: '', visibility: 'when_set'}});
const [fields4,, pendingIO4] = result.current;
expect(pendingIO4.hasChanges).toBe(false);
@@ -294,11 +295,11 @@ describe('useUserPropertyFields', () => {
expect(pendingIO4.saving).toBe(false);
});
- expect(createField).toHaveBeenCalledWith({type: 'text', name: 'Text', attrs: {sort_order: 4, value_type: '', visibility: 'when_set'}});
+ expect(createField).toHaveBeenCalledWith({type: 'text', name: '', attrs: {sort_order: 4, value_type: '', visibility: 'when_set'}});
const [fields4,,,] = result.current;
expect(Object.values(fields4.data)).toEqual(expect.arrayContaining([
- expect.objectContaining({name: 'Text'}),
+ expect.objectContaining({name: ''}),
]));
expect(fields4.order).toEqual(expect.arrayContaining(Object.keys(fields4.data)));
@@ -321,12 +322,12 @@ describe('useUserPropertyFields', () => {
act(() => {
const [fields,,, ops] = result.current;
- ops.update({...fields.data[field0.id], name: 'test attribute 1'});
+ ops.update({...fields.data[field0.id], name: 'test_attribute_1'});
});
rerender();
const [fields,, pendingIO3] = result.current;
- expect(fields.data[field0.id].name).toBe('test attribute 1');
+ expect(fields.data[field0.id].name).toBe('test_attribute_1');
expect(pendingIO3.hasChanges).toBe(true);
expect(fields.warnings).toEqual(expect.objectContaining({
[field0.id]: {name: ValidationWarningNameUnique},
@@ -352,8 +353,8 @@ describe('useUserPropertyFields', () => {
act(() => {
const [fields,,, ops] = result.current;
- ops.update({...fields.data[field0.id], name: 'test attribute 1'});
- ops.update({...fields.data[field1.id], name: 'Test something else'});
+ ops.update({...fields.data[field0.id], name: 'test_attribute_1'});
+ ops.update({...fields.data[field1.id], name: 'Test_something_else'});
});
rerender();
@@ -402,4 +403,223 @@ describe('useUserPropertyFields', () => {
[field0.id]: {name: ValidationWarningNameRequired},
}));
});
+
+ it('should NOT trigger Required warning for a freshly-created untouched field', async () => {
+ const {result, rerender} = renderHookWithContext(() => useUserPropertyFields(), getBaseState());
+
+ act(() => {
+ jest.runAllTimers();
+ });
+ rerender();
+
+ await waitFor(() => {
+ const [, read] = result.current;
+ expect(read.loading).toBe(false);
+ });
+
+ act(() => {
+ const [,,, ops] = result.current;
+ ops.create();
+ });
+ rerender();
+
+ const [fields] = result.current;
+ const createdId = fields.order[fields.order.length - 1];
+
+ expect(fields.data[createdId].create_at).toBe(0);
+ expect(fields.data[createdId].name).toBe('');
+ expect(fields.data[createdId].attrs?.display_name).toBeUndefined();
+ expect(fields.warnings?.[createdId]).toBeUndefined();
+ });
+
+ it('should preserve required warning precedence when multiple names are empty', async () => {
+ const {result, rerender} = renderHookWithContext(() => {
+ return useUserPropertyFields();
+ }, getBaseState());
+
+ act(() => {
+ jest.runAllTimers();
+ });
+ rerender();
+
+ await waitFor(() => {
+ const [, read] = result.current;
+ expect(read.loading).toBe(false);
+ });
+
+ act(() => {
+ const [fields,,, ops] = result.current;
+ ops.update({...fields.data[field0.id], name: ''});
+ ops.update({...fields.data[field1.id], name: ''});
+ });
+ rerender();
+
+ const [fields] = result.current;
+ expect(fields.warnings).toEqual(expect.objectContaining({
+ [field0.id]: {name: ValidationWarningNameRequired},
+ [field1.id]: {name: ValidationWarningNameRequired},
+ }));
+ });
+
+ it('should flag CEL invalid name on new field', async () => {
+ const {result, rerender} = renderHookWithContext(() => useUserPropertyFields(), getBaseState());
+
+ act(() => {
+ jest.runAllTimers();
+ });
+ rerender();
+
+ await waitFor(() => {
+ const [, read] = result.current;
+ expect(read.loading).toBe(false);
+ });
+
+ act(() => {
+ const [,,, ops] = result.current;
+ ops.create({name: 'My Field'});
+ });
+ rerender();
+
+ const [fields] = result.current;
+ const createdId = fields.order[fields.order.length - 1];
+ expect(fields.warnings).toEqual(expect.objectContaining({
+ [createdId]: {name: ValidationWarningNameInvalidCEL},
+ }));
+ });
+
+ it('should flag reserved word name', async () => {
+ const {result, rerender} = renderHookWithContext(() => useUserPropertyFields(), getBaseState());
+
+ act(() => {
+ jest.runAllTimers();
+ });
+ rerender();
+
+ await waitFor(() => {
+ const [, read] = result.current;
+ expect(read.loading).toBe(false);
+ });
+
+ act(() => {
+ const [fields,,, ops] = result.current;
+ ops.update({...fields.data[field0.id], name: 'in'});
+ });
+ rerender();
+
+ const [fields] = result.current;
+ expect(fields.warnings).toEqual(expect.objectContaining({
+ [field0.id]: {name: ValidationWarningNameInvalidCEL},
+ }));
+ });
+
+ it('should NOT flag CEL error when name is unchanged (grandfather)', async () => {
+ const legacyField = {...field0, name: 'My Legacy Field'};
+ getFields.mockResolvedValueOnce([legacyField, field1, field2, field3]);
+
+ const {result, rerender} = renderHookWithContext(() => useUserPropertyFields(), getBaseState());
+
+ act(() => {
+ jest.runAllTimers();
+ });
+ rerender();
+
+ await waitFor(() => {
+ const [, read] = result.current;
+ expect(read.loading).toBe(false);
+ });
+
+ act(() => {
+ const [fields,,, ops] = result.current;
+ ops.update({
+ ...fields.data[legacyField.id],
+ attrs: {
+ ...fields.data[legacyField.id].attrs,
+ display_name: 'My Legacy Label',
+ },
+ });
+ });
+ rerender();
+
+ const [fields] = result.current;
+ expect(fields.warnings?.[legacyField.id]?.name).not.toBe(ValidationWarningNameInvalidCEL);
+ });
+
+ it('should flag CEL error when renaming a legacy invalid-named field to another invalid name', async () => {
+ const legacyField = {...field0, name: 'My Legacy Field'};
+ getFields.mockResolvedValueOnce([legacyField, field1, field2, field3]);
+
+ const {result, rerender} = renderHookWithContext(() => useUserPropertyFields(), getBaseState());
+
+ act(() => {
+ jest.runAllTimers();
+ });
+ rerender();
+
+ await waitFor(() => {
+ const [, read] = result.current;
+ expect(read.loading).toBe(false);
+ });
+
+ act(() => {
+ const [fields,,, ops] = result.current;
+ ops.update({...fields.data[legacyField.id], name: '7invalid'});
+ });
+ rerender();
+
+ const [fields] = result.current;
+ expect(fields.warnings).toEqual(expect.objectContaining({
+ [legacyField.id]: {name: ValidationWarningNameInvalidCEL},
+ }));
+ });
+
+ it('should accept a valid rename of a legacy invalid-named field', async () => {
+ const legacyField = {...field0, name: 'My Legacy Field'};
+ getFields.mockResolvedValueOnce([legacyField, field1, field2, field3]);
+
+ const {result, rerender} = renderHookWithContext(() => useUserPropertyFields(), getBaseState());
+
+ act(() => {
+ jest.runAllTimers();
+ });
+ rerender();
+
+ await waitFor(() => {
+ const [, read] = result.current;
+ expect(read.loading).toBe(false);
+ });
+
+ act(() => {
+ const [fields,,, ops] = result.current;
+ ops.update({...fields.data[legacyField.id], name: 'my_legacy_field'});
+ });
+ rerender();
+
+ const [fields] = result.current;
+ expect(fields.warnings?.[legacyField.id]?.name).not.toBe(ValidationWarningNameInvalidCEL);
+ });
+
+ it('should use CEL-safe collision suffixes for created field names', async () => {
+ const {result, rerender} = renderHookWithContext(() => useUserPropertyFields(), getBaseState());
+
+ act(() => {
+ jest.runAllTimers();
+ });
+ rerender();
+
+ await waitFor(() => {
+ const [, read] = result.current;
+ expect(read.loading).toBe(false);
+ });
+
+ act(() => {
+ const [,,, ops] = result.current;
+ ops.create({name: 'Text'});
+ ops.create({name: 'Text'});
+ });
+ rerender();
+
+ const [fields] = result.current;
+ const pendingNames = fields.order.slice(-2).map((id) => fields.data[id].name);
+ expect(pendingNames).toEqual(['Text', 'Text_2']);
+ });
});
diff --git a/webapp/channels/src/components/admin_console/system_properties/user_properties_utils.ts b/webapp/channels/src/components/admin_console/system_properties/user_properties_utils.ts
index dd37a7f3094..c2cd2088f50 100644
--- a/webapp/channels/src/components/admin_console/system_properties/user_properties_utils.ts
+++ b/webapp/channels/src/components/admin_console/system_properties/user_properties_utils.ts
@@ -13,6 +13,7 @@ import type {IDMappedCollection, IDMappedObjects} from '@mattermost/types/utilit
import {Client4} from 'mattermost-redux/client';
import {insertWithoutDuplicates} from 'mattermost-redux/utils/array_utils';
+import {validateCPAFieldName} from 'utils/properties';
import {generateId} from 'utils/utils';
import type {CollectionIO} from './section_utils';
@@ -141,9 +142,27 @@ export const useUserPropertyFields = () => {
}
if (!field.name) {
- // name not provided
- acc[field.id] = {name: ValidationWarningNameRequired};
- } else if (pendingByName[field.name.toLowerCase()]?.filter((x) => x.delete_at === 0)?.length > 1) {
+ // name not provided — suppress for brand-new fields that
+ // haven't been interacted with yet (user just clicked "Add attribute")
+ const hasDisplayName = Boolean(field.attrs?.display_name?.trim());
+ if (field.create_at !== 0 || hasDisplayName) {
+ acc[field.id] = {name: ValidationWarningNameRequired};
+ }
+ return acc;
+ }
+
+ // Lenient grandfather: only validate CEL names after a rename.
+ // Newly created fields always validate because they have no
+ // server-persisted identifier to grandfather from.
+ const originalName = current.data[field.id]?.name;
+ const nameChanged = field.create_at === 0 || field.name !== originalName;
+
+ if (nameChanged && validateCPAFieldName(field.name)) {
+ acc[field.id] = {name: ValidationWarningNameInvalidCEL};
+ return acc;
+ }
+
+ if (pendingByName[field.name.toLowerCase()]?.filter((x) => x.delete_at === 0)?.length > 1) {
// duplicate pending name
acc[field.id] = {name: ValidationWarningNameUnique};
} else if (
@@ -206,10 +225,14 @@ export const useUserPropertyFields = () => {
pendingIO.apply((pending) => {
const nextOrder = Object.values(pending.data).filter((x) => !isDeletePending(x)).length;
+ const name = patch?.name ?
+ getIncrementedCELName(patch.name, pending) :
+ '';
+
const field = newPendingField({
type: 'text',
...patch,
- name: getIncrementedName(patch?.name ?? 'Text', pending),
+ name,
attrs: {
visibility: 'when_set',
value_type: '',
@@ -263,15 +286,20 @@ export const useUserPropertyFields = () => {
export const ValidationWarningNameRequired = 'user_properties.validation.name_required';
export const ValidationWarningNameUnique = 'user_properties.validation.name_unique';
export const ValidationWarningNameTaken = 'user_properties.validation.name_taken';
+export const ValidationWarningNameInvalidCEL = 'user_properties.validation.name_invalid_cel';
export const ValidationWarningOptionsRequired = 'user_properties.validation.options_required';
-const getIncrementedName = (desiredName: string, collection: UserPropertyFields) => {
- const names = new Set(Object.values(collection.data).map(({name}) => name));
+const getIncrementedCELName = (desiredName: string, collection: UserPropertyFields) => {
+ const names = new Set(
+ Object.values(collection.data).
+ filter(({delete_at: deleteAt}) => deleteAt === 0).
+ map(({name}) => name.toLowerCase()),
+ );
let newName = desiredName;
let n = 1;
- while (names.has(newName)) {
+ while (names.has(newName.toLowerCase())) {
n++;
- newName = `${desiredName} ${n}`;
+ newName = `${desiredName}_${n}`;
}
return newName;
};
diff --git a/webapp/channels/src/components/admin_console/system_user_detail/system_user_detail.test.tsx b/webapp/channels/src/components/admin_console/system_user_detail/system_user_detail.test.tsx
index c34365f2e60..ca683547e5c 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/system_user_detail.test.tsx
+++ b/webapp/channels/src/components/admin_console/system_user_detail/system_user_detail.test.tsx
@@ -8,6 +8,7 @@ import React from 'react';
import type {IntlShape} from 'react-intl';
import type {RouteComponentProps} from 'react-router-dom';
+import type {UserPropertyField} from '@mattermost/types/properties';
import type {UserProfile} from '@mattermost/types/users';
import SystemUserDetail, {getUserAuthenticationTextField} from 'components/admin_console/system_user_detail/system_user_detail';
@@ -370,6 +371,62 @@ describe('SystemUserDetail', () => {
consoleSpy.mockRestore();
});
});
+
+ describe('CPA field labels', () => {
+ const buildCPAField = (overrides: Partial = {}): UserPropertyField => ({
+ id: 'cpa-1',
+ name: 'department',
+ type: 'text',
+ group_id: 'custom_profile_attributes',
+ create_at: 0,
+ update_at: 0,
+ delete_at: 0,
+ created_by: '',
+ updated_by: '',
+ target_id: '',
+ target_type: '',
+ object_type: '',
+ attrs: {
+ sort_order: 0,
+ visibility: 'when_set',
+ value_type: '',
+ ...overrides,
+ },
+ });
+
+ test('should render CPA label using display_name', async () => {
+ const cpaField = buildCPAField({display_name: 'Engineering Department'});
+ const props = {
+ ...defaultProps,
+ customProfileAttributeFields: [cpaField],
+ getCustomProfileAttributeFields: jest.fn().mockResolvedValue({data: [cpaField]}),
+ };
+
+ renderWithContext();
+
+ await waitForLoadingToFinish();
+
+ const labelEl = await screen.findByTestId('user-detail-custom-attribute-label-cpa-1');
+ expect(labelEl).toHaveTextContent('Engineering Department');
+ expect(labelEl).not.toHaveTextContent('department');
+ });
+
+ test('should fall back to name when display_name is empty', async () => {
+ const cpaField = buildCPAField({display_name: ''});
+ const props = {
+ ...defaultProps,
+ customProfileAttributeFields: [cpaField],
+ getCustomProfileAttributeFields: jest.fn().mockResolvedValue({data: [cpaField]}),
+ };
+
+ renderWithContext();
+
+ await waitForLoadingToFinish();
+
+ const labelEl = await screen.findByTestId('user-detail-custom-attribute-label-cpa-1');
+ expect(labelEl).toHaveTextContent('department');
+ });
+ });
});
describe('getUserAuthenticationTextField', () => {
diff --git a/webapp/channels/src/components/admin_console/system_user_detail/system_user_detail.tsx b/webapp/channels/src/components/admin_console/system_user_detail/system_user_detail.tsx
index 9caf9805026..1534491a984 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/system_user_detail.tsx
+++ b/webapp/channels/src/components/admin_console/system_user_detail/system_user_detail.tsx
@@ -43,6 +43,7 @@ import ShieldOutlineIcon from 'components/widgets/icons/shield_outline_icon';
import LoadingSpinner from 'components/widgets/loading/loading_spinner';
import {Constants, ModalIdentifiers} from 'utils/constants';
+import {getUserPropertyFieldLabel} from 'utils/properties';
import {validHttpUrl} from 'utils/url';
import {toTitleCase} from 'utils/utils';
@@ -653,11 +654,12 @@ export class SystemUserDetail extends PureComponent {