Angular 13 upgrade (#2493)

* upgrade to Angular 13

* upgrade datetime picker libs

* upgrade to eslint 13

* fix eslint issues

* downgrade datetime picker

* fix scss builds

* use proper node version on travis

* fix e2e check

* fix test run

* upgrade ngrx to 13

* use latest ADF 5.x

* add missing ban plugin for eslint

* use latest ADF 5.x branch

* use latest ADF 5.x

* use latest ADF

* sync libs with adf and apps

* Updating to the right version of mat-datetime-picker

* Fix Test Suites: Search - AAE-10222

* Satisfy linter

* upgrade to adf 5.0.0-angular.13

* upgrade adf to 5.0.0-angular.13.1

Co-authored-by: Andras Popovics <popovics@ndras.hu>
Co-authored-by: MichalFidor <michal.fidor@hyland.com>

app/.eslintrc.json

@@ -107,7 +107,8 @@
       "rules": {
         "@angular-eslint/template/no-autofocus": "error",
         "@angular-eslint/template/no-negated-async": "off",
-        "@angular-eslint/template/no-positive-tabindex": "error"
+        "@angular-eslint/template/no-positive-tabindex": "error",
+        "@angular-eslint/template/eqeqeq": "error"
       }
     }
   ]

app/src/app/app.module.ts

@@ -110,7 +110,8 @@ registerLocaleData(localeSv);
     ReactiveFormsModule,
     RouterModule.forRoot(APP_ROUTES, {
       useHash: true,
-      enableTracing: false // enable for debug only
+      enableTracing: false, // enable for debug only
+      relativeLinkResolution: 'legacy'
     }),
     MaterialModule,
     CoreModule.forRoot(),

app/src/app/components/search/search-input-control/search-input-control.component.ts

