[ADF-5106] allow to redefine form widgets (APS 1.x and cloud) (#5601)

* create failing test

* fix form and start form widget registration

* update cloud form

lib/core/form/components/form-base.component.ts

@@ -201,15 +201,11 @@ export abstract class FormBaseComponent {
         this.error.emit(err);
     }
 
-    abstract onRefreshClicked();
+    abstract onRefreshClicked(): void;
+    abstract saveTaskForm(): void;
+    abstract completeTaskForm(outcome?: string): void;
 
-    abstract saveTaskForm();
+    protected abstract onTaskSaved(form: FormModel): void;
-
+    protected abstract storeFormAsMetadata(): void;
-    abstract completeTaskForm(outcome?: string);
+    protected abstract onExecuteOutcome(outcome: FormOutcomeModel): boolean;
-
-    protected abstract onTaskSaved(form: FormModel);
-
-    protected abstract storeFormAsMetadata();
-
-    protected abstract onExecuteOutcome(outcome: FormOutcomeModel);
 }

lib/process-services-cloud/src/lib/form/components/cloud-form-rendering.service.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * 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 { Injectable } from '@angular/core';
+import { FormRenderingService } from '@alfresco/adf-core';
+import { AttachFileCloudWidgetComponent } from './widgets/attach-file/attach-file-cloud-widget.component';
+import { DropdownCloudWidgetComponent } from './widgets/dropdown/dropdown-cloud.widget';
+import { DateCloudWidgetComponent } from './widgets/date/date-cloud.widget';
+import { PeopleCloudWidgetComponent } from './widgets/people/people-cloud.widget';
+import { GroupCloudWidgetComponent } from './widgets/group/group-cloud.widget';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class CloudFormRenderingService extends FormRenderingService {
+    constructor() {
+        super();
+        this.setComponentTypeResolver('upload', () => AttachFileCloudWidgetComponent, true);
+        this.setComponentTypeResolver('dropdown', () => DropdownCloudWidgetComponent, true);
+        this.setComponentTypeResolver('date', () => DateCloudWidgetComponent, true);
+        this.setComponentTypeResolver('people', () => PeopleCloudWidgetComponent, true);
+        this.setComponentTypeResolver('functional-group', () => GroupCloudWidgetComponent, true);
+    }
+}

lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange, NgModule, Injector, ComponentFactoryResolver } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { Observable, of, throwError } from 'rxjs';
@@ -27,7 +27,6 @@ import {
     FormModel,
     FormOutcomeEvent,
     FormOutcomeModel,
-    FormRenderingService,
     setupTestBed,
     TRANSLATION_PROVIDER,
     WidgetVisibilityService
@@ -46,20 +45,48 @@ import { FormCloudRepresentation } from '../models/form-cloud-representation.mod
 import { FormCloudModule } from '../form-cloud.module';
 import { TranslateService } from '@ngx-translate/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { CloudFormRenderingService } from './cloud-form-rendering.service';
 
 describe('FormCloudComponent', () => {
     let formCloudService: FormCloudService;
     let fixture: ComponentFixture<FormCloudComponent>;
     let formComponent: FormCloudComponent;
     let visibilityService: WidgetVisibilityService;
-    let formRenderingService: FormRenderingService;
+    let formRenderingService: CloudFormRenderingService;
     let translateService: TranslateService;
 
+    @Component({
+        selector: 'adf-cloud-custom-widget',
+        template: '<div></div>'
+    })
+    class CustomWidget {
+        typeId = 'CustomWidget';
+    }
+
+    @NgModule({
+        declarations: [CustomWidget],
+        exports: [CustomWidget],
+        entryComponents: [CustomWidget]
+    })
+    class CustomUploadModule {}
+
+    function buildWidget(type: string, injector: Injector): any {
+        const resolver = formRenderingService.getComponentTypeResolver(type);
+        const widgetType = resolver(null);
+
+        const factoryResolver: ComponentFactoryResolver = TestBed.get(ComponentFactoryResolver);
+        const factory = factoryResolver.resolveComponentFactory(widgetType);
+        const componentRef = factory.create(injector);
+
+        return componentRef.instance;
+    }
+
     setupTestBed({
         imports: [
             NoopAnimationsModule,
             CoreModule.forRoot(),
-            FormCloudModule
+            FormCloudModule,
+            CustomUploadModule
         ],
         providers: [
             {
@@ -74,19 +101,82 @@ describe('FormCloudComponent', () => {
     });
 
     beforeEach(async(() => {
-        formRenderingService = TestBed.get(FormRenderingService);
+        formRenderingService = TestBed.get(CloudFormRenderingService);
         formCloudService = TestBed.get(FormCloudService);
-        visibilityService = TestBed.get(WidgetVisibilityService);
+
         translateService = TestBed.get(TranslateService);
+
+        visibilityService = TestBed.get(WidgetVisibilityService);
         spyOn(visibilityService, 'refreshVisibility').and.callThrough();
+
         const appConfigService = TestBed.get(AppConfigService);
         spyOn(appConfigService, 'get').and.returnValue([]);
-        spyOn(formRenderingService, 'setComponentTypeResolver').and.returnValue(true);
+
         fixture = TestBed.createComponent(FormCloudComponent);
         formComponent = fixture.componentInstance;
         fixture.detectChanges();
    }));
 
+    it('should register custom [upload] widget', () => {
+        const widget = buildWidget('upload', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('AttachFileCloudWidgetComponent');
+    });
+
+    it('should allow to replace custom [upload] widget', () => {
+        formRenderingService.setComponentTypeResolver('upload', () => CustomWidget, true);
+
+        const widget = buildWidget('upload', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('CustomWidget');
+    });
+
+    it('should register custom [dropdown] widget', () => {
+        const widget = buildWidget('dropdown', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('DropdownCloudWidgetComponent');
+    });
+
+    it('should allow to replace custom [dropdown] widget', () => {
+        formRenderingService.setComponentTypeResolver('dropdown', () => CustomWidget, true);
+
+        const widget = buildWidget('dropdown', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('CustomWidget');
+    });
+
+    it('should register custom [date] widget', () => {
+        const widget = buildWidget('date', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('DateCloudWidgetComponent');
+    });
+
+    it('should allow to replace custom [date] widget', () => {
+        formRenderingService.setComponentTypeResolver('date', () => CustomWidget, true);
+
+        const widget = buildWidget('date', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('CustomWidget');
+    });
+
+    it('should register custom [people] widget', () => {
+        const widget = buildWidget('people', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('PeopleCloudWidgetComponent');
+    });
+
+    it('should allow to replace custom [people] widget', () => {
+        formRenderingService.setComponentTypeResolver('people', () => CustomWidget, true);
+
+        const widget = buildWidget('people', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('CustomWidget');
+    });
+
+    it('should register custom [functional-group] widget', () => {
+        const widget = buildWidget('functional-group', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('GroupCloudWidgetComponent');
+    });
+
+    it('should allow to replace custom [functional-group] widget', () => {
+        formRenderingService.setComponentTypeResolver('functional-group', () => CustomWidget, true);
+
+        const widget = buildWidget('functional-group', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('CustomWidget');
+    });
+
     it('should check form', () => {
         expect(formComponent.hasForm()).toBeFalsy();
         formComponent.form = new FormModel();

lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts

@@ -39,16 +39,15 @@ import {
 } from '@alfresco/adf-core';
 import { FormCloudService } from '../services/form-cloud.service';
 import { TaskVariableCloud } from '../models/task-variable-cloud.model';
-import { DropdownCloudWidgetComponent } from './widgets/dropdown/dropdown-cloud.widget';
-import { AttachFileCloudWidgetComponent } from './widgets/attach-file/attach-file-cloud-widget.component';
-import { DateCloudWidgetComponent } from './widgets/date/date-cloud.widget';
-import { PeopleCloudWidgetComponent } from './widgets/people/people-cloud.widget';
-import { GroupCloudWidgetComponent } from './widgets/group/group-cloud.widget';
 import { TaskDetailsCloudModel } from '../../task/start-task/models/task-details-cloud.model';
+import { CloudFormRenderingService } from './cloud-form-rendering.service';
 
 @Component({
     selector: 'adf-cloud-form',
-    templateUrl: './form-cloud.component.html'
+    templateUrl: './form-cloud.component.html',
+    providers: [
+        { provide: FormRenderingService, useClass: CloudFormRenderingService }
+    ]
 })
 export class FormCloudComponent extends FormBaseComponent implements OnChanges, OnDestroy {
 
@@ -113,7 +112,6 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
     constructor(protected formCloudService: FormCloudService,
                 protected formService: FormService,
                 private notificationService: NotificationService,
-                private formRenderingService: FormRenderingService,
                 protected visibilityService: WidgetVisibilityService,
                 private appConfigService: AppConfigService) {
         super();
@@ -123,11 +121,6 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
             .subscribe((content) => {
                 this.formContentClicked.emit(content);
             });
-        this.formRenderingService.setComponentTypeResolver('upload', () => AttachFileCloudWidgetComponent, true);
-        this.formRenderingService.setComponentTypeResolver('dropdown', () => DropdownCloudWidgetComponent, true);
-        this.formRenderingService.setComponentTypeResolver('date', () => DateCloudWidgetComponent, true);
-        this.formRenderingService.setComponentTypeResolver('people', () => PeopleCloudWidgetComponent, true);
-        this.formRenderingService.setComponentTypeResolver('functional-group', () => GroupCloudWidgetComponent, true);
     }
 
     ngOnChanges(changes: SimpleChanges) {

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts

@@ -42,6 +42,8 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent
     implements OnInit {
     static ACS_SERVICE = 'alfresco-content';
 
+    typeId = 'AttachFileCloudWidgetComponent';
+
     constructor(
         formService: FormService,
         logger: LogService,

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts

@@ -38,6 +38,7 @@ import { MOMENT_DATE_FORMATS, MomentDateAdapter, baseHost, WidgetComponent,
 })
 export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
 
+    typeId = 'DateCloudWidgetComponent';
     DATE_FORMAT_CLOUD = 'YYYY-MM-DD';
 
     minDate: Moment;

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts

@@ -32,6 +32,7 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class DropdownCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
 
+    typeId = 'DropdownCloudWidgetComponent';
     protected onDestroy$ = new Subject<boolean>();
 
     constructor(public formService: FormService,

lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.ts

@@ -33,6 +33,7 @@ export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit
 
     private onDestroy$ = new Subject<boolean>();
 
+    typeId = 'GroupCloudWidgetComponent';
     roles: string[];
     mode: string;
     title: string;

lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.ts

@@ -33,6 +33,7 @@ export class PeopleCloudWidgetComponent extends WidgetComponent implements OnIni
 
     private onDestroy$ = new Subject<boolean>();
 
+    typeId = 'PeopleCloudWidgetComponent';
     appName: string;
     roles: string[];
     mode: string;

lib/process-services-cloud/src/lib/form/public-api.ts

@@ -19,6 +19,7 @@ export * from './models/task-variable-cloud.model';
 
 export * from './components/form-cloud.component';
 export * from './components/form-definition-selector-cloud.component';
+export * from './components/cloud-form-rendering.service';
 
 export * from './services/form-cloud.service';
 export * from './services/form-definition-selector-cloud.service';

lib/process-services/src/lib/content-widget/attach-file-widget.component.ts

@@ -55,6 +55,7 @@ import { AttachFileWidgetDialogService } from './attach-file-widget-dialog.servi
 })
 export class AttachFileWidgetComponent extends UploadWidgetComponent implements OnInit, OnDestroy {
 
+    typeId = 'AttachFileWidgetComponent';
     repositoryList = [];
     private tempFilesList = [];
     private onDestroy$ = new Subject<boolean>();

lib/process-services/src/lib/content-widget/attach-folder-widget.component.ts

@@ -45,6 +45,7 @@ import { Node } from '@alfresco/js-api';
 })
 export class AttachFolderWidgetComponent extends WidgetComponent implements OnInit {
 
+    typeId = 'AttachFolderWidgetComponent';
     hasFolder: boolean = false;
     selectedFolderName: string = '';
 

lib/process-services/src/lib/form/form.component.spec.ts

@@ -15,30 +15,98 @@
  * limitations under the License.
  */
 
-import { SimpleChange } from '@angular/core';
+import { SimpleChange, ComponentFactoryResolver, Injector, NgModule, Component } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { Observable, of, throwError } from 'rxjs';
 import { FormFieldModel, FormFieldTypes, FormModel, FormOutcomeEvent, FormOutcomeModel,
-    FormService, WidgetVisibilityService, NodeService, LogService, ContainerModel, fakeForm, FormRenderingService } from '@alfresco/adf-core';
+    FormService, WidgetVisibilityService, NodeService, ContainerModel, fakeForm,
-
+    setupTestBed, CoreModule } from '@alfresco/adf-core';
 import { FormComponent } from './form.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { FormModule } from './form.module';
+import { ContentWidgetModule } from '../content-widget/content-widget.module';
+import { ProcessFormRenderingService } from './process-form-rendering.service';
 
 describe('FormComponent', () => {
 
-    let formService: FormService;
+    let fixture: ComponentFixture<FormComponent>;
     let formComponent: FormComponent;
+
+    let formService: FormService;
     let visibilityService: WidgetVisibilityService;
     let nodeService: NodeService;
-    let logService: LogService;
+    let formRenderingService: ProcessFormRenderingService;
-    let formRenderingService: FormRenderingService;
+
+    @Component({
+        selector: 'adf-custom-widget',
+        template: '<div></div>'
+    })
+    class CustomWidget {
+        typeId = 'CustomWidget';
+    }
+
+    @NgModule({
+        declarations: [CustomWidget],
+        exports: [CustomWidget],
+        entryComponents: [CustomWidget]
+    })
+    class CustomUploadModule {}
+
+    setupTestBed({
+        imports: [
+            NoopAnimationsModule,
+            CoreModule.forRoot(),
+            FormModule,
+            ContentWidgetModule,
+            CustomUploadModule
+        ]
+    });
+
+    function buildWidget(type: string, injector: Injector): any {
+        const resolver = formRenderingService.getComponentTypeResolver(type);
+        const widgetType = resolver(null);
+
+        const factoryResolver: ComponentFactoryResolver = TestBed.get(ComponentFactoryResolver);
+        const factory = factoryResolver.resolveComponentFactory(widgetType);
+        const componentRef = factory.create(injector);
+
+        return componentRef.instance;
+    }
 
     beforeEach(() => {
-        logService = new LogService(null);
+        visibilityService = TestBed.get(WidgetVisibilityService);
-        visibilityService = new WidgetVisibilityService(null, logService);
         spyOn(visibilityService, 'refreshVisibility').and.stub();
-        formService = new FormService(null, null, logService);
+
-        nodeService = new NodeService(null);
+        formService = TestBed.get(FormService);
-        formRenderingService = new FormRenderingService();
+        nodeService = TestBed.get(NodeService);
-        formComponent = new FormComponent(formService, visibilityService, null, nodeService, formRenderingService);
+        formRenderingService = TestBed.get(ProcessFormRenderingService);
+
+        fixture = TestBed.createComponent(FormComponent);
+        formComponent = fixture.componentInstance;
+    });
+
+    it('should register custom [upload] widget', () => {
+        const widget = buildWidget('upload', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('AttachFileWidgetComponent');
+    });
+
+    it('should register custom [select-folder] widget', () => {
+        const widget = buildWidget('select-folder', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('AttachFolderWidgetComponent');
+    });
+
+    it('should allow to replace custom [upload] widget', () => {
+        formRenderingService.setComponentTypeResolver('upload', () => CustomWidget, true);
+
+        const widget = buildWidget('upload', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('CustomWidget');
+    });
+
+    it('should allow to replace custom [select-folder] widget', () => {
+        formRenderingService.setComponentTypeResolver('select-folder', () => CustomWidget, true);
+
+        const widget = buildWidget('select-folder', fixture.componentRef.injector);
+        expect(widget['typeId']).toBe('CustomWidget');
     });
 
     it('should check form', () => {

lib/process-services/src/lib/form/form.component.ts

@@ -16,18 +16,21 @@
  */
 
 import { Component, EventEmitter, Input, Output, ViewEncapsulation, SimpleChanges, OnInit, OnDestroy, OnChanges } from '@angular/core';
-import { AttachFileWidgetComponent, AttachFolderWidgetComponent } from '../content-widget';
 import { EcmModelService, NodeService, WidgetVisibilityService,
     FormService, FormRenderingService, FormBaseComponent, FormOutcomeModel,
     FormEvent, FormErrorEvent, FormFieldModel,
     FormModel, FormOutcomeEvent, FormValues, ContentLinkModel } from '@alfresco/adf-core';
 import { Observable, of, Subject } from 'rxjs';
 import { switchMap, takeUntil } from 'rxjs/operators';
+import { ProcessFormRenderingService } from './process-form-rendering.service';
 
 @Component({
     selector: 'adf-form',
     templateUrl: './form.component.html',
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    providers: [
+        { provide: FormRenderingService, useClass: ProcessFormRenderingService }
+    ]
 })
 export class FormComponent extends FormBaseComponent implements OnInit, OnDestroy, OnChanges {
 
@@ -86,11 +89,8 @@ export class FormComponent extends FormBaseComponent implements OnInit, OnDestro
     constructor(protected formService: FormService,
                 protected visibilityService: WidgetVisibilityService,
                 protected ecmModelService: EcmModelService,
-                protected nodeService: NodeService,
+                protected nodeService: NodeService) {
-                protected formRenderingService: FormRenderingService) {
         super();
-        this.formRenderingService.setComponentTypeResolver('upload', () => AttachFileWidgetComponent, true);
-        this.formRenderingService.setComponentTypeResolver('select-folder', () => AttachFolderWidgetComponent, true);
     }
 
     ngOnInit() {

lib/process-services/src/lib/form/process-form-rendering.service.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * 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 { Injectable } from '@angular/core';
+import { FormRenderingService } from '@alfresco/adf-core';
+import { AttachFileWidgetComponent } from '../content-widget/attach-file-widget.component';
+import { AttachFolderWidgetComponent } from '../content-widget/attach-folder-widget.component';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ProcessFormRenderingService extends FormRenderingService {
+    constructor() {
+        super();
+        this.setComponentTypeResolver('upload', () => AttachFileWidgetComponent, true);
+        this.setComponentTypeResolver('select-folder', () => AttachFolderWidgetComponent, true);
+    }
+}

lib/process-services/src/lib/form/public-api.ts

@@ -17,4 +17,5 @@
 
 export * from './form.component';
 export * from './start-form.component';
+export * from './process-form-rendering.service';
 export * from './form.module';

lib/process-services/src/lib/form/start-form.component.ts

@@ -30,12 +30,16 @@ import {
 } from '@angular/core';
 import { FormComponent } from './form.component';
 import { ContentLinkModel, FormService, WidgetVisibilityService, FormRenderingService, FormOutcomeModel } from '@alfresco/adf-core';
+import { ProcessFormRenderingService } from './process-form-rendering.service';
 
 @Component({
     selector: 'adf-start-form',
     templateUrl: './start-form.component.html',
     styleUrls: ['./start-form.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    providers: [
+        { provide: FormRenderingService, useClass: ProcessFormRenderingService }
+    ]
 })
 export class StartFormComponent extends FormComponent implements OnChanges, OnInit, OnDestroy {
 
@@ -70,10 +74,8 @@ export class StartFormComponent extends FormComponent implements OnChanges, OnIn
     @ViewChild('outcomesContainer', {})
     outcomesContainer: ElementRef = null;
 
-    constructor(formService: FormService,
+    constructor(formService: FormService, visibilityService: WidgetVisibilityService) {
-                visibilityService: WidgetVisibilityService,
+        super(formService, visibilityService, null, null);
-                formRenderingService: FormRenderingService) {
-        super(formService, visibilityService, null, null, formRenderingService);
         this.showTitle = false;
     }