Kamu UI 504 simplify boileplate code to read route and query parameters from activated route (#568)

* refactored @input() query search params for account.ts

* refactored search.component.ts

* refactored account-settings.component

* changed solution for refactored components

* refactored dataset-view.component

* refactored github.callback component

* refactored query-explainer component

* refactored global-query compoonent

* refactored dataset-flow-details component

* returned router.events

* implemented blockMeatadata resolver

* added hash from route

* fixed search by dataset name

* returned old code

* fixed search component

* returned for search component previous version

* changed routing for /v/settings route

* changed CHANGELOG.md

* added searchResolver

* fixed search tests

* added tests for search and block-metadata resolvers

* added addPollingSourceResolver

* added setTransformResolver

* added addPushSourceResolver

* refactored routing

* refactored block service

* fixed unit tests

* changed routing

* added input decorators for events components

* minor changes for routing

* remove MaybeIndefined type from resolvers

* changed some styles

* fixed unit tests

---------

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

Author: dmitriy-borzenko

CHANGELOG.md

@@ -6,11 +6,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 ### Added
+- Added resolver `BlockMetadataResolver` for metadata block page
 - Added `DEVELOPER.md` file
 - Added license header for all *.ts files
 - Account page: added account name
 ### Changed
 - Modified `README.md` file
+- Changed the method of getting route and query parameters via input decorator for some components
 ### Fixed
 - Remove "Dashboard" link from application header
 - Disabled "keywords" feature for "demo" mode

src/app/account/account.component.html

@@ -1,5 +1,5 @@
 <div class="mx-4 mt-4 p-responsive clearfix" *ngIf="user$ | async as user">
-    <div class="custom-container" *ngIf="activeTab$ | async as activeTab">
+    <div class="custom-container">
         <div class="container-sidebar">
             <div class="d-flex mb-3 justify-content-center align-items-center">
                 <a *ngIf="isLoggedUser; else notLoggedUserLink">

src/app/account/account.component.spec.ts

@@ -82,7 +82,6 @@ describe("AccountComponent", () => {
                     provide: ActivatedRoute,
                     useValue: {
                         queryParams: mockQueryParams.asObservable(),
-                        params: mockParams.asObservable(),
                     },
                 },
             ],
@@ -100,7 +99,7 @@ describe("AccountComponent", () => {
 
         fixture = TestBed.createComponent(AccountComponent);
         component = fixture.componentInstance;
-        fixture.detectChanges();
+        component.accountName = TEST_LOGIN;
     });
 
     it("should create", () => {
@@ -128,11 +127,7 @@ describe("AccountComponent", () => {
     });
 
     it("should check API calls when account is found", () => {
-        fetchAccountByNameSpy.calls.reset();
-        getDatasetsByAccountNameSpy.calls.reset();
-
-        mockParams.next({ [ProjectLinks.URL_PARAM_ACCOUNT_NAME]: mockAccountDetails.accountName });
-
+        fixture.detectChanges();
         expect(fetchAccountByNameSpy).toHaveBeenCalledOnceWith(mockAccountDetails.accountName);
         expect(getDatasetsByAccountNameSpy).toHaveBeenCalledOnceWith(
             mockAccountDetails.accountName,
@@ -143,54 +138,47 @@ describe("AccountComponent", () => {
     it("should check API calls when account is not found", fakeAsync(() => {
         fetchAccountByNameSpy = fetchAccountByNameSpy.and.returnValue(of(null).pipe(delay(0)));
         getDatasetsByAccountNameSpy = getDatasetsByAccountNameSpy.and.stub();
-        fetchAccountByNameSpy.calls.reset();
-        getDatasetsByAccountNameSpy.calls.reset();
 
-        mockParams.next({ [ProjectLinks.URL_PARAM_ACCOUNT_NAME]: TEST_LOGIN });
+        fixture.detectChanges();
 
         expect(fetchAccountByNameSpy).toHaveBeenCalledOnceWith(TEST_LOGIN);
         expect(getDatasetsByAccountNameSpy).not.toHaveBeenCalled();
-
-        expect(() => tick()).toThrow(new AccountNotFoundError());
-        expect(() => flush()).toThrow(new AccountNotFoundError());
+        expect(() => {
+            tick();
+        }).toThrow(new AccountNotFoundError());
+        expect(() => {
+            flush();
+        }).toThrow(new AccountNotFoundError());
 
         flush();
     }));
 
     it("should check activeTab when URL not exist query param tab", () => {
+        fixture.detectChanges();
         mockQueryParams.next({ page: 1 });
+        component.tab = undefined;
 
-        let nCalls = 0;
-        component.activeTab$.subscribe((activeTab: AccountTabs) => {
-            // Ignore first call (default event)
-            if (nCalls == 1) {
-                expect(activeTab).toEqual(AccountTabs.DATASETS);
-            } else if (nCalls > 2) {
-                fail("Unexpected number of calls");
-            }
-            nCalls++;
-        });
-        expect(nCalls).toBeLessThan(3);
+        expect(component.activeTab).toEqual(AccountTabs.DATASETS);
     });
     // TODO: test wrong tab
 
     it("should check page when not specified in the query", () => {
-        getDatasetsByAccountNameSpy.calls.reset();
-
-        mockQueryParams.next({ tab: AccountTabs.DATASETS });
+        component.activeTab = AccountTabs.DATASETS;
+        fixture.detectChanges();
 
         expect(getDatasetsByAccountNameSpy).toHaveBeenCalledOnceWith(mockAccountDetails.accountName, 0);
     });
 
     it("should check page when specified in the query", () => {
-        getDatasetsByAccountNameSpy.calls.reset();
-
-        mockQueryParams.next({ tab: AccountTabs.DATASETS, page: 3 });
+        component.page = 3;
+        component.activeTab = AccountTabs.DATASETS;
+        fixture.detectChanges();
 
         expect(getDatasetsByAccountNameSpy).toHaveBeenCalledOnceWith(mockAccountDetails.accountName, 2 /* 3 - 1 */);
     });
 
     it("should check routers link ", () => {
+        fixture.detectChanges();
         const datasetsTabLink = findElementByDataTestId(fixture, "link-account-datasets-tab") as HTMLLinkElement;
         expect(datasetsTabLink.href).toContain(`?tab=${AccountTabs.DATASETS}`);
 

src/app/account/account.component.ts

@@ -6,18 +6,16 @@
  */
 
 import ProjectLinks from "src/app/project-links";
-import { BaseComponent } from "src/app/common/components/base.component";
-import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, Input, numberAttribute, OnInit } from "@angular/core";
 import { AccountFragment } from "src/app/api/kamu.graphql.interface";
 import { AccountTabs } from "./account.constants";
-import { ActivatedRoute, Params } from "@angular/router";
 import AppValues from "src/app/common/values/app.values";
 import { promiseWithCatch } from "src/app/common/helpers/app.helpers";
 import { AccountService } from "src/app/account/account.service";
 import { DatasetsAccountResponse } from "src/app/interface/dataset.interface";
 import { distinctUntilChanged, map, shareReplay, switchMap } from "rxjs/operators";
-import { Observable, combineLatest } from "rxjs";
-import { MaybeNull } from "src/app/interface/app.types";
+import { Observable, combineLatest, of } from "rxjs";
+import { MaybeNull, MaybeUndefined } from "src/app/interface/app.types";
 import { AccountNotFoundError } from "src/app/common/values/errors";
 import { AccountPageQueryParams } from "./account.component.model";
 import { ModalService } from "../common/components/modal/modal.service";
@@ -29,39 +27,36 @@ import { LoggedUserService } from "../auth/logged-user.service";
     styleUrls: ["./account.component.scss"],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AccountComponent extends BaseComponent implements OnInit {
+export class AccountComponent implements OnInit {
+    @Input(ProjectLinks.URL_PARAM_ACCOUNT_NAME) public accountName: string;
+    @Input(ProjectLinks.URL_QUERY_PARAM_TAB) public set tab(value: MaybeUndefined<AccountTabs>) {
+        this.activeTab = value ?? AccountTabs.DATASETS;
+    }
+    @Input({ transform: numberAttribute, alias: ProjectLinks.URL_QUERY_PARAM_PAGE }) public set currentPage(
+        value: number,
+    ) {
+        this.page = value ?? 1;
+    }
+
+    public activeTab: AccountTabs;
+    public page: number;
+
     public readonly AccountTabs = AccountTabs;
     public isDropdownMenu = false;
     public user$: Observable<AccountFragment>;
     public datasetsAccount$: Observable<DatasetsAccountResponse>;
-    public activeTab$: Observable<AccountTabs>;
 
-    private route = inject(ActivatedRoute);
     private modalService = inject(ModalService);
     private accountService = inject(AccountService);
     private loggedUserService = inject(LoggedUserService);
 
     public ngOnInit(): void {
-        const accountName$ = this.route.params.pipe(
-            map((params: Params) => params[ProjectLinks.URL_PARAM_ACCOUNT_NAME] as string),
-        );
+        const queryParams$ = of({
+            tab: this.activeTab,
+            page: this.page,
+        }).pipe(shareReplay());
 
-        const queryParams$ = this.route.queryParams.pipe(
-            map((queryParams: Params) => {
-                return {
-                    tab: queryParams.tab ? (queryParams.tab as AccountTabs) : undefined,
-                    page: queryParams.page ? (queryParams.page as number) : undefined,
-                } as AccountPageQueryParams;
-            }),
-            shareReplay(),
-        );
-
-        this.activeTab$ = queryParams$.pipe(
-            map((accountPageParams: AccountPageQueryParams) => accountPageParams.tab ?? AccountTabs.DATASETS),
-            distinctUntilChanged(),
-        );
-
-        this.user$ = this.pipelineAccountByName(accountName$);
+        this.user$ = this.pipelineAccountByName(this.accountName);
         this.datasetsAccount$ = this.pipelineAccountDatasets(this.user$, queryParams$);
     }
 
@@ -91,11 +86,8 @@ export class AccountComponent extends BaseComponent implements OnInit {
         );
     }
 
-    private pipelineAccountByName(accountName$: Observable<string>): Observable<AccountFragment> {
-        return accountName$.pipe(
-            switchMap((accountName: string) => {
-                return this.accountService.fetchAccountByName(accountName);
-            }),
+    private pipelineAccountByName(accountName: string): Observable<AccountFragment> {
+        return this.accountService.fetchAccountByName(accountName).pipe(
             shareReplay(),
             map((account: MaybeNull<AccountFragment>) => {
                 if (account) return account;

src/app/account/settings/account-settings.component.html

@@ -286,7 +286,7 @@
         </div>
         <div class="content">
             <ng-container *ngIf="activeTab === AccountSettingsTabs.ACCESS_TOKENS">
-                <app-access-tokens-tab [account]="user" />
+                <app-access-tokens-tab [currentPage]="currentPage" [account]="user" />
             </ng-container>
             <ng-container *ngIf="activeTab === AccountSettingsTabs.EMAILS">
                 <app-emails-tab [account]="user" (accountEmailChange)="changeAccountEmail()" />

src/app/account/settings/account-settings.component.spec.ts

@@ -8,7 +8,6 @@
 import { mockAccountDetails, mockAccountDetailsWithEmail } from "../../api/mock/auth.mock";
 import { RouterTestingModule } from "@angular/router/testing";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { ActivatedRoute, Router } from "@angular/router";
 import { ApolloTestingModule } from "apollo-angular/testing";
 import { AccountSettingsComponent } from "./account-settings.component";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
@@ -20,20 +19,18 @@ import {
 } from "src/app/common/helpers/base-test.helpers.spec";
 import { AccountSettingsTabs } from "./account-settings.constants";
 import { of } from "rxjs";
-import ProjectLinks from "src/app/project-links";
 import { LoginService } from "../../auth/login/login.service";
 import { MatIconModule } from "@angular/material/icon";
 import { ToastrModule } from "ngx-toastr";
 import { AccountEmailService } from "src/app/account/settings/tabs/emails-tab/account-email.service";
+import { AccountSettingsModule } from "./account-settings.module";
 
 describe("AccountSettingsComponent", () => {
     let component: AccountSettingsComponent;
     let fixture: ComponentFixture<AccountSettingsComponent>;
     let loggedUserService: LoggedUserService;
     let loginService: LoginService;
-    let activatedRoute: ActivatedRoute;
     let accountEmailService: AccountEmailService;
-    let router: Router;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
@@ -44,13 +41,12 @@ describe("AccountSettingsComponent", () => {
                 RouterTestingModule,
                 HttpClientTestingModule,
                 MatIconModule,
+                AccountSettingsModule,
             ],
         }).compileComponents();
 
         registerMatSvgIcons();
 
-        activatedRoute = TestBed.inject(ActivatedRoute);
-        router = TestBed.inject(Router);
         accountEmailService = TestBed.inject(AccountEmailService);
 
         loginService = TestBed.inject(LoginService);
@@ -86,8 +82,9 @@ describe("AccountSettingsComponent", () => {
     });
 
     it("should open profile tab by default", () => {
+        component.category = null;
         fixture.detectChanges();
-        expect(component.activeTab).toEqual(AccountSettingsTabs.PROFILE);
+        expect(component.activeTab).toEqual(AccountSettingsTabs.ACCESS_TOKENS);
     });
 
     [
@@ -102,19 +99,15 @@ describe("AccountSettingsComponent", () => {
         AccountSettingsTabs.SECURITY,
     ].forEach((tab: AccountSettingsTabs) => {
         it(`should activate ${tab} tab`, () => {
-            activatedRoute.snapshot.params = {
-                [ProjectLinks.URL_PARAM_CATEGORY]: tab,
-            };
-            component.ngOnInit();
+            component.category = tab;
+            fixture.detectChanges();
             expect(component.activeTab).toEqual(tab);
         });
     });
 
-    it("should open profile tab for a wrong tab", async () => {
-        activatedRoute.snapshot.params = {
-            [ProjectLinks.URL_PARAM_CATEGORY]: "wrong",
-        };
-        await router.navigate(["/"]);
-        expect(component.activeTab).toEqual(AccountSettingsTabs.PROFILE);
+    it("should open access token tab for a wrong tab", () => {
+        component.category = "wrong-tab" as AccountSettingsTabs;
+        fixture.detectChanges();
+        expect(component.activeTab).toEqual(AccountSettingsTabs.ACCESS_TOKENS);
     });
 });

src/app/account/settings/account-settings.component.ts

@@ -8,14 +8,12 @@
 import ProjectLinks from "src/app/project-links";
 import { AccountWithEmailFragment } from "src/app/api/kamu.graphql.interface";
 import { AccountSettingsTabs } from "./account-settings.constants";
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit } from "@angular/core";
-import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
-import { filter, switchMap } from "rxjs/operators";
+import { ChangeDetectionStrategy, Component, inject, Input, OnInit } from "@angular/core";
+import { switchMap } from "rxjs/operators";
 import { BaseComponent } from "src/app/common/components/base.component";
 import AppValues from "src/app/common/values/app.values";
-import { MaybeNull, MaybeUndefined } from "src/app/interface/app.types";
+import { MaybeNull } from "src/app/interface/app.types";
 import { EMPTY, Observable } from "rxjs";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { AccountEmailService } from "src/app/account/settings/tabs/emails-tab/account-email.service";
 import { LoggedUserService } from "../../auth/logged-user.service";
 
@@ -26,29 +24,26 @@ import { LoggedUserService } from "../../auth/logged-user.service";
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountSettingsComponent extends BaseComponent implements OnInit {
+    @Input(ProjectLinks.URL_PARAM_CATEGORY) public set category(value: MaybeNull<AccountSettingsTabs>) {
+        this.activeTab =
+            value && Object.values(AccountSettingsTabs).includes(value) ? value : AccountSettingsTabs.ACCESS_TOKENS;
+    }
+    @Input(ProjectLinks.URL_QUERY_PARAM_PAGE) public set page(value: number) {
+        this.currentPage = value ?? 1;
+    }
+
+    public activeTab: AccountSettingsTabs;
+    public currentPage: number;
+
     public readonly DEFAULT_AVATAR_URL = AppValues.DEFAULT_AVATAR_URL;
     public readonly AccountSettingsTabs: typeof AccountSettingsTabs = AccountSettingsTabs;
 
-    public activeTab: AccountSettingsTabs = AccountSettingsTabs.PROFILE;
     public user$: Observable<MaybeNull<AccountWithEmailFragment>>;
 
-    private router = inject(Router);
-    private route = inject(ActivatedRoute);
     private accountEmailService = inject(AccountEmailService);
     private loggedUserService = inject(LoggedUserService);
-    private cdr = inject(ChangeDetectorRef);
 
     public ngOnInit(): void {
-        this.router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd),
-                takeUntilDestroyed(this.destroyRef),
-            )
-            .subscribe(() => {
-                this.extractActiveTabFromRoute();
-            });
-
-        this.extractActiveTabFromRoute();
         this.fetchAccountInfo();
     }
 
@@ -71,20 +66,4 @@ export class AccountSettingsComponent extends BaseComponent implements OnInit {
     public changeAccountEmail(): void {
         this.fetchAccountInfo();
     }
-
-    private extractActiveTabFromRoute(): void {
-        const categoryParam: MaybeUndefined<string> = this.route.snapshot.params[
-            ProjectLinks.URL_PARAM_CATEGORY
-        ] as MaybeUndefined<string>;
-
-        if (categoryParam) {
-            const category = categoryParam as AccountSettingsTabs;
-            if (Object.values(AccountSettingsTabs).includes(category)) {
-                this.activeTab = category;
-                return;
-            }
-        }
-
-        this.activeTab = AccountSettingsTabs.PROFILE;
-    }
 }

src/app/account/settings/tabs/access-tokens-tab/access-tokens-tab.component.spec.ts

@@ -91,6 +91,7 @@ describe("AccessTokensTabComponent", () => {
         accessTokenService = TestBed.inject(AccessTokenService);
         modalService = TestBed.inject(ModalService);
         component = fixture.componentInstance;
+        component.currentPage = 1;
         spyOn(accessTokenService, "listAccessTokens").and.returnValue(
             of(mockListAccessTokensQuery.auth.listAccessTokens as AccessTokenConnection),
         );