Kamu UI 590 flows tab fix loading state (#591)

* Added progress bar during initialization

* added unit test

* fixed angular zone outside warning

---------

Co-authored-by: Dmitriy Borzenko <[email protected]>

Author: dmitriy-borzenko

src/app/dataset-view/additional-components/flows-component/flows.component.html

@@ -1,5 +1,5 @@
 <div class="search-result-container__content mb-20 container-main">
-    <ng-container *ngIf="flowConnectionData$ | async as flowConnectionData">
+    <ng-container *ngIf="flowConnectionData$ | async as flowConnectionData; else loading">
         <ng-container *ngIf="flowConnectionData.flowsData.connectionDataForWidget.nodes.length; else noRuns">
             <div class="d-flex justify-content-between">
                 <div class="mt-4">
@@ -122,4 +122,10 @@ <h2 class="title">
             </ng-container>
         </p>
     </ng-template>
+    <ng-template #loading>
+        <div class="position-relative">
+            <mat-progress-bar data-test-id="init-progress-bar" class="position-absolute" mode="indeterminate" />
+        </div>
+        <div class="text-center mt-4">Loading...</div>
+    </ng-template>
 </div>

src/app/dataset-view/additional-components/flows-component/flows.component.spec.ts

@@ -16,7 +16,7 @@ import { mockDatasetBasicsRootFragment, mockDatasetMainDataId } from "src/app/se
 import { ToastrModule } from "ngx-toastr";
 import { findElementByDataTestId, registerMatSvgIcons } from "src/app/common/helpers/base-test.helpers.spec";
 import { DatasetFlowsService } from "./services/dataset-flows.service";
-import { of } from "rxjs";
+import { delay, of } from "rxjs";
 import { MatMenuModule } from "@angular/material/menu";
 import { PaginationComponent } from "src/app/common/components/pagination-component/pagination.component";
 import { MatTableModule } from "@angular/material/table";
@@ -36,6 +36,8 @@ import { mockFlowsTableData } from "src/app/api/mock/dataset-flow.mock";
 import { TileBaseWidgetComponent } from "src/app/dataset-flow/tile-base-widget/tile-base-widget.component";
 import { SettingsTabsEnum } from "../dataset-settings-component/dataset-settings.model";
 import { mockDatasetBasicsDerivedFragment } from "src/app/search/mock.data";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { AngularMultiSelectModule } from "angular2-multiselect-dropdown";
 
 describe("FlowsComponent", () => {
     let component: FlowsComponent;
@@ -94,6 +96,8 @@ describe("FlowsComponent", () => {
                 NgbTypeaheadModule,
                 NgbPaginationModule,
                 RouterModule,
+                MatProgressBarModule,
+                AngularMultiSelectModule,
             ],
         }).compileComponents();
 
@@ -208,4 +212,22 @@ describe("FlowsComponent", () => {
         component.datasetBasics = mockDatasetBasicsDerivedFragment;
         expect(component.redirectSection).toEqual(SettingsTabsEnum.TRANSFORM_SETTINGS);
     });
+
+    it("should check init loading block", fakeAsync(() => {
+        fixture.detectChanges();
+        mockFlowsTableData.connectionDataForWidget.nodes = [];
+        spyOn(datasetFlowsService, "allFlowsPaused").and.returnValue(of(false));
+        spyOn(datasetFlowsService, "datasetFlowsList").and.returnValue(of(mockFlowsTableData).pipe(delay(10)));
+        spyOn(datasetFlowsService, "flowsInitiators").and.returnValue(of([]));
+        tick(5);
+        fixture.detectChanges();
+        const progressBarBefore = findElementByDataTestId(fixture, "init-progress-bar");
+        expect(progressBarBefore).toBeDefined();
+
+        tick(10);
+        fixture.detectChanges();
+        const progressBarAfter = findElementByDataTestId(fixture, "init-progress-bar");
+        expect(progressBarAfter).toBeUndefined();
+        discardPeriodicTasks();
+    }));
 });

src/app/dataset-view/dataset-view.component.ts

@@ -6,7 +6,15 @@
  */
 
 import { SessionStorageService } from "src/app/services/session-storage.service";
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnDestroy, OnInit } from "@angular/core";
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    inject,
+    NgZone,
+    OnDestroy,
+    OnInit,
+} from "@angular/core";
 import { DatasetViewTypeEnum } from "./dataset-view.interface";
 import { NavigationEnd, Router } from "@angular/router";
 import { Node } from "@swimlane/ngx-graph/lib/models/node.model";
@@ -50,6 +58,7 @@ export class DatasetViewComponent extends BaseDatasetDataComponent implements On
     private sessionStorageService = inject(SessionStorageService);
     private clipboard = inject(Clipboard);
     private toastr = inject(ToastrService);
+    private ngZone = inject(NgZone);
 
     public ngOnInit(): void {
         const urlDatasetInfo = this.getDatasetInfoFromUrl();
@@ -343,7 +352,9 @@ export class DatasetViewComponent extends BaseDatasetDataComponent implements On
             .pipe(
                 finalize(() => {
                     this.sqlLoading = false;
-                    this.navigationService.navigateWithSqlQuery(params.query);
+                    this.ngZone.run(() => {
+                        this.navigationService.navigateWithSqlQuery(params.query);
+                    });
                 }),
                 takeUntilDestroyed(this.destroyRef),
             )

src/app/query/global-query/global-query.component.ts

@@ -5,7 +5,7 @@
  * included in the LICENSE file.
  */
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, NgZone, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { finalize, map, Observable } from "rxjs";
 import { MaybeNull } from "src/app/interface/app.types";
@@ -35,6 +35,7 @@ export class GlobalQueryComponent extends BaseComponent implements OnInit {
 
     private sqlQueryService = inject(SqlQueryService);
     private cdr = inject(ChangeDetectorRef);
+    private ngZone = inject(NgZone);
     private navigationService = inject(NavigationService);
 
     public ngOnInit(): void {
@@ -58,7 +59,9 @@ export class GlobalQueryComponent extends BaseComponent implements OnInit {
                 takeUntilDestroyed(this.destroyRef),
                 finalize(() => {
                     this.sqlLoading = false;
-                    this.navigationService.navigateWithSqlQuery(params.query);
+                    this.ngZone.run(() => {
+                        this.navigationService.navigateWithSqlQuery(params.query);
+                    });
                 }),
             )
             .subscribe();