Kamu UI 385 code improvements using inject instead of constructor (#402)

* Replaced the constructor with inject functions

* changed CHANGELOG.md

---------

Co-authored-by: Dmitriy Borzenko <borzenko@dnt-lab.com>

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added typed forms for all application
 ### Changed
 - Added an `required` option for input parameters
+- Replaced the constructor with `inject` function for all components and services
 
 ## [0.25.1] -2024-08-22
 ## Added

src/app/account/account.component.ts

@@ -1,6 +1,6 @@
 import ProjectLinks from "src/app/project-links";
 import { BaseComponent } from "src/app/common/base.component";
-import { ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, inject, OnInit, ViewChild } from "@angular/core";
 import { AccountFragment } from "src/app/api/kamu.graphql.interface";
 import { AccountTabs } from "./account.constants";
 import { ActivatedRoute, Params } from "@angular/router";
@@ -24,24 +24,18 @@ import { LoggedUserService } from "../auth/logged-user.service";
 })
 export class AccountComponent extends BaseComponent implements OnInit {
     public readonly AccountTabs = AccountTabs;
-
     public isDropdownMenu = false;
-
     public user$: Observable<AccountFragment>;
     public datasetsAccount$: Observable<DatasetsAccountResponse>;
     public activeTab$: Observable<AccountTabs>;
 
     @ViewChild("containerMenu") containerMenu: ElementRef;
     @ViewChild("dropdownMenu") dropdownMenu: ElementRef;
 
-    constructor(
-        private route: ActivatedRoute,
-        private modalService: ModalService,
-        private accountService: AccountService,
-        private loggedUserService: LoggedUserService,
-    ) {
-        super();
-    }
+    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(

src/app/account/additional-components/account-flows-tab/account-flows-tab.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, Input, OnInit } from "@angular/core";
 import { combineLatest, map, of, switchMap, timer } from "rxjs";
 import { MaybeNull } from "src/app/common/app.types";
 import {
@@ -27,9 +27,7 @@ export class AccountFlowsTabComponent extends FlowsTableProcessingBaseComponent
     public searchByDataset: DatasetListFlowsDataFragment[] = [];
     public readonly DISPLAY_COLUMNS = ["description", "information", "creator", "dataset", "options"];
 
-    constructor(private accountService: AccountService) {
-        super();
-    }
+    private accountService = inject(AccountService);
 
     ngOnInit(): void {
         this.getPageFromUrl();

src/app/account/additional-components/datasets-tab/datasets-tab.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Input } from "@angular/core";
+import { ChangeDetectionStrategy, inject, Input } from "@angular/core";
 import { Component } from "@angular/core";
 import { DatasetSearchOverviewFragment, PageBasedInfo } from "src/app/api/kamu.graphql.interface";
 import { AccountTabs } from "../../account.constants";
@@ -16,7 +16,7 @@ export class DatasetsTabComponent {
     @Input({ required: true }) public pageInfo: PageBasedInfo;
     public isClickableRow = true;
 
-    constructor(private navigationService: NavigationService) {}
+    private navigationService = inject(NavigationService);
 
     public get currentPage(): number {
         return this.pageInfo.currentPage + 1;

src/app/api/access-token.api.ts

@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { Observable, first, map } from "rxjs";
 import {
     CreateAccessTokenGQL,
@@ -17,11 +17,9 @@ import { noCacheFetchPolicy } from "../common/data.helpers";
     providedIn: "root",
 })
 export class AccessTokenApi {
-    constructor(
-        private listAccessTokensGQL: ListAccessTokensGQL,
-        private createAccessTokenGQL: CreateAccessTokenGQL,
-        private revokeAccessTokenGQL: RevokeAccessTokenGQL,
-    ) {}
+    private listAccessTokensGQL = inject(ListAccessTokensGQL);
+    private createAccessTokenGQL = inject(CreateAccessTokenGQL);
+    private revokeAccessTokenGQL = inject(RevokeAccessTokenGQL);
 
     public listAccessTokens(params: {
         accountId: string;

src/app/api/account.api.ts

@@ -1,5 +1,5 @@
 import { Observable, first, map } from "rxjs";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import {
     AccountByNameGQL,
     AccountByNameQuery,
@@ -24,14 +24,12 @@ import { DatasetOperationError } from "../common/errors";
 
 @Injectable({ providedIn: "root" })
 export class AccountApi {
-    constructor(
-        private accountByNameGql: AccountByNameGQL,
-        private accountListFlowsGql: AccountListFlowsGQL,
-        private accountListDatasetsWithFlowsGql: AccountListDatasetsWithFlowsGQL,
-        private accountDatasetFlowsPausedGql: AccountDatasetFlowsPausedGQL,
-        private accountPauseFlowsGql: AccountPauseFlowsGQL,
-        private accountResumeFlowsGql: AccountResumeFlowsGQL,
-    ) {}
+    private accountByNameGql = inject(AccountByNameGQL);
+    private accountListFlowsGql = inject(AccountListFlowsGQL);
+    private accountListDatasetsWithFlowsGql = inject(AccountListDatasetsWithFlowsGQL);
+    private accountDatasetFlowsPausedGql = inject(AccountDatasetFlowsPausedGQL);
+    private accountPauseFlowsGql = inject(AccountPauseFlowsGQL);
+    private accountResumeFlowsGql = inject(AccountResumeFlowsGQL);
 
     public fetchAccountByName(accountName: string): Observable<MaybeNull<AccountFragment>> {
         return this.accountByNameGql

src/app/api/auth.api.ts

@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { catchError, first, map } from "rxjs/operators";
 import { Observable, throwError } from "rxjs";
 import {
@@ -21,11 +21,9 @@ import { ApolloQueryResult } from "@apollo/client";
     providedIn: "root",
 })
 export class AuthApi {
-    constructor(
-        private getEnabledLoginMethodsGQL: GetEnabledLoginMethodsGQL,
-        private loginGQL: LoginGQL,
-        private fetchAccountDetailsGQL: FetchAccountDetailsGQL,
-    ) {}
+    private getEnabledLoginMethodsGQL = inject(GetEnabledLoginMethodsGQL);
+    private loginGQL = inject(LoginGQL);
+    private fetchAccountDetailsGQL = inject(FetchAccountDetailsGQL);
 
     public readEnabledLoginMethods(): Observable<LoginMethod[]> {
         return this.getEnabledLoginMethodsGQL.watch().valueChanges.pipe(

src/app/api/dataset-flow.api.ts

@@ -1,5 +1,5 @@
 import { MutationResult } from "apollo-angular";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import {
     CancelScheduledTasksGQL,
     CancelScheduledTasksMutation,
@@ -39,20 +39,18 @@ import { noCacheFetchPolicy } from "../common/data.helpers";
 
 @Injectable({ providedIn: "root" })
 export class DatasetFlowApi {
-    constructor(
-        private getDatasetFlowConfigsGQL: GetDatasetFlowConfigsGQL,
-        private datasetFlowScheduleGQL: DatasetFlowScheduleGQL,
-        private datasetFlowBatchingGQL: DatasetFlowBatchingGQL,
-        private getDatasetListFlowsGQL: GetDatasetListFlowsGQL,
-        private datasetPauseFlowsGQL: DatasetPauseFlowsGQL,
-        private datasetResumeFlowsGQL: DatasetResumeFlowsGQL,
-        private datasetAllFlowsPausedGQL: DatasetAllFlowsPausedGQL,
-        private datasetTriggerFlowGQL: DatasetTriggerFlowGQL,
-        private datasetFlowByIdGQL: GetFlowByIdGQL,
-        private cancelScheduledTasksGQL: CancelScheduledTasksGQL,
-        private datasetFlowCompactionGQL: DatasetFlowCompactionGQL,
-        private datasetFlowsInitiatorsGQL: DatasetFlowsInitiatorsGQL,
-    ) {}
+    private getDatasetFlowConfigsGQL = inject(GetDatasetFlowConfigsGQL);
+    private datasetFlowScheduleGQL = inject(DatasetFlowScheduleGQL);
+    private datasetFlowBatchingGQL = inject(DatasetFlowBatchingGQL);
+    private getDatasetListFlowsGQL = inject(GetDatasetListFlowsGQL);
+    private datasetPauseFlowsGQL = inject(DatasetPauseFlowsGQL);
+    private datasetResumeFlowsGQL = inject(DatasetResumeFlowsGQL);
+    private datasetAllFlowsPausedGQL = inject(DatasetAllFlowsPausedGQL);
+    private datasetTriggerFlowGQL = inject(DatasetTriggerFlowGQL);
+    private datasetFlowByIdGQL = inject(GetFlowByIdGQL);
+    private cancelScheduledTasksGQL = inject(CancelScheduledTasksGQL);
+    private datasetFlowCompactionGQL = inject(DatasetFlowCompactionGQL);
+    private datasetFlowsInitiatorsGQL = inject(DatasetFlowsInitiatorsGQL);
 
     public datasetTriggerFlow(params: {
         datasetId: string;

src/app/api/dataset.api.ts

@@ -37,7 +37,7 @@ import {
 } from "src/app/api/kamu.graphql.interface";
 import AppValues from "src/app/common/app.values";
 import { ApolloQueryResult } from "@apollo/client/core";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { map, first } from "rxjs/operators";
 import { Observable } from "rxjs";
 import { MutationResult } from "apollo-angular";
@@ -49,25 +49,23 @@ import { updateCacheHelper } from "../apollo-cache.helper";
 
 @Injectable({ providedIn: "root" })
 export class DatasetApi {
-    constructor(
-        private datasetMainDataGQL: GetDatasetMainDataGQL,
-        private datasetBasicsWithPermissionGQL: GetDatasetBasicsWithPermissionsGQL,
-        private datasetDataSqlRunGQL: GetDatasetDataSqlRunGQL,
-        private datasetHistoryGQL: GetDatasetHistoryGQL,
-        private datasetsByAccountNameGQL: DatasetsByAccountNameGQL,
-        private metadataBlockGQL: GetMetadataBlockGQL,
-        private datasetByIdGQL: DatasetByIdGQL,
-        private datasetByAccountAndDatasetNameGQL: DatasetByAccountAndDatasetNameGQL,
-        private createEmptyDatasetGQL: CreateEmptyDatasetGQL,
-        private createDatasetFromSnapshotGQL: CreateDatasetFromSnapshotGQL,
-        private commitEventToDatasetGQL: CommitEventToDatasetGQL,
-        private datasetSchemaGQL: GetDatasetSchemaGQL,
-        private updateReadmeGQL: UpdateReadmeGQL,
-        private deleteDatasetGQL: DeleteDatasetGQL,
-        private renameDatasetGQL: RenameDatasetGQL,
-        private datasetLineageGQL: GetDatasetLineageGQL,
-        private updateWatermarkGQL: UpdateWatermarkGQL,
-    ) {}
+    private datasetMainDataGQL = inject(GetDatasetMainDataGQL);
+    private datasetBasicsWithPermissionGQL = inject(GetDatasetBasicsWithPermissionsGQL);
+    private datasetDataSqlRunGQL = inject(GetDatasetDataSqlRunGQL);
+    private datasetHistoryGQL = inject(GetDatasetHistoryGQL);
+    private datasetsByAccountNameGQL = inject(DatasetsByAccountNameGQL);
+    private metadataBlockGQL = inject(GetMetadataBlockGQL);
+    private datasetByIdGQL = inject(DatasetByIdGQL);
+    private datasetByAccountAndDatasetNameGQL = inject(DatasetByAccountAndDatasetNameGQL);
+    private createEmptyDatasetGQL = inject(CreateEmptyDatasetGQL);
+    private createDatasetFromSnapshotGQL = inject(CreateDatasetFromSnapshotGQL);
+    private commitEventToDatasetGQL = inject(CommitEventToDatasetGQL);
+    private datasetSchemaGQL = inject(GetDatasetSchemaGQL);
+    private updateReadmeGQL = inject(UpdateReadmeGQL);
+    private deleteDatasetGQL = inject(DeleteDatasetGQL);
+    private renameDatasetGQL = inject(RenameDatasetGQL);
+    private datasetLineageGQL = inject(GetDatasetLineageGQL);
+    private updateWatermarkGQL = inject(UpdateWatermarkGQL);
 
     public getDatasetMainData(params: {
         accountName: string;

src/app/api/engine.api.ts

@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { EnginesGQL, EnginesQuery } from "./kamu.graphql.interface";
 import { ApolloQueryResult } from "@apollo/client";
 import { Observable } from "rxjs";
@@ -8,7 +8,7 @@ import { first, map } from "rxjs/operators";
     providedIn: "root",
 })
 export class EngineApi {
-    constructor(private enginesGQL: EnginesGQL) {}
+    private enginesGQL = inject(EnginesGQL);
 
     public getEngines(): Observable<EnginesQuery> {
         return this.enginesGQL.watch().valueChanges.pipe(

src/app/api/environment-variables.api.ts

@@ -11,7 +11,7 @@ import {
     SaveEnvVariableGQL,
     SaveEnvVariableMutation,
 } from "./kamu.graphql.interface";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { noCacheFetchPolicy } from "../common/data.helpers";
 import { ApolloQueryResult } from "@apollo/client";
 import { DatasetOperationError } from "../common/errors";
@@ -22,13 +22,11 @@ import { updateCacheHelper } from "../apollo-cache.helper";
     providedIn: "root",
 })
 export class EnvironmentVariablesApi {
-    constructor(
-        private listEnvVariablesGQL: ListEnvVariablesGQL,
-        private saveEnvVariableGQL: SaveEnvVariableGQL,
-        private modifyEnvVariableGQL: ModifyEnvVariableGQL,
-        private deleteEnvVariableGQL: DeleteEnvVariableGQL,
-        private exposedEnvVariableValueGQL: ExposedEnvVariableValueGQL,
-    ) {}
+    private listEnvVariablesGQL = inject(ListEnvVariablesGQL);
+    private saveEnvVariableGQL = inject(SaveEnvVariableGQL);
+    private modifyEnvVariableGQL = inject(ModifyEnvVariableGQL);
+    private deleteEnvVariableGQL = inject(DeleteEnvVariableGQL);
+    private exposedEnvVariableValueGQL = inject(ExposedEnvVariableValueGQL);
 
     public listEnvironmentVariables(params: {
         accountName: string;

src/app/api/protocols.api.ts

@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { Observable, first, map } from "rxjs";
 import { DatasetProtocolsGQL, DatasetProtocolsQuery } from "./kamu.graphql.interface";
 import { DatasetInfo } from "../interface/navigation.interface";
@@ -8,7 +8,7 @@ import { ApolloQueryResult } from "@apollo/client";
     providedIn: "root",
 })
 export class ProtocolsApi {
-    constructor(private protocolsGQL: DatasetProtocolsGQL) {}
+    private protocolsGQL = inject(DatasetProtocolsGQL);
 
     public getProtocols(datasetInfo: DatasetInfo): Observable<DatasetProtocolsQuery> {
         return this.protocolsGQL.watch({ ...datasetInfo }).valueChanges.pipe(

src/app/api/search.api.ts

@@ -1,5 +1,5 @@
 import { ApolloQueryResult } from "@apollo/client/core";
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 
 import { map, first } from "rxjs/operators";
 import { Observable, of } from "rxjs";
@@ -18,10 +18,8 @@ export const SEARCH_RESULTS_PER_PAGE = 10;
 
 @Injectable({ providedIn: "root" })
 export class SearchApi {
-    constructor(
-        private searchDatasetsAutocompleteGQL: SearchDatasetsAutocompleteGQL,
-        private searchDatasetsOverviewGQL: SearchDatasetsOverviewGQL,
-    ) {}
+    private searchDatasetsAutocompleteGQL = inject(SearchDatasetsAutocompleteGQL);
+    private searchDatasetsOverviewGQL = inject(SearchDatasetsOverviewGQL);
 
     // Search query that returns high-level dataset information for displaying the dataset badge
     public overviewDatasetSearch(

src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { AuthenticationError } from "./common/errors";
 import { throwError } from "rxjs";
 import { NavigationService } from "./services/navigation.service";
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, inject, OnInit } from "@angular/core";
 import AppValues from "./common/app.values";
 import { filter, map } from "rxjs/operators";
 import { NavigationEnd, Router, RouterEvent } from "@angular/router";
@@ -60,26 +60,21 @@ export class AppComponent extends BaseComponent implements OnInit {
         this.checkView();
     }
 
-    constructor(
-        private router: Router,
-        private loginService: LoginService,
-        private modalService: ModalService,
-        private navigationService: NavigationService,
-        private appConfigService: AppConfigService,
-        private cdr: ChangeDetectorRef,
-        private loggedUserService: LoggedUserService,
-        private localStorageService: LocalStorageService,
-    ) {
-        super();
-        // apollo client error messages
+    private router = inject(Router);
+    private loginService = inject(LoginService);
+    private modalService = inject(ModalService);
+    private navigationService = inject(NavigationService);
+    private appConfigService = inject(AppConfigService);
+    private cdr = inject(ChangeDetectorRef);
+    private loggedUserService = inject(LoggedUserService);
+    private localStorageService = inject(LocalStorageService);
+
+    public ngOnInit(): void {
         if (isDevMode()) {
             loadErrorMessages();
         }
         this.outputAppVersion();
         this.setMomentOptions();
-    }
-
-    public ngOnInit(): void {
         this.readConfiguration();
         this.checkView();
 

src/app/auth/github-callback/github.callback.ts

@@ -1,5 +1,5 @@
 import { NavigationService } from "../../services/navigation.service";
-import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { ActivatedRoute, Params } from "@angular/router";
 import { BaseComponent } from "src/app/common/base.component";
 import { LoginService } from "../login/login.service";
@@ -11,13 +11,9 @@ import { GithubLoginCredentials } from "src/app/api/auth.api.model";
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GithubCallbackComponent extends BaseComponent implements OnInit {
-    public constructor(
-        private route: ActivatedRoute,
-        private navigationService: NavigationService,
-        private loginService: LoginService,
-    ) {
-        super();
-    }
+    private route = inject(ActivatedRoute);
+    private navigationService = inject(NavigationService);
+    private loginService = inject(LoginService);
 
     public ngOnInit() {
         if (!this.searchString.includes("?code=")) {