Refactor/ab#82357 update angular fix memory leak issues and other fixes

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

@@ -17,7 +17,7 @@ import {
   GET_PAGE_BY_ID,
   GET_STEP_BY_ID,
 } from './graphql/queries';
-import { takeUntil } from 'rxjs/operators';
+import { switchMap, takeUntil } from 'rxjs/operators';
 
 /**
  * Application preview form page component.
@@ -85,19 +85,20 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
               id: this.id,
             },
           })
-          .subscribe((res) => {
-            this.step = res.data.step;
-            this.apollo
-              .query<FormQueryResponse>({
+          .pipe(
+            switchMap((res) => {
+              this.step = res.data.step;
+              return this.apollo.query<FormQueryResponse>({
                 query: GET_SHORT_FORM_BY_ID,
                 variables: {
                   id: this.step.content,
                 },
-              })
-              .subscribe(({ data, loading }) => {
-                this.form = data.form;
-                this.loading = loading;
               });
+            })
+          )
+          .subscribe(({ data, loading }) => {
+            this.form = data.form;
+            this.loading = loading;
           });
       } else {
         this.apollo
@@ -107,21 +108,22 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
               id: this.id,
             },
           })
-          .subscribe((res) => {
-            this.page = res.data.page;
-            this.apollo
-              .query<FormQueryResponse>({
+          .pipe(
+            switchMap((res) => {
+              this.page = res.data.page;
+              return this.apollo.query<FormQueryResponse>({
                 query: GET_SHORT_FORM_BY_ID,
                 variables: {
                   id: this.page.content,
                 },
-              })
-              .subscribe(({ data, loading }) => {
-                if (data) {
-                  this.form = data.form;
-                }
-                this.loading = loading;
               });
+            })
+          )
+          .subscribe(({ data, loading }) => {
+            if (data) {
+              this.form = data.form;
+            }
+            this.loading = loading;
           });
       }
     });

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

@@ -10,7 +10,7 @@ import {
 } from '@oort-front/shared';
 import { GET_WORKFLOW_BY_ID } from './graphql/queries';
 import { TranslateService } from '@ngx-translate/core';
-import { filter, startWith, takeUntil } from 'rxjs/operators';
+import { filter, startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { SnackbarService } from '@oort-front/ui';
 import { PreviewService } from '../../../services/preview.service';
 import { Subscription } from 'rxjs';
@@ -84,47 +84,46 @@ export class WorkflowComponent extends UnsubscribeComponent implements OnInit {
           this.onOpenStep(0);
         }
       });
-    this.route.params.pipe(takeUntil(this.destroy$)).subscribe((params) => {
-      this.loading = true;
-      this.id = params.id;
-      this.apollo
-        .watchQuery<WorkflowQueryResponse>({
-          query: GET_WORKFLOW_BY_ID,
-          variables: {
-            id: this.id,
-            asRole: this.role,
-          },
-        })
-        .valueChanges.pipe(takeUntil(this.destroy$))
-        .subscribe({
-          next: ({ data, loading }) => {
-            if (data.workflow) {
-              this.workflow = data.workflow;
-              this.steps = data.workflow.steps || [];
-              this.loading = loading;
-              if (this.steps.length > 0) {
-                this.onOpenStep(0);
-              }
-            } else {
-              this.snackBar.openSnackBar(
-                this.translate.instant(
-                  'common.notifications.accessNotProvided',
-                  {
-                    type: this.translate
-                      .instant('common.workflow.one')
-                      .toLowerCase(),
-                    error: '',
-                  }
-                ),
-                { error: true }
-              );
+    this.route.params
+      .pipe(
+        switchMap((params) => {
+          this.loading = true;
+          this.id = params.id;
+          return this.apollo.watchQuery<WorkflowQueryResponse>({
+            query: GET_WORKFLOW_BY_ID,
+            variables: {
+              id: this.id,
+              asRole: this.role,
+            },
+          }).valueChanges;
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe({
+        next: ({ data, loading }) => {
+          if (data.workflow) {
+            this.workflow = data.workflow;
+            this.steps = data.workflow.steps || [];
+            this.loading = loading;
+            if (this.steps.length > 0) {
+              this.onOpenStep(0);
             }
-          },
-          error: (err) => {
-            this.snackBar.openSnackBar(err.message, { error: true });
-          },
-        });
-    });
+          } else {
+            this.snackBar.openSnackBar(
+              this.translate.instant('common.notifications.accessNotProvided', {
+                type: this.translate
+                  .instant('common.workflow.one')
+                  .toLowerCase(),
+                error: '',
+              }),
+              { error: true }
+            );
+          }
+        },
+        error: (err) => {
+          this.snackBar.openSnackBar(err.message, { error: true });
+        },
+      });
   }
 
   /**

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

@@ -68,25 +68,28 @@ export class AddPageComponent extends UnsubscribeComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.pageForm.get('type')?.valueChanges.subscribe((type) => {
-      const contentControl = this.pageForm.controls.content;
-      if (type === ContentType.form) {
-        this.formsQuery = this.apollo.watchQuery<FormsQueryResponse>({
-          query: GET_FORMS,
-          variables: {
-            first: ITEMS_PER_PAGE,
-            sortField: 'name',
-          },
-        });
-        contentControl.setValidators([Validators.required]);
-        contentControl.updateValueAndValidity();
-      } else {
-        contentControl.setValidators(null);
-        contentControl.setValue(null);
-        contentControl.updateValueAndValidity();
-      }
-      this.onNext();
-    });
+    this.pageForm
+      .get('type')
+      ?.valueChanges.pipe(takeUntil(this.destroy$))
+      .subscribe((type) => {
+        const contentControl = this.pageForm.controls.content;
+        if (type === ContentType.form) {
+          this.formsQuery = this.apollo.watchQuery<FormsQueryResponse>({
+            query: GET_FORMS,
+            variables: {
+              first: ITEMS_PER_PAGE,
+              sortField: 'name',
+            },
+          });
+          contentControl.setValidators([Validators.required]);
+          contentControl.updateValueAndValidity();
+        } else {
+          contentControl.setValidators(null);
+          contentControl.setValue(null);
+          contentControl.updateValueAndValidity();
+        }
+        this.onNext();
+      });
 
     // Set the available widgets that can directly be added as single widget dashboard
     this.availableWidgets = this.availableWidgets.filter((widget: any) => {

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

@@ -85,53 +85,61 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.route.params.pipe(takeUntil(this.destroy$)).subscribe((params) => {
-      this.formActive = false;
-      this.loading = true;
-      this.id = params.id;
-      this.isStep = this.router.url.includes('/workflow/');
-      // If a query is already loading, cancel it
-      if (this.querySubscription) {
-        this.querySubscription.unsubscribe();
-      }
-      if (this.isStep) {
-        this.querySubscription = this.apollo
-          .query<StepQueryResponse>({
-            query: GET_STEP_BY_ID,
-            variables: {
-              id: this.id,
-            },
-          })
-          .pipe(
-            switchMap(({ data }) => {
-              this.step = data.step;
-              return this.getFormQuery(this.step.content ?? '');
-            })
-          )
-          .subscribe(({ data, loading }) => {
-            this.handleFormQueryResponse(data, 'step');
-            this.loading = loading;
-          });
-      } else {
-        this.querySubscription = this.apollo
-          .query<PageQueryResponse>({
-            query: GET_PAGE_BY_ID,
-            variables: {
-              id: this.id,
-            },
-          })
-          .pipe(
-            switchMap(({ data }) => {
-              this.page = data.page;
-              return this.getFormQuery(this.page.content ?? '');
-            })
-          )
-          .subscribe(({ data, loading }) => {
-            this.handleFormQueryResponse(data, 'page');
-            this.loading = loading;
-          });
-      }
-    });
+    this.querySubscription = this.route.params
+      .pipe(
+        switchMap((params) => {
+          this.formActive = false;
+          this.loading = true;
+          this.id = params.id;
+          this.isStep = this.router.url.includes('/workflow/');
+          let currentQuery!: any;
+          if (this.isStep) {
+            currentQuery = this.apollo.query<StepQueryResponse>({
+              query: GET_STEP_BY_ID,
+              variables: {
+                id: this.id,
+              },
+            });
+          } else {
+            currentQuery = this.apollo.query<PageQueryResponse>({
+              query: GET_PAGE_BY_ID,
+              variables: {
+                id: this.id,
+              },
+            });
+          }
+          return currentQuery;
+        }),
+        switchMap((res: any) => {
+          let currentFormSubscription!: any;
+          if (this.isStep) {
+            this.step = res.data.step;
+            currentFormSubscription = this.getFormQuery(
+              this.step?.content ?? ''
+            );
+          } else {
+            this.page = res.data.page;
+            currentFormSubscription = this.getFormQuery(
+              this.page?.content ?? ''
+            );
+          }
+          return currentFormSubscription;
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((res: any) => {
+        // If a query is already loading, cancel it
+        if (this.querySubscription) {
+          this.querySubscription.unsubscribe();
+        }
+        if (this.isStep) {
+          this.handleFormQueryResponse(res.data, 'step');
+          this.loading = res.loading;
+        } else {
+          this.handleFormQueryResponse(res.data, 'page');
+          this.loading = res.loading;
+        }
+      });
   }
 
   /**