[ADF-5146] Upgrade to Angular 10 (#5834)

* remove useless module

* upgrade to angular 8

* upgrade material to v8

* upgrade adf libs

* migrate demo shell to v8

* upgrade to angular 9

* upgrade material to v9

* remove hammer

* upgrade nx

* upgrade datetime picker

* upgrade flex layout

* update core api

* remove entry components

* code fixes

* upgrade testbed usage

* code fixes

* remove unnecessary core-js from tests

* upgrade CLI

* ts config fixes

* fix builds

* fix testing config

* compile fixes

* fix demo shell dev setup

* fix core tests

* fix card view import

* upgrade nx

* disable smart builds for now

* remove fdescribe

* restore smart builds

* fix issues

* unify tsconfigs and fix newly found issues

* fix configuration and cleanup package scripts

* improved production build from the same config

* use ADF libs directly instead of node_modules

* disable smart build

* single app configuration (angular)

* fix core build

* fix build scripts

* lint fixes

* fix linting setup

* fix linting rules

* various fixes

* disable affected libs for unit tests

* cleanup insights package.json

* simplify smart-build

* fix content tests

* fix tests

* test fixes

* fix tests

* fix test

* fix tests

* disable AppExtensionsModule (monaco example)

* remove monaco extension module

* upgrade bundle check rules

* fix insights tests and karma config

* fix protractor config

* e2e workaround

* upgrade puppeteer and split linting and build

* reusable resources config

* update protractor config

* fix after rebase

* fix protractor config

* fix e2e tsconfig

* update e2e setup

* Save demoshell artifact on S3 and remove travis cache

* Push the libs on S3 and fetch before releasing it

* Add deps

* Add dependencies among libs and run only affected unit test and build

* fix the travis stage name

* fix after renaming dev to demoshell

* force the order of the projects

* remove unused dependencies

* fix content e2e script

* exit codes fix

* add extra exit codes to core e2e

* postinstall hook and package cleanup

* cleanup packages

* remove deprecated code and dependency on router

* improve bundle analyzer script

* minor code fixes

* update spec

* fix code after rebase

* upgrade protractor after rebase

* fix e2e mapping lib

* Update tsconfig.e2e.json

* update e2e tsconfig

* fix angular config

* fix protractor runs

* cache dist folder for libs

* update material selectors for dropdowns

* selector fixes

* remove duplicated e2e that have unit tests already

* fix login selector

* fix e2e

* fix test

* fix import issues

* fix selector

* cleanup old monaco extension files

* cleanup demo shell login

* add protractor max retries

* disable customisations of protractor

* fix login validation

* fix after rebase

* fix after rebase, disable latest versions of libs

* Hide the report tab and rollback the localstorage

* rename protractor config back to js

* restore lint as part of build

* cleanup code

* do not copy anything to node_modules on dist test

* fix unit tests

* config fixes

* fix code

* fix code after rebase

* fix tests

* remove existing words from spellcheck

* remove useless directive decorators

* update package.json after rebase

* add js-api back

* code fixes

* add missing export

* update configs

* fix code

* try fix the sso login test

* fix

* remove puppeteer unit

* fix e2e script

* fix

* make provider easy

* fix routes module before upgrade

* fix unit tests

* upgrade angular cli

* upgrade to angular 10

Co-authored-by: maurizio vitale <maurizio.vitale@alfresco.com>
Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>
Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>

demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html

@@ -6,14 +6,14 @@
     <mat-card-content>
         <br>
         <mat-radio-group (change)="onChangePeopleMode($event)">
-            <mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-people-single-mode" value="single">{{
+            <mat-radio-button [checked]="true" class="app-people-single-mode" data-automation-id="app-people-single-mode" value="single">{{
                 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
             <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-multiple-mode" value="multiple">{{
                 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
         </mat-radio-group>
         <div class="app-people-control-options">
             <mat-radio-group (change)="onChangePeopleFilterMode($event)">
-                <mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
+                <mat-radio-button [checked]="true" class="app-people-single-mode" value="appName">{{
                     'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
                 <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-filter-role" value="role">{{
                     'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
@@ -77,14 +77,14 @@
     <mat-card-content>
         <br>
         <mat-radio-group (change)="onChangeGroupsMode($event)">
-            <mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-group-single-mode" value="single">{{
+            <mat-radio-button [checked]="true" class="app-people-single-mode" data-automation-id="app-group-single-mode" value="single">{{
                 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
             <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-multiple-mode" value="multiple">{{
                 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
         </mat-radio-group>
         <div class="app-groups-control-options">
             <mat-radio-group (change)="onChangeGroupsFilterMode($event)">
-                <mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
+                <mat-radio-button [checked]="true" class="app-people-single-mode" value="appName">{{
                     'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
                 <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-filter-role" value="role">{{
                     'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>

demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.ts

@@ -17,7 +17,8 @@
 
 import { Component, ViewEncapsulation } from '@angular/core';
 import { ComponentSelectionMode } from '@alfresco/adf-process-services-cloud';
-import { MatRadioChange, MatCheckboxChange } from '@angular/material';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatRadioChange } from '@angular/material/radio';
 import { IdentityGroupModel, IdentityUserModel } from '@alfresco/adf-core';
 
 @Component({

demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts

@@ -18,7 +18,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CloudSettingsComponent } from './cloud-settings.component';
-import { MatDialogModule, MatInputModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { CoreModule } from '@alfresco/adf-core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 

demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts

@@ -19,7 +19,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService, AppConfigService } from '@alfresco/adf-core';
 import { CloudLayoutService } from './services/cloud-layout.service';
-import { PreviewService } from 'app/services/preview.service';
+import { PreviewService } from '../../services/preview.service';
 
 @Component({
     templateUrl: './start-process-cloud-demo.component.html',

demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts

@@ -19,7 +19,7 @@ import { Component, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '@alfresco/adf-core';
 import { TaskHeaderCloudComponent } from '@alfresco/adf-process-services-cloud';
-import { PreviewService } from 'app/services/preview.service';
+import { PreviewService } from '../../services/preview.service';
 
 @Component({
     templateUrl: './task-details-cloud-demo.component.html',
@@ -27,7 +27,7 @@ import { PreviewService } from 'app/services/preview.service';
 })
 export class TaskDetailsCloudDemoComponent {
 
-    @ViewChild('taskHeader')
+    @ViewChild('taskHeader', { static: true })
     taskHeader: TaskHeaderCloudComponent;
 
     taskId: string;

demo-shell/src/app/components/cloud/task-header-cloud-demo.component.ts

@@ -24,7 +24,7 @@ import { FormControl } from '@angular/forms';
     styleUrls: ['./task-header-cloud-demo.component.scss']
 })
 export class TaskHeaderCloudDemoComponent {
-    @ViewChild('taskHeader')
+    @ViewChild('taskHeader', { static: true })
     taskHeader: TaskHeaderCloudComponent;
 
     appName: string;