andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-04 05:12:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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]>
This commit is contained in:
Max Peintner
2025-08-28 11:23:14 +02:00
committed by GitHub
co-authored by conblem Stefan Benz Florian Forster
parent cccba3f8f3
commit f963ea9f86
117 changed files with 3286 additions and 2360 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/org-actions/action-table/action-table.component.html
+127
View File
@@ -0,0 +1,127 @@
<cnsl-refresh-table
[hideRefresh]="true"
[loading]="loading$ | async"
(refreshed)="refreshPage()"
[timestamp]="actionsResult?.details?.viewTimestamp"
[selection]="selection"
>
<div actions *ngIf="selection.isEmpty()">
<a color="primary" mat-raised-button (click)="openAddAction()">
<div class="cnsl-action-button">
<mat-icon class="icon">add</mat-icon>
<span>{{ 'ACTIONS.NEW' | translate }}</span>
</div>
</a>
</div>
<div actions *ngIf="!selection.isEmpty()">
<button class="margin-right action-state-btn bg-state inactive" mat-raised-button (click)="deactivateSelection()">
<div class="cnsl-action-button">
<span>{{ 'ACTIONS.DEACTIVATE' | translate }}</span>
<cnsl-action-keys (actionTriggered)="deactivateSelection()" [type]="ActionKeysType.DEACTIVATE"> </cnsl-action-keys>
</div>
</button>
<button class="action-state-btn bg-state active" mat-raised-button (click)="activateSelection()">
<div class="cnsl-action-button">
<span>{{ 'ACTIONS.REACTIVATE' | translate }}</span>
<cnsl-action-keys (actionTriggered)="activateSelection()" [type]="ActionKeysType.REACTIVATE"> </cnsl-action-keys>
</div>
</button>
</div>
<div class="table-wrapper">
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<div class="selection">
<mat-checkbox
color="primary"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox>
</div>
</th>
<td mat-cell *matCellDef="let key" class="selection">
<mat-checkbox
color="primary"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(key) : null"
[checked]="selection.isSelected(key)"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>{{ 'FLOWS.ID' | translate }}</th>
<td mat-cell *matCellDef="let action" class="pointer">{{ action?.id }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>{{ 'FLOWS.NAME' | translate }}</th>
<td mat-cell *matCellDef="let action" class="pointer">{{ action?.name }}</td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef>{{ 'FLOWS.STATE' | translate }}</th>
<td mat-cell *matCellDef="let action" class="pointer">
<span
class="state"
[ngClass]="{
active: action.state === ActionState.ACTION_STATE_ACTIVE,
inactive: action.state === ActionState.ACTION_STATE_INACTIVE,
}"
>
{{ 'FLOWS.STATES.' + action.state | translate }}</span
>
</td>
</ng-container>
<ng-container matColumnDef="timeout">
<th mat-header-cell *matHeaderCellDef>{{ 'FLOWS.TIMEOUT' | translate }}</th>
<td mat-cell *matCellDef="let key" class="pointer">
{{ key.timeout | durationToSeconds }}
</td>
</ng-container>
<ng-container matColumnDef="allowedToFail">
<th mat-header-cell *matHeaderCellDef>{{ 'FLOWS.ALLOWEDTOFAIL' | translate }}</th>
<td mat-cell *matCellDef="let action" class="pointer">
{{ action.allowedToFail }}
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let action" class="pointer">
<cnsl-table-actions>
<button
[disabled]="(['action.write'] | hasRole | async) === false"
actions
matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
color="warn"
(click)="$event.stopPropagation(); deleteAction(action)"
mat-icon-button
>
<i class="las la-trash"></i>
</button>
</cnsl-table-actions>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let action; columns: displayedColumns" (click)="openDialog(action)"></tr>
</table>
</div>
<cnsl-paginator
#paginator
class="paginator"
[timestamp]="actionsResult?.details?.viewTimestamp"
[length]="actionsResult?.details?.totalResult || 0"
[pageSize]="20"
[pageSizeOptions]="[10, 20, 50, 100]"
(page)="changePage($event)"
></cnsl-paginator>
</cnsl-refresh-table>