AAE-47527 Populate people and group widgets from process response (#12082)

This commit is contained in:
Alex Molodyh
2026-07-27 11:29:43 -07:00
committed by GitHub
parent 03e6320bd2
commit b6ae479cd0
7 changed files with 180 additions and 21 deletions
@@ -91,7 +91,7 @@ describe('FormFieldValueAdapterService', () => {
it('single-select: should wrap a user object into a single-element array', () => { it('single-select: should wrap a user object into a single-element array', () => {
const field = makeField(FormFieldTypes.PEOPLE, null); const field = makeField(FormFieldTypes.PEOPLE, null);
const user = { firstName: 'Test', lastName: 'User' }; const user = { username: 'testuser', firstName: 'Test', lastName: 'User' };
expect(service.adapt(user, field)).toEqual([user]); expect(service.adapt(user, field)).toEqual([user]);
}); });
@@ -107,7 +107,7 @@ describe('FormFieldValueAdapterService', () => {
it('single-select: should keep a single-element array', () => { it('single-select: should keep a single-element array', () => {
const field = makeField(FormFieldTypes.PEOPLE, null); const field = makeField(FormFieldTypes.PEOPLE, null);
expect(service.adapt([{ firstName: 'Test' }], field)).toEqual([{ firstName: 'Test' }]); expect(service.adapt([{ username: 'test', firstName: 'Test' }], field)).toEqual([{ username: 'test', firstName: 'Test' }]);
}); });
it('single-select: should return null when given an empty array', () => { it('single-select: should return null when given an empty array', () => {
@@ -134,12 +134,15 @@ describe('FormFieldValueAdapterService', () => {
it('multi-select: should wrap a single object into an array', () => { it('multi-select: should wrap a single object into an array', () => {
const field = makeField(FormFieldTypes.PEOPLE, null, { multiple: true }); const field = makeField(FormFieldTypes.PEOPLE, null, { multiple: true });
expect(service.adapt({ firstName: 'Test' }, field)).toEqual([{ firstName: 'Test' }]); expect(service.adapt({ username: 'testuser', firstName: 'Test' }, field)).toEqual([{ username: 'testuser', firstName: 'Test' }]);
}); });
it('multi-select: should keep an array of users (idempotent)', () => { it('multi-select: should keep an array of users (idempotent)', () => {
const field = makeField(FormFieldTypes.PEOPLE, null, { multiple: true }); const field = makeField(FormFieldTypes.PEOPLE, null, { multiple: true });
const users = [{ firstName: 'Alice' }, { firstName: 'Bob' }]; const users = [
{ username: 'alice', firstName: 'Alice' },
{ username: 'bob', firstName: 'Bob' }
];
expect(service.adapt(users, field)).toEqual(users); expect(service.adapt(users, field)).toEqual(users);
}); });
@@ -147,6 +150,58 @@ describe('FormFieldValueAdapterService', () => {
const field = makeField(FormFieldTypes.PEOPLE, null, { multiple: true }); const field = makeField(FormFieldTypes.PEOPLE, null, { multiple: true });
expect(service.adapt(['Test User'], field)).toEqual([{ firstName: 'Test', lastName: 'User' }]); expect(service.adapt(['Test User'], field)).toEqual([{ firstName: 'Test', lastName: 'User' }]);
}); });
it('should canonicalize a process-response user object (userName → username, drop displayName)', () => {
const field = makeField(FormFieldTypes.PEOPLE, null);
const processUser = {
id: 'u1',
email: 'k@x.io',
lastName: 'Richards',
userName: 'krichards',
firstName: 'Keith',
displayName: 'Keith Richards'
};
expect(service.adapt(processUser, field)).toEqual([
{ id: 'u1', username: 'krichards', firstName: 'Keith', lastName: 'Richards', email: 'k@x.io' }
]);
});
it('should canonicalize an array-wrapped process-response user object', () => {
const field = makeField(FormFieldTypes.PEOPLE, null);
const processUser = {
id: 'u1',
email: 'k@x.io',
lastName: 'Richards',
userName: 'krichards',
firstName: 'Keith',
displayName: 'Keith Richards'
};
expect(service.adapt([processUser], field)).toEqual([
{ id: 'u1', username: 'krichards', firstName: 'Keith', lastName: 'Richards', email: 'k@x.io' }
]);
});
it('should preserve an already-canonical user object (idempotent)', () => {
const field = makeField(FormFieldTypes.PEOPLE, null);
const canonical = { id: 'u1', username: 'krichards', firstName: 'Keith', lastName: 'Richards' };
expect(service.adapt(canonical, field)).toEqual([canonical]);
});
it('should keep a user with only id', () => {
const field = makeField(FormFieldTypes.PEOPLE, null);
expect(service.adapt({ id: 'u1' }, field)).toEqual([{ id: 'u1', username: '' }]);
});
it('should filter out an object with none of id, username, or email', () => {
const field = makeField(FormFieldTypes.PEOPLE, null);
expect(service.adapt({ firstName: 'Keith', lastName: 'Richards' }, field)).toBeNull();
});
it('should drop non-string and blank fields from a process-response user object', () => {
const field = makeField(FormFieldTypes.PEOPLE, null);
const processUser = { id: null, username: 'krichards', firstName: 42, lastName: ' ', email: 'k@x.io' };
expect(service.adapt(processUser, field)).toEqual([{ username: 'krichards', email: 'k@x.io' }]);
});
}); });
describe('Group adapter', () => { describe('Group adapter', () => {
@@ -181,6 +236,16 @@ describe('FormFieldValueAdapterService', () => {
const field = makeField(FormFieldTypes.FUNCTIONAL_GROUP, null, { multiple: true }); const field = makeField(FormFieldTypes.FUNCTIONAL_GROUP, null, { multiple: true });
expect(service.adapt(['Eng', 'QA'], field)).toEqual([{ name: 'Eng' }, { name: 'QA' }]); expect(service.adapt(['Eng', 'QA'], field)).toEqual([{ name: 'Eng' }, { name: 'QA' }]);
}); });
it('should canonicalize a process-response group object', () => {
const field = makeField(FormFieldTypes.FUNCTIONAL_GROUP, null);
expect(service.adapt({ id: 'grp1', name: 'Finance' }, field)).toEqual([{ id: 'grp1', name: 'Finance' }]);
});
it('should filter out a group object with neither id nor name', () => {
const field = makeField(FormFieldTypes.FUNCTIONAL_GROUP, null);
expect(service.adapt({}, field)).toBeNull();
});
}); });
describe('Dropdown adapter', () => { describe('Dropdown adapter', () => {
@@ -27,10 +27,23 @@ interface AdaptedUser {
lastName?: string; lastName?: string;
} }
interface CanonicalUser {
id?: string;
username: string;
firstName?: string;
lastName?: string;
email?: string;
}
interface AdaptedGroup { interface AdaptedGroup {
name: string; name: string;
} }
interface CanonicalGroup {
id?: string;
name: string;
}
@Injectable({ providedIn: 'root' }) @Injectable({ providedIn: 'root' })
export class FormFieldValueAdapterService { export class FormFieldValueAdapterService {
private readonly adapters = new Map<string, FormFieldValueAdapter>(); private readonly adapters = new Map<string, FormFieldValueAdapter>();
@@ -102,7 +115,26 @@ export class FormFieldValueAdapterService {
private toUser(entry: unknown): unknown { private toUser(entry: unknown): unknown {
if (typeof entry !== 'string') { if (typeof entry !== 'string') {
return entry; if (!entry || typeof entry !== 'object') {
return null;
}
const source = entry as Record<string, unknown>;
const username = this.toStringField(source['username'] ?? source['userName']);
const id = this.toStringField(source['id']);
const email = this.toStringField(source['email']);
const firstName = this.toStringField(source['firstName']);
const lastName = this.toStringField(source['lastName']);
if (!id && !username && !email) {
return null;
}
const user: CanonicalUser = {
...(id !== undefined ? { id } : {}),
username: username ?? '',
...(firstName !== undefined ? { firstName } : {}),
...(lastName !== undefined ? { lastName } : {}),
...(email !== undefined ? { email } : {})
};
return user;
} }
const trimmed = entry.trim(); const trimmed = entry.trim();
if (this.isBlankToken(trimmed)) { if (this.isBlankToken(trimmed)) {
@@ -122,7 +154,20 @@ export class FormFieldValueAdapterService {
private toGroup(entry: unknown): unknown { private toGroup(entry: unknown): unknown {
if (typeof entry !== 'string') { if (typeof entry !== 'string') {
return entry; if (!entry || typeof entry !== 'object') {
return null;
}
const source = entry as Record<string, unknown>;
const name = this.toStringField(source['name']);
const id = this.toStringField(source['id']);
if (!name && !id) {
return null;
}
const group: CanonicalGroup = {
...(id !== undefined ? { id } : {}),
name: name ?? ''
};
return group;
} }
const trimmed = entry.trim(); const trimmed = entry.trim();
if (this.isBlankToken(trimmed)) { if (this.isBlankToken(trimmed)) {
@@ -136,6 +181,10 @@ export class FormFieldValueAdapterService {
return value === '' || value === '[]' || value === '{}'; return value === '' || value === '[]' || value === '{}';
} }
private toStringField(value: unknown): string | undefined {
return typeof value === 'string' && value.trim() !== '' ? value : undefined;
}
private toOptionId(entry: unknown): unknown { private toOptionId(entry: unknown): unknown {
if (entry && typeof entry === 'object') { if (entry && typeof entry === 'object') {
return (entry as Record<string, unknown>)['id'] ?? null; return (entry as Record<string, unknown>)['id'] ?? null;
@@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Component, DestroyRef, inject, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, DestroyRef, inject, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { ErrorWidgetComponent, WidgetComponent } from '@alfresco/adf-core'; import { ErrorWidgetComponent, WidgetComponent } from '@alfresco/adf-core';
import { UntypedFormControl } from '@angular/forms'; import { UntypedFormControl } from '@angular/forms';
import { filter } from 'rxjs/operators'; import { filter } from 'rxjs/operators';
@@ -50,6 +50,9 @@ import { GroupCloudComponent } from '../../../../group/components/group-cloud.co
export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit { export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit {
private readonly reactivePreselection: ReactivePreselectionService<IdentityGroupModel> = inject(ReactivePreselectionService); private readonly reactivePreselection: ReactivePreselectionService<IdentityGroupModel> = inject(ReactivePreselectionService);
@ViewChild(GroupCloudComponent)
private readonly groupCloud: GroupCloudComponent;
typeId = 'GroupCloudWidgetComponent'; typeId = 'GroupCloudWidgetComponent';
roles: string[]; roles: string[];
mode: ComponentSelectionMode; mode: ComponentSelectionMode;
@@ -65,7 +68,7 @@ export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit
getFieldId: () => this.field?.id, getFieldId: () => this.field?.id,
getFormId: () => this.field?.form?.id, getFormId: () => this.field?.form?.id,
getFieldValue: () => this.field?.value, getFieldValue: () => this.field?.value,
getPreselection: () => this.preSelectGroup, getSelection: () => this.groupCloud?.selectedGroups ?? [],
setPreselection: (value) => (this.preSelectGroup = value), setPreselection: (value) => (this.preSelectGroup = value),
identityOf: (group) => group?.id ?? group?.name identityOf: (group) => group?.id ?? group?.name
}); });
@@ -25,7 +25,9 @@ import {
NoopAuthModule NoopAuthModule
} from '@alfresco/adf-core'; } from '@alfresco/adf-core';
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { PeopleCloudWidgetComponent } from './people-cloud.widget'; import { PeopleCloudWidgetComponent } from './people-cloud.widget';
import { PeopleCloudComponent } from '../../../../people/components/people-cloud.component';
import { IdentityUserService } from '../../../../people/services/identity-user.service'; import { IdentityUserService } from '../../../../people/services/identity-user.service';
import { mockShepherdsPie, mockYorkshirePudding } from '../../../../people/mock/people-cloud.mock'; import { mockShepherdsPie, mockYorkshirePudding } from '../../../../people/mock/people-cloud.mock';
import { HarnessLoader } from '@angular/cdk/testing'; import { HarnessLoader } from '@angular/cdk/testing';
@@ -358,5 +360,37 @@ describe('PeopleCloudWidgetComponent', () => {
expect(widget.preSelectUsers).toBe(initial); expect(widget.preSelectUsers).toBe(initial);
}); });
}); });
describe('single-event population (two-click repro)', () => {
let formService: FormService;
beforeEach(() => {
TestBed.resetTestingModule();
TestBed.configureTestingModule({
imports: [NoopAuthModule, PeopleCloudWidgetComponent],
providers: [{ provide: ADF_TYPED_VALUE_FORMATTING_ENABLED, useValue: true }]
});
formService = TestBed.inject(FormService);
fixture = TestBed.createComponent(PeopleCloudWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
});
it('should populate the rendered people component after a SINGLE rule event', async () => {
const users = [{ id: 'a', username: 'alpha' }];
widget.field = new FormFieldModel(new FormModel(), { id: 'target', type: FormFieldTypes.PEOPLE, value: null });
fixture.detectChanges();
await fixture.whenStable();
widget.field.value = users;
formService.formRulesEvent.next({ type: 'fieldValueChanged', field: { id: 'target' } } as any);
fixture.detectChanges();
await fixture.whenStable();
const peopleComponent = fixture.debugElement.query(By.directive(PeopleCloudComponent)).componentInstance as PeopleCloudComponent;
expect(peopleComponent.getSelectedUsers()).toEqual(users);
});
});
}); });
}); });
@@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Component, DestroyRef, inject, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, DestroyRef, inject, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { ErrorWidgetComponent, WidgetComponent } from '@alfresco/adf-core'; import { ErrorWidgetComponent, WidgetComponent } from '@alfresco/adf-core';
import { UntypedFormControl } from '@angular/forms'; import { UntypedFormControl } from '@angular/forms';
import { filter } from 'rxjs/operators'; import { filter } from 'rxjs/operators';
@@ -53,6 +53,9 @@ export class PeopleCloudWidgetComponent extends WidgetComponent implements OnIni
private readonly identityUserService = inject(IdentityUserService); private readonly identityUserService = inject(IdentityUserService);
private readonly reactivePreselection: ReactivePreselectionService<IdentityUserModel> = inject(ReactivePreselectionService); private readonly reactivePreselection: ReactivePreselectionService<IdentityUserModel> = inject(ReactivePreselectionService);
@ViewChild(PeopleCloudComponent)
private readonly peopleCloud: PeopleCloudComponent;
typeId = 'PeopleCloudWidgetComponent'; typeId = 'PeopleCloudWidgetComponent';
appName: string; appName: string;
roles: string[]; roles: string[];
@@ -70,7 +73,7 @@ export class PeopleCloudWidgetComponent extends WidgetComponent implements OnIni
getFieldId: () => this.field?.id, getFieldId: () => this.field?.id,
getFormId: () => this.field?.form?.id, getFormId: () => this.field?.form?.id,
getFieldValue: () => this.field?.value, getFieldValue: () => this.field?.value,
getPreselection: () => this.preSelectUsers, getSelection: () => this.peopleCloud?.getSelectedUsers() ?? [],
setPreselection: (value) => (this.preSelectUsers = value), setPreselection: (value) => (this.preSelectUsers = value),
identityOf: (user) => user?.id ?? user?.username ?? user?.email identityOf: (user) => user?.id ?? user?.username ?? user?.email
}); });
@@ -56,7 +56,7 @@ describe('ReactivePreselectionService', () => {
getFieldId: () => HOST_FIELD_ID, getFieldId: () => HOST_FIELD_ID,
getFormId: () => HOST_FORM_ID, getFormId: () => HOST_FORM_ID,
getFieldValue: () => fieldValue, getFieldValue: () => fieldValue,
getPreselection: () => preselection, getSelection: () => preselection,
setPreselection: (value) => (preselection = value), setPreselection: (value) => (preselection = value),
identityOf: (item) => item?.id ?? item?.name identityOf: (item) => item?.id ?? item?.name
}; };
@@ -111,11 +111,20 @@ describe('ReactivePreselectionService', () => {
expect(preselection).toBe(initial); expect(preselection).toBe(initial);
}); });
it('should ignore changes originating from the host field itself', () => { it('should react to changes originating from the host field itself', () => {
fieldValue = [{ id: 'a' }];
formRulesEvent.next({ type: 'fieldValueChanged', field: { id: HOST_FIELD_ID }, form: { id: HOST_FORM_ID } });
expect(preselection).toEqual([{ id: 'a' }]);
});
it('should not reassign when the value already matches the current selection', () => {
preselection = [{ id: 'a' }];
const initial = preselection; const initial = preselection;
fieldValue = [{ id: 'a' }]; fieldValue = [{ id: 'a' }];
formRulesEvent.next({ type: 'fieldValueChanged', field: { id: HOST_FIELD_ID } }); formRulesEvent.next({ type: 'fieldValueChanged', field: { id: HOST_FIELD_ID }, form: { id: HOST_FORM_ID } });
expect(preselection).toBe(initial); expect(preselection).toBe(initial);
}); });
@@ -25,7 +25,7 @@ export interface ReactivePreselectionHost<T> {
getFieldId(): string; getFieldId(): string;
getFormId(): string; getFormId(): string;
getFieldValue(): unknown; getFieldValue(): unknown;
getPreselection(): T[]; getSelection(): T[];
setPreselection(value: T[]): void; setPreselection(value: T[]): void;
identityOf(item: T): string; identityOf(item: T): string;
} }
@@ -63,17 +63,13 @@ export class ReactivePreselectionService<T = unknown> {
this.subscribed = true; this.subscribed = true;
this.formService.formRulesEvent this.formService.formRulesEvent
.pipe( .pipe(
filter((event) => event?.type === 'fieldValueChanged' && this.isExternalChange(event)), filter((event) => event?.type === 'fieldValueChanged' && this.isSameForm(event)),
takeUntilDestroyed(this.destroyRef) takeUntilDestroyed(this.destroyRef)
) )
.subscribe(() => this.sync()); .subscribe(() => this.sync());
} }
private isExternalChange(event: FormRulesEvent): boolean { private isSameForm(event: FormRulesEvent): boolean {
const eventFieldId = event?.field?.id;
if (eventFieldId && eventFieldId === this.host.getFieldId()) {
return false;
}
const eventFormId = event?.form?.id; const eventFormId = event?.form?.id;
return !eventFormId || eventFormId === this.host.getFormId(); return !eventFormId || eventFormId === this.host.getFormId();
} }
@@ -83,7 +79,7 @@ export class ReactivePreselectionService<T = unknown> {
return; return;
} }
const next = this.toPreselection(this.host.getFieldValue()); const next = this.toPreselection(this.host.getFieldValue());
if (this.isSamePreselection(this.host.getPreselection(), next)) { if (this.isSamePreselection(this.host.getSelection(), next)) {
return; return;
} }
this.host.setPreselection(next); this.host.setPreselection(next);