Fix Dashboard Browser Console Errors

core/gui/src/app/dashboard/component/dashboard.component.ts

@@ -36,7 +36,11 @@ export class DashboardComponent implements OnInit {
     private route: ActivatedRoute,
     private googleAuthService: GoogleAuthService,
     private notificationService: NotificationService
-  ) {
+  ) {}
+
+  ngOnInit(): void {
+    this.isCollpased = false;
+
     this.userService
       .userChanged()
       .pipe(untilDestroyed(this))
@@ -45,10 +49,6 @@ export class DashboardComponent implements OnInit {
         this.isAdmin = this.userService.isAdmin();
         this.cdr.detectChanges();
       });
-  }
-
-  ngOnInit(): void {
-    this.isCollpased = false;
 
     if (!this.isLogin) {
       this.googleAuthService.googleAuthInit(document.getElementById("googleButton"));

core/gui/src/app/dashboard/component/user/filters/filters.component.html

@@ -15,8 +15,7 @@
       <i
         nz-icon
         nzType="form"
-        nzTheme="outline"
-        nz-tooltip="Modification Time"></i>
+        nzTheme="outline"></i>
     </button>
   </a>
 
@@ -42,8 +41,7 @@
       <i
         nz-icon
         nzType="calendar"
-        nzTheme="outline"
-        nz-tooltip="Creation Time"></i>
+        nzTheme="outline"></i>
     </button>
   </a>
   <nz-dropdown-menu #ctimeSearchOptions="nzDropdownMenu">
@@ -55,7 +53,7 @@
   </nz-dropdown-menu>
 
   <a
-    *ngIf="this.isLogin"
+    [hidden]="!isLogin"
     [nzDropdownMenu]="ownerSearchOptions"
     nz-dropdown
     nzTrigger="click"
@@ -69,8 +67,7 @@
       <i
         nz-icon
         nzTheme="outline"
-        nzType="user"
-        nz-tooltip="Owner"></i>
+        nzType="user"></i>
     </button>
   </a>
   <nz-dropdown-menu #ownerSearchOptions="nzDropdownMenu">
@@ -104,8 +101,7 @@
       <i
         nz-icon
         nzTheme="outline"
-        nzType="ordered-list"
-        nz-tooltip="Workflow ID"></i>
+        nzType="ordered-list"></i>
     </button>
   </a>
   <nz-dropdown-menu #IDSearchOptions="nzDropdownMenu">
@@ -138,8 +134,7 @@
       <i
         nz-icon
         nzType="appstore"
-        nzTheme="outline"
-        nz-tooltip="Operators"></i>
+        nzTheme="outline"></i>
     </button>
   </a>
   <nz-dropdown-menu #operatorSearchOptions="nzDropdownMenu">
@@ -165,7 +160,7 @@
   </nz-dropdown-menu>
 
   <a
-    *ngIf="pid === null"
+    *ngIf="pid === undefined"
     [nzDropdownMenu]="projectSearchOptions"
     nz-dropdown
     nzTrigger="click"
@@ -179,8 +174,7 @@
       <i
         nz-icon
         nzType="file"
-        nzTheme="outline"
-        nz-tooltip="Projects"></i>
+        nzTheme="outline"></i>
     </button>
   </a>
   <nz-dropdown-menu #projectSearchOptions="nzDropdownMenu">

core/gui/src/app/dashboard/component/user/filters/filters.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { OperatorMetadataService } from "src/app/workspace/service/operator-metadata/operator-metadata.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { Observable, of } from "rxjs";
@@ -71,39 +71,43 @@ export class FiltersComponent implements OnInit {
     private operatorMetadataService: OperatorMetadataService,
     private notificationService: NotificationService,
     private userProjectService: UserProjectService,
-    private workflowPersistService: WorkflowPersistService
-  ) {
+    private workflowPersistService: WorkflowPersistService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    this.setupUserProject();
+    this.searchParameterBackendSetup();
+  }
+
+  private setupUserProject(): void {
     this.userService
       .userChanged()
       .pipe(
-        // eslint-disable-next-line rxjs/no-unsafe-takeuntil
-        untilDestroyed(this),
         switchMap(() => {
           this.isLogin = this.userService.isLogin();
+          this.cdr.detectChanges();
           if (this.isLogin) {
             return this.userProjectService.getProjectList() as Observable<DashboardProject[]>;
           } else {
             return of([] as DashboardProject[]);
           }
-        })
+        }),
+        untilDestroyed(this)
       )
       .subscribe((userProjectsList: DashboardProject[]) => {
-        if (userProjectsList != null && userProjectsList.length > 0) {
-          // map project ID to project object
+        if (userProjectsList && userProjectsList.length > 0) {
           this.userProjectsMap = new Map(userProjectsList.map(userProject => [userProject.pid, userProject]));
-          // store the projects containing these workflows
-          this.userProjectsDropdown = userProjectsList.map(proj => {
-            return { pid: proj.pid, name: proj.name, checked: false };
-          });
+          this.userProjectsDropdown = userProjectsList.map(proj => ({
+            pid: proj.pid,
+            name: proj.name,
+            checked: false,
+          }));
           this.userProjectsLoaded = true;
         }
       });
   }
 
-  ngOnInit(): void {
-    this.searchParameterBackendSetup();
-  }
-
   /**
    * Backend calls for Workflow IDs, Owners, and Operators in saved workflow component
    */

core/gui/src/app/dashboard/component/user/list-item/list-item.component.ts

@@ -8,6 +8,7 @@ import {
   SimpleChanges,
   ViewChild,
   ElementRef,
+  ChangeDetectorRef,
 } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { NzModalService } from "ng-zorro-antd/modal";
@@ -68,7 +69,8 @@ export class ListItemComponent implements OnInit, OnChanges {
     private modalService: NzModalService,
     private workflowPersistService: WorkflowPersistService,
     private modal: NzModalService,
-    private downloadService: DownloadService
+    private downloadService: DownloadService,
+    private cdr: ChangeDetectorRef
   ) {}
 
   initializeEntry() {
@@ -82,6 +84,7 @@ export class ListItemComponent implements OnInit, OnChanges {
           } else {
             this.entryLink = [this.ROUTER_WORKFLOW_DETAIL_BASE_URL, String(this.entry.id)];
           }
+          setTimeout(() => this.cdr.detectChanges(), 0);
         });
       }
       // this.entryLink = this.ROUTER_WORKFLOW_BASE_URL + "/" + this.entry.id;