@@ -43,8 +43,8 @@ export class SearchInputControlComponent implements OnDestroy {
   /** Emitted when the search is submitted pressing ENTER button.
    * The search term is provided as value of the event.
    */
-  // eslint-disable-next-line @angular-eslint/no-output-native
   @Output()
+  // eslint-disable-next-line @angular-eslint/no-output-native
   submit: EventEmitter<any> = new EventEmitter();
 
   /** Emitted when the search term is changed. The search term is provided

app/src/app/store/reducers/app.reducer.ts

@@ -26,7 +26,6 @@
 import { Action } from '@ngrx/store';
 import {
   AppState,
-  AppActionTypes,
   NodeActionTypes,
   SetUserProfileAction,
   SetCurrentFolderAction,
@@ -39,7 +38,8 @@ import {
   SetHeaderColorAction,
   SetCurrentNodeVersionAction,
   SetFileUploadingDialogAction,
-  SetInfoDrawerPreviewStateAction
+  SetInfoDrawerPreviewStateAction,
+  AppActionTypes
 } from '@alfresco/aca-shared/store';
 import { INITIAL_APP_STATE } from '../initial-state';
 

app/src/app/ui/application.scss

@@ -1,3 +1,4 @@
+@use '@angular/material' as mat;
 @import 'mixins';
 @import 'theme';
 @import 'variables/font-family';
@@ -9,7 +10,7 @@ body {
   @include flex-column;
   font-size: 14px;
   font-family: $default-font-family;
-  color: mat-color($foreground, text, 0.87);
+  color: mat.get-color-from-palette($foreground, text, 0.87);
   margin: 0;
 
   & > main {

app/src/app/ui/custom-theme.scss

@@ -1,21 +1,21 @@
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
 @import './overrides/adf-style-fixes.theme';
 @import './colors';
 
-$mat-primary-palette: mat-palette($aca-primary-blue, A100);
-$mat-accent-palette: mat-palette($aca-accent-green, A200);
-$mat-warn-palette: mat-palette($aca-warn, A100);
+$mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
+$mat-accent-palette: mat.define-palette($aca-accent-green, A200);
+$mat-warn-palette: mat.define-palette($aca-warn, A100);
 
-@include mat-core($alfresco-typography);
+@include mat.core($alfresco-typography);
 
-$custom-theme: mat-light-theme(
+$custom-theme: mat.define-light-theme(
   $mat-primary-palette,
   $mat-accent-palette,
   $mat-warn-palette
 );
 
 @mixin custom-theme($theme) {
-  @include angular-material-theme($theme);
+  @include mat.all-component-themes($theme);
   @include adf-core-theme($theme);
   @include adf-style-fixes($theme);
 }

app/src/app/ui/dynamic-theme/custom-theme-palettes.scss

@@ -1,3 +1,4 @@
+@use '@angular/material' as mat;
 @import '../colors';
 @import './custom-palette-creator.scss';
 
@@ -5,20 +6,20 @@
     $mat-primary-palette: null;
     @if $primary-color {
         $custom-theme-primary-palette: createColorPalette($primary-color, 'primary');
-        $mat-primary-palette: mat-palette($custom-theme-primary-palette, 500);
+        $mat-primary-palette: mat.define-palette($custom-theme-primary-palette, 500);
     } @else {
-        $mat-primary-palette: mat-palette($aca-primary-blue, A100);
+        $mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
     }
 
     $mat-accent-palette: null;
     @if $accent-color {
         $custom-theme-accent-palette: createColorPalette($accent-color, 'accent');
-        $mat-accent-palette: mat-palette($custom-theme-accent-palette, 500);
+        $mat-accent-palette: mat.define-palette($custom-theme-accent-palette, 500);
     } @else {
-        $mat-accent-palette: mat-palette($aca-accent-green, A200);
+        $mat-accent-palette: mat.define-palette($aca-accent-green, A200);
     }
 
-    $mat-warn-palette: mat-palette($aca-warn, A100);
+    $mat-warn-palette: mat.define-palette($aca-warn, A100);
 
     @return (
         primary: $mat-primary-palette,

app/src/app/ui/dynamic-theme/index.scss

@@ -1,3 +1 @@
-@use '~@angular/material/theming';
-
 @import '../theme.scss';

app/src/app/ui/dynamic-theme/typography.scss

@@ -1,3 +1,4 @@
+@use '@angular/material' as mat;
 @import '../variables/font-family.scss';
 
 @function get-mat-typography(
@@ -8,21 +9,21 @@
     $custom-typography: $default-typography;
 
     @if $base-font-size {
-        $custom-typography: mat-typography-config(
-            $display-4:     mat-typography-level(8rem, 8rem, 300),
-            $display-3:     mat-typography-level(4rem, 4rem, 400),
-            $display-2:     mat-typography-level(3.21rem, 3.21rem, 400),
-            $display-1:     mat-typography-level(2.42rem, 2.85rem, 400),
-            $headline:      mat-typography-level(1.71rem, 2.28rem, 400),
-            $title:         mat-typography-level(1.42rem, 2.28rem, 500),
-            $subheading-2:  mat-typography-level(1.14rem, 2rem, 400),
-            $subheading-1:  mat-typography-level(1.07rem, 1.71rem, 400),
-            $body-2:        mat-typography-level(1rem, 1.71rem, 500),
-            $body-1:        mat-typography-level(1rem, 1.42rem, 400),
-            $caption:       mat-typography-level(0.86rem, 1.42rem, 400),
-            $button:        mat-typography-level(1rem, 1rem, 500),
+        $custom-typography: mat.define-typography-config(
+            $display-4:     mat.define-typography-level(8rem, 8rem, 300),
+            $display-3:     mat.define-typography-level(4rem, 4rem, 400),
+            $display-2:     mat.define-typography-level(3.21rem, 3.21rem, 400),
+            $display-1:     mat.define-typography-level(2.42rem, 2.85rem, 400),
+            $headline:      mat.define-typography-level(1.71rem, 2.28rem, 400),
+            $title:         mat.define-typography-level(1.42rem, 2.28rem, 500),
+            $subheading-2:  mat.define-typography-level(1.14rem, 2rem, 400),
+            $subheading-1:  mat.define-typography-level(1.07rem, 1.71rem, 400),
+            $body-2:        mat.define-typography-level(1rem, 1.71rem, 500),
+            $body-1:        mat.define-typography-level(1rem, 1.42rem, 400),
+            $caption:       mat.define-typography-level(0.86rem, 1.42rem, 400),
+            $button:        mat.define-typography-level(1rem, 1rem, 500),
             $font-family:   $default-font-family,
-            $input:         mat-typography-level(1.14em, 1.25, 400)
+            $input:         mat.define-typography-level(1.14em, 1.25, 400)
         );
     }
 

app/src/app/ui/theme.scss

@@ -1,5 +1,5 @@
-@import '~@angular/material/theming';
-@import '~@alfresco/adf-core/theming';
+@use '@angular/material' as mat;
+@import '@alfresco/adf-core/theming';
 
 @import 'custom-theme';
 @import 'variables/variables';
@@ -11,10 +11,10 @@ $primary: map-get($custom-theme, primary);
 .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) {
   .mat-slide-toggle-thumb,
   .mat-slide-toggle-ripple .mat-ripple-element {
-    background-color: mat-color($primary);
+    background-color: mat.get-color-from-palette($primary);
   }
   .mat-slide-toggle-bar {
-    background-color: mat-color($primary, 0.54);
+    background-color: mat.get-color-from-palette($primary, 0.54);
   }
 }
 

app/src/app/ui/variables/variables.scss

@@ -1,3 +1,4 @@
+@use '@angular/material' as mat;
 $warn: map-get($custom-theme, warn);
 $accent: map-get($custom-theme, accent);
 $primary: map-get($custom-theme, primary);
@@ -6,19 +7,19 @@ $foreground: map-get($custom-theme, foreground);
 $background: map-get($custom-theme, background);
 
 //Custom variables - ACA specific styling:
-$document-list-selection-color: mat-color($alfresco-ecm-blue, 500);
+$document-list-selection-color: mat.get-color-from-palette($alfresco-ecm-blue, 500);
 $document-list-background: white;
 $data-table-dividers-wrapper-border: none;
 $data-table-thumbnail-width: 35px;
 $data-table-cell-min-width: 150px;
 $data-table-cell-min-width--no-grow: 120px;
 $data-table-cell-min-width--fileSize: 110px !important;
-$data-table-cell-text-color: mat-color($foreground, text, 0.54);
-$data-table-cell-link-color: mat-color($foreground, text);
+$data-table-cell-text-color: mat.get-color-from-palette($foreground, text, 0.54);
+$data-table-cell-link-color: mat.get-color-from-palette($foreground, text);
 $data-table-hover-color: #e3fafd;
 $data-table-selection-color: #e3fafd;
 
-$adf-pagination--border: 1px solid mat-color($foreground, text, 0.07);
+$adf-pagination--border: 1px solid mat.get-color-from-palette($foreground, text, 0.07);
 $adf-pagination__empty--height: 0;
 
 $adf-toolbar-single-row-height: 48px;
@@ -33,23 +34,23 @@ $adf-upload-dragging-level1-border: none;
 $adf-permission-list-width: 100%;
 
 $defaults: (
-  --theme-primary-color: mat-color($primary),
-  --theme-primary-color-default-contrast: mat-color($primary, default-contrast),
-  --theme-warn-color: mat-color($warn),
-  --theme-accent-color: mat-color($accent),
-  --theme-background-color: mat-color($background, background),
-  --theme-text-color: mat-color($foreground, text, 0.54),
-  --theme-text-bold-color: mat-color($foreground, text, 0.87),
-  --theme-title-color: mat-color($foreground, text, 0.87),
-  --theme-text-disabled-color: mat-color($foreground, text, 0.38),
-  --theme-border-color: mat-color($foreground, text, 0.07),
+  --theme-primary-color: mat.get-color-from-palette($primary),
+  --theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
+  --theme-warn-color: mat.get-color-from-palette($warn),
+  --theme-accent-color: mat.get-color-from-palette($accent),
+  --theme-background-color: mat.get-color-from-palette($background, background),
+  --theme-text-color: mat.get-color-from-palette($foreground, text, 0.54),
+  --theme-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
+  --theme-title-color: mat.get-color-from-palette($foreground, text, 0.87),
+  --theme-text-disabled-color: mat.get-color-from-palette($foreground, text, 0.38),
+  --theme-border-color: mat.get-color-from-palette($foreground, text, 0.07),
   --header-background-image: url('/assets/images/mastHead-bg-shapesPattern.svg'),
-  --theme-card-background-color: mat-color($background, card),
-  --theme-foreground-text-color: mat-color($foreground, text, 0.72),
-  --theme-foreground-text-bold-color: mat-color($foreground, text, 0.87),
-  --theme-secondary-text-color: mat-color($foreground, secondary-text),
-  --theme-divider-color: mat-color($foreground, divider, 0.07),
-  --theme-dialog-background-color: mat-color($background, dialog),
+  --theme-card-background-color: mat.get-color-from-palette($background, card),
+  --theme-foreground-text-color: mat.get-color-from-palette($foreground, text, 0.72),
+  --theme-foreground-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
+  --theme-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text),
+  --theme-divider-color: mat.get-color-from-palette($foreground, divider, 0.07),
+  --theme-dialog-background-color: mat.get-color-from-palette($background, dialog),
 
   --new-button-font-size: 0.9rem,
 );

app/src/polyfills.ts

@@ -43,19 +43,9 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -74,7 +64,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

app/src/test.ts

@@ -42,7 +42,9 @@ declare const require: any;
 __karma__.loaded = function () {};
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+  teardown: { destroyAfterEach: false }
+});
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.