[ADF-3983] Add permission template to app list cloud (#4592)

* [ADF-3983] Add permission template to app list cloud

* [ADF-3983] Fix and add unit tests

lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.html

@@ -1,8 +1,8 @@
-<div class="menu-container" *ngIf="apps$ | async as appsList; else loading">
+<div class="menu-container" *ngIf="apps$ | async as appsList; else loadingOrError">
     <ng-container *ngIf="appsList.length > 0; else noApps">
         <div *ngIf="isGrid(); else appList" fxLayout="row wrap">
-            <adf-cloud-app-details fxFlex="33.33333%" fxFlex.lt-md="50%" fxFlex.lt-sm="100%" *ngFor="let app of appsList"
+            <adf-cloud-app-details fxFlex="33.33333%" fxFlex.lt-md="50%" fxFlex.lt-sm="100%"
-                [applicationInstance]="app" (selectedApp)="onSelectApp($event)">
+                *ngFor="let app of appsList" [applicationInstance]="app" (selectedApp)="onSelectApp($event)">
             </adf-cloud-app-details>
         </div>
 
@@ -24,15 +24,23 @@
         </ng-content>
 
         <ng-template #defaultEmptyTemplate>
-            <adf-empty-content icon="apps" [title]="'ADF_CLOUD_TASK_LIST.APPS.TITLE' | translate" [subtitle]="'ADF_CLOUD_TASK_LIST.APPS.SUBTITLE' | translate">
+            <adf-empty-content icon="apps" [title]="'ADF_CLOUD_TASK_LIST.APPS.NO_APPS.TITLE' | translate"
+                [subtitle]="'ADF_CLOUD_TASK_LIST.APPS.NO_APPS.SUBTITLE' | translate">
             </adf-empty-content>
         </ng-template>
     </div>
 </ng-template>
-<ng-template #loading>
+<ng-template #loadingOrError>
+    <div *ngIf="loadingError$ | async; else loading" class="adf-app-list-error">
+        <adf-empty-content icon="error_outline" [title]="'ADF_CLOUD_TASK_LIST.APPS.ERROR.TITLE' | translate"
+            [subtitle]="'ADF_CLOUD_TASK_LIST.APPS.ERROR.SUBTITLE' | translate">
+        </adf-empty-content>
+    </div>
+    <ng-template #loading>
     <ng-container>
         <div class="adf-app-list-spinner">
             <mat-spinner></mat-spinner>
         </div>
     </ng-container>
 </ng-template>
+</ng-template>

lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.scss

@@ -8,7 +8,7 @@
         cursor: pointer;
     }
 
