feat(console): rehauled navigation for instances including breadcrumb (#10283)

This PR significantly improves user navigation by introducing a new instance-level navigation bar. This new bar, positioned above the existing organization navigation, provides quick access to key sections: Home, Organizations, Actions, and Settings. Additionally, the breadcrumb component has been refined for more consistent behavior, reintroducing intuitive breadcrumb buttons to easily navigate up the hierarchy. These changes also include design improvements for a cleaner and more streamlined appearance across the interface. <img width="423" height="138" alt="Screenshot 2025-07-17 at 14 55 46" src="https://github.com/user-attachments/assets/ba9e40a1-1077-4cb6-8735-ac7ab637abe7" /> <img width="562" height="132" alt="Screenshot 2025-07-17 at 14 56 41" src="https://github.com/user-attachments/assets/d85dc673-0df8-4677-9d2b-dc031dde42c3" /> <img width="545" height="254" alt="Screenshot 2025-07-17 at 14 56 10" src="https://github.com/user-attachments/assets/eaf10117-079e-4181-8dbb-60c89b24556a" /> <img width="689" height="261" alt="Screenshot 2025-07-17 at 14 56 20" src="https://github.com/user-attachments/assets/510ad550-1d9a-4c6a-8af1-66cb0b23619c" /> --------- Co-authored-by: conblem <[email protected]> Co-authored-by: Stefan Benz <[email protected]> Co-authored-by: Florian Forster <[email protected]>
2026-11-12 17:15:15 +00:00 · 2025-08-28 11:23:14 +02:00
parent cccba3f8f3
commit f963ea9f86
117 changed files with 3286 additions and 2360 deletions
@@ -0,0 +1,198 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { PageEvent } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { ActionKeysType } from 'src/app/modules/action-keys/action-keys.component';
+import { PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
+import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
+import { Action, ActionState } from 'src/app/proto/generated/zitadel/action_pb';
+import {
+  CreateActionRequest,
+  ListActionsResponse,
+  UpdateActionRequest,
+} from 'src/app/proto/generated/zitadel/management_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { AddActionDialogComponent } from '../add-action-dialog/add-action-dialog.component';
+
+@Component({
+  selector: 'cnsl-action-table',
+  templateUrl: './action-table.component.html',
+  styleUrls: ['./action-table.component.scss'],
+})
+export class ActionTableComponent implements OnInit {
+  @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
+  public dataSource: MatTableDataSource<Action.AsObject> = new MatTableDataSource<Action.AsObject>();
+  public selection: SelectionModel<Action.AsObject> = new SelectionModel<Action.AsObject>(true, []);
+  public actionsResult?: ListActionsResponse.AsObject;
+  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+  @Input() public displayedColumns: string[] = ['select', 'name', 'state', 'timeout', 'allowedToFail', 'actions'];
+
+  @Output() public changedSelection: EventEmitter<Array<Action.AsObject>> = new EventEmitter();
+
+  public ActionState: any = ActionState;
+  public ActionKeysType: any = ActionKeysType;
+
+  constructor(
+    public translate: TranslateService,
+    private mgmtService: ManagementService,
+    private dialog: MatDialog,
+    private toast: ToastService,
+  ) {
+    this.selection.changed.subscribe(() => {
+      this.changedSelection.emit(this.selection.selected);
+    });
+  }
+
+  ngOnInit(): void {
+    this.getData(20, 0);
+  }
+
+  public isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  public masterToggle(): void {
+    this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach((row) => this.selection.select(row));
+  }
+
+  public changePage(event: PageEvent): void {
+    this.getData(event.pageSize, event.pageIndex * event.pageSize);
+  }
+
+  public deleteAction(action: Action.AsObject): void {
+    const dialogRef = this.dialog.open(WarnDialogComponent, {
+      data: {
+        confirmKey: 'ACTIONS.DELETE',
+        cancelKey: 'ACTIONS.CANCEL',
+        titleKey: 'FLOWS.DIALOG.DELETEACTION.TITLE',
+        descriptionKey: 'FLOWS.DIALOG.DELETEACTION.DESCRIPTION',
+      },
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe((resp) => {
+      if (resp) {
+        this.mgmtService
+          .deleteAction(action.id)
+          .then(() => {
+            this.selection.clear();
+            this.toast.showInfo('FLOWS.DIALOG.DELETEACTION.DELETE_SUCCESS', true);
+            this.refreshPage();
+          })
+          .catch((error: any) => {
+            this.toast.showError(error);
+          });
+      }
+    });
+  }
+
+  public openAddAction(): void {
+    const dialogRef = this.dialog.open(AddActionDialogComponent, {
+      data: {},
+      width: '500px',
+      disableClose: true,
+    });
+
+    dialogRef.afterClosed().subscribe((req: CreateActionRequest) => {
+      if (req) {
+        this.mgmtService
+          .createAction(req)
+          .then((resp) => {
+            this.refreshPage();
+          })
+          .catch((error: any) => {
+            this.toast.showError(error);
+          });
+      }
+    });
+  }
+
+  public openDialog(action: Action.AsObject): void {
+    const dialogRef = this.dialog.open(AddActionDialogComponent, {
+      data: {
+        action: action,
+      },
+      width: '500px',
+      disableClose: true,
+    });
+
+    dialogRef.afterClosed().subscribe((req: UpdateActionRequest) => {
+      if (req) {
+        this.mgmtService
+          .updateAction(req)
+          .then((resp) => {
+            this.refreshPage();
+          })
+          .catch((error: any) => {
+            this.toast.showError(error);
+          });
+      }
+    });
+  }
+
+  private async getData(limit: number, offset: number): Promise<void> {
+    this.loadingSubject.next(true);
+
+    this.mgmtService
+      .listActions(limit, offset)
+      .then((resp) => {
+        this.actionsResult = resp;
+        this.dataSource.data = this.actionsResult.resultList;
+        this.loadingSubject.next(false);
+      })
+      .catch((error: any) => {
+        this.toast.showError(error);
+        this.loadingSubject.next(false);
+      });
+  }
+
+  public refreshPage(): void {
+    setTimeout(() => {
+      this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+    }, 1000);
+  }
+
+  public deactivateSelection(): Promise<void> {
+    const prom = this.selection.selected.map((action) => {
+      return this.mgmtService.deactivateAction(action.id);
+    });
+
+    return Promise.all(prom)
+      .then(() => {
+        this.selection.clear();
+        this.toast.showInfo('FLOWS.TOAST.ACTIONDEACTIVATED', true);
+        this.getData(10, 0);
+      })
+      .catch((error) => {
+        this.selection.clear();
+        this.toast.showError(error);
+        this.getData(10, 0);
+      });
+  }
+
+  public activateSelection(): Promise<void> {
+    const prom = this.selection.selected.map((action) => {
+      return this.mgmtService.reactivateAction(action.id);
+    });
+
+    return Promise.all(prom)
+      .then(() => {
+        this.selection.clear();
+        this.toast.showInfo('FLOWS.TOAST.ACTIONREACTIVATED', true);
+        this.getData(10, 0);
+      })
+      .catch((error) => {
+        this.selection.clear();
+        this.toast.showError(error);
+        this.getData(10, 0);
+      });
+  }
+}