ALLIN-131: EPIC: One Party UI

.github/workflows/main.yaml

@@ -1,7 +1,7 @@
 name: Main
 on:
   push:
-    branches: ['master', 'main']
+    branches: ['master', 'main', 'epic/*']
 jobs:
   deploy:
     name: Deploy
@@ -46,6 +46,7 @@ jobs:
     name: Notify
     runs-on: ubuntu-latest
     needs: [deploy]
+    if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main'
     steps:
       - uses: actions/checkout@v4
       - uses: valitydev/action-mattermost-notify@v0.1.4

apps/control-center/src/app/app.component.html

@@ -1,16 +1,18 @@
 <cc-toolbar />
 
 <mat-sidenav-container autosize class="container">
-    <mat-sidenav
-        fixedInViewport="true"
-        fixedTopGap="64"
-        mode="side"
-        opened
-        role="navigation"
-        style="width: auto; border-right: 1px solid #ddd; border-radius: 0"
-    >
-        <v-nav [links]="links$ | async" exact style="display: block"></v-nav>
-    </mat-sidenav>
+    @if (managerUiService.isManagerUi() === false) {
+        <mat-sidenav
+            fixedInViewport="true"
+            fixedTopGap="64"
+            mode="side"
+            opened
+            role="navigation"
+            style="width: auto; border-right: 1px solid #ddd; border-radius: 0"
+        >
+            <v-nav [links]="links$ | async" exact style="display: block"></v-nav>
+        </mat-sidenav>
+    }
     <mat-sidenav-content class="content" role="main">
         <router-outlet></router-outlet>
     </mat-sidenav-content>

apps/control-center/src/app/app.component.ts

@@ -20,7 +20,7 @@ import { ROUTING_CONFIG as TERMS_ROUTING_CONFIG } from './sections/terms/routing
 import { ROUTING_CONFIG as WALLETS_ROUTING_CONFIG } from './sections/wallets/routing-config';
 import { ROUTING_CONFIG as WITHDRAWALS_ROUTING_CONFIG } from './sections/withdrawals/routing-config';
 import { SidenavInfoService } from './shared/components/sidenav-info';
