[ADF-5432] component template and code fixes after testing Angular st…

…rict mode (#7118) * process list fixes * template error fixes * template and code fixes * bug fixes in templates and types * bugs, bugs are everywhere * fix test * test fixes * enable strict templates for extensions lib * enable strict mode for insights lib * enable strict mode for core lib * enable strict mode for content lib * strict mode for process lib * strict mode for process cloud * fix demo shell template issues * fix process cloud types
Alfresco · Jun 22, 2021 · 829805e · 829805e
1 parent e2b8557
commit 829805e
Show file tree

Hide file tree

Showing 129 changed files with 534 additions and 435 deletions.
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -20,6 +20,7 @@ import { UserPreferencesService, AppConfigService, AlfrescoApiService, UserPrefe
 import { HeaderDataService } from '../header-data/header-data.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { ThemePalette } from '@angular/material/core';
 
 @Component({
     templateUrl: './app-layout.component.html',
@@ -92,14 +93,14 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
 
     expandedSidenav = false;
 
-    position = 'start';
+    position: 'start' | 'end' = 'start';
     direction = 'ltr';
 
     hideSidenav = false;
     showMenu = true;
 
     enableRedirect = true;
-    color = 'primary';
+    color: ThemePalette = 'primary';
     title = 'APP_LAYOUT.APP_NAME';
     logo: string;
     redirectUrl: string | any[] = ['/home'];

diff --git a/demo-shell/src/app/components/cloud/community/community-task-cloud.component.ts b/demo-shell/src/app/components/cloud/community/community-task-cloud.component.ts
@@ -48,7 +48,7 @@ export class CommunityTasksCloudDemoComponent implements OnInit, OnDestroy {
 
     filterId;
     multiselect: boolean;
-    selectedRows: string[] = [];
+    selectedRows: any[] = [];
     testingMode: boolean;
     selectionMode: string;
     taskDetailsRedirection: boolean;

diff --git a/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html b/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html
@@ -20,15 +20,15 @@
             </mat-radio-group>
             <mat-form-field *ngIf="!isPeopleAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
-                <input matInput (input)="setPeopleRoles($event.target?.value)" data-automation-id="app-people-roles-input" />
+                <input matInput (input)="setPeopleRoles($any($event).target?.value)" data-automation-id="app-people-roles-input" />
             </mat-form-field>
             <mat-form-field *ngIf="isPeopleAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
-                <input matInput (input)="setPeopleAppName($event.target?.value)" data-automation-id="app-people-app-input" />
+                <input matInput (input)="setPeopleAppName($any($event).target?.value)" data-automation-id="app-people-app-input" />
             </mat-form-field>
             <mat-form-field class="app-preselect-value-full">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }} {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
-                <input matInput (input)="setPeoplePreselectValue($event.target?.value)"  data-automation-id="app-people-preselect-input" />
+                <input matInput (input)="setPeoplePreselectValue($any($event).target?.value)"  data-automation-id="app-people-preselect-input" />
             </mat-form-field>
             <mat-checkbox class="app-preselect-value" (change)="onChangePeopleValidation($event)">{{
                 'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
@@ -92,19 +92,19 @@ <h4>{{ 'PEOPLE_GROUPS_CLOUD.INVALID_USERS' | translate }} <mat-icon>warning</mat
             <mat-form-field *ngIf="!isGroupAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
                 <input matInput
-                    (input)="setGroupRoles($event.target?.value)"
+                    (input)="setGroupRoles($any($event).target?.value)"
                     data-automation-id="app-group-roles-input"/>
             </mat-form-field>
             <mat-form-field *ngIf="isGroupAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
                 <input matInput
-                    (input)="setGroupAppName($event.target?.value)"
+                    (input)="setGroupAppName($any($event).target?.value)"
                     data-automation-id="app-group-app-input"/>
             </mat-form-field>
             <mat-form-field class="app-preselect-value-full">
                 <mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
                 <input matInput
-                    (input)="setGroupsPreselectValue($event.target?.value)"
+                    (input)="setGroupsPreselectValue($any($event).target?.value)"
                     data-automation-id="app-group-preselect-input" />
             </mat-form-field>
             <mat-checkbox class="app-preselect-value" (change)="onChangeGroupValidation($event)">

diff --git a/demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts b/demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts
@@ -32,7 +32,7 @@ export class StartProcessCloudDemoComponent implements OnInit {
 
     appName;
     processName: string;
-    formValues: string;
+    formValues: any;
     variables: any;
 
     constructor(private appConfig: AppConfigService,

diff --git a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html
@@ -37,8 +37,7 @@
             (showRowContextMenu)="onShowRowContextMenu($event)"
             (executeRowAction)="onExecuteRowAction($event)"
             (rowClick)="onRowClick($event)"
-            (rowsSelected)="onRowsSelected($event)"
-            #taskCloud>
+            (rowsSelected)="onRowsSelected($event)">
         </adf-cloud-task-list>
         <adf-pagination
             [target]="taskCloud"

diff --git a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts
@@ -47,7 +47,7 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
 
     filterId;
     multiselect: boolean;
-    selectedRows: string[] = [];
+    selectedRows: any[] = [];
     actionMenu: boolean;
     contextMenu: boolean;
     actions: any[] = [];

diff --git a/demo-shell/src/app/components/content-node-selector/content-node-selector.component.ts b/demo-shell/src/app/components/content-node-selector/content-node-selector.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { Component, ViewEncapsulation } from '@angular/core';
-import { SitePaging, SiteEntry, MinimalNodeEntryEntity } from '@alfresco/js-api';
+import { SitePaging, SiteEntry, MinimalNodeEntryEntity, Node } from '@alfresco/js-api';
 import { ContentNodeDialogService, ShareDataRow, RowFilter } from '@alfresco/adf-content-services';
 import { ThumbnailService } from '@alfresco/adf-core';
 
@@ -99,8 +99,8 @@ export class ContentNodeSelectorComponent {
         return this.thumbnailService.getMimeTypeIcon('video/quicktime');
     }
 
-    onNodeSelect(node: MinimalNodeEntryEntity) {
-        this.validSelection = !!node;
+    onNodeSelect(selection: Node[]) {
+        this.validSelection = !!selection;
     }
 
     customIsValidFunction(entry: MinimalNodeEntryEntity): boolean {

diff --git a/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html b/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html
@@ -1,8 +1,8 @@
 <h1>DataTable Drag and Drop Demo</h1>
 <div data-automation-id="datatable"
     (header-dragover)="onDragOver($event)"
-    (header-drop)="onDrop($event)"
+    (header-drop)="onDrop($any($event))"
     (cell-dragover)="onDragOver($event)"
-    (cell-drop)="onDrop($event)">
+    (cell-drop)="onDrop($any($event))">
     <adf-datatable [data]="data"></adf-datatable>
 </div>
diff --git a/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.ts b/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.ts
@@ -88,7 +88,7 @@ export class DataTableDnDComponent implements OnInit {
         this.data.setSorting(new DataSorting('id', 'asc'));
     }
 
-    onDragOver(event: CustomEvent) {
+    onDragOver(event: Event) {
         event.preventDefault();
     }
 

diff --git a/demo-shell/src/app/components/file-view/file-view.component.ts b/demo-shell/src/app/components/file-view/file-view.component.ts
@@ -17,7 +17,7 @@
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router, PRIMARY_OUTLET } from '@angular/router';
-import { ContentService, AllowableOperationsEnum, PermissionsEnum, NodesApiService } from '@alfresco/adf-core';
+import { ContentService, AllowableOperationsEnum, PermissionsEnum, NodesApiService, FileUploadErrorEvent } from '@alfresco/adf-core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { PreviewService } from '../../services/preview.service';
 
@@ -103,7 +103,8 @@ export class FileViewComponent implements OnInit {
         this.router.navigateByUrl(primaryUrl);
     }
 
-    onUploadError(errorMessage: string) {
+    onUploadError(event: FileUploadErrorEvent) {
+        const errorMessage = event.error;
         this.snackBar.open(errorMessage, '', { duration: 4000 });
     }
 

diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html
@@ -14,7 +14,7 @@
                 locationFormat="/files"
                 [display]="'gallery'"
                 [preselectNodes]="selectedNodes"
-                [showHeader]="false"
+                [showHeader]="noHeaderMode"
                 [maxItems]="5"
                 (preview)="showFile($event)"
                 selectionMode="null">
@@ -117,7 +117,7 @@
                     <button mat-icon-button
                             data-automation-id="delete-toolbar-button"
                             adf-check-allowable-operation="delete"
-                            permanent=true
+                            [permanent]="true"
                             [adf-nodes]="documentList.selection"
                             title="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}"
                             (delete)="onDeleteActionSuccess($event)"
@@ -156,7 +156,7 @@
                 </button>
 
                 <mat-menu #themePicker="matMenu">
-                    <button mat-menu-item (click)="toolbarColor = 'default'">Default</button>
+                    <button mat-menu-item (click)="toolbarColor = null">Default</button>
                     <button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button>
                     <button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button>
                     <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
@@ -239,7 +239,7 @@
                 (preview)="showFile($event)"
                 (folderChange)="onFolderChange($event)"
                 (permissionError)="handlePermissionError($event)"
-                (name-click)="documentList.onNodeDblClick($event.detail?.node)"
+                (name-click)="documentList.onNodeDblClick($any($event).detail?.node)"
                 (filterSelection)="onFilterSelected($event)">
 
                 <adf-custom-no-permission-template *ngIf="enableCustomPermissionMessage">
@@ -648,7 +648,7 @@ <h1>You don't have permissions</h1>
         <form class="example-form">
             <mat-form-field *ngIf="preselectNodes" class="adf-preselect-nodes-input">
                 <input matInput
-                (input)="setPreselectNodes($event.target?.value)"
+                (input)="setPreselectNodes($any($event).target?.value)"
                 placeholder="NodeEntry[] => [{ entry: { isFile: true, id: 'node-id' }}, { entry: { isFile: true, id: 'node-id' }} ]">
             </mat-form-field>
         </form>

diff --git a/demo-shell/src/app/components/files/files.component.ts b/demo-shell/src/app/components/files/files.component.ts
@@ -48,6 +48,7 @@ import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.compon
 import { Subject } from 'rxjs';
 import { PreviewService } from '../../services/preview.service';
 import { takeUntil, debounceTime, scan } from 'rxjs/operators';
+import { ThemePalette } from '@angular/material/core';
 
 const DEFAULT_FOLDER_TO_SHOW = '-my-';
 
@@ -74,7 +75,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.appConfig.get<string>(AppConfigValues.BASESHAREURL) ||
         this.appConfig.get<string>(AppConfigValues.ECMHOST)) + '/preview/s/';
 
-    toolbarColor = 'default';
+    toolbarColor: ThemePalette;
 
     selectionModes = [
         { value: 'none', viewValue: 'None' },
@@ -94,7 +95,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     sorting = ['name', 'ASC'];
 
     @Input()
-    sortingMode = 'server';
+    sortingMode: 'server' | 'client' = 'server';
 
     @Input()
     showRecentFiles = true;
@@ -106,7 +107,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     showSettingsPanel = true;
 
     @Input()
-    showHeader: string = ShowHeaderMode.Always;
+    showHeader = ShowHeaderMode.Always;
 
     @Input()
     selectionMode = 'multiple';
@@ -207,7 +208,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     preselectNodes: boolean;
     warnOnMultipleUploads = false;
     thumbnails = false;
-
+    noHeaderMode = ShowHeaderMode.Never;
     enableCustomPermissionMessage = false;
     enableMediumTimeFormat = false;
     displayEmptyMetadata = false;

diff --git a/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.ts b/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.ts
@@ -20,6 +20,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MinimalNodeEntryEntity } from '@alfresco/js-api';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { PreviewService } from '../../services/preview.service';
+import { FileUploadErrorEvent } from '@alfresco/adf-core';
 
 @Component({
     templateUrl: './version-manager-dialog-adapter.component.html',
@@ -45,8 +46,9 @@ export class VersionManagerDialogAdapterComponent {
         this.allowDownload = data.hasOwnProperty('allowDownload') ? data.allowDownload : this.allowDownload;
     }
 
-    uploadError(errorMessage: string) {
-        this.snackBar.open(errorMessage, '', {duration: 4000});
+    uploadError(event: FileUploadErrorEvent) {
+        const errorMessage = event.error;
+        this.snackBar.open(errorMessage, '', { duration: 4000 });
     }
 
     close() {
@@ -58,7 +60,7 @@ export class VersionManagerDialogAdapterComponent {
         this.close();
     }
 
-    hideVersionComparison(isCancelled: boolean | Node) {
+    hideVersionComparison(isCancelled: any) {
         if (isCancelled) {
             this.showVersionComparison = false;
             this.newFileVersion = null;

diff --git a/demo-shell/src/app/components/form/form-list.component.html b/demo-shell/src/app/components/form/form-list.component.html
@@ -1,4 +1,4 @@
-<adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
+<adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($any($event))">
 </adf-form-list>
 <div class="app-form-container" *ngIf="!isEmptyForm()">
     <adf-form #adfForm [form]="form" [data]="restoredData" [showValidationIcon]="showValidationIcon">

diff --git a/demo-shell/src/app/components/form/form-list.component.ts b/demo-shell/src/app/components/form/form-list.component.ts
@@ -60,7 +60,7 @@ export class FormListComponent implements OnInit, OnDestroy {
         this.onDestroy$.complete();
     }
 
-    onRowDblClick(event: CustomEvent) {
+    onRowDblClick(event: CustomEvent<any>) {
         const rowForm = event.detail.value.obj;
 
         this.formService.getFormDefinitionById(rowForm.id).subscribe((formModel) => {

diff --git a/demo-shell/src/app/components/header-data/header-data.component.html b/demo-shell/src/app/components/header-data/header-data.component.html
@@ -7,41 +7,41 @@ <h1>Header data</h1>
 
         <div>
             <label>Choose header color</label>
-            <select (change)="changeColor($event.target.value)">
+            <select (change)="changeColor($any($event).target.value)">
                 <option value="primary">Primary</option>
                 <option value="accent">Accent</option>
                 <option value="warn">Warn</option>
             </select>
             OR
-            <input type="text" name="color" (keyup.enter)="changeColor($event.target.value)"
+            <input type="text" name="color" (keyup.enter)="changeColor($any($event).target.value)"
                    placeholder="hex color code">
             <p>*Choose only one value at a time: either hex code or theme color.</p>
             <p>*press enter for submitting new hex color</p>
         </div>
 
         <div>
             <label>Change title</label>
-            <input type="text" name="title" (keyup.enter)="submitTitle($event.target.value)"
+            <input type="text" name="title" (keyup.enter)="submitTitle($any($event).target.value)"
                    placeholder="{{ 'APP_LAYOUT.APP_NAME' | translate}}">
             <p>*press enter for submitting new title</p>
         </div>
 
         <div>
             <label>Change logo</label>
-            <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($event.target.value)">
+            <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($any($event).target.value)">
             <p>*press enter for submitting new logo</p>
         </div>
 
         <div>
             <label>Change logo link</label>
-            <input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($event.target.value)">
+            <input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($any($event).target.value)">
             <p>*Input JSON friendly array or explicit string. E.g. ["/test", 33, "user", 11] or "/test"</p>
             <p>*press enter for submitting new link on logo</p>
         </div>
 
         <div>
             <label>Change logo tooltip</label>
-            <input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($event.target.value)">
+            <input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($any($event).target.value)">
             <p>*press enter for submitting new tooltip</p>
         </div>
 

diff --git a/demo-shell/src/app/components/header-data/header-data.component.ts b/demo-shell/src/app/components/header-data/header-data.component.ts
@@ -16,6 +16,7 @@
  */
 
 import { Component } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
 import { HeaderDataService } from './header-data.service';
 
 @Component({
@@ -24,7 +25,7 @@ import { HeaderDataService } from './header-data.service';
 })
 export class HeaderDataComponent {
     checkbox = true;
-    position = 'start';
+    position: 'start' | 'end' = 'start';
     hideSidenavToggle = false;
 
     constructor(private headerService: HeaderDataService) {
@@ -34,7 +35,7 @@ export class HeaderDataComponent {
         this.headerService.hideMenuButton();
     }
 
-    changeColor(color: string) {
+    changeColor(color: ThemePalette) {
         this.headerService.changeColor(color);
     }