refactor: use cdk portal to prevent rebuilding widget when expanding it (#2013)

---------

Co-authored-by: Unai Zalba <[email protected]>
Co-authored-by: Antoine Hurard <[email protected]>

Author: 3 people

apps/back-office/src/app/app-preview/pages/workflow/workflow.component.html

@@ -7,4 +7,7 @@
   [activeStep]="activeStep"
 >
 </shared-workflow-stepper>
-<router-outlet (activate)="onActivate($event)"></router-outlet>
+<router-outlet
+  (activate)="onActivate($event)"
+  (deactivate)="clearSubscriptions()"
+></router-outlet>

apps/back-office/src/app/app-preview/pages/workflow/workflow.component.ts

@@ -13,6 +13,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { takeUntil } from 'rxjs/operators';
 import { SnackbarService } from '@oort-front/ui';
 import { PreviewService } from '../../../services/preview.service';
+import { Subscription } from 'rxjs';
 
 /**
  * Workflow page component for application preview.
@@ -35,6 +36,8 @@ export class WorkflowComponent extends UnsubscribeComponent implements OnInit {
   public activeStep = 0;
   /** Role used for preview */
   public role = '';
+  /** Subscription to change step events */
+  private changeStepSubscription!: Subscription;
 
   /**
    * Workflow page component for application preview
@@ -116,16 +119,25 @@ export class WorkflowComponent extends UnsubscribeComponent implements OnInit {
    */
   onActivate(elementRef: any): void {
     if (elementRef.changeStep) {
-      elementRef.changeStep.subscribe((event: any) => {
-        if (event > 0) {
-          this.goToNextStep();
-        } else {
-          this.goToPreviousStep();
+      this.changeStepSubscription = elementRef.changeStep.subscribe(
+        (event: any) => {
+          if (event > 0) {
+            this.goToNextStep();
+          } else {
+            this.goToPreviousStep();
+          }
         }
-      });
+      );
     }
   }
 
+  /**
+   * Clear subscriptions set from the router-outlet
+   */
+  clearSubscriptions() {
+    this.changeStepSubscription?.unsubscribe();
+  }
+
   /**
    * Navigates to the next step if possible and change selected step / index consequently
    */

apps/back-office/src/app/application/pages/workflow/workflow.component.html

@@ -49,4 +49,7 @@ <h1 class="!m-0 overflow-hidden text-ellipsis">
   [activeStep]="activeStep"
 >
 </shared-workflow-stepper>
-<router-outlet (activate)="onActivate($event)"></router-outlet>
+<router-outlet
+  (activate)="onActivate($event)"
+  (deactivate)="clearSubscriptions()"
+></router-outlet>

apps/back-office/src/app/application/pages/workflow/workflow.component.ts

@@ -19,6 +19,7 @@ import { DELETE_STEP, EDIT_WORKFLOW } from './graphql/mutations';
 import { TranslateService } from '@ngx-translate/core';
 import { takeUntil } from 'rxjs/operators';
 import { SnackbarService } from '@oort-front/ui';
+import { Subscription } from 'rxjs';
 
 /**
  * Application workflow page component.
@@ -45,6 +46,8 @@ export class WorkflowComponent extends UnsubscribeComponent implements OnInit {
 
   // === ACTIVE STEP ===
   public activeStep = 0;
+  /** Subscription to change step events */
+  private changeStepSubscription!: Subscription;
 
   // === DUP APP SELECTION ===
   public showAppMenu = false;
@@ -276,16 +279,25 @@ export class WorkflowComponent extends UnsubscribeComponent implements OnInit {
    */
   onActivate(elementRef: any): void {
     if (elementRef.changeStep) {
-      elementRef.changeStep.subscribe((event: number) => {
-        if (event > 0) {
-          this.goToNextStep();
-        } else {
-          this.goToPreviousStep();
+      this.changeStepSubscription = elementRef.changeStep.subscribe(
+        (event: number) => {
+          if (event > 0) {
+            this.goToNextStep();
+          } else {
+            this.goToPreviousStep();
+          }
         }
-      });
+      );
     }
   }
 
+  /**
+   * Clear subscriptions set from the router-outlet
+   */
+  clearSubscriptions() {
+    this.changeStepSubscription?.unsubscribe();
+  }
+
   /**
    * Saves the new ordering
    *

apps/front-office/src/app/application/pages/workflow/workflow.component.html

@@ -28,4 +28,7 @@ <h1 class="!m-0 overflow-hidden text-ellipsis">
   class="block"
 >
 </shared-workflow-stepper>
-<router-outlet (activate)="onActivate($event)"></router-outlet>
+<router-outlet
+  (activate)="onActivate($event)"
+  (deactivate)="clearSubscriptions()"
+></router-outlet>

apps/front-office/src/app/application/pages/workflow/workflow.component.ts

@@ -12,6 +12,7 @@ import { GET_WORKFLOW_BY_ID } from './graphql/queries';
 import { TranslateService } from '@ngx-translate/core';
 import { takeUntil } from 'rxjs/operators';
 import { SnackbarService } from '@oort-front/ui';
+import { Subscription } from 'rxjs';
 
 /**
  * Workflow page.
@@ -32,6 +33,8 @@ export class WorkflowComponent extends UnsubscribeComponent implements OnInit {
   public steps: Step[] = [];
   /** Current step */
   public activeStep = 0;
+  /** Subscription to change step events */
+  private changeStepSubscription!: Subscription;
 
   /**
    * Workflow page.
@@ -127,16 +130,25 @@ export class WorkflowComponent extends UnsubscribeComponent implements OnInit {
    */
   onActivate(elementRef: any): void {
     if (elementRef.changeStep) {
-      elementRef.changeStep.subscribe((event: any) => {
-        if (event > 0) {
-          this.goToNextStep();
-        } else {
-          this.goToPreviousStep();
+      this.changeStepSubscription = elementRef.changeStep.subscribe(
+        (event: any) => {
+          if (event > 0) {
+            this.goToNextStep();
+          } else {
+            this.goToPreviousStep();
+          }
         }
-      });
+      );
     }
   }
 
+  /**
+   * Clear subscriptions set from the router-outlet
+   */
+  clearSubscriptions() {
+    this.changeStepSubscription?.unsubscribe();
+  }
+
   /**
    * Navigates to the clicked step.
    *

libs/shared/src/lib/components/widget-grid/expanded-widget/expanded-widget.component.html

@@ -1,10 +1,6 @@
 <ui-dialog size="fullscreen">
   <ng-container ngProjectAs="content">
-    <shared-widget
-      [widget]="data.widget"
-      [header]="false"
-      (changeStep)="changeStep.emit($event)"
-    ></shared-widget>
+    <ng-template [cdkPortalOutlet]="portal"></ng-template>
   </ng-container>
   <ng-container ngProjectAs="actions">
     <ui-button uiDialogClose>

libs/shared/src/lib/components/widget-grid/expanded-widget/expanded-widget.component.ts

@@ -1,44 +1,48 @@
 import {
   AfterViewInit,
   Component,
-  EventEmitter,
+  ElementRef,
   Inject,
   OnDestroy,
-  Output,
 } from '@angular/core';
 import { DIALOG_DATA } from '@angular/cdk/dialog';
 import { DOCUMENT } from '@angular/common';
+import { DomPortal, PortalModule } from '@angular/cdk/portal';
+import { ButtonModule, DialogModule } from '@oort-front/ui';
 
-/** Dialog data */
-interface DialogData {
-  widget: any;
+/** Widget data and template for class dialog */
+interface WidgetData {
+  element?: ElementRef<any>;
 }
 
-/** Component for expanded widgets */
+/** Expand widgets in a modal */
 @Component({
+  standalone: true,
   selector: 'shared-expanded-widget',
   templateUrl: './expanded-widget.component.html',
   styleUrls: ['./expanded-widget.component.scss'],
+  imports: [DialogModule, ButtonModule, PortalModule],
 })
 export class ExpandedWidgetComponent implements AfterViewInit, OnDestroy {
-  // === EMIT STEP CHANGE FOR WORKFLOW ===
-  @Output() changeStep: EventEmitter<number> = new EventEmitter();
+  /** CDK portal */
+  public portal?: DomPortal;
 
   /**
-   * Constructor for the component
+   * Expand widgets in a modal
    *
-   * @param data The input data for the dialog
+   * @param data Dialog data
    * @param document Document
    */
   constructor(
-    @Inject(DIALOG_DATA) public data: DialogData,
+    @Inject(DIALOG_DATA) public data: WidgetData,
     @Inject(DOCUMENT) private document: Document
   ) {}
 
   ngAfterViewInit(): void {
     this.document.dispatchEvent(
       new CustomEvent('expandchange', { detail: { expanded: true } })
     );
+    this.portal = new DomPortal(this.data.element);
   }
 
   ngOnDestroy(): void {

libs/shared/src/lib/components/widget-grid/widget-actions/widget-actions.component.ts

@@ -77,7 +77,7 @@ export class WidgetActionsComponent extends UnsubscribeComponent {
       });
     }
     if (action === 'expand') {
-      this.expand.emit({ widget: this.widget });
+      this.expand.emit({ id: this.id });
     }
     if (action === 'style') {
       this.style.emit({ id: this.id, widget: this.widget });

libs/shared/src/lib/components/widget-grid/widget-grid.component.html

@@ -42,9 +42,8 @@ <h2 *ngIf="widgets.length === 0">{{ 'models.widget.add' | translate }}</h2>
       }"
     >
       <shared-widget
-        #widgetElement
         [widget]="widget"
-        (changeStep)="changeStep.emit($event)"
+        (changeStep)="triggerChangeStepAction($event)"
         (edit)="onEditWidget($event)"
         [canUpdate]="canUpdate"
         [headerLeftTemplate]="headerLeftTemplate"
@@ -71,7 +70,9 @@ <h2 *ngIf="widgets.length === 0">{{ 'models.widget.add' | translate }}</h2>
           class="-mr-3"
           [id]="id"
           [canUpdate]="canUpdate"
-          [collapsed]="widgetElement.elementRef.nativeElement.clientWidth < 500"
+          [collapsed]="
+            widgetComponents.get(i)?.elementRef?.nativeElement.clientWidth < 500
+          "
           [widget]="widget"
           (edit)="onEditWidget($event)"
           (delete)="onDeleteWidget($event)"