AAE-21566 Handling new form event - show spinner (#9656)

* [AAE-21566] Add spinner event in process form

* CR

* CR

* added test for spinner service

* fix unit test

* fix lint

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

@@ -41,6 +41,7 @@ import { ConfirmDialogComponent } from '@alfresco/adf-content-services';
 import { v4 as uuidGeneration } from 'uuid';
 import { FormCloudDisplayMode, FormCloudDisplayModeConfiguration } from '../../services/form-fields.interfaces';
 import { DisplayModeService } from '../public-api';
+import { FormCloudSpinnerService } from '../services/spinner/form-cloud-spinner.service';
 
 @Component({
     selector: 'adf-cloud-form',
@@ -128,9 +129,13 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
         protected formService: FormService,
         private dialog: MatDialog,
         protected visibilityService: WidgetVisibilityService,
-        private readonly displayModeService: DisplayModeService
+        private readonly displayModeService: DisplayModeService,
+        private spinnerService: FormCloudSpinnerService
     ) {
         super();
+
+        this.spinnerService.initSpinnerHandling(this.onDestroy$);
+
         this.id = uuidGeneration();
 
         this.formService.formContentClicked.pipe(takeUntil(this.onDestroy$)).subscribe((content) => {
@@ -375,6 +380,7 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
             }
             return form;
         }
+
         return null;
     }
 
@@ -396,8 +402,10 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
 
     private refreshFormData() {
         this.form = this.parseForm(this.formCloudRepresentationJSON);
-        this.onFormLoaded(this.form);
-        this.onFormDataRefreshed(this.form);
+        if (this.form) {
+            this.onFormLoaded(this.form);
+            this.onFormDataRefreshed(this.form);
+        }
     }
 
     protected onFormLoaded(form: FormModel) {

lib/process-services-cloud/src/lib/form/components/spinner/form-spinner.component.html

@@ -0,0 +1,11 @@
+<div class="adf-cloud-form-spinner">
+    <div class="adf-cloud-form-spinner-content">
+        <mat-progress-spinner
+            color="primary"
+            mode="indeterminate"
+        ></mat-progress-spinner>
+        <span class="adf-cloud-form-spinner-content-message">
+            {{message | translate}}
+        </span>
+    </div>
+</div>

lib/process-services-cloud/src/lib/form/components/spinner/form-spinner.component.scss

@@ -0,0 +1,20 @@
+.adf-cloud-form {
+    &-spinner {
+        position: fixed;
+        inset: 0;
+        display: flex;
+        place-content: center center;
+
+        &-content {
+            display: flex;
+            flex-flow: column wrap;
+            place-content: center center;
+            row-gap: 25px;
+            align-items: center;
+
+            &-message {
+                font-size: var(--theme-body-4-font-size);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,26 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input } from '@angular/core';
+
+@Component({
+    templateUrl: './form-spinner.component.html',
+    styleUrls: ['./form-spinner.component.scss']
+})
+export class FormSpinnerComponent {
+    @Input() message = '';
+}

lib/process-services-cloud/src/lib/form/form-cloud.module.ts

@@ -42,10 +42,14 @@ import { FileViewerWidgetComponent } from './components/widgets/file-viewer/file
 import { DisplayRichTextWidgetComponent } from './components/widgets/display-rich-text/display-rich-text.widget';
 import { RichTextEditorModule } from '../rich-text-editor';
 import { A11yModule } from '@angular/cdk/a11y';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { FormSpinnerComponent } from './components/spinner/form-spinner.component';
+import { FormCloudSpinnerService } from './services/spinner/form-cloud-spinner.service';
 
 @NgModule({
     imports: [
         CommonModule,
+        OverlayModule,
         MaterialModule,
         FormsModule,
         ReactiveFormsModule,
@@ -76,7 +80,8 @@ import { A11yModule } from '@angular/cdk/a11y';
         PropertiesViewerWidgetComponent,
         FilePropertiesTableCloudComponent,
         FileViewerWidgetComponent,
-        DisplayRichTextWidgetComponent
+        DisplayRichTextWidgetComponent,
+        FormSpinnerComponent
     ],
     exports: [
         FormCloudComponent,
@@ -92,6 +97,7 @@ import { A11yModule } from '@angular/cdk/a11y';
         PropertiesViewerWidgetComponent,
         FileViewerWidgetComponent,
         DisplayRichTextWidgetComponent
-    ]
+    ],
+    providers: [FormCloudSpinnerService]
 })
 export class FormCloudModule {}

lib/process-services-cloud/src/lib/form/services/spinner/form-cloud-spinner.service.spec.ts

@@ -0,0 +1,84 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormCloudSpinnerService } from './form-cloud-spinner.service';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { FormService, FormSpinnerEvent } from '@alfresco/adf-core';
+import { Subject } from 'rxjs';
+import { TranslateModule } from '@ngx-translate/core';
+import { Component } from '@angular/core';
+import { FormSpinnerComponent } from '../../components/spinner/form-spinner.component';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatProgressSpinnerHarness } from '@angular/material/progress-spinner/testing';
+import { PortalModule } from '@angular/cdk/portal';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+
+@Component({
+    selector: 'adf-cloud-overlay-test',
+    template: `<div>adf-cloud-overlay-test</div>`
+})
+class SpinnerTestComponent {}
+
+describe('FormCloudSpinnerService', () => {
+    let fixture: ComponentFixture<SpinnerTestComponent>;
+    let rootLoader: HarnessLoader;
+    let spinnerService: FormCloudSpinnerService;
+    let formService: FormService;
+
+    const showSpinnerEvent = new FormSpinnerEvent('toggle-spinner', { showSpinner: true, message: 'LOAD_SPINNER_MESSAGE' });
+    const hideSpinnerEvent = new FormSpinnerEvent('toggle-spinner', { showSpinner: false });
+
+    const onDestroy$ = new Subject<boolean>();
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [FormSpinnerComponent, SpinnerTestComponent],
+            providers: [
+                FormCloudSpinnerService,
+                {
+                    provide: FormService,
+                    useValue: {
+                        toggleFormSpinner: new Subject()
+                    }
+                }
+            ],
+            imports: [OverlayModule, PortalModule, MatProgressSpinnerModule, TranslateModule.forRoot()]
+        });
+
+        fixture = TestBed.createComponent(SpinnerTestComponent);
+        rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+        spinnerService = TestBed.inject(FormCloudSpinnerService);
+        formService = TestBed.inject(FormService);
+    });
+
+    it('should toggle spinner', async () => {
+        spinnerService.initSpinnerHandling(onDestroy$);
+        formService.toggleFormSpinner.next(showSpinnerEvent);
+        fixture.detectChanges();
+
+        let hasSpinner = await rootLoader.hasHarness(MatProgressSpinnerHarness);
+        expect(hasSpinner).toBeTrue();
+
+        formService.toggleFormSpinner.next(hideSpinnerEvent);
+        fixture.detectChanges();
+
+        hasSpinner = await rootLoader.hasHarness(MatProgressSpinnerHarness);
+        expect(hasSpinner).toBeFalse();
+    });
+});

