AAE-26215 Standalone app list (process cloud)

lib/process-services-cloud/src/lib/app/app-list-cloud.module.ts

@@ -16,15 +16,11 @@
  */
 
 import { NgModule } from '@angular/core';
-import { MaterialModule } from '../material.module';
-import { CommonModule } from '@angular/common';
 import { AppDetailsCloudComponent } from './components/app-details-cloud.component';
 import { AppListCloudComponent } from './components/app-list-cloud.component';
-import { TEMPLATE_DIRECTIVES, CoreModule } from '@alfresco/adf-core';
 
 @NgModule({
-    imports: [CommonModule, ...TEMPLATE_DIRECTIVES, MaterialModule, CoreModule],
-    declarations: [AppListCloudComponent, AppDetailsCloudComponent],
+    imports: [AppListCloudComponent, AppDetailsCloudComponent],
     exports: [AppListCloudComponent, AppDetailsCloudComponent]
 })
 export class AppListCloudModule {}

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

@@ -19,7 +19,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { fakeApplicationInstance } from '../mock/app-model.mock';
 import { AppDetailsCloudComponent } from './app-details-cloud.component';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
-import { AppListCloudModule } from '../app-list-cloud.module';
 import { DEFAULT_APP_INSTANCE_THEME } from '../models/application-instance.model';
 
 describe('AppDetailsCloudComponent', () => {
@@ -29,7 +28,7 @@ describe('AppDetailsCloudComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ProcessServiceCloudTestingModule, AppListCloudModule]
+            imports: [ProcessServiceCloudTestingModule, AppDetailsCloudComponent]
         });
         fixture = TestBed.createComponent(AppDetailsCloudComponent);
         component = fixture.componentInstance;

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

@@ -18,7 +18,6 @@
 import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { AppDetailsCloudComponent } from './app-details-cloud.component';
 import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
-import { AppListCloudModule } from '../app-list-cloud.module';
 import { fakeApplicationInstance } from '../mock/app-model.mock';
 import { importProvidersFrom } from '@angular/core';
 
@@ -27,7 +26,7 @@ export default {
     title: 'Process Services Cloud/App List Cloud/App Details Cloud',
     decorators: [
         moduleMetadata({
-            imports: [AppListCloudModule]
+            imports: [AppDetailsCloudComponent]
         }),
         applicationConfig({
             providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]

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

@@ -17,46 +17,50 @@
 
 import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
 import { ApplicationInstanceModel, DEFAULT_APP_INSTANCE_ICON, DEFAULT_APP_INSTANCE_THEME } from '../models/application-instance.model';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
-  selector: 'adf-cloud-app-details',
-  templateUrl: './app-details-cloud.component.html',
-  styleUrls: ['./app-details-cloud.component.scss'],
-  encapsulation: ViewEncapsulation.None
+    selector: 'adf-cloud-app-details',
+    standalone: true,
+    imports: [CommonModule, TranslateModule, MatIconModule, MatCardModule],
+    templateUrl: './app-details-cloud.component.html',
+    styleUrls: ['./app-details-cloud.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
-
 export class AppDetailsCloudComponent {
+    @Input()
+    applicationInstance: ApplicationInstanceModel;
 
-  @Input()
-  applicationInstance: ApplicationInstanceModel;
-
-  @Output()
-  selectedApp = new EventEmitter<ApplicationInstanceModel>();
+    @Output()
+    selectedApp = new EventEmitter<ApplicationInstanceModel>();
 
-  /**
-   * Pass the selected app as next
-   *
-   * @param app application model
-   */
-  onSelectApp(app: ApplicationInstanceModel): void {
-    this.selectedApp.emit(app);
-  }
+    /**
+     * Pass the selected app as next
+     *
+     * @param app application model
+     */
+    onSelectApp(app: ApplicationInstanceModel): void {
+        this.selectedApp.emit(app);
+    }
 
-  /**
-   * Get application instance theme
-   *
-   * @returns the name of the theme
-   */
-  getTheme(): string {
-    return this.applicationInstance.theme || DEFAULT_APP_INSTANCE_THEME;
-  }
+    /**
+     * Get application instance theme
+     *
+     * @returns the name of the theme
+     */
+    getTheme(): string {
+        return this.applicationInstance.theme || DEFAULT_APP_INSTANCE_THEME;
+    }
 
-  /**
-   * Get application instance icon
-   *
-   * @returns the name of the icon
-   */
-  getIcon(): string {
-    return this.applicationInstance.icon || DEFAULT_APP_INSTANCE_ICON;
-  }
+    /**
+     * Get application instance icon
+     *
+     * @returns the name of the icon
+     */
+    getIcon(): string {
+        return this.applicationInstance.icon || DEFAULT_APP_INSTANCE_ICON;
+    }
 }

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

@@ -23,6 +23,8 @@
 import { AppListCloudComponent, LAYOUT_GRID, LAYOUT_LIST } from './app-list-cloud.component';
 import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
+import { MatIconModule } from '@angular/material/icon';
+import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
 
 describe('AppListCloudComponent', () => {
     let component: AppListCloudComponent;
@@ -31,7 +33,7 @@
     let getAppsSpy: jasmine.Spy;
     let alfrescoApiService: AlfrescoApiService;
 
     const mock: any = {
         oauth2Auth: {
             callCustomApi: () => Promise.resolve(fakeApplicationInstance)
         },
@@ -40,6 +42,8 @@
     };
 
     @Component({
+        standalone: true,
+        imports: [MatIconModule, CustomEmptyContentTemplateDirective, AppListCloudComponent],
         template: `
             <adf-cloud-app-list>
                 <adf-custom-empty-content-template>
@@ -53,8 +57,7 @@
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ProcessServiceCloudTestingModule],
-            declarations: [CustomEmptyAppListCloudTemplateComponent]
+            imports: [ProcessServiceCloudTestingModule, AppListCloudComponent, CustomEmptyAppListCloudTemplateComponent]
         });
         fixture = TestBed.createComponent(AppListCloudComponent);
         component = fixture.componentInstance;
@@ -74,7 +77,7 @@
     it('Should fetch deployed apps', (done) => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             component.apps$.subscribe((response: any[]) => {
                 expect(response).toBeDefined();
                 expect(response.length).toEqual(3);
                 expect(response[0].name).toEqual('application-new-1');
@@ -212,7 +215,7 @@
             customFixture.detectChanges();
             await customFixture.whenStable();
 
             const title: any = customFixture.nativeElement.querySelector('#custom-id');
             expect(title.innerText).toBe('No Apps Found');
         });
     });

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

@@ -17,7 +17,6 @@
 
 import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
-import { AppListCloudModule } from '../app-list-cloud.module';
 import { AppListCloudComponent } from './app-list-cloud.component';
 import { importProvidersFrom } from '@angular/core';
 
@@ -26,7 +25,7 @@ export default {
     title: 'Process Services Cloud/App List Cloud/App List Cloud',
     decorators: [
         moduleMetadata({
-            imports: [AppListCloudModule]
+            imports: [AppListCloudComponent]
         }),
         applicationConfig({
             providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]

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

@@ -15,19 +15,37 @@
  * limitations under the License.
  */
 
-import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
+import { CustomEmptyContentTemplateDirective, EmptyContentComponent } from '@alfresco/adf-core';
 import { AfterContentInit, Component, ContentChild, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { Observable, of, Subject } from 'rxjs';
 import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
 import { ApplicationInstanceModel } from '../models/application-instance.model';
 import { catchError } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppDetailsCloudComponent } from './app-details-cloud.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatLineModule } from '@angular/material/core';
+import { MatListModule } from '@angular/material/list';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 export const LAYOUT_LIST: string = 'LIST';
 export const LAYOUT_GRID: string = 'GRID';
 export const DEPLOYED_STATUS: string = 'DEPLOYED';
 
 @Component({
     selector: 'adf-cloud-app-list',
+    standalone: true,
+    imports: [
+        CommonModule,
+        TranslateModule,
+        AppDetailsCloudComponent,
+        MatIconModule,
+        MatLineModule,
+        MatListModule,
+        EmptyContentComponent,
+        MatProgressSpinnerModule
+    ],
     templateUrl: './app-list-cloud.component.html',
     styleUrls: ['./app-list-cloud.component.scss'],
     encapsulation: ViewEncapsulation.None
@@ -47,7 +65,7 @@
     @Output()
     appClick = new EventEmitter<ApplicationInstanceModel>();
 
     apps$: Observable<any>;
     loadingError$ = new Subject<boolean>();
     hasEmptyCustomContentTemplate: boolean = false;