Ng16 migration (#10114)

* NG-16 - migration step 1

* NG16 - fixed the builds

* [MIGRATION] - Switching off no empty functions rule

* [MIGRATION] - Somehow the fix for the cli types got lost

* [MIGRATION] - Something happened on the way to heaven

* [MIGRATION] - Ok this is weird

* [MIGRATION] - Ok this is really weird

* [MIGRATION] - change selector for expanded expansion panel content

* [MIGRATION] - storybook chips related e2e fails fix, unit alignments

* [MIGRATION] - Ok this is really weird

* [MIGRATION] - Updating outdated packages

* [MIGRATION] - updated deps for process cloud

* [MIGRATION] - Rebased to latest

* [MIGRATION] - Fixed lint

* [MIGRATION] - Fixed package version

* Rebased with lastest changes

* [MIGRATION] - check to update the script

* [MIGRATION] - rebased after the move of AlfrescoApiService

* [MIGRATION] - fixed schematics build

* [MIGRATION] - the lesson is : do not change what is already working

* Rebased to latestp

* Fixes after CR (#10202)

* Fixed white background issue in sidenav after ng16 upgrade (#10207)

* [MIGRATION] fix header background color not being read from input prop

* Fixed build

* Rebased

* Fix package version after release

* Thanks apollo deps

* custom theme missing sidenav color

* fix filter subscript overlapping dropdown items

* [ACS-8749] View More tags button no longer shows when all tags are removed from a node (#10285)

* [ACS-8741] Sidenav text for Process and Task filters is now grey (#10284)

* AAE-26037 Moved permissions role selector styles to a dedicated file (#10297)

* Removed fallback and starting using simple token

* Removed fallback and starting using simple token

* Fixed related unit test

* Fixed related unit test

* Writing should use the same calss as reading

* Fixed unit tests for insights

* Fixed unit tests for insights

* Added fallback for JWT token

* Added fallback for JWT token

* Auto import fix

* Added fallback for injection

* Added fallback for injection

* Trying to fix JWT token issue

* Fixed unit tests

* Fixed unit tests

* Fixed style for collaborators

* fixed permission row height

* AAE-26163 Fix infinite loop when authentication error event occured (#10272)

* AAE-26163 Logout user after 3 login attempts failed, avoiding infinite loop when an authentication error occured, like when a user machine clock is significantly out of sync

* AAE-26163 Wait to discovery document to be loaded and user not authenticated to perform a ssoLogin, logout user if login fails after 3 attempts

* AAE-26163 Fix missed id_token_hint invoking logout when a login error occured due to a clock significantly out of sync

* AAE-26163 Add fake observable to unit test

* AAE-26163 Show oauth event logs if showDebugInformation is enabled, remove auth items if access token is not valid

* AAE-26163 Improve tryLogin error message

* AAE-26163 Check if token has expired to fix case when user access the application after the token is expired and with a clock significantly out of sync

* AAE-26163 Test logout when clock is out of sync

* AAE-26163 Create a service to check if local machine time is out of sync

* AAE-26163 Update oauthErrorEvent$ and combinedOAuthErrorsStream$ to return errors

* AAE-26163 Output error within combined oauth error event subscription

* AAE-26163 Fix lint problems

* AAE-26163 Logout user when token refresh error happens for the second time, if the token is not refreshed properly after first refresh error

* AAE-26163 Logout user once an oauth error event occur due to clock out of sync

* AAE-26163 Fix retry login error message if the OAuthErrorEvent doesn t return reason

* AAE-26163 Fix the issue where the logout API call is canceled by the authorize call when login fails due to clock synchronization problems, causing an infinite loop.

* remove console.log

* AAE-26163 Fix retry login error message if the OAuthErrorEvent reason is an empty object

* Updating dependencies

* Fixed subject complete to avoid calling a reset event when complete

---------

Co-authored-by: Wojciech Duda <69160975+wojd0@users.noreply.github.com>
Co-authored-by: dominikiwanekhyland <141320833+dominikiwanekhyland@users.noreply.github.com>
Co-authored-by: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com>
Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Co-authored-by: Amedeo Lepore <amedeo.lepore@hyland.com>

lib/process-services-cloud/.eslintrc.json

@@ -4,9 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": [
-        "plugin:@nrwl/nx/angular"
-      ],
+      "extends": ["plugin:@nx/angular"],
       "parserOptions": {
         "project": ["lib/process-services-cloud/tsconfig.lib.json", "lib/process-services-cloud/tsconfig.spec.json"],
         "createDefaultProgram": true
@@ -17,7 +15,12 @@
         "@typescript-eslint/consistent-type-assertions": "warn",
         "@typescript-eslint/prefer-for-of": "warn",
         "@typescript-eslint/member-ordering": "off",
-        "no-underscore-dangle": ["error", { "allowAfterThis": true }],
+        "no-underscore-dangle": [
+          "error",
+          {
+            "allowAfterThis": true
+          }
+        ],
         "no-shadow": "warn",
         "quote-props": "warn",
         "object-shorthand": "warn",
@@ -25,7 +28,6 @@
         "arrow-body-style": "warn",
         "@angular-eslint/no-output-native": "off",
         "space-before-function-paren": "warn",
-
         "@angular-eslint/component-selector": [
           "error",
           {
@@ -78,7 +80,7 @@
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "parserOptions": {
         "project": ["lib/process-services-cloud/tsconfig.lib.json", "lib/process-services-cloud/tsconfig.spec.json"],
         "createDefaultProgram": true

lib/process-services-cloud/.storybook/main.js

@@ -2,13 +2,9 @@ var rootPath = require('../../../.storybook/main');
 
 module.exports = {
     rootMain: rootPath,
-    stories: [...rootPath.stories, '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'],
+    stories: [...rootPath.stories, '../**/*.stories.@(js|jsx|ts|tsx)'],
 
-    staticDirs: [
-        ...rootPath.staticDirs,
-        { from: '../../core/src/lib/i18n', to: 'assets/adf-core/i18n' },
-        { from: __dirname + '/../src/lib/i18n', to: 'assets/adf-process-services-cloud/i18n' }
-    ],
+    staticDirs: [...rootPath.staticDirs, { from: __dirname + '/../src/lib/i18n', to: 'assets/adf-core/i18n' }],
 
     addons: ['@storybook/addon-essentials', ...rootPath.addons],
 
@@ -17,11 +13,5 @@ module.exports = {
         options: {}
     },
 
-    docs: {
-        autodocs: true
-    },
-
-    core: {
-        builder: '@storybook/builder-webpack5'
-    }
+    docs: {}
 };

lib/process-services-cloud/.storybook/preview.js

@@ -1,4 +1,5 @@
 export const parameters = {
-  docs: { inlineStories: true },
-  controls: { expanded: true }
+    docs: { inlineStories: true },
+    controls: { expanded: true }
 };
+export const tags = ['autodocs', 'autodocs'];

lib/process-services-cloud/package.json

@@ -39,9 +39,9 @@
     "@alfresco/js-api": ">=8.0.0-alpha.4-0",
     "@alfresco/adf-core": ">=7.0.0-alpha.4-0",
     "@alfresco/adf-content-services": ">=7.0.0-alpha.4-0",
-    "@apollo/client": "^3.7.2",
+    "@apollo/client": ">=3.7.2",
     "@ngx-translate/core": ">=14.0.0",
-    "apollo-angular": "^4.0.1",
+    "apollo-angular": ">=4.0.1",
     "subscriptions-transport-ws": "^0.11.0"
   },
   "keywords": [

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

@@ -60,12 +60,12 @@ import { FormCloudRepresentation } from '../models/form-cloud-representation.mod
 import { FormCloudService } from '../services/form-cloud.service';
 import { DisplayModeService } from '../services/display-mode.service';
 import { FormCloudComponent } from './form-cloud.component';
-import { ProcessServicesCloudModule } from '../../process-services-cloud.module';
 import { MatButtonHarness } from '@angular/material/button/testing';
 import { FormCloudDisplayMode } from '../../services/form-fields.interfaces';
 import { CloudFormRenderingService } from './cloud-form-rendering.service';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
 import { TaskVariableCloud } from '../models/task-variable-cloud.model';
+import { ProcessServicesCloudModule } from '../../process-services-cloud.module';
 
 const mockOauth2Auth: any = {
     oauth2Auth: {

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

@@ -23,7 +23,6 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatChipHarness } from '@angular/material/chips/testing';
-import { MatFormFieldHarness } from '@angular/material/form-field/testing';
 
 describe('GroupCloudWidgetComponent', () => {
     let fixture: ComponentFixture<GroupCloudWidgetComponent>;
@@ -145,12 +144,6 @@ describe('GroupCloudWidgetComponent', () => {
                 value: mockSpaghetti
             });
 
-            fixture.detectChanges();
-            await fixture.whenStable();
-
-            const formField = await loader.getHarness(MatFormFieldHarness);
-            expect(await formField.isDisabled()).toBeTrue();
-
             const groupChip = await loader.getHarness(MatChipHarness);
             expect(await groupChip.isDisabled()).toBeTrue();
         });
@@ -166,12 +159,6 @@ describe('GroupCloudWidgetComponent', () => {
                 value: mockSpaghetti
             });
 
-            fixture.detectChanges();
-            await fixture.whenStable();
-
-            const formField = await loader.getHarness(MatFormFieldHarness);
-            expect(await formField.isDisabled()).toBeTrue();
-
             const groupChips = await loader.getAllHarnesses(MatChipHarness);
             expect(await groupChips[0].isDisabled()).toBeTrue();
             expect(await groupChips[1].isDisabled()).toBeTrue();

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

@@ -24,8 +24,7 @@ import { IdentityUserService } from '../../../../people/services/identity-user.s
 import { mockShepherdsPie, mockYorkshirePudding } from '../../../../people/mock/people-cloud.mock';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatFormFieldHarness } from '@angular/material/form-field/testing';
-import { MatChipHarness } from '@angular/material/chips/testing';
+import { MatChipRowHarness } from '@angular/material/chips/testing';
 
 describe('PeopleCloudWidgetComponent', () => {
     let fixture: ComponentFixture<PeopleCloudWidgetComponent>;
@@ -174,12 +173,8 @@ describe('PeopleCloudWidgetComponent', () => {
                 value: mockSpaghetti
             });
 
-            fixture.detectChanges();
+            const peopleChip = await loader.getHarness(MatChipRowHarness);
 
-            const formField = await loader.getHarness(MatFormFieldHarness);
-            expect(await formField.isDisabled()).toBeTrue();
-
-            const peopleChip = await loader.getHarness(MatChipHarness);
             expect(await peopleChip.isDisabled()).toBeTrue();
         });
 
@@ -194,11 +189,7 @@ describe('PeopleCloudWidgetComponent', () => {
                 value: mockSpaghetti
             });
 
-            fixture.detectChanges();
-            const formField = await loader.getHarness(MatFormFieldHarness);
-            expect(await formField.isDisabled()).toBeTrue();
-
-            const peopleChip = await loader.getAllHarnesses(MatChipHarness);
+            const peopleChip = await loader.getAllHarnesses(MatChipRowHarness);
             expect(await peopleChip[0].isDisabled()).toBeTrue();
             expect(await peopleChip[1].isDisabled()).toBeTrue();
         });

lib/process-services-cloud/src/lib/form/services/content-cloud-node-selector.service.ts

@@ -66,7 +66,9 @@ export class ContentCloudNodeSelectorService {
         if (destinationFolderPath.alias && destinationFolderPath.path) {
             try {
                 return await this.getNodeId(destinationFolderPath.alias, destinationFolderPath.path).toPromise();
-            } catch {}
+            } catch {
+                /*empty*/
+            }
         }
 
         return this.getNodeId(destinationFolderPath.alias).toPromise();
@@ -82,7 +84,9 @@ export class ContentCloudNodeSelectorService {
         if (nodeId) {
             try {
                 isExistingNode = await this.getNodeId(nodeId).pipe(mapTo(true)).toPromise();
-            } catch {}
+            } catch {
+                /*empty*/
+            }
         }
         return isExistingNode;
     }

lib/process-services-cloud/src/lib/group/components/group-cloud.component.html

@@ -1,12 +1,13 @@
 <form>
     <mat-form-field class="adf-cloud-group" [class.adf-invalid]="hasError() && isDirty()">
         <ng-content select="[label]"></ng-content>
-        <mat-chip-grid #groupChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-group-chip-list">
+        <mat-chip-grid #groupChipList data-automation-id="adf-cloud-group-chip-list">
             <mat-chip-row
                 *ngFor="let group of selectedGroups"
                 [removable]="!(group.readonly)"
                 [attr.data-automation-id]="'adf-cloud-group-chip-' + group.name"
                 (removed)="onRemove(group)"
+                [disabled]="isReadonly() || isValidationLoading()"
                 title="{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
                 {{group.name}}
                 <mat-icon

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

@@ -26,7 +26,7 @@ import { IdentityGroupService } from '../services/identity-group.service';
 import { mockFoodGroups, mockMeatChicken, mockVegetableAubergine } from '../mock/group-cloud.mock';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatChipGridHarness, MatChipHarness } from '@angular/material/chips/testing';
+import { MatChipHarness } from '@angular/material/chips/testing';
 import { MatIconHarness } from '@angular/material/icon/testing';
 import { MatInputHarness } from '@angular/material/input/testing';
 
@@ -357,9 +357,7 @@ describe('GroupCloudComponent', () => {
 
             const chips = await loader.getAllHarnesses(MatChipHarness);
             expect(chips.length).toBe(1);
-
-            const chipList = await loader.getHarness(MatChipGridHarness);
-            expect(await chipList.isDisabled()).toBe(true);
+            expect(await chips[0].isDisabled()).toBe(true);
         });
 
         it('should chip list be disabled and show all the chips - multiple mode', async () => {
@@ -372,9 +370,8 @@ describe('GroupCloudComponent', () => {
 
             const chips = await loader.getAllHarnesses(MatChipHarness);
             expect(chips.length).toBe(2);
-
-            const chipList = await loader.getHarness(MatChipGridHarness);
-            expect(await chipList.isDisabled()).toBe(true);
+            expect(await chips[0].isDisabled()).toBe(true);
+            expect(await chips[1].isDisabled()).toBe(true);
         });
     });
 });

lib/process-services-cloud/src/lib/people/components/people-cloud.component.html

@@ -8,12 +8,13 @@
     >
         <ng-content *ngIf="!title" select="[label]"></ng-content>
         <mat-label *ngIf="title">{{ title | translate }}</mat-label>
-        <mat-chip-grid #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
+        <mat-chip-grid #userMultipleChipList data-automation-id="adf-cloud-people-chip-list">
             <mat-chip-row
                 *ngFor="let user of selectedUsers"
                 [removable]="!(user.readonly)"
                 [attr.data-automation-id]="'adf-people-cloud-chip-' + user.username"
                 (removed)="onRemove(user)"
+                [disabled]="isReadonly() || isValidationLoading()"
                 title="{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
                 {{user | fullName}}
                 <mat-icon
@@ -38,7 +39,6 @@
             >
         </mat-chip-grid>
 
-
         <mat-autocomplete autoActiveFirstOption class="adf-people-cloud-list"
                           #auto="matAutocomplete"
                           (optionSelected)="onSelect($event.option.value)"

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

@@ -28,7 +28,7 @@ import { IDENTITY_USER_SERVICE_TOKEN } from '../services/identity-user-service.t
 import { mockFoodUsers, mockKielbasaSausage, mockShepherdsPie, mockYorkshirePudding, mockPreselectedFoodUsers } from '../mock/people-cloud.mock';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatChipGridHarness, MatChipHarness } from '@angular/material/chips/testing';
+import { MatChipHarness } from '@angular/material/chips/testing';
 import { MatInputHarness } from '@angular/material/input/testing';
 import { MatFormFieldHarness } from '@angular/material/form-field/testing';
 
@@ -406,9 +406,7 @@ describe('PeopleCloudComponent', () => {
 
                 const chips = await loader.getAllHarnesses(MatChipHarness);
                 expect(chips.length).toBe(1);
-
-                const chipList = await loader.getHarness(MatChipGridHarness);
-                expect(await chipList.isDisabled()).toBe(true);
+                expect(await chips[0].isDisabled()).toBe(true);
             });
 
             it('should chip list be disabled and show mat chips for all the preselected users - multiple mode', async () => {
@@ -421,9 +419,8 @@ describe('PeopleCloudComponent', () => {
 
                 const chips = await loader.getAllHarnesses(MatChipHarness);
                 expect(chips.length).toBe(2);
-
-                const chipList = await loader.getHarness(MatChipGridHarness);
-                expect(await chipList.isDisabled()).toBe(true);
+                expect(await chips[0].isDisabled()).toBe(true);
+                expect(await chips[1].isDisabled()).toBe(true);
             });
         });
     });

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { AlfrescoApiService } from '@alfresco/adf-content-services';
-import { ADF_DATE_FORMATS, FullNamePipe, NoopTranslateModule, UserPreferencesService } from '@alfresco/adf-core';
+import { ADF_DATE_FORMATS, FullNamePipe, NoopAuthModule, NoopTranslateModule, UserPreferencesService } from '@alfresco/adf-core';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { SimpleChange } from '@angular/core';
@@ -101,6 +101,7 @@ describe('EditProcessFilterCloudComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [
+                NoopAuthModule,
                 MatIconTestingModule,
                 MatDialogModule,
                 NoopTranslateModule,

lib/process-services-cloud/src/lib/testing/process-service-cloud.testing.module.ts

@@ -24,7 +24,9 @@ import {
     TranslationService,
     TranslationMock,
     CoreModule,
-    AuthModule
+    AuthModule,
+    JWT_STORAGE_SERVICE,
+    StorageService
 } from '@alfresco/adf-core';
 import { AlfrescoApiService, AlfrescoApiServiceMock } from '@alfresco/adf-content-services';
 import { TranslateModule } from '@ngx-translate/core';
@@ -44,7 +46,8 @@ import { RouterTestingModule } from '@angular/router/testing';
     providers: [
         { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
         { provide: AppConfigService, useClass: AppConfigServiceMock },
-        { provide: TranslationService, useClass: TranslationMock }
+        { provide: TranslationService, useClass: TranslationMock },
+        { provide: JWT_STORAGE_SERVICE, useClass: StorageService }
     ],
     exports: [NoopAnimationsModule, TranslateModule, CoreModule, ProcessServicesCloudModule]
 })