lib/process-services-cloud/src/lib/form/services/spinner/form-cloud-spinner.service.ts

@@ -0,0 +1,48 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable, inject } from '@angular/core';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { FormService, FormSpinnerEvent } from '@alfresco/adf-core';
+import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { FormSpinnerComponent } from '../../components/spinner/form-spinner.component';
+
+@Injectable()
+export class FormCloudSpinnerService {
+    private formService = inject(FormService);
+    private overlay = inject(Overlay);
+
+    private overlayRef?: OverlayRef;
+
+    initSpinnerHandling(onDestroy$: Observable<boolean>): void {
+        this.formService.toggleFormSpinner.pipe(takeUntil(onDestroy$)).subscribe((event: FormSpinnerEvent) => {
+            if (event?.payload.showSpinner) {
+                this.overlayRef = this.overlay.create({
+                    hasBackdrop: true
+                });
+
+                const userProfilePortal = new ComponentPortal(FormSpinnerComponent);
+                const componentRef = this.overlayRef.attach(userProfilePortal);
+                componentRef.instance.message = event.payload.message;
+            } else if (event?.payload.showSpinner === false) {
+                this.overlayRef?.detach();
+            }
+        });
+    }
+}

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

@@ -1,4 +1,7 @@
-<mat-card class="adf-start-process" *ngIf="(loading$ | async) === false; else spinner">
+<mat-card
+    *ngIf="(loading$ | async) === false; else spinner"
+    class="adf-start-process"
+>
 
     <mat-card-content>
 