core/gui/src/app/dashboard/component/user/search/search.component.ts

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, ViewChild } from "@angular/core";
+import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from "@angular/core";
 import { DashboardEntry, UserInfo } from "../../../type/dashboard-entry";
 import { SearchService } from "../../../service/user/search.service";
 import { FiltersComponent } from "../filters/filters.component";
@@ -23,6 +23,7 @@ export class SearchComponent implements AfterViewInit {
   private isLogin = this.userService.isLogin();
   private includePublic = true;
   currentUid = this.userService.getCurrentUser()?.uid;
+  searchKeywords: string[] = [];
 
   selectedType: "project" | "workflow" | "dataset" | null = null;
   lastSelectedType: "project" | "workflow" | "dataset" | null = null;
@@ -47,7 +48,8 @@ export class SearchComponent implements AfterViewInit {
     private location: Location,
     private searchService: SearchService,
     private userService: UserService,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    private cdr: ChangeDetectorRef
   ) {
     this.userService
       .userChanged()
@@ -65,6 +67,9 @@ export class SearchComponent implements AfterViewInit {
         this.searchParam = keyword;
         this.updateMasterFilterList();
       }
+
+      this.searchKeywords = this.filters.getSearchKeywords();
+      this.cdr.detectChanges();
     });
   }
 

core/gui/src/app/hub/component/workflow/detail/hub-workflow-detail.component.ts

@@ -141,7 +141,9 @@ export class HubWorkflowDetailComponent implements AfterViewInit, OnDestroy, OnI
   ngOnDestroy() {
     if (this.workflowPersistService.isWorkflowPersistEnabled()) {
       const workflow = this.workflowActionService.getWorkflow();
-      this.workflowPersistService.persistWorkflow(workflow).pipe(untilDestroyed(this)).subscribe();
+      if (this.isLogin) {
+        this.workflowPersistService.persistWorkflow(workflow).pipe(untilDestroyed(this)).subscribe();
+      }
     }
 
     this.codeEditorViewRef.clear();