-
-
- {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: validateUsersMessage } }}
-
-
-
- {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate : { pattern: getValidationPattern() } }}
-
-
-
-
- {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate : { requiredLength: getValidationMaxLength() } }}
-
-
-
-
-
- {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate : { requiredLength: getValidationMinLength() } }}
-
-
-
-
- {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}
-
-
-
- {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}
-
+
+ @if (validationLoading) {
+
+ }
+ @if (showErrors) {
+ @if (hasPreselectError() && !isValidationLoading()) {
+
+
+ {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate: { userName: validateUsersMessage } }}
+
+ }
+ @if (searchUserCtrl.hasError('pattern')) {
+
+
+
+ {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}
+
+
+ }
+ @if (searchUserCtrl.hasError('maxlength')) {
+
+
+
+ {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}
+
+
+ }
+ @if (searchUserCtrl.hasError('minlength')) {
+
+
+
+ {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}
+
+
+ }
+ @if ((searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()) {
+
+
+ {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}
+
+ }
+ @if (searchUserCtrl.hasError('searchTypingError') && !this.isFocused) {
+
+
+ {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate: { userName: searchedValue } }}
+
+ }
+ }
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
index 3b99609dd0..98381d0c34 100644
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
@@ -27,6 +27,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatChipHarness } from '@angular/material/chips/testing';
import { MatInputHarness } from '@angular/material/input/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
+import { MatProgressBar } from '@angular/material/progress-bar';
import { IdentityUserService } from '../services/identity-user.service';
describe('PeopleCloudComponent', () => {
@@ -99,6 +100,19 @@ describe('PeopleCloudComponent', () => {
expect(await inputField.getLabel()).toEqual('TITLE_KEY');
});
+ it('should use dynamic form field subscript sizing by default', () => {
+ expect(component.formFieldSubscriptSizing).toBe('dynamic');
+ });
+
+ it('should render validation progress inside the reserved status area', () => {
+ component.validationLoading = true;
+ fixture.detectChanges();
+
+ const progressBar = fixture.debugElement.query(By.directive(MatProgressBar));
+
+ expect(progressBar.parent.classes['adf-error-messages-container']).toBeTrue();
+ });
+
describe('Search user', () => {
beforeEach(() => {
fixture.detectChanges();
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts
index 5a11dd42e7..62a47a8af9 100644
--- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts
+++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts
@@ -169,7 +169,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges, AfterViewInit {
* Material form field subscript sizing (fixed / dynamic)
*/
@Input()
- formFieldSubscriptSizing: SubscriptSizing = 'fixed';
+ formFieldSubscriptSizing: SubscriptSizing = 'dynamic';
/**
* Show errors under the form field
diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts
index 71136e5c5b..0f9559bc03 100755
--- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts
@@ -17,8 +17,8 @@
import { DebugElement, SimpleChange } from '@angular/core';
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { FormModel, FormOutcomeEvent, FormOutcomeModel } from '@alfresco/adf-core';
-import { of, throwError } from 'rxjs';
+import { ADF_DISPLAY_TEXT_SETTINGS, FormFieldTypes, FormModel, FormOutcomeEvent, FormOutcomeModel } from '@alfresco/adf-core';
+import { Subject, of, throwError } from 'rxjs';
import { StartProcessCloudService } from '../services/start-process-cloud.service';
import { FormCloudService } from '../../../form/services/form-cloud.service';
import { FormCloudComponent } from '../../../form/components/form-cloud.component';
@@ -47,7 +47,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatAutocompleteHarness } from '@angular/material/autocomplete/testing';
import { MatButtonHarness } from '@angular/material/button/testing';
-import { FormCloudDisplayMode } from '../../../services/form-fields.interfaces';
+import { FormCloudDisplayMode, FormContent } from '../../../services/form-fields.interfaces';
import { MatDialogHarness } from '@angular/material/dialog/testing';
import { MatDialog } from '@angular/material/dialog';
import { ReactiveFormsModule } from '@angular/forms';
@@ -92,7 +92,10 @@ describe('StartProcessCloudComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [StartProcessCloudComponent, ReactiveFormsModule, StartProcessScreenCloudComponent],
- providers: [provideScreen(screenId, MockedTaskScreenCloudComponent)]
+ providers: [
+ provideScreen(screenId, MockedTaskScreenCloudComponent),
+ { provide: ADF_DISPLAY_TEXT_SETTINGS, useValue: { enableExpressionEvaluation: true } }
+ ]
});
processService = TestBed.inject(StartProcessCloudService);
formCloudService = TestBed.inject(FormCloudService);
@@ -417,6 +420,54 @@ describe('StartProcessCloudComponent', () => {
expect(startBtn.disabled).toBe(false);
});
+ it('should keep the start action unavailable while the form definition is loading', async () => {
+ const formDefinition = new Subject
();
+ formDefinitionSpy.and.returnValue(formDefinition);
+ typeValueInto('[data-automation-id="adf-inplace-input"]', 'My new process with form');
+ await selectOptionByName('processwithform');
+
+ const startButton = fixture.nativeElement.querySelector('#button-start');
+ expect(startButton).toBeNull();
+ expect(startProcessWithFormSpy).not.toHaveBeenCalled();
+ });
+
+ it('should materialize unrendered rich text expressions when starting a process', async () => {
+ formDefinitionSpy.and.returnValue(of(fakeStartForm));
+ component.processDefinitionCurrent = fakeProcessDefinitions[2];
+ component.processPayloadCloud.processDefinitionKey = fakeProcessDefinitions[2].key;
+ component.processInstanceName.setValue('My process');
+ fixture.detectChanges();
+ await fixture.whenStable();
+
+ const form = new FormModel({
+ fields: [
+ {
+ id: 'richText',
+ type: FormFieldTypes.DISPLAY_RICH_TEXT,
+ value: { blocks: [{ type: 'paragraph', data: { text: 'Hello ${field.name}' } }] }
+ },
+ { id: 'name', type: FormFieldTypes.TEXT, value: 'John' }
+ ]
+ });
+ const formElement = fixture.debugElement.query(By.css('adf-cloud-form'));
+ const startButton = fixture.debugElement.query(By.css('#button-start'));
+
+ formElement.triggerEventHandler('formLoaded', form);
+ fixture.detectChanges();
+ startButton.triggerEventHandler('click', null);
+
+ expect(startProcessWithFormSpy).toHaveBeenCalledWith(
+ component.appName,
+ fakeProcessDefinitions[2].formKey,
+ fakeProcessDefinitions[2].version,
+ jasmine.objectContaining({
+ values: jasmine.objectContaining({
+ richText: { blocks: [{ type: 'paragraph', data: { text: 'Hello John' } }] }
+ })
+ })
+ );
+ });
+
it('should be able to start a process with form full display mode', async () => {
component.displayModeConfigurations = [
{
diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts
index c06299d703..40126c5722 100755
--- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts
+++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts
@@ -30,10 +30,14 @@ import {
ViewEncapsulation
} from '@angular/core';
import {
+ ADF_DISPLAY_TEXT_SETTINGS,
ConfirmDialogComponent,
ContentLinkModel,
+ DisplayTextWidgetSettings,
+ FormExpressionService,
FormModel,
FormOutcomeEvent,
+ FormValues,
IconModule,
InplaceFormInputComponent,
LocalizedDatePipe,
@@ -65,6 +69,7 @@ import { FormCustomOutcomesComponent } from '../../../form/components/form-cloud
import { MatDialog } from '@angular/material/dialog';
import { StartProcessScreenCloudComponent } from '../../../screen/components/screen-cloud/start-process-event-screen/start-process-screen-cloud.component';
import { TaskTypeResolverService } from '../../../services/task-type-resolver/task-type-resolver.service';
+import { getExpressionEvaluationEnabled$, materializeSubmissionValues } from '../../../form/services/form-cloud-submission-values';
const MAX_NAME_LENGTH: number = 255;
const PROCESS_DEFINITION_DEBOUNCE: number = 300;
@@ -211,6 +216,11 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
private readonly hasVisibleOutcomesSubject = new BehaviorSubject(false);
private readonly dialog = inject(MatDialog);
private readonly taskTypeResolverService = inject(TaskTypeResolverService);
+ private readonly expressions = inject(FormExpressionService);
+ private readonly displayTextSettings = inject | DisplayTextWidgetSettings>(ADF_DISPLAY_TEXT_SETTINGS, {
+ optional: true
+ });
+ private enableExpressionEvaluation = false;
private screenSubmitPayload: unknown;
@@ -218,8 +228,12 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
showCompleteButton = false;
get isProcessFormValid(): boolean {
- if (this.hasForm && this.isFormCloudLoaded) {
- return (this.formCloud ? !Object.keys(this.formCloud.values).length : false) || this.formCloud?.isValid || this.isProcessStarting;
+ if (this.hasForm) {
+ if (!this.isFormCloudLoaded || !this.formCloud) {
+ return false;
+ }
+
+ return !Object.keys(this.formCloud.values).length || this.formCloud.isValid || this.isProcessStarting;
} else if (this.hasScreen) {
return true;
} else {
@@ -268,6 +282,12 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
constructor() {
this.startProcessButtonLabel = this.defaultStartProcessButtonLabel;
this.cancelButtonLabel = this.defaultCancelProcessButtonLabel;
+
+ getExpressionEvaluationEnabled$(this.displayTextSettings)
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe((enabled) => {
+ this.enableExpressionEvaluation = enabled;
+ });
}
ngOnInit() {
@@ -482,6 +502,14 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
}
startProcessWithoutConfirmation() {
+ let submissionValues = this.screenSubmitPayload;
+ if (this.hasForm) {
+ if (!this.formCloud) {
+ return;
+ }
+ submissionValues = this.getFormSubmissionValues(this.formCloud);
+ }
+
this.isProcessStarting = true;
let action: Observable;
@@ -495,7 +523,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
processName: this.processInstanceName.value,
processDefinitionKey: this.processPayloadCloud.processDefinitionKey,
variables: this.variables ?? {},
- values: this.hasForm ? this.formCloud.values : this.screenSubmitPayload,
+ values: submissionValues,
outcome: this.customOutcomeName
})
);
@@ -524,6 +552,10 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
});
}
+ private getFormSubmissionValues(form: FormModel): FormValues {
+ return materializeSubmissionValues(form, { enableExpressionEvaluation: this.enableExpressionEvaluation }, this.expressions);
+ }
+
startProcess() {
if (!this.formCloud?.confirmMessage?.show) {
this.startProcessWithoutConfirmation();
diff --git a/lib/process-services-cloud/src/lib/screen/components/screen-cloud/base-screen/base-screen-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/screen/components/screen-cloud/base-screen/base-screen-cloud.component.spec.ts
new file mode 100644
index 0000000000..f1135da80e
--- /dev/null
+++ b/lib/process-services-cloud/src/lib/screen/components/screen-cloud/base-screen/base-screen-cloud.component.spec.ts
@@ -0,0 +1,198 @@
+/*!
+ * @license
+ * Copyright Š 2005-2026 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ComponentRef, OnDestroy } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BaseScreenCloudComponent } from './base-screen-cloud.component';
+import { provideScreen } from '../../../services/provide-screen';
+import { ScreenRenderingService } from '../../../services/screen-rendering.service';
+
+@Component({
+ selector: 'adf-cloud-test-dynamic-screen',
+ template: `dynamic screen
`
+})
+class TestDynamicScreenComponent implements OnDestroy {
+ destroyed = false;
+
+ ngOnDestroy(): void {
+ this.destroyed = true;
+ }
+}
+
+@Component({
+ selector: 'adf-cloud-test-host-screen',
+ template: ``
+})
+class TestHostScreenComponent extends BaseScreenCloudComponent {
+ setInputsCalls: ComponentRef[] = [];
+ subscribeToOutputsCalls: ComponentRef[] = [];
+
+ get dynamicComponentRef(): ComponentRef | undefined {
+ return this.componentRef;
+ }
+
+ get dynamicComponentRefSignalValue(): ComponentRef | undefined {
+ return this.componentRefChanged();
+ }
+
+ protected override setInputsForDynamicComponent(componentRef: ComponentRef): void {
+ this.setInputsCalls.push(componentRef);
+ }
+
+ protected subscribeToOutputs(componentRef: ComponentRef): void {
+ this.subscribeToOutputsCalls.push(componentRef);
+ }
+}
+
+/** Same host component, but without the `#container` anchor in its template. */
+@Component({
+ selector: 'adf-cloud-test-host-screen-without-container',
+ template: ``
+})
+class TestHostScreenWithoutContainerComponent extends TestHostScreenComponent {}
+
+describe('BaseScreenCloudComponent', () => {
+ const screenId = 'test-screen';
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [TestHostScreenComponent, TestHostScreenWithoutContainerComponent, TestDynamicScreenComponent],
+ providers: [provideScreen(screenId, TestDynamicScreenComponent)]
+ });
+ });
+
+ describe('when a screenId is provided', () => {
+ let fixture: ComponentFixture;
+ let component: TestHostScreenComponent;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TestHostScreenComponent);
+ component = fixture.componentInstance;
+ fixture.componentRef.setInput('screenId', screenId);
+ fixture.detectChanges();
+ });
+
+ it('should create the dynamic component and expose it through the signal', () => {
+ expect(component.dynamicComponentRef).toBeDefined();
+ expect(component.dynamicComponentRefSignalValue).toBe(component.dynamicComponentRef);
+ expect(fixture.debugElement.query(By.css('.adf-cloud-test-dynamic-screen'))).toBeTruthy();
+ });
+
+ it('should wire inputs and outputs once, passing the created component reference', () => {
+ expect(component.setInputsCalls).toEqual([component.dynamicComponentRef!]);
+ expect(component.subscribeToOutputsCalls).toEqual([component.dynamicComponentRef!]);
+ });
+
+ it('should destroy the dynamic component reference on destroy', () => {
+ const destroySpy = spyOn(component.dynamicComponentRef!, 'destroy').and.callThrough();
+
+ fixture.destroy();
+
+ expect(destroySpy).toHaveBeenCalledTimes(1);
+ });
+
+ it('should run the ngOnDestroy hook of the dynamic component on destroy', () => {
+ const dynamicComponentInstance = component.dynamicComponentRef?.instance;
+ expect(dynamicComponentInstance?.destroyed).toBeFalse();
+
+ fixture.destroy();
+
+ expect(dynamicComponentInstance?.destroyed).toBeTrue();
+ });
+
+ it('should clear the dynamic component reference and the signal on destroy', () => {
+ fixture.destroy();
+
+ expect(component.dynamicComponentRef).toBeUndefined();
+ expect(component.dynamicComponentRefSignalValue).toBeUndefined();
+ });
+
+ it('should destroy the dynamic component reference only once when ngOnDestroy runs again', () => {
+ const destroySpy = spyOn(component.dynamicComponentRef!, 'destroy');
+
+ component.ngOnDestroy();
+ component.ngOnDestroy();
+
+ expect(destroySpy).toHaveBeenCalledTimes(1);
+ });
+ });
+
+ describe('when no screenId is provided', () => {
+ let fixture: ComponentFixture;
+ let component: TestHostScreenComponent;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TestHostScreenComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should not create any dynamic component nor wire inputs and outputs', () => {
+ expect(component.dynamicComponentRef).toBeUndefined();
+ expect(component.dynamicComponentRefSignalValue).toBeUndefined();
+ expect(component.setInputsCalls).toEqual([]);
+ expect(component.subscribeToOutputsCalls).toEqual([]);
+ expect(fixture.debugElement.query(By.css('.adf-cloud-test-dynamic-screen'))).toBeNull();
+ });
+
+ it('should not throw on destroy', () => {
+ expect(() => fixture.destroy()).not.toThrow();
+ expect(component.dynamicComponentRef).toBeUndefined();
+ });
+ });
+
+ describe('when the container anchor is missing', () => {
+ let fixture: ComponentFixture;
+ let component: TestHostScreenWithoutContainerComponent;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TestHostScreenWithoutContainerComponent);
+ component = fixture.componentInstance;
+ fixture.componentRef.setInput('screenId', screenId);
+ });
+
+ it('should not throw and should not create any dynamic component', () => {
+ expect(() => fixture.detectChanges()).not.toThrow();
+
+ expect(component.container).toBeUndefined();
+ expect(component.dynamicComponentRef).toBeUndefined();
+ expect(component.dynamicComponentRefSignalValue).toBeUndefined();
+ });
+
+ it('should not wire inputs and outputs when no dynamic component was created', () => {
+ fixture.detectChanges();
+
+ expect(component.setInputsCalls).toEqual([]);
+ expect(component.subscribeToOutputsCalls).toEqual([]);
+ });
+
+ it('should not resolve any component type', () => {
+ const resolveComponentTypeSpy = spyOn(TestBed.inject(ScreenRenderingService), 'resolveComponentType').and.callThrough();
+
+ fixture.detectChanges();
+
+ expect(resolveComponentTypeSpy).not.toHaveBeenCalled();
+ });
+
+ it('should not throw on destroy', () => {
+ fixture.detectChanges();
+
+ expect(() => fixture.destroy()).not.toThrow();
+ });
+ });
+});
diff --git a/lib/process-services-cloud/src/lib/screen/components/screen-cloud/base-screen/base-screen-cloud.component.ts b/lib/process-services-cloud/src/lib/screen/components/screen-cloud/base-screen/base-screen-cloud.component.ts
index b00f85c4da..7da72468dc 100644
--- a/lib/process-services-cloud/src/lib/screen/components/screen-cloud/base-screen/base-screen-cloud.component.ts
+++ b/lib/process-services-cloud/src/lib/screen/components/screen-cloud/base-screen/base-screen-cloud.component.ts
@@ -15,20 +15,20 @@
* limitations under the License.
*/
-import { Component, ComponentRef, inject, Input, OnInit, signal, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, ComponentRef, inject, Input, OnDestroy, OnInit, signal, ViewChild, ViewContainerRef } from '@angular/core';
import { ScreenRenderingService } from '../../../services/screen-rendering.service';
@Component({
template: ''
})
-export abstract class BaseScreenCloudComponent implements OnInit {
+export abstract class BaseScreenCloudComponent implements OnInit, OnDestroy {
@Input()
screenId: string = '';
@ViewChild('container', { read: ViewContainerRef, static: true })
- container: ViewContainerRef;
+ container: ViewContainerRef | undefined;
- protected componentRef: ComponentRef;
+ protected componentRef: ComponentRef | undefined;
private readonly _componentRefChanged = signal | undefined>(undefined);
protected readonly componentRefChanged = this._componentRefChanged.asReadonly();
protected readonly screenRenderingService = inject(ScreenRenderingService);
@@ -37,17 +37,27 @@ export abstract class BaseScreenCloudComponent imple
this.createDynamicComponent();
}
- private createDynamicComponent(): void {
- if (this.screenId) {
- const componentType = this.screenRenderingService.resolveComponentType({ type: this.screenId });
- this.componentRef = this.container.createComponent(componentType);
- this._componentRefChanged.set(this.componentRef);
- this.setInputsForDynamicComponent();
- this.subscribeToOutputs();
- }
+ ngOnDestroy(): void {
+ this.componentRef?.destroy();
+ this.componentRef = undefined;
+ this._componentRefChanged.set(undefined);
}
- protected setInputsForDynamicComponent(): void {}
+ private createDynamicComponent(): void {
+ if (!this.screenId || !this.container) {
+ return;
+ }
- protected abstract subscribeToOutputs(): void;
+ const componentType = this.screenRenderingService.resolveComponentType({ type: this.screenId });
+ const componentRef: ComponentRef = this.container.createComponent(componentType);
+
+ this.componentRef = componentRef;
+ this._componentRefChanged.set(componentRef);
+ this.setInputsForDynamicComponent(componentRef);
+ this.subscribeToOutputs(componentRef);
+ }
+
+ protected setInputsForDynamicComponent(_componentRef: ComponentRef): void {}
+
+ protected abstract subscribeToOutputs(componentRef: ComponentRef): void;
}
diff --git a/lib/process-services-cloud/src/lib/screen/components/screen-cloud/start-process-event-screen/start-process-screen-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/screen/components/screen-cloud/start-process-event-screen/start-process-screen-cloud.component.spec.ts
index 937d1ad536..da37f04b9e 100644
--- a/lib/process-services-cloud/src/lib/screen/components/screen-cloud/start-process-event-screen/start-process-screen-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/screen/components/screen-cloud/start-process-event-screen/start-process-screen-cloud.component.spec.ts
@@ -16,6 +16,7 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, Input, OnDestroy, input, output } from '@angular/core';
import { StartProcessScreenCloudComponent } from './start-process-screen-cloud.component';
import { MockedTaskScreenCloudComponent } from '../../../../testing/start-process-screen-mock.component';
import { provideScreen } from '../../../services/provide-screen';
@@ -66,11 +67,11 @@ describe('StartProcessScreenCloudComponent', () => {
it('should set appName', () => {
const screenInstance: StartProcessScreenCloud = fixture.debugElement.query(By.directive(MockedTaskScreenCloudComponent)).componentInstance;
- expect(screenInstance.appName()).toEqual('');
+ expect(screenInstance.appName?.()).toEqual('');
const newValue = 'new-app-name';
fixture.componentRef.setInput('appName', newValue);
fixture.detectChanges();
- expect(screenInstance.appName()).toEqual(newValue);
+ expect(screenInstance.appName?.()).toEqual(newValue);
});
it('should set process definition id', () => {
@@ -84,10 +85,125 @@ describe('StartProcessScreenCloudComponent', () => {
it('should set resolvedValues', () => {
const screenInstance: StartProcessScreenCloud = fixture.debugElement.query(By.directive(MockedTaskScreenCloudComponent)).componentInstance;
- expect(screenInstance.resolvedValues()).toBeUndefined();
+ expect(screenInstance.resolvedValues?.()).toBeUndefined();
const newValues = [new TaskVariableCloud({ id: 'new-id', name: 'new-name' })];
fixture.componentRef.setInput('resolvedValues', newValues);
fixture.detectChanges();
- expect(screenInstance.resolvedValues()).toEqual(newValues);
+ expect(screenInstance.resolvedValues?.()).toEqual(newValues);
+ });
+});
+
+@Component({
+ selector: 'adf-cloud-destroy-tracking-screen',
+ template: `screen
`
+})
+class DestroyTrackingScreenComponent implements StartProcessScreenCloud, OnDestroy {
+ readonly appName = input('');
+ processDefinitionId = input('');
+ readonly resolvedValues = input();
+ defaultStartProcessButtonsConfigurationChange = output();
+ startProcessPayloadChanged = output();
+
+ destroyed = false;
+
+ ngOnDestroy(): void {
+ this.destroyed = true;
+ }
+}
+
+@Component({
+ selector: 'adf-cloud-test-start-process-wrapper',
+ template: `
+ @if (showScreen) {
+
+ }
+ `,
+ imports: [StartProcessScreenCloudComponent]
+})
+class TestStartProcessWrapperComponent {
+ @Input() screenId = '';
+ showScreen = true;
+}
+
+describe('StartProcessScreenCloudComponent - destroy', () => {
+ let fixture: ComponentFixture;
+ let component: TestStartProcessWrapperComponent;
+ const screenId = 'screen-1234-5678-121212-123456';
+
+ const getScreenInstance = (): DestroyTrackingScreenComponent =>
+ fixture.debugElement.query(By.directive(DestroyTrackingScreenComponent)).componentInstance;
+
+ const destroyScreen = () => {
+ component.showScreen = false;
+ fixture.detectChanges();
+ };
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [TestStartProcessWrapperComponent],
+ providers: [provideScreen(screenId, DestroyTrackingScreenComponent)]
+ });
+
+ fixture = TestBed.createComponent(TestStartProcessWrapperComponent);
+ component = fixture.componentInstance;
+ fixture.componentRef.setInput('screenId', screenId);
+ fixture.detectChanges();
+ });
+
+ it('should destroy the screen component when the host is destroyed', () => {
+ const screenInstance = getScreenInstance();
+ expect(screenInstance.destroyed).toBeFalse();
+
+ destroyScreen();
+
+ expect(screenInstance.destroyed).toBeTrue();
+ });
+
+ it('should remove the screen component from the DOM when the host is destroyed', () => {
+ expect(fixture.debugElement.query(By.css('.adf-cloud-destroy-tracking-screen'))).toBeTruthy();
+
+ destroyScreen();
+
+ expect(fixture.debugElement.query(By.css('.adf-cloud-destroy-tracking-screen'))).toBeNull();
+ });
+
+ it('should create a new screen component instance when the host is re-created', () => {
+ const firstInstance = getScreenInstance();
+
+ destroyScreen();
+ component.showScreen = true;
+ fixture.detectChanges();
+
+ const secondInstance = getScreenInstance();
+ expect(secondInstance).not.toBe(firstInstance);
+ expect(secondInstance.destroyed).toBeFalse();
+ expect(secondInstance.processDefinitionId()).toBe('definition-id');
+ });
+});
+
+describe('StartProcessScreenCloudComponent - without screenId', () => {
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [StartProcessScreenCloudComponent]
+ });
+ fixture = TestBed.createComponent(StartProcessScreenCloudComponent);
+ });
+
+ it('should not create any screen component and should not throw', () => {
+ expect(() => fixture.detectChanges()).not.toThrow();
+ expect(fixture.debugElement.query(By.directive(DestroyTrackingScreenComponent))).toBeNull();
+ });
+
+ it('should not throw when inputs change or on destroy', () => {
+ fixture.detectChanges();
+
+ expect(() => {
+ fixture.componentRef.setInput('appName', 'new-app-name');
+ fixture.componentRef.setInput('resolvedValues', [new TaskVariableCloud({ id: 'id', name: 'name' })]);
+ fixture.detectChanges();
+ }).not.toThrow();
+ expect(() => fixture.destroy()).not.toThrow();
});
});
diff --git a/lib/process-services-cloud/src/lib/screen/components/screen-cloud/start-process-event-screen/start-process-screen-cloud.component.ts b/lib/process-services-cloud/src/lib/screen/components/screen-cloud/start-process-event-screen/start-process-screen-cloud.component.ts
index 0f9c94dc81..ce069b6cdb 100644
--- a/lib/process-services-cloud/src/lib/screen/components/screen-cloud/start-process-event-screen/start-process-screen-cloud.component.ts
+++ b/lib/process-services-cloud/src/lib/screen/components/screen-cloud/start-process-event-screen/start-process-screen-cloud.component.ts
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { ChangeDetectionStrategy, Component, effect, input, output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ComponentRef, effect, input, output, signal } from '@angular/core';
import { BaseScreenCloudComponent } from '../base-screen/base-screen-cloud.component';
import { MatCardModule } from '@angular/material/card';
import { CommonModule } from '@angular/common';
@@ -43,7 +43,7 @@ export class StartProcessScreenCloudComponent extends BaseScreenCloudComponent {
const componentRef = this.componentRefChanged();
- if (componentRef.instance && 'appName' in componentRef.instance) {
+ if (componentRef?.instance && 'appName' in componentRef.instance) {
componentRef.setInput('appName', this.appName());
}
});
@@ -56,9 +56,9 @@ export class StartProcessScreenCloudComponent extends BaseScreenCloudComponent this.screenStartProcessPayloadChange.emit(payload));
- this.componentRef.instance.defaultStartProcessButtonsConfigurationChange.subscribe((config) => {
+ protected subscribeToOutputs(componentRef: ComponentRef): void {
+ componentRef.instance.startProcessPayloadChanged.subscribe((payload) => this.screenStartProcessPayloadChange.emit(payload));
+ componentRef.instance.defaultStartProcessButtonsConfigurationChange.subscribe((config) => {
this.showStartProcessButtons.set(config.show);
this.disableStartProcessButton.emit(config.disable);
});
diff --git a/lib/process-services-cloud/src/lib/screen/components/screen-cloud/user-task-screen/screen-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/screen/components/screen-cloud/user-task-screen/screen-cloud.component.spec.ts
index 3bf74e8816..e271a8a6e6 100644
--- a/lib/process-services-cloud/src/lib/screen/components/screen-cloud/user-task-screen/screen-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/screen/components/screen-cloud/user-task-screen/screen-cloud.component.spec.ts
@@ -16,7 +16,7 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
import { By } from '@angular/platform-browser';
import { ScreenRenderingService } from '../../../services/screen-rendering.service';
import { TaskScreenCloudComponent } from './screen-cloud.component';
@@ -32,18 +32,22 @@ import { TaskScreenCloudComponent } from './screen-cloud.component';