@@ -100,10 +103,12 @@
 <ng-template #taskFormCloudButtons>
     <div class="adf-start-process-cloud-actions">
         <button
+            *ngIf="showCancelButton"
             mat-button
             (click)="cancelStartProcess()"
-            id="cancel_process">
-                {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.CANCEL' | translate | uppercase}}
+            id="cancel_process"
+        >
+            {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.CANCEL' | translate | uppercase}}
         </button>
         <button
             color="primary"
@@ -112,7 +117,8 @@
             (click)="startProcess()"
             data-automation-id="btn-start"
             id="button-start"
-            class="adf-btn-start">
+            class="adf-btn-start"
+        >
                 {{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
         </button>
     </div>

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts

@@ -86,6 +86,10 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     @Input()
     showTitle: boolean = true;
 
+    /** Show/hide cancel button. */
+    @Input()
+    showCancelButton: boolean = true;
+
     /** Emitted when the process is successfully started. */
     @Output()
     success = new EventEmitter<ProcessInstanceCloud>();
@@ -187,20 +191,24 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     }
 
     setProcessDefinitionOnForm(selectedProcessDefinitionName: string) {
-        this.processDefinitionCurrent = this.filteredProcesses.find(
+        const processDefinitionCurrent = this.filteredProcesses.find(
             (process: ProcessDefinitionCloud) => process.name === selectedProcessDefinitionName || process.key === selectedProcessDefinitionName
         );
 
-        this.startProcessCloudService.getStartEventFormStaticValuesMapping(this.appName, this.processDefinitionCurrent.id).subscribe(
+        this.startProcessCloudService.getStartEventFormStaticValuesMapping(this.appName, processDefinitionCurrent.id).subscribe(
             (staticMappings) => {
                 this.staticMappings = staticMappings;
                 this.resolvedValues = this.staticMappings.concat(this.values || []);
+                this.processDefinitionCurrent = processDefinitionCurrent;
             },
-            () => (this.resolvedValues = this.values)
+            () => {
+                this.resolvedValues = this.values;
+                this.processDefinitionCurrent = processDefinitionCurrent;
+            }
         );
 
         this.isFormCloudLoaded = false;
-        this.processPayloadCloud.processDefinitionKey = this.processDefinitionCurrent.key;
+        this.processPayloadCloud.processDefinitionKey = processDefinitionCurrent.key;
     }
 
     private getProcessDefinitionListByNameOrKey(processDefinitionName: string): ProcessDefinitionCloud[] {

lib/process-services-cloud/src/lib/services/notification-cloud.service.ts

@@ -32,11 +32,7 @@ import { AdfHttpClient } from '@alfresco/adf-core/api';
 export class NotificationCloudService extends BaseCloudService {
     appsListening = [];
 
-    constructor(
-        public apollo: Apollo,
-        private http: HttpLink,
-        private authService: AuthenticationService,
-        protected adfHttpClient: AdfHttpClient) {
+    constructor(public apollo: Apollo, private http: HttpLink, private authService: AuthenticationService, protected adfHttpClient: AdfHttpClient) {
         super(adfHttpClient);
     }