-import { AppAuthGuardService, Services } from './shared/services';
+import { AppAuthGuardService, ManagerUiService, Services } from './shared/services';
 
 @Component({
     selector: 'cc-root',
@@ -32,6 +32,8 @@ export class AppComponent {
     private keycloakService = inject(KeycloakService);
     private appAuthGuardService = inject(AppAuthGuardService);
     public sidenavInfoService = inject(SidenavInfoService);
+    public managerUiService = inject(ManagerUiService);
+
     links$: Observable<Link[][]> = from(this.keycloakService.loadUserProfile()).pipe(
         startWith(null),
         map(() => this.getMenuItemsGroups()),

apps/control-center/src/app/core/components/toolbar/toolbar.component.html

@@ -5,30 +5,32 @@
     </div>
     <div class="search">
         <div></div>
-        <cc-merchant-field
-            [formControl]="partyIdControl"
-            appearance="outline"
-            class="input"
-            hint=""
-            label="Search merchant"
-            size="small"
-        ></cc-merchant-field>
-        <div>
-            @if (partyIdControl.value) {
-                <button
-                    [cdkCopyToClipboard]="partyIdControl.value"
-                    mat-icon-button
-                    (cdkCopyToClipboardCopied)="copyNotify($event)"
-                >
-                    <mat-icon>content_copy</mat-icon>
-                </button>
-            }
-            @if (partyIdControl.value && !(hasMenu$ | async)) {
-                <button mat-icon-button (click)="toParty()">
-                    <mat-icon>arrow_forward</mat-icon>
-                </button>
-            }
-        </div>
+        @if (isManagerUi() === false) {
+            <cc-merchant-field
+                [formControl]="partyIdControl"
+                appearance="outline"
+                class="input"
+                hint=""
+                label="Search merchant"
+                size="small"
+            ></cc-merchant-field>
+            <div>
+                @if (partyIdControl.value) {
+                    <button
+                        [cdkCopyToClipboard]="partyIdControl.value"
+                        mat-icon-button
+                        (cdkCopyToClipboardCopied)="copyNotify($event)"
+                    >
+                        <mat-icon>content_copy</mat-icon>
+                    </button>
+                }
+                @if (partyIdControl.value && !(hasMenu$ | async)) {
+                    <button mat-icon-button (click)="toParty()">
+                        <mat-icon>arrow_forward</mat-icon>
+                    </button>
+                }
+            </div>
+        }
     </div>
     <div class="user">
         <span>{{ user()?.username }}</span>

apps/control-center/src/app/core/components/toolbar/toolbar.component.ts

@@ -13,7 +13,7 @@ import { UrlService } from '@vality/matez';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 
 import { MerchantFieldModule } from '../../../shared/components/merchant-field';
-import { KeycloakUserService } from '../../../shared/services';
+import { KeycloakUserService, ManagerUiService } from '../../../shared/services';
 
 @Component({
     selector: 'cc-toolbar',
@@ -38,9 +38,12 @@ export class ToolbarComponent implements OnInit {
     private urlService = inject(UrlService);
     private destroyRef = inject(DestroyRef);
     private snackBar = inject(MatSnackBar);
+    private managerUiService = inject(ManagerUiService);
+
     user = this.keycloakUserService.user.value;
     partyIdControl = new FormControl<string>(this.getPartyId());
     hasMenu$ = this.urlService.path$.pipe(map((p) => p.length <= 3));
+    isManagerUi = this.managerUiService.isManagerUi;
 
     ngOnInit() {
         this.partyIdControl.valueChanges

apps/control-center/src/app/shared/components/thrift-api-crud/domain/domain-object-card/domain-object-card.component.html

@@ -6,8 +6,10 @@
         type="DomainObject"
         (kindChange)="kind.set($event)"
     ></cc-domain-thrift-viewer>
-    <cc-card-actions>
-        <button mat-button (click)="delete()">Delete</button>
-        <button mat-flat-button (click)="edit()">Edit</button>
-    </cc-card-actions>
+    @if (!managerUiService.isManagerUi()) {
+        <cc-card-actions>
+            <button mat-button (click)="delete()">Delete</button>
+            <button mat-flat-button (click)="edit()">Edit</button>
+        </cc-card-actions>
+    }
 </cc-card>

apps/control-center/src/app/shared/components/thrift-api-crud/domain/domain-object-card/domain-object-card.component.ts

@@ -15,6 +15,7 @@ import { ReplaySubject, combineLatest, switchMap } from 'rxjs';
 import { first, map, shareReplay } from 'rxjs/operators';
 
 import { DomainStoreService } from '../../../../../api/domain-config/stores/domain-store.service';
+import { ManagerUiService } from '../../../../services';
 import { SidenavInfoModule } from '../../../sidenav-info';
 import { CardComponent } from '../../../sidenav-info/components/card/card.component';
 import { DomainThriftViewerComponent } from '../domain-thrift-viewer';
@@ -38,6 +39,8 @@ export class DomainObjectCardComponent implements OnChanges {
     private domainStoreService = inject(DomainStoreService);
     private destroyRef = inject(DestroyRef);
     private dialogService = inject(DialogService);
+    managerUiService = inject(ManagerUiService);
+
     @Input() ref!: Reference;
 
     ref$ = new ReplaySubject<Reference>(1);

apps/control-center/src/app/shared/services/app-auth-guard/app-auth-guard.service.ts

@@ -1,11 +1,15 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
 import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular';
 
 import { environment } from '../../../../environments/environment';
 
+import { ManagerUiService } from './manager-ui.service';
+
 @Injectable({ providedIn: 'root' })
 export class AppAuthGuardService extends KeycloakAuthGuard {
+    private managerUiService = inject(ManagerUiService);
+
     constructor(
         // eslint-disable-next-line @angular-eslint/prefer-inject
         protected override router: Router,
@@ -17,8 +21,14 @@ export class AppAuthGuardService extends KeycloakAuthGuard {
 
     async isAccessAllowed(
         route: ActivatedRouteSnapshot,
-        _state: RouterStateSnapshot,
+        state: RouterStateSnapshot,
     ): Promise<boolean | UrlTree> {
+        if (this.managerUiService.isManagerUi() === true) {
+            const partyId = this.managerUiService.partyId();
+            if (partyId && !state.url.startsWith(`/party/${partyId}`)) {
+                return this.router.createUrlTree(['/party', partyId]);
+            }
+        }
         return (
             this.userHasSomeServiceMethods(route.data['services']) ||
             this.router.createUrlTree(['404'])

apps/control-center/src/app/shared/services/app-auth-guard/index.ts

@@ -2,3 +2,4 @@ export * from './app-auth-guard.service';
 export * from './roles';
 export * from './services';
 export * from './types/routing-config';
+export * from './manager-ui.service';

apps/control-center/src/app/shared/services/app-auth-guard/manager-ui.service.ts

@@ -0,0 +1,26 @@
+import { Injectable, computed, inject } from '@angular/core';
+import { KeycloakService } from 'keycloak-angular';
+
+import { KeycloakUserService } from '../keycloak-user.service';
+
+const MANAGER_ROLE = 'ManagerTemp';
+const MANAGER_ROLE_DELIMITER = '::';
+
+@Injectable({ providedIn: 'root' })
+export class ManagerUiService {
+    private keycloakUserService = inject(KeycloakUserService);
+    private keycloakService = inject(KeycloakService);
+
+    isManagerUi = computed(() => (this.keycloakUserService.user.value(), !!this.getRole()));
+    partyId = computed(() => (this.keycloakUserService.user.value(), this.getParty()));
+
+    private getRole() {
+        return this.keycloakService
+            .getUserRoles(true)
+            .find((role) => role.startsWith(MANAGER_ROLE));
+    }
+
+    private getParty() {
+        return this.getRole()?.split(MANAGER_ROLE_DELIMITER)?.[1];
+    }
+}

libs/matez/src/lib/components/input-field/input-field.component.scss

@@ -1,4 +1,6 @@
 .v-input-field {
+    width: 100%;
+
     .postfix {
         white-space: nowrap;
     }