Feature/1846/debounce unsubscribe form input (#579)

* Fix

* Fix

* Async pipe observable

src/app/container/add-tag/add-tag.component.ts

@@ -182,7 +182,7 @@ export class AddTagComponent extends Base implements OnInit, AfterViewChecked {
     if (this.currentForm === this.addTagForm) { return; }
     this.addTagForm = this.currentForm;
     if (this.addTagForm) {
-      this.addTagForm.valueChanges.pipe(debounceTime(formInputDebounceTime))
+      this.addTagForm.valueChanges.pipe(debounceTime(formInputDebounceTime), takeUntil(this.ngUnsubscribe))
         .subscribe(data => this.onValueChanged(data));
     }
   }

src/app/container/register-tool/register-tool.component.ts

@@ -17,13 +17,13 @@ import { AfterViewChecked, Component, OnDestroy, OnInit, ViewChild } from '@angu
 import { NgForm } from '@angular/forms';
 import { Observable, Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
-
 import { AlertQuery } from '../../shared/alert/state/alert.query';
 import { AlertService } from '../../shared/alert/state/alert.service';
 import { formInputDebounceTime } from '../../shared/constants';
 import { formErrors, validationDescriptorPatterns, validationMessages } from '../../shared/validationMessages.model';
 import { RegisterToolService } from './register-tool.service';
 
+
 @Component({
   selector: 'app-register-tool',
   templateUrl: './register-tool.component.html',
@@ -136,7 +136,7 @@ export class RegisterToolComponent implements OnInit, AfterViewChecked, OnDestro
     if (this.currentForm === this.registerToolForm) { return; }
     this.registerToolForm = this.currentForm;
     if (this.registerToolForm) {
-      this.registerToolForm.valueChanges.pipe(debounceTime(formInputDebounceTime))
+      this.registerToolForm.valueChanges.pipe(debounceTime(formInputDebounceTime), takeUntil(this.ngUnsubscribe))
         .subscribe(data => this.onValueChanged(data));
     }
   }

src/app/organizations/upsert-organization-member/upsert-organization-member.component.ts

@@ -2,10 +2,8 @@ import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA } from '@angular/material';
 import { AkitaNgFormsManager } from '@datorama/akita-ng-forms-manager';
-
 import { TagEditorMode } from '../../shared/enum/tagEditorMode.enum';
 import { OrganizationUser } from '../../shared/swagger';
-import { UpsertOrganizationMemberQuery } from '../state/upsert-organization-member.query';
 import { FormsState, UpsertOrganizationMemberService } from '../state/upsert-organization-member.service';
 
 @Component({
@@ -17,9 +15,8 @@ export class UpsertOrganizationMemberComponent implements OnInit, OnDestroy {
 
   roleKeys: any;
 
-  constructor(private upsertOrganizationMemberQuery: UpsertOrganizationMemberQuery,
-              private upsertOrganizationMemberService: UpsertOrganizationMemberService,
-              private formsManager: AkitaNgFormsManager<FormsState>, @Inject(MAT_DIALOG_DATA) public data: any
+  constructor(private upsertOrganizationMemberService: UpsertOrganizationMemberService,
+    private formsManager: AkitaNgFormsManager<FormsState>, @Inject(MAT_DIALOG_DATA) public data: any
   ) {
     this.roleKeys = Object.keys(this.RoleEnum);
   }

src/app/search/advancedsearch/advancedsearch.component.html

@@ -13,8 +13,7 @@
   ~    See the License for the specific language governing permissions and
   ~    limitations under the License.
   -->
-
-<div *ngIf="isModalShown" [config]="{ show: true}" class="modal fade" bsModal #advancedSearchModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" (onHidden)="onHidden()">
+<div *ngIf="(isModalShown$ | async)" [config]="{ show: true}" class="modal fade" bsModal #advancedSearchModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" (onHidden)="onHidden()">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">

src/app/search/advancedsearch/advancedsearch.component.ts

@@ -15,7 +15,9 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-
+import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Base } from '../../shared/base';
 import { AdvancedSearchObject } from './../../shared/models/AdvancedSearchObject';
 import { AdvancedSearchService } from './advanced-search.service';
 
@@ -24,24 +26,26 @@ import { AdvancedSearchService } from './advanced-search.service';
   templateUrl: './advancedsearch.component.html',
   styleUrls: ['./advancedsearch.component.css']
 })
-export class AdvancedSearchComponent implements OnInit {
+export class AdvancedSearchComponent extends Base implements OnInit {
   NOTFilter: string;
   ANDNoSplitFilter: string;
   ANDSplitFilter: string;
   ORFilter: string;
-  isModalShown: boolean;
+  isModalShown$: Observable<boolean>;
   searchMode = 'files';
-  constructor(private advancedSearchService: AdvancedSearchService) { }
+  constructor(private advancedSearchService: AdvancedSearchService) {
+    super();
+  }
 
   ngOnInit() {
-    this.advancedSearchService.advancedSearch$.subscribe((advancedSearch: AdvancedSearchObject) => {
+    this.advancedSearchService.advancedSearch$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((advancedSearch: AdvancedSearchObject) => {
       this.ANDNoSplitFilter = advancedSearch.ANDNoSplitFilter;
       this.ANDSplitFilter = advancedSearch.ANDSplitFilter;
       this.ORFilter = advancedSearch.ORFilter;
       this.NOTFilter = advancedSearch.NOTFilter;
       this.searchMode = advancedSearch.searchMode;
     });
-    this.advancedSearchService.showModal$.subscribe((showModal: boolean) => this.isModalShown = showModal);
+    this.isModalShown$ = this.advancedSearchService.showModal$;
   }
 
   public onHidden(): void {

src/app/shared/entry/register-checker-workflow/register-checker-workflow.component.ts

@@ -18,7 +18,6 @@ import { AfterViewChecked, Component, OnInit, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
-
 import { AlertQuery } from '../../alert/state/alert.query';
 import { Base } from '../../base';
 import { formInputDebounceTime } from '../../constants';
@@ -41,8 +40,8 @@ export class RegisterCheckerWorkflowComponent extends Base implements OnInit, Af
   constructor(private registerCheckerWorkflowService: RegisterCheckerWorkflowService, private alertQuery: AlertQuery,
     private descriptorLanguageService: DescriptorLanguageService,
     private checkerWorkflowQuery: CheckerWorkflowQuery, private descriptorTypeCompatService: DescriptorTypeCompatService) {
-      super();
-    }
+    super();
+  }
   public registerError: HttpErrorResponse;
   public workflowPath: string;
   public testParameterFilePath: string;
@@ -153,7 +152,7 @@ export class RegisterCheckerWorkflowComponent extends Base implements OnInit, Af
     if (this.currentForm === this.registerCheckerWorkflowForm) { return; }
     this.registerCheckerWorkflowForm = this.currentForm;
     if (this.registerCheckerWorkflowForm) {
-      this.registerCheckerWorkflowForm.valueChanges.pipe(debounceTime(formInputDebounceTime))
+      this.registerCheckerWorkflowForm.valueChanges.pipe(debounceTime(formInputDebounceTime), takeUntil(this.ngUnsubscribe))
         .subscribe(data => this.onValueChanged(data));
     }
   }

src/app/workflow/register-workflow-modal/register-workflow-modal.component.html

@@ -70,7 +70,7 @@ <h4 mat-dialog-title>Register Workflow</h4>
         <mat-form-field class="w-100">
           <mat-label>Workflow Path</mat-label>
           <!-- TODO: Unbold these radio buttons (font-weight: normal) -->
-          <input matInput placeholder="potato" id="sourceCodeRepositoryWorkflowPathInput" name="workflow_path" [(ngModel)]="workflow.workflow_path" minlength="3"
+          <input matInput id="sourceCodeRepositoryWorkflowPathInput" name="workflow_path" [(ngModel)]="workflow.workflow_path" minlength="3"
             maxlength="128" [pattern]="descriptorValidationPattern" required [matTooltip]="Tooltip.workflowPath" placeholder="{{ examplePatterns[workflow.descriptorType] }}"
           />
           <!-- TODO: Actually return 3 seperate sets of form error messages depending on the descriptor type selected -->

src/app/workflow/version-modal/version-modal.component.ts

@@ -13,11 +13,11 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-import { AfterViewChecked, Component, Input, OnDestroy, OnInit, ViewChild, Inject } from '@angular/core';
+import { AfterViewChecked, Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
+import { MatDialog, MAT_DIALOG_DATA } from '@angular/material';
 import { Observable, Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
-
 import { AlertQuery } from '../../shared/alert/state/alert.query';
 import { formInputDebounceTime } from '../../shared/constants';
 import { DateService } from '../../shared/date.service';
@@ -30,7 +30,6 @@ import { WorkflowVersion } from '../../shared/swagger/model/workflowVersion';
 import { Tooltip } from '../../shared/tooltip';
 import { formErrors, validationDescriptorPatterns, validationMessages } from '../../shared/validationMessages.model';
 import { VersionModalService } from './version-modal.service';
-import { MatDialog, MAT_DIALOG_DATA } from '@angular/material';
 
 export interface Dialogdata {
   canRead: boolean;
@@ -126,7 +125,7 @@ export class VersionModalComponent implements OnInit, AfterViewChecked, OnDestro
     if (this.currentForm === this.versionEditorForm) { return; }
     this.versionEditorForm = this.currentForm;
     if (this.versionEditorForm) {
-      this.versionEditorForm.valueChanges.pipe(debounceTime(formInputDebounceTime))
+      this.versionEditorForm.valueChanges.pipe(debounceTime(formInputDebounceTime), takeUntil(this.ngUnsubscribe))
         .subscribe(data => this.onValueChanged(data));
     }
   }