TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-11 15:27:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleanup settings grid

Browse Source
This commit is contained in:
Max Peintner
2025-07-17 14:06:21 +02:00
parent e053b83bab
commit 62cbfd65ce
13 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
console/src/app/app-routing.module.ts
View File

@@ -78,6 +78,14 @@ const routes: Routes = [
roles: ['iam.read', 'iam.read'],
},
},
{
path: 'actions-v1',
loadChildren: () => import('./pages/org-actions/actions.module'),
canActivate: [authGuard, roleGuard],
data: {
roles: ['iam.read', 'iam.read'],
},
},
{
path: 'grants',
loadChildren: () => import('./pages/grants/grants.module'),

2
console/src/app/modules/nav/nav.component.html
View File

@@ -122,7 +122,7 @@
<a
class="nav-item"
[routerLinkActive]="['active']"
[routerLink]="['/actions']"
[routerLink]="['/actions-v1']"
[routerLinkActiveOptions]="{ exact: true }"
>
<span class="label">{{ 'MENU.ACTIONS' | translate }}</span>

2
console/src/app/modules/nav/nav.component.scss
View File

@@ -33,7 +33,7 @@
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: visible; // Allow the indicator line to show
overflow-y: hidden; // Allow the indicator line to show
align-self: stretch;
position: absolute;
top: 0;

5
console/src/app/modules/new-header/new-header.component.html
View File

@@ -11,6 +11,7 @@
ariaLabel="{{ instance.name }}"
>
</cnsl-header-button>
<cnsl-header-dropdown
[trigger]="instanceTrigger"
[isOpen]="isInstanceDropdownOpen()"
@@ -30,7 +31,7 @@
></cnsl-organization-selector>
</cnsl-header-dropdown>
</ng-container>
<ng-container *ngIf="['org.read'] | hasRole | async">
<ng-container *ngIf="!onInstanceLevel() && (['org.read'] | hasRole | async) === true">
<ng-container *ngTemplateOutlet="slash"></ng-container>
<a
*ngIf="activeOrganizationQuery.data() as org"
@@ -53,7 +54,7 @@
</cnsl-header-dropdown>
</ng-container>
<ng-container *ngIf="!isHandset()">
<ng-container *ngFor="let bread of breadcrumbs(); index as i; let last = last">
<ng-container *ngFor="let bread of nestedBreadcrumbs(); index as i; let last = last">
<ng-container *ngTemplateOutlet="slash"></ng-container>
<a class="new-header-breadcrumb" matRipple [matRippleUnbounded]="false" [routerLink]="bread.routerLink">
{{ bread.name }}

17
console/src/app/modules/new-header/new-header.component.ts
View File

@@ -57,7 +57,9 @@ export class NewHeaderComponent {
protected readonly instanceSelectorSecondStep = signal(false);
protected readonly activeOrganizationQuery = this.newOrganizationService.activeOrganizationQuery();
protected readonly isHandset: Signal<boolean>;
protected readonly breadcrumbs: Signal<Breadcrumb[]>;
protected readonly breadcrumbs: Signal<Breadcrumb[]> = toSignal(this.breadcrumbService.breadcrumbs$, { initialValue: [] });
protected readonly nestedBreadcrumbs: Signal<Breadcrumb[]>;
protected readonly onInstanceLevel: Signal<boolean>;
constructor(
private readonly newOrganizationService: NewOrganizationService,
@@ -68,7 +70,8 @@ export class NewHeaderComponent {
private readonly breadcrumbService: BreadcrumbService,
) {
this.isHandset = this.getIsHandset();
this.breadcrumbs = this.getBreadcrumbs();
this.nestedBreadcrumbs = this.getBreadcrumbs();
this.onInstanceLevel = this.isOnInstanceLevel();
effect(() => {
if (this.listMyZitadelPermissionsQuery.isError()) {
@@ -96,11 +99,17 @@ export class NewHeaderComponent {
}
private getBreadcrumbs() {
const breadcrumbs = toSignal(this.breadcrumbService.breadcrumbs$, { initialValue: [] });
return computed(() =>
breadcrumbs().filter(
this.breadcrumbs().filter(
(breadcrumb) => breadcrumb.type === BreadcrumbType.PROJECT || breadcrumb.type === BreadcrumbType.APP,
),
);
}
private isOnInstanceLevel() {
return computed(() => {
console.log(this.breadcrumbs());
return this.breadcrumbs().length === 1 && this.breadcrumbs()[0].type === BreadcrumbType.INSTANCE;
});
}
}

7
console/src/app/modules/settings-grid/settings-grid.component.html
View File

@@ -1,11 +1,8 @@
<div class="org-title-row">
<h2>{{ 'DESCRIPTIONS.ORG.TITLE' | translate }}</h2>
<a mat-icon-button href="https://zitadel.com/docs/concepts/structure/organizations" rel="noreferrer" target="_blank">
<mat-icon class="icon">info_outline</mat-icon>
</a>
<h2>{{ 'DESCRIPTIONS.SETTINGS.INSTANCE.TITLE' | translate }}</h2>
</div>
<p class="top-desc cnsl-secondary-text">
{{ 'DESCRIPTIONS.ORG.DESCRIPTION' | translate }}
{{ 'DESCRIPTIONS.SETTINGS.INSTANCE.DESCRIPTION' | translate }}
</p>
<div class="row-lyt" [ngClass]="{ more: type === PolicyComponentServiceType.ADMIN }">
<ng-container *ngFor="let setting of SETTINGS">

1
console/src/app/modules/settings-grid/settings-grid.component.scss
View File

@@ -1,7 +1,6 @@
.org-title-row {
display: flex;
align-items: center;
margin-top: 1rem;
h2 {
font-size: 1.2rem;

6
console/src/app/pages/home/home.component.html
View File

@@ -11,10 +11,12 @@
<cnsl-shortcuts />
</ng-template>
<p class="disclaimer cnsl-secondary-text">{{ 'HOME.DISCLAIMER' | translate }}</p>
<ng-container *ngIf="['policy.read'] | hasRole | async">
<cnsl-settings-grid [type]="PolicyComponentServiceType.ADMIN"></cnsl-settings-grid>
</ng-container>
<span class="fill-space"></span>
<h2 class="desc">{{ 'ONBOARDING.MOREDESCRIPTION' | translate }}</h2>
<h2 class="home-desc">{{ 'ONBOARDING.MOREDESCRIPTION' | translate }}</h2>
<div class="home-grid-container">
<a href="https://zitadel.com/docs/guides/start/quickstart" target="_blank" rel="noreferrer" class="grid-item">

11
console/src/app/pages/home/home.component.scss
View File

@@ -38,9 +38,9 @@
}
}
.desc {
.home-desc {
font-size: 1.2rem;
margin-top: 0;
margin-top: 2rem;
text-transform: uppercase;
}
@@ -143,13 +143,6 @@
}
}
.disclaimer {
font-size: 14px;
margin-top: 0;
margin-bottom: 5rem;
font-style: italic;
}
.fill-space {
flex: 1;
}

3
console/src/app/pages/home/home.component.ts
View File

@@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ThemeService } from 'src/app/services/theme.service';
@@ -21,6 +22,8 @@ export class HomeComponent {
public dark: boolean = true;
protected readonly PolicyComponentServiceType = PolicyComponentServiceType;
constructor(
public authService: GrpcAuthService,
breadcrumbService: BreadcrumbService,

2
console/src/app/pages/home/home.module.ts
View File

@@ -14,6 +14,7 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component';
import { QuickstartComponent } from 'src/app/components/quickstart/quickstart.component';
import { SettingsGridModule } from 'src/app/modules/settings-grid/settings-grid.module';
@NgModule({
declarations: [HomeComponent],
@@ -31,6 +32,7 @@ import { QuickstartComponent } from 'src/app/components/quickstart/quickstart.co
ShortcutsModule,
OnboardingModule,
MatRippleModule,
SettingsGridModule,
],
})
export default class HomeModule {}

12
console/src/app/pages/orgs/org-detail/org-detail.component.html
View File

@@ -44,10 +44,6 @@
</cnsl-top-view>
<div class="max-width-container">
<cnsl-meta-layout>
<ng-container *ngIf="['policy.read'] | hasRole | async; else nopolicyreadpermission">
<cnsl-settings-grid [type]="PolicyComponentServiceType.MGMT"></cnsl-settings-grid>
</ng-container>
<cnsl-metadata
[description]="'DESCRIPTIONS.ORG.METADATA' | translate"
[metadata]="metadata"
@@ -56,14 +52,6 @@
(refresh)="loadMetadata()"
></cnsl-metadata>
<ng-template #nopolicyreadpermission>
<div class="no-permission-warn-wrapper">
<cnsl-info-section class="info-section-warn" [fitWidth]="true" [type]="InfoSectionType.ALERT">{{
'ORG.PAGES.NOPERMISSION' | translate
}}</cnsl-info-section>
</div>
</ng-template>
<div metainfo>
<cnsl-changes *ngIf="org && reloadChanges()" [changeType]="ChangeType.ORG" [id]="org.id"></cnsl-changes>
</div>

2
console/src/app/pages/orgs/org.module.ts
View File

@@ -19,7 +19,6 @@ import { InputModule } from 'src/app/modules/input/input.module';
import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
import { MetadataModule } from 'src/app/modules/metadata/metadata.module';
import { NameDialogModule } from 'src/app/modules/name-dialog/name-dialog.module';
import { SettingsGridModule } from 'src/app/modules/settings-grid/settings-grid.module';
import { TopViewModule } from 'src/app/modules/top-view/top-view.module';
import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
@@ -55,7 +54,6 @@ import { OrgRoutingModule } from './org-routing.module';
MatProgressSpinnerModule,
MetadataModule,
TranslateModule,
SettingsGridModule,
ContributorsModule,
CopyToClipboardModule,
],