added new solution for ElementViewService

src/app/app.component.ts

@@ -91,6 +91,13 @@ export class AppComponent extends BaseComponent implements OnInit {
                 this.loggedAccount = user ? _.cloneDeep(user) : AppComponent.ANONYMOUS_ACCOUNT_INFO;
                 this.cdr.detectChanges();
             });
+
+        this.initAdminSlideToggle();
+    }
+
+    private initAdminSlideToggle(): void {
+        const flag = this.localStorageService.adminPriveleges;
+        this.loggedUserService.emitAdminPrivelegesChanges(Boolean(flag));
     }
 
     private setMomentOptions(): void {

src/app/auth/logged-user.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from "@angular/core";
 import { catchError, first } from "rxjs/operators";
-import { Observable, ReplaySubject, Subject, of } from "rxjs";
+import { BehaviorSubject, Observable, ReplaySubject, Subject, of } from "rxjs";
 import { NavigationService } from "../services/navigation.service";
 import { MaybeNull } from "../common/app.types";
 import { isNull } from "lodash";
@@ -20,6 +20,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 export class LoggedUserService extends UnsubscribeDestroyRefAdapter {
     private loggedInUser: MaybeNull<AccountFragment> = null;
     private loggedInUser$: Subject<MaybeNull<AccountFragment>> = new ReplaySubject<MaybeNull<AccountFragment>>(1);
+    private adminPriveleges$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
     constructor(
         private loginService: LoginService,
@@ -38,6 +39,14 @@ export class LoggedUserService extends UnsubscribeDestroyRefAdapter {
                 .subscribe((user: AccountFragment) => this.changeUser(user));
     }
 
+    public get adminPrivelegesChanges(): Observable<boolean> {
+        return this.adminPriveleges$.asObservable();
+    }
+
+    public emitAdminPrivelegesChanges(value: boolean): void {
+        return this.adminPriveleges$.next(value);
+    }
+
     public initializeCompletes(): Observable<void> {
         const loginInstructions: AppConfigLoginInstructions | null = this.appConfigService.loginInstructions;
         if (loginInstructions) {

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

@@ -1,9 +1,9 @@
-<div class="pt-4 p-responsive clearfix" *ngIf="user$ | async as user">
+<div class="pt-4 p-responsive clearfix" *ngIf="componentData$ | async as data">
     <div class="d-md-flex align-items-center justify-content-between mt-1 mb-4">
         <div class="d-flex align-items-center mb-2 mb-md-0">
             <img
-                [src]="user.avatarUrl ?? DEFAULT_AVATAR_URL"
-                [alt]="'@' + user.accountName"
+                [src]="data.user?.avatarUrl ?? DEFAULT_AVATAR_URL"
+                [alt]="'@' + data.user?.accountName"
                 size="48"
                 height="48"
                 width="48"
@@ -12,21 +12,21 @@
             />
             <div class="flex-auto mx-4 mt-3">
                 <a
-                    [routerLink]="['/', user.accountName]"
+                    [routerLink]="['/', data.user?.accountName]"
                     class="color-fg-default fw-bold-custom fs-5"
                     data-test-id="user-name-link"
                 >
-                    {{ user.displayName }} <span class="text-muted">({{ user.accountName }})</span>
+                    {{ data.user?.displayName }} <span class="text-muted">({{ data.user?.accountName }})</span>
                 </a>
                 <div class="d-flex align-items-center flex-wrap">
                     <p class="color-fg-muted">Your personal account</p>
                 </div>
             </div>
         </div>
-        <div class="box p-4">
+        <div class="box p-4" *ngIf="isAdmin">
             <mat-slide-toggle
+                [(ngModel)]="data.adminPriveleges"
                 (change)="adminSlideToggleChange($event)"
-                [(ngModel)]="adminPrivelegesOn"
                 color="primary"
                 class="mat-elevation-z0"
             >
@@ -294,7 +294,7 @@
         </div>
         <div class="content">
             <ng-container *ngIf="activeTab === AccountSettingsTabs.ACCESS_TOKENS">
-                <app-access-tokens-tab [account]="user" />
+                <app-access-tokens-tab [account]="data.user!" />
             </ng-container>
         </div>
     </div>

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

@@ -3,11 +3,11 @@ import { AccountFragment } from "src/app/api/kamu.graphql.interface";
 import { AccountSettingsTabs } from "./account-settings.constants";
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
-import { filter } from "rxjs/operators";
+import { filter, map } from "rxjs/operators";
 import { BaseComponent } from "src/app/common/base.component";
 import AppValues from "src/app/common/app.values";
 import { MaybeNull, MaybeUndefined } from "src/app/common/app.types";
-import { Observable } from "rxjs";
+import { combineLatest, Observable } from "rxjs";
 import { LoggedUserService } from "../logged-user.service";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { MatSlideToggleChange } from "@angular/material/slide-toggle";
@@ -25,15 +25,19 @@ export class AccountSettingsComponent extends BaseComponent implements OnInit {
 
     public activeTab: AccountSettingsTabs = AccountSettingsTabs.PROFILE;
     public user$: Observable<MaybeNull<AccountFragment>>;
-    public adminPrivelegesOn: boolean = false;
+    public adminPriveleges$: Observable<boolean>;
 
     private router = inject(Router);
     private route = inject(ActivatedRoute);
     private loggedUserService = inject(LoggedUserService);
     private localStorageService = inject(LocalStorageService);
 
+    public componentData$: Observable<{
+        user: MaybeNull<AccountFragment>;
+        adminPriveleges: boolean;
+    }>;
+
     public ngOnInit(): void {
-        this.initAdminSlideToggle();
         this.router.events
             .pipe(
                 filter((event) => event instanceof NavigationEnd),
@@ -44,18 +48,30 @@ export class AccountSettingsComponent extends BaseComponent implements OnInit {
             });
 
         this.extractActiveTabFromRoute();
-        this.user$ = this.loggedUserService.loggedInUserChanges;
+
+        this.componentData$ = combineLatest([
+            this.loggedUserService.loggedInUserChanges,
+            this.loggedUserService.adminPrivelegesChanges,
+        ]).pipe(
+            map(([user, adminPriveleges]) => {
+                return {
+                    user,
+                    adminPriveleges,
+                };
+            }),
+        );
     }
 
     public getRouteLink(tab: AccountSettingsTabs): string {
         return `/${ProjectLinks.URL_SETTINGS}/${tab}`;
     }
 
-    public isAdmin(): boolean {
+    public get isAdmin(): boolean {
         return this.loggedUserService.isAdmin;
     }
 
     public adminSlideToggleChange(event: MatSlideToggleChange): void {
+        this.loggedUserService.emitAdminPrivelegesChanges(event.checked);
         this.localStorageService.setAdminPriveleges(event.checked);
     }
 
@@ -74,11 +90,4 @@ export class AccountSettingsComponent extends BaseComponent implements OnInit {
 
         this.activeTab = AccountSettingsTabs.PROFILE;
     }
-
-    private initAdminSlideToggle(): void {
-        const flag = this.localStorageService.adminPriveleges;
-        if (flag) {
-            this.adminPrivelegesOn = flag;
-        }
-    }
 }

src/app/dataset-view/dataset-view-menu/dataset-view-menu.component.html

@@ -68,32 +68,48 @@
                     <span class="d-block">Discussions</span>
                 </div>
             </mat-button-toggle>
-            <mat-button-toggle
-                data-test-id="navigateToFlows"
-                value="flows"
-                [class.active-link]="isDatasetViewTypeFlows"
-                *ngIf="shouldAllowFlowsTab"
-            >
-                <a [routerLink]="[datasetLink]" [queryParams]="{ tab: DatasetViewTypeEnum.Flows }" class="menu-link">
-                    <div class="d-flex align-items-center">
-                        <mat-icon class="fs-4 d-block me-1">add_task</mat-icon>
-                        <span class="d-block">Flows</span>
-                    </div>
-                </a>
-            </mat-button-toggle>
-            <mat-button-toggle
-                data-test-id="navigateToSettings"
-                value="settings"
-                [class.active-link]="isDatasetViewTypeSettings"
-                *ngIf="shouldAllowSettingsTab"
-            >
-                <a [routerLink]="[datasetLink]" [queryParams]="{ tab: DatasetViewTypeEnum.Settings }" class="menu-link">
-                    <div class="d-flex align-items-center">
-                        <svg-icon name="account" class="me-1" />
-                        <span class="d-block">Settings</span>
-                    </div>
-                </a>
-            </mat-button-toggle>
+            <ng-container *ngIf="viewModeElement$ | async as viewMode">
+                <mat-button-toggle
+                    data-test-id="navigateToFlows"
+                    value="flows"
+                    [class.active-link]="isDatasetViewTypeFlows"
+                    *ngIf="viewMode === ViewModeElement.PERMISSIONS_MODE || viewMode === ViewModeElement.ADMIN_MODE"
+                >
+                    <a
+                        [routerLink]="[datasetLink]"
+                        [queryParams]="{ tab: DatasetViewTypeEnum.Flows }"
+                        class="menu-link"
+                    >
+                        <div class="d-flex align-items-center">
+                            <mat-icon class="fs-4 d-block me-1">add_task</mat-icon>
+                            <span class="d-block">Flows</span>
+                            <mat-icon *ngIf="viewMode === ViewModeElement.ADMIN_MODE" class="admin-icon d-block me-1">
+                                admin_panel_settings</mat-icon
+                            >
+                        </div>
+                    </a>
+                </mat-button-toggle>
+                <mat-button-toggle
+                    data-test-id="navigateToSettings"
+                    value="settings"
+                    [class.active-link]="isDatasetViewTypeSettings"
+                    *ngIf="viewMode === ViewModeElement.PERMISSIONS_MODE || viewMode === ViewModeElement.ADMIN_MODE"
+                >
+                    <a
+                        [routerLink]="[datasetLink]"
+                        [queryParams]="{ tab: DatasetViewTypeEnum.Settings }"
+                        class="menu-link"
+                    >
+                        <div class="d-flex align-items-center">
+                            <svg-icon name="account" class="me-1" />
+                            <span class="d-block">Settings</span>
+                            <mat-icon *ngIf="viewMode === ViewModeElement.ADMIN_MODE" class="admin-icon d-block me-1">
+                                admin_panel_settings</mat-icon
+                            >
+                        </div>
+                    </a>
+                </mat-button-toggle>
+            </ng-container>
         </mat-button-toggle-group>
     </div>
     <app-data-access-panel [datasetBasics]="datasetBasics" />

src/app/dataset-view/dataset-view-menu/dataset-view-menu.component.scss

@@ -2,3 +2,10 @@
     height: inherit;
     border-radius: inherit;
 }
+
+.admin-icon {
+    position: relative;
+    font-size: 16px;
+    bottom: 5px;
+    color: #378bb0;
+}

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

@@ -15,7 +15,8 @@ import { DatasetViewTypeEnum } from "../dataset-view.interface";
 import { SideNavHelper } from "../../common/sidenav.helper";
 import { isMobileView, promiseWithCatch } from "src/app/common/app.helpers";
 import { DatasetBasicsFragment, DatasetPermissionsFragment } from "src/app/api/kamu.graphql.interface";
-import { ElementsViewService, EnumViewActions } from "src/app/services/elements-view.service";
+import { ElementsViewService, ViewModeElement } from "src/app/services/elements-view.service";
+import { Observable } from "rxjs";
 
 @Component({
     selector: "app-dataset-view-menu",
@@ -38,6 +39,8 @@ export class DatasetViewMenuComponent implements OnInit, AfterViewInit {
 
     private elementsViewService = inject(ElementsViewService);
     private widgetHeightService = inject(WidgetHeightService);
+    public viewModeElement$: Observable<ViewModeElement>;
+    public readonly ViewModeElement: typeof ViewModeElement = ViewModeElement;
 
     public ngAfterViewInit(): void {
         this.widgetHeightService.setWidgetOffsetTop(
@@ -50,6 +53,7 @@ export class DatasetViewMenuComponent implements OnInit, AfterViewInit {
         if (this.sidenav) {
             this.sideNavHelper = new SideNavHelper(this.sidenav);
         }
+        this.viewModeElement$ = this.elementsViewService.viewModeElement();
     }
 
     public get isDatasetViewTypeOverview(): boolean {
@@ -84,17 +88,6 @@ export class DatasetViewMenuComponent implements OnInit, AfterViewInit {
         return this.datasetViewType === DatasetViewTypeEnum.Settings;
     }
 
-    public get shouldAllowSettingsTab(): boolean {
-        return this.elementsViewService.executeAction(
-            EnumViewActions.SHOW_SETTINGS_TAB_ACTION,
-            this.datasetPermissions,
-        );
-    }
-
-    public get shouldAllowFlowsTab(): boolean {
-        return this.elementsViewService.executeAction(EnumViewActions.SHOW_FLOWS_TAB_ACTION, this.datasetPermissions);
-    }
-
     public get datasetLink(): string {
         return `/${this.datasetBasics.owner.accountName}/${this.datasetBasics.name}/`;
     }

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

@@ -14,7 +14,8 @@ import { LineageGraphNodeData, LineageGraphNodeKind } from "./additional-compone
 import _ from "lodash";
 import { BaseDatasetDataComponent } from "../common/base-dataset-data.component";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { ElementsViewService, EnumViewActions } from "../services/elements-view.service";
+import { ElementsViewService } from "../services/elements-view.service";
+import { DatasetPermissionsService } from "./dataset.permissions.service";
 
 @Component({
     selector: "app-dataset",
@@ -30,6 +31,7 @@ export class DatasetComponent extends BaseDatasetDataComponent implements OnInit
 
     private mainDatasetQueryComplete$: Subject<DatasetInfo> = new ReplaySubject<DatasetInfo>(1 /* bufferSize */);
 
+    private datasetPermissionsServices = inject(DatasetPermissionsService);
     private router = inject(Router);
     private cdr = inject(ChangeDetectorRef);
     private elementsViewService = inject(ElementsViewService);
@@ -123,7 +125,7 @@ export class DatasetComponent extends BaseDatasetDataComponent implements OnInit
                 takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((datasetPermissions: DatasetPermissionsFragment) => {
-                if (this.elementsViewService.executeAction(EnumViewActions.SHOW_FLOWS_TAB_ACTION, datasetPermissions)) {
+                if (this.datasetPermissionsServices.shouldAllowFlowsTab(datasetPermissions)) {
                     this.datasetViewType = DatasetViewTypeEnum.Flows;
                 } else {
                     this.datasetViewType = DatasetViewTypeEnum.Overview;
@@ -197,9 +199,7 @@ export class DatasetComponent extends BaseDatasetDataComponent implements OnInit
                 takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((datasetPermissions: DatasetPermissionsFragment) => {
-                if (
-                    this.elementsViewService.executeAction(EnumViewActions.SHOW_SETTINGS_TAB_ACTION, datasetPermissions)
-                ) {
+                if (this.datasetPermissionsServices.shouldAllowSettingsTab(datasetPermissions)) {
                     this.datasetViewType = DatasetViewTypeEnum.Settings;
                 } else {
                     this.datasetViewType = DatasetViewTypeEnum.Overview;