[ADF-5218] Fix custom stencil usage on Start Process Form (#5999)

* [ADF-5218] Fix custom stencil usage on Start Process Form

* Fix e2e test

* Fix task form provider

* Fix people tests

* Add docs

* Update stencil docs

* Remove outdated docs

* Update task details component

demo-shell/src/app/components/files/files.component.ts

@@ -28,7 +28,8 @@ import {
     AlfrescoApiService, AuthenticationService, AppConfigService, AppConfigValues, ContentService, TranslationService, FolderCreatedEvent, LogService, NotificationService,
     UploadService, DataRow, UserPreferencesService,
     PaginationComponent, FormValues, DisplayMode, ShowHeaderMode, InfinitePaginationComponent, HighlightDirective,
-    SharedLinksApiService
+    SharedLinksApiService,
+    FormRenderingService
 } from '@alfresco/adf-core';
 
 import {
@@ -40,7 +41,7 @@ import {
     ContentMetadataService
 } from '@alfresco/adf-content-services';
 
-import { SelectAppsDialogComponent } from '@alfresco/adf-process-services';
+import { SelectAppsDialogComponent, ProcessFormRenderingService } from '@alfresco/adf-process-services';
 
 import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
 import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.component';
@@ -53,7 +54,10 @@ const DEFAULT_FOLDER_TO_SHOW = '-my-';
 @Component({
     selector: 'app-files-component',
     templateUrl: './files.component.html',
-    styleUrls: ['./files.component.scss']
+    styleUrls: ['./files.component.scss'],
+    providers: [
+        { provide: FormRenderingService, useClass: ProcessFormRenderingService }
+    ]
 })
 export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -52,7 +52,8 @@ import {
     TaskDetailsComponent,
     TaskDetailsEvent,
     TaskFiltersComponent,
-    TaskListComponent
+    TaskListComponent,
+    ProcessFormRenderingService
 } from '@alfresco/adf-process-services';
 import { Subject } from 'rxjs';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
@@ -72,7 +73,10 @@ const REPORT_ROUTE = 2;
     selector: 'app-process-service',
     templateUrl: './process-service.component.html',
     styleUrls: ['./process-service.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    providers: [
+        { provide: FormRenderingService, useClass: ProcessFormRenderingService }
+    ]
 })
 export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit {
 

docs/user-guide/stencils.md

@@ -1,162 +0,0 @@
-# Form Stencils
-
-[`Form`](../../lib/process-services/src/lib/task-list/models/form.model.ts) component provides basic support for custom stencils created with Activiti stencil editor.
-
-## Contents
-
--   [Installing](#installing)
--   [Creating new stencil](#creating-new-stencil)
--   [Form runtime template](#form-runtime-template)
--   [Form editor template](#form-editor-template)
--   [Custom component controller](#custom-component-controller)
-    -   [JavaScript code](#javascript-code)
-    -   [TypeScript code](#typescript-code)
-    -   [Mapping template with component class](#mapping-template-with-component-class)
-    -   [Final result](#final-result)
--   [Runtime result](#runtime-result)
-
-## Installing
-
-Configuring support for stencils requires the following configuration for your `index.html` file:
-
-```html
-<!-- Stencils integration -->
-<script src="node_modules/ng2-activiti-form/stencils/runtime.ng1.js"></script>
-<script src="node_modules/ng2-activiti-form/stencils/runtime.adf.js"></script>
-<script src="http://<activiti-app-root>/app/rest/script-files/controllers"></script>
-```
-
-Where `<activiti-app-root>` should be replaced with a valid url pointing to your Activiti installation, for example:
-
-```html
-<script src="http://localhost:9999/activiti-app/app/rest/script-files/controllers"></script>
-```
-
--   `/app/rest/script-files/controllers`
-      provides all stencil controllers stored within Activiti
-
--   `runtime.ng1.js`
-      provides a compatibility layer for controllers created with AngularJS (aka Angular 1x)
-      (this is to avoid runtime errors when loading AngularJS code into `<activiti-form>` component)
-
--   `runtime.adf.js`
-      provides API for stencil management and registration,
-      i.e. mapping html templates with corresponding controller classes
-
-## Creating new stencil
-
-Create a new stencil and add a new item called `ng2 component 01`.
-
-The internal identifier in this case should be `ng2_component_01`.
-This value will be used as field type when form gets rendered.
-
-## Form runtime template
-
-This should be a valid Angular component template that you want to render in `<activiti-form>` component:
-
-<!-- {% raw %} -->
-
-```html
-<div>
-    <div>Angular Component</div>
-    <div>Created by: {{name}}</div>
-</div>
-```
-
-<!-- {% endraw %} -->
-
-## Form editor template
-
-This can be any html layout to be rendered as a component placeholder in Activiti [`Form`](../../lib/process-services/src/lib/task-list/models/form.model.ts) Designer.
-
-```html
-<div>
-    <div style="color: blue">
-        Angular Component 01
-    </div>
-</div>
-```
-
-## Custom component controller
-
-This field should contain JavaScript code for Angular component class.
-
-_Note: If you are using TypeScript then you should be putting transpiled JavaScript code here,
-you can try official [TypeScript playground](http://www.typescriptlang.org/play/)
-to see how TS code gets transpiled into JS._
-
-### JavaScript code
-
-```js
-var SampleClass1 = (function () {
-    function SampleClass1() {
-        this.name = 'Denys';
-        console.log('ng2_component_01 ctor');
-    }
-    SampleClass1.prototype.ngOnInit = function () {
-      console.log('OnInit called');
-    };
-    return SampleClass1;
-}());
-```
-
-### TypeScript code
-
-The TypeScript version of the code above is:
-
-```ts
-import { OnInit } from '@angular/core';
-
-class SampleClass1 implements OnInit {
-
-  constructor() {
-    console.log('ctor called');
-  }
-
-  ngOnInit() {
-    console.log('OnInit called');
-  }
-
-}
-```
-
-### Mapping template with component class
-
-In order to map **form runtime template** with the corresponding component class
-you will need to register both parts with `adf.registerComponent(identifier, class)` api:
-
-```js
-if (adf) {
-    adf.registerComponent('ng2_component_01', SampleClass1);
-}
-```
-
-### Final result
-
-```js
-var SampleClass1 = (function () {
-    function SampleClass1() {
-        this.name = 'Denys';
-        console.log('ng2_component_01 ctor');
-    }
-    SampleClass1.prototype.ngOnInit = function () {
-      console.log('OnInit called');
-    };
-    return SampleClass1;
-}());
-
-if (adf) {
-    adf.registerComponent('ng2_component_01', SampleClass1);
-}
-```
-
-## Runtime result
-
-When rendered on the form this stencil item should look like the following:
-
-```html
-Angular Component
-Created by: Denys
-```
-
-ADF [`Form`](../../lib/process-services/src/lib/task-list/models/form.model.ts) component will automatically assemble and compile a valid Angular component on the fly.

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

@@ -29,17 +29,13 @@ import {
     OnDestroy
 } from '@angular/core';
 import { FormComponent } from './form.component';
-import { ContentLinkModel, FormService, WidgetVisibilityService, FormRenderingService, FormOutcomeModel } from '@alfresco/adf-core';
+import { ContentLinkModel, FormService, WidgetVisibilityService, 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 {
 

lib/process-services/src/lib/task-list/components/task-form/task-form.component.ts

@@ -23,22 +23,17 @@ import {
   FormOutcomeEvent,
   AuthenticationService,
   TranslationService,
-  FormFieldModel,
+  FormFieldModel
-  FormRenderingService
 } from '@alfresco/adf-core';
 import { TaskDetailsModel } from '../../models/task-details.model';
 import { TaskListService } from '../../services/tasklist.service';
 import { UserRepresentation, LightGroupRepresentation, LightUserRepresentation } from '@alfresco/js-api';
 import { Observable } from 'rxjs';
-import { ProcessFormRenderingService } from '../../../form/process-form-rendering.service';
 
 @Component({
   selector: 'adf-task-form',
   templateUrl: './task-form.component.html',
-  styleUrls: ['./task-form.component.scss'],
+  styleUrls: ['./task-form.component.scss']
-  providers: [
-    { provide: FormRenderingService, useClass: ProcessFormRenderingService }
-]
 })
 export class TaskFormComponent implements OnInit {