-    .adf-app-list-spinner, .adf-app-list-empty {
+    .adf-app-list-spinner, .adf-app-list-empty, .adf-app-list-error {
         display: flex;
         align-items: center;
         justify-content: center;

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

@@ -18,7 +18,7 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { setupTestBed, CoreModule, AlfrescoApiServiceMock,  AlfrescoApiService } from '@alfresco/adf-core';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 
 import { fakeApplicationInstance } from '../mock/app-model.mock';
 import { AppListCloudComponent } from './app-list-cloud.component';
@@ -40,7 +40,7 @@ describe('AppListCloudComponent', () => {
             }
     };
 
-    beforeEach( async(() => {
+    beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [CoreModule.forRoot(), ProcessServiceCloudTestingModule, AppListCloudModule],
             providers: [
@@ -56,7 +56,7 @@ describe('AppListCloudComponent', () => {
           }).compileComponents();
     }));
 
-    beforeEach( () => {
+    beforeEach(() => {
         fixture = TestBed.createComponent(AppListCloudComponent);
         component = fixture.componentInstance;
         alfrescoApiService = TestBed.get(AlfrescoApiService);
@@ -105,11 +105,28 @@ describe('AppListCloudComponent', () => {
         expect(defaultEmptyTemplate).toBeDefined();
         expect(defaultEmptyTemplate).not.toBeNull();
         expect(emptyContent).not.toBeNull();
-        expect(emptyTitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.TITLE');
+        expect(emptyTitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.NO_APPS.TITLE');
-        expect(emptySubtitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.SUBTITLE');
+        expect(emptySubtitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.NO_APPS.SUBTITLE');
         expect(getAppsSpy).toHaveBeenCalled();
     });
 
+    it('should display default no permissions template when response returns exception', () => {
+        getAppsSpy.and.returnValue(throwError({}));
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            component.loadingError$.next(true);
+            fixture.detectChanges();
+            const errorTemplate = fixture.nativeElement.querySelector('.adf-app-list-error');
+            const errorTitle = fixture.debugElement.nativeElement.querySelector('.adf-empty-content__title');
+            const errorSubtitle = fixture.debugElement.nativeElement.querySelector('.adf-empty-content__subtitle');
+            expect(errorTemplate).not.toBeNull();
+            expect(errorTitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.ERROR.TITLE');
+            expect(errorSubtitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.ERROR.SUBTITLE');
+            expect(getAppsSpy).toHaveBeenCalled();
+        });
+
+    });
+
     describe('Grid Layout ', () => {
 
         it('should display a grid by default', () => {

lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.ts

@@ -15,93 +15,100 @@
  * limitations under the License.
  */
 
- import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
+import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
- import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild } from '@angular/core';
+import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild } from '@angular/core';
- import { Observable } from 'rxjs';
+import { Observable, of, Subject } from 'rxjs';
- import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
+import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
- import { ApplicationInstanceModel } from '../models/application-instance.model';
+import { ApplicationInstanceModel } from '../models/application-instance.model';
- import { ApplicationDeploymentCloudService } from '../services/app-deployment-cloud.service';
+import { ApplicationDeploymentCloudService } from '../services/app-deployment-cloud.service';
+import { catchError } from 'rxjs/operators';
 
- @Component({
+@Component({
-     selector: 'adf-cloud-app-list',
+    selector: 'adf-cloud-app-list',
-     templateUrl: './app-list-cloud.component.html',
+    templateUrl: './app-list-cloud.component.html',
-     styleUrls: ['./app-list-cloud.component.scss'],
+    styleUrls: ['./app-list-cloud.component.scss'],
-     providers: [
+    providers: [
         { provide: AppsProcessCloudService, useClass: ApplicationDeploymentCloudService }
-      ]
+    ]
- })
+})
- export class AppListCloudComponent implements OnInit, AfterContentInit {
+export class AppListCloudComponent implements OnInit, AfterContentInit {
 
-     public static LAYOUT_LIST: string = 'LIST';
+    public static LAYOUT_LIST: string = 'LIST';
-     public static LAYOUT_GRID: string = 'GRID';
+    public static LAYOUT_GRID: string = 'GRID';
-     public static RUNNING_STATUS: string = 'RUNNING';
+    public static RUNNING_STATUS: string = 'RUNNING';
 
-     @ContentChild(CustomEmptyContentTemplateDirective)
+    @ContentChild(CustomEmptyContentTemplateDirective)
-     emptyCustomContent: CustomEmptyContentTemplateDirective;
+    emptyCustomContent: CustomEmptyContentTemplateDirective;
 
-     /** (**required**) Defines the layout of the apps. There are two possible
+    /** (**required**) Defines the layout of the apps. There are two possible
-      * values, "GRID" and "LIST".
+     * values, "GRID" and "LIST".
-      */
+     */
-     @Input()
+    @Input()
-     layoutType: string = AppListCloudComponent.LAYOUT_GRID;
+    layoutType: string = AppListCloudComponent.LAYOUT_GRID;
 
-     /** Emitted when an app entry is clicked. */
+    /** Emitted when an app entry is clicked. */
-     @Output()
+    @Output()
-     appClick: EventEmitter<ApplicationInstanceModel> = new EventEmitter<ApplicationInstanceModel>();
+    appClick: EventEmitter<ApplicationInstanceModel> = new EventEmitter<ApplicationInstanceModel>();
 
-     apps$: Observable<any>;
+    apps$: Observable<any>;
+    loadingError$ = new Subject<boolean>();
+    hasEmptyCustomContentTemplate: boolean = false;
 
-     hasEmptyCustomContentTemplate: boolean = false;
+    constructor(private appsProcessCloudService: AppsProcessCloudService) { }
 
-     constructor(private appsProcessCloudService: AppsProcessCloudService) { }
+    ngOnInit() {
+        if (!this.isValidType()) {
+            this.setDefaultLayoutType();
+        }
 
-     ngOnInit() {
+        this.apps$ = this.appsProcessCloudService.getDeployedApplicationsByStatus(AppListCloudComponent.RUNNING_STATUS)
-         if (!this.isValidType()) {
+            .pipe(
-             this.setDefaultLayoutType();
+                catchError((error) => {
-         }
+                    this.loadingError$.next(true);
+                    return of();
+                })
+            );
+    }
 
-         this.apps$ = this.appsProcessCloudService.getDeployedApplicationsByStatus(AppListCloudComponent.RUNNING_STATUS);
+    ngAfterContentInit() {
-     }
+        if (this.emptyCustomContent) {
+            this.hasEmptyCustomContentTemplate = true;
+        }
+    }
 
-     ngAfterContentInit() {
+    onSelectApp(app: ApplicationInstanceModel): void {
-         if (this.emptyCustomContent) {
+        this.appClick.emit(app);
-             this.hasEmptyCustomContentTemplate = true;
+    }
-         }
-     }
 
-     onSelectApp(app: ApplicationInstanceModel): void {
+    /**
-         this.appClick.emit(app);
+     * Check if the value of the layoutType property is an allowed value
-     }
+     */
+    isValidType(): boolean {
+        if (this.layoutType && (this.layoutType === AppListCloudComponent.LAYOUT_LIST || this.layoutType === AppListCloudComponent.LAYOUT_GRID)) {
+            return true;
+        }
+        return false;
+    }
 
-     /**
+    /**
-      * Check if the value of the layoutType property is an allowed value
+     * Assign the default value to LayoutType
-      */
+     */
-     isValidType(): boolean {
+    setDefaultLayoutType(): void {
-         if (this.layoutType && (this.layoutType === AppListCloudComponent.LAYOUT_LIST || this.layoutType === AppListCloudComponent.LAYOUT_GRID)) {
+        this.layoutType = AppListCloudComponent.LAYOUT_GRID;
-             return true;
+    }
-         }
-         return false;
-     }
 
-     /**
+    /**
-      * Assign the default value to LayoutType
+     * Return true if the layout type is LIST
-      */
+     */
-     setDefaultLayoutType(): void {
+    isList(): boolean {
-         this.layoutType = AppListCloudComponent.LAYOUT_GRID;
+        return this.layoutType === AppListCloudComponent.LAYOUT_LIST;
-     }
+    }
 
-     /**
+    /**
-      * Return true if the layout type is LIST
+     * Return true if the layout type is GRID
-      */
+     */
-     isList(): boolean {
+    isGrid(): boolean {
-         return this.layoutType === AppListCloudComponent.LAYOUT_LIST;
-     }
 
-     /**
+        return this.layoutType === AppListCloudComponent.LAYOUT_GRID;
-      * Return true if the layout type is GRID
+    }
-      */
+}
-     isGrid(): boolean {
-
-         return this.layoutType === AppListCloudComponent.LAYOUT_GRID;
-     }
- }

lib/process-services-cloud/src/lib/i18n/en.json

@@ -47,8 +47,14 @@
   },
   "ADF_CLOUD_TASK_LIST": {
     "APPS": {
-      "TITLE": "No Applications Found",
+      "NO_APPS": {
-      "SUBTITLE": "Create a new application that you want to easily find later"
+        "TITLE": "No Applications Found",
+        "SUBTITLE": "Create a new application that you want to easily find later"
+      },
+      "ERROR": {
+        "TITLE": "There was an error",
+        "SUBTITLE": "Check you have permission to access the apps"
+      }
     },
     "START_TASK": {
       "FORM": {