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

cleanup instance selection, home

Browse Source
This commit is contained in:
Max Peintner
2025-07-17 14:42:05 +02:00
parent 62cbfd65ce
commit e394f35f0e
19 changed files with 128 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -126,7 +126,6 @@
&.active {
opacity: 1;
color: map-get($primary, default-contrast);
&::after {
width: 100%;

18
console/src/app/modules/new-header/instance-selector/instance-selector.component.html
View File

@@ -1,3 +1,4 @@
<div class="instance-selector-container">
<div class="upper-content">
<span class="dropdown-label">{{ 'MENU.INSTANCEOVERVIEW' | translate }}</span>
<a (click)="setInstance(instance)" mat-button class="dropdown-button"
@@ -7,8 +8,19 @@
</div>
<div class="footer">
<a [routerLink]="['/instance']" (click)="settingsClicked.emit()" mat-button class="dropdown-button settings-button">
<h3>{{ 'MENU.SETTINGS' | translate }}</h3>
<ng-icon name="heroCog8ToothSolid"></ng-icon>
<a
mat-raised-button
color="primary"
*ngIf="customerPortalLink$ | async as customerPortalLink"
class="portal-link external-link"
[href]="customerPortalLink"
target="_blank"
rel="noreferrer"
>
<div class="cnsl-action-button">
<span class="portal-span">{{ 'MENU.CUSTOMERPORTAL' | translate }}</span>
<i class="las la-external-link-alt"></i>
</div>
</a>
</div>
</div>

41
console/src/app/modules/new-header/instance-selector/instance-selector.component.scss
View File

@@ -1,20 +1,20 @@
:host {
display: flex;
flex-direction: column;
justify-content: space-between;
}
@mixin instance-selector-theme($theme) {
$background: map-get($theme, background);
$is-dark-theme: map-get($theme, is-dark);
.instance-selector-container {
background: map-get($background, footer);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.upper-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
background: map-get($background, footer);
}
.dropdown-label {
@@ -22,26 +22,19 @@
font-size: 14px;
}
.settings-button {
width: 100%;
}
.dropdown-button {
height: 32px;
max-height: 32px;
}
.dropdown-button > span:nth-child(2) {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer {
padding: 10px;
padding-top: 5px;
background: map-get($background, cards);
border-bottom-left-radius: inherit;
}
.portal-link {
margin-right: 1rem;
width: 100%;
.portal-span {
margin-right: 0.5rem;
}
}
}
}

11
console/src/app/modules/new-header/instance-selector/instance-selector.component.ts
View File

@@ -6,6 +6,9 @@ import { InstanceDetail } from '@zitadel/proto/zitadel/instance_pb';
import { NgIconComponent, provideIcons } from '@ng-icons/core';
import { heroCog8ToothSolid } from '@ng-icons/heroicons/solid';
import { heroChevronRight } from '@ng-icons/heroicons/outline';
import { EnvironmentService } from 'src/app/services/environment.service';
import { map } from 'rxjs';
import { CommonModule } from '@angular/common';
@Component({
selector: 'cnsl-instance-selector',
@@ -13,17 +16,21 @@ import { heroChevronRight } from '@ng-icons/heroicons/outline';
styleUrls: ['./instance-selector.component.scss'],
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [TranslateModule, MatButtonModule, RouterLink, NgIconComponent],
imports: [TranslateModule, MatButtonModule, RouterLink, NgIconComponent, CommonModule],
providers: [provideIcons({ heroCog8ToothSolid, heroChevronRight })],
})
export class InstanceSelectorComponent {
protected readonly customerPortalLink$ = this.envService.env.pipe(map((env) => env.customer_portal));
@Output() public instanceChanged = new EventEmitter<string>();
@Output() public settingsClicked = new EventEmitter<void>();
@Input({ required: true })
public instance!: InstanceDetail;
constructor(private readonly router: Router) {}
constructor(
private readonly router: Router,
private envService: EnvironmentService,
) {}
protected async setInstance({ id }: InstanceDetail) {
this.instanceChanged.emit(id);

1
console/src/app/modules/new-header/organization-selector/organization-selector.component.scss
View File

@@ -10,6 +10,7 @@
.dropdown-label {
color: if($is-dark-theme, #ffffff60, #00000060);
font-size: 14px;
}
.back-button {

60
console/src/app/modules/settings-grid/settinglinks.ts
View File

@@ -1,60 +0,0 @@
export interface SettingLinks {
i18nTitle: string;
i18nDesc: string;
iamRouterLink: any;
orgRouterLink?: any;
queryParams: any;
iamWithRole?: string[];
orgWithRole?: string[];
icon?: string;
svgIcon?: string;
color: string;
}
export const LOGIN_GROUP: SettingLinks = {
i18nTitle: 'SETTINGS.GROUPS.LOGIN',
i18nDesc: 'POLICY.LOGIN_POLICY.DESCRIPTION',
iamRouterLink: ['/settings'],
orgRouterLink: ['/org-settings'],
queryParams: { id: 'login' },
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
icon: 'las la-sign-in-alt',
color: 'green',
};
export const APPEARANCE_GROUP: SettingLinks = {
i18nTitle: 'SETTINGS.GROUPS.APPEARANCE',
i18nDesc: 'POLICY.PRIVATELABELING.DESCRIPTION',
iamRouterLink: ['/settings'],
orgRouterLink: ['/org-settings'],
queryParams: { id: 'branding' },
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
icon: 'las la-swatchbook',
color: 'blue',
};
export const PRIVACY_POLICY: SettingLinks = {
i18nTitle: 'DESCRIPTIONS.SETTINGS.PRIVACY_POLICY.TITLE',
i18nDesc: 'POLICY.PRIVACY_POLICY.DESCRIPTION',
iamRouterLink: ['/settings'],
orgRouterLink: ['/org-settings'],
queryParams: { id: 'privacypolicy' },
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
icon: 'las la-file-contract',
color: 'black',
};
export const NOTIFICATION_GROUP: SettingLinks = {
i18nTitle: 'SETTINGS.GROUPS.NOTIFICATIONS',
i18nDesc: 'SETTINGS.LIST.NOTIFICATIONS_DESC',
iamRouterLink: ['/settings'],
queryParams: { id: 'smtpprovider' },
iamWithRole: ['iam.policy.read'],
icon: 'las la-bell',
color: 'red',
};
export const SETTINGLINKS: SettingLinks[] = [LOGIN_GROUP, APPEARANCE_GROUP, PRIVACY_POLICY, NOTIFICATION_GROUP];

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

@@ -1,52 +0,0 @@
<div class="org-title-row">
<h2>{{ 'DESCRIPTIONS.SETTINGS.INSTANCE.TITLE' | translate }}</h2>
</div>
<p class="top-desc cnsl-secondary-text">
{{ 'DESCRIPTIONS.SETTINGS.INSTANCE.DESCRIPTION' | translate }}
</p>
<div class="row-lyt" [ngClass]="{ more: type === PolicyComponentServiceType.ADMIN }">
<ng-container *ngFor="let setting of SETTINGS">
<ng-template
cnslHasRole
[hasRole]="
type === PolicyComponentServiceType.ADMIN
? setting.iamWithRole
: type === PolicyComponentServiceType.MGMT
? setting.orgWithRole
: []
"
>
<div class="p-item card" @policy data-e2e="policy-card">
<div class="avatar {{ setting.color }}">
<mat-icon *ngIf="setting.svgIcon" class="mat-icon" [svgIcon]="setting.svgIcon"></mat-icon>
<i *ngIf="setting.icon" class="icon {{ setting.icon }}"></i>
</div>
<div class="title">
<span>{{ setting.i18nTitle | translate }}</span>
</div>
<p class="desc cnsl-secondary-text">
{{ setting.i18nDesc ? (setting.i18nDesc | translate) : '' }}
</p>
<span class="fill-space"></span>
<div class="btn-wrapper">
<a
[routerLink]="
type === PolicyComponentServiceType.ADMIN
? setting.iamRouterLink
: type === PolicyComponentServiceType.MGMT
? setting.orgRouterLink
: null
"
[queryParams]="setting.queryParams"
mat-stroked-button
>
{{ 'POLICY.BTN_EDIT' | translate }}
</a>
</div>
</div>
</ng-template>
</ng-container>
</div>

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

@@ -1,155 +0,0 @@
.org-title-row {
display: flex;
align-items: center;
h2 {
font-size: 1.2rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
}
a {
.icon {
font-size: 1.2rem;
height: 1.2rem;
width: 1.2rem;
}
}
}
.top-desc {
font-size: 14px;
}
.row-lyt {
margin: 0;
display: grid;
margin-top: 1.5rem;
row-gap: 1rem;
column-gap: 1rem;
grid-template-columns: 1fr 1fr 1fr;
@media only screen and (max-width: 1300px) {
grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 500px) {
grid-template-columns: 1fr;
}
&.more {
grid-template-columns: 1fr 1fr 1fr 1fr;
@media only screen and (max-width: 1300px) {
grid-template-columns: 1fr 1fr 1fr;
}
@media only screen and (max-width: 850px) {
grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 500px) {
grid-template-columns: 1fr;
}
}
.p-item {
display: flex;
flex-direction: column;
min-height: 250px;
padding: 1rem;
height: 100%;
box-sizing: border-box;
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
.avatar {
height: 60px;
width: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
background: linear-gradient(40deg, rgb(129, 85, 185) 30%, #7b8ada);
&.purple {
background: linear-gradient(40deg, #7c3aed 30%, #6d28d9);
}
&.red {
background: linear-gradient(40deg, #dc2626 30%, #db2777);
}
&.green {
background: linear-gradient(40deg, #059669 30%, #047857);
}
&.blue {
background: linear-gradient(40deg, #3b82f6 30%, #4f46e5);
}
&.yellow {
background: linear-gradient(40deg, #f59e0b 30%, #b45309);
}
&.black {
background: linear-gradient(40deg, #1f2937, #111827);
}
.mat-icon {
height: 2rem;
width: 2rem;
color: white;
}
.icon,
i {
font-size: 2.5rem;
line-height: 2.5rem;
color: white;
}
}
.title {
display: flex;
align-items: center;
span {
font-size: 1.1rem;
}
.icon {
margin-left: 1rem;
margin-right: 1rem;
}
}
.desc {
font-size: 14px;
}
.warn {
margin-bottom: 0.5rem;
}
.icons {
margin-bottom: 1rem;
.icon {
margin-right: 0.5rem;
}
}
.fill-space {
flex: 1;
}
.btn-wrapper {
display: flex;
}
}
}

24
console/src/app/modules/settings-grid/settings-grid.component.spec.ts
View File

@@ -1,24 +0,0 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { SettingsGridComponent } from './settings-grid.component';
describe('SettingsGridComponent', () => {
let component: SettingsGridComponent;
let fixture: ComponentFixture<SettingsGridComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [SettingsGridComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SettingsGridComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

49
console/src/app/modules/settings-grid/settings-grid.component.ts
View File

@@ -1,49 +0,0 @@
import { animate, style, transition, trigger } from '@angular/animations';
import { Component, Input, OnInit } from '@angular/core';
import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
import { SETTINGLINKS, SettingLinks } from './settinglinks';
@Component({
selector: 'cnsl-settings-grid',
templateUrl: './settings-grid.component.html',
styleUrls: ['./settings-grid.component.scss'],
animations: [
trigger('policy', [
transition(':enter', [
style({
opacity: 0.5,
}),
animate(
'.15s ease-in-out',
style({
opacity: 1,
}),
),
]),
transition(':leave', [
style({
opacity: 1,
}),
animate(
'.15s ease-in-out',
style({
opacity: 0.5,
}),
),
]),
]),
],
})
export class SettingsGridComponent implements OnInit {
@Input() public type!: PolicyComponentServiceType;
@Input() public tag: string = '';
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public SETTINGS: SettingLinks[] = SETTINGLINKS;
ngOnInit(): void {
this.SETTINGS = this.SETTINGS.filter((setting) =>
this.type === PolicyComponentServiceType.MGMT ? !!setting.orgRouterLink : !!setting.iamRouterLink,
);
}
}

29
console/src/app/modules/settings-grid/settings-grid.module.ts
View File

@@ -1,29 +0,0 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { InfoSectionModule } from '../info-section/info-section.module';
import { SettingsGridComponent } from './settings-grid.component';
@NgModule({
declarations: [SettingsGridComponent],
imports: [
CommonModule,
HasRolePipeModule,
HasRoleModule,
TranslateModule,
RouterModule,
MatButtonModule,
MatIconModule,
MatTooltipModule,
InfoSectionModule,
],
exports: [SettingsGridComponent],
})
export class SettingsGridModule {}

70
console/src/app/modules/shortcuts/shortcuts.component.ts
View File

@@ -1,15 +1,73 @@
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { Component, effect, OnDestroy } from '@angular/core';
import { merge, Subject, takeUntil } from 'rxjs';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { Subject, takeUntil } from 'rxjs';
import { ProjectState } from 'src/app/proto/generated/zitadel/project_pb';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageKey, StorageLocation, StorageService } from 'src/app/services/storage.service';
import { StorageLocation, StorageService } from 'src/app/services/storage.service';
import { SETTINGLINKS } from '../settings-grid/settinglinks';
import { NewOrganizationService } from '../../services/new-organization.service';
export interface SettingLinks {
i18nTitle: string;
i18nDesc: string;
iamRouterLink: any;
orgRouterLink?: any;
queryParams: any;
iamWithRole?: string[];
orgWithRole?: string[];
icon?: string;
svgIcon?: string;
color: string;
}
export const LOGIN_GROUP: SettingLinks = {
i18nTitle: 'SETTINGS.GROUPS.LOGIN',
i18nDesc: 'POLICY.LOGIN_POLICY.DESCRIPTION',
iamRouterLink: ['/settings'],
orgRouterLink: ['/org-settings'],
queryParams: { id: 'login' },
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
icon: 'las la-sign-in-alt',
color: 'green',
};
export const APPEARANCE_GROUP: SettingLinks = {
i18nTitle: 'SETTINGS.GROUPS.APPEARANCE',
i18nDesc: 'POLICY.PRIVATELABELING.DESCRIPTION',
iamRouterLink: ['/settings'],
orgRouterLink: ['/org-settings'],
queryParams: { id: 'branding' },
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
icon: 'las la-swatchbook',
color: 'blue',
};
export const PRIVACY_POLICY: SettingLinks = {
i18nTitle: 'DESCRIPTIONS.SETTINGS.PRIVACY_POLICY.TITLE',
i18nDesc: 'POLICY.PRIVACY_POLICY.DESCRIPTION',
iamRouterLink: ['/settings'],
orgRouterLink: ['/org-settings'],
queryParams: { id: 'privacypolicy' },
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
icon: 'las la-file-contract',
color: 'black',
};
export const NOTIFICATION_GROUP: SettingLinks = {
i18nTitle: 'SETTINGS.GROUPS.NOTIFICATIONS',
i18nDesc: 'SETTINGS.LIST.NOTIFICATIONS_DESC',
iamRouterLink: ['/settings'],
queryParams: { id: 'smtpprovider' },
iamWithRole: ['iam.policy.read'],
icon: 'las la-bell',
color: 'red',
};
export const SETTINGLINKS: SettingLinks[] = [LOGIN_GROUP, APPEARANCE_GROUP, PRIVACY_POLICY, NOTIFICATION_GROUP];
export interface ShortcutItem {
id: string;
type: ShortcutType;
@@ -93,9 +151,9 @@ export class ShortcutsComponent implements OnDestroy {
private destroy$: Subject<void> = new Subject();
public editState: boolean = false;
public ProjectState: any = ProjectState;
constructor(
private storageService: StorageService,
private auth: GrpcAuthService,
private mgmtService: ManagementService,
private newOrganizationService: NewOrganizationService,
) {

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

@@ -11,10 +11,6 @@
<cnsl-shortcuts />
</ng-template>
<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="home-desc">{{ 'ONBOARDING.MOREDESCRIPTION' | translate }}</h2>

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

@@ -77,49 +77,6 @@
cursor: move;
}
.grid-item-avatar {
height: 40px;
width: 40px;
margin-right: 1rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(40deg, rgb(129, 85, 185) 30%, #7b8ada);
&.purple {
background: linear-gradient(40deg, #7c3aed 30%, #6d28d9);
}
&.red {
background: linear-gradient(40deg, #dc2626 30%, #db2777);
}
&.green {
background: linear-gradient(40deg, #03704e 30%, #047857);
}
&.blue {
background: linear-gradient(40deg, #306ccc 30%, #4f46e5);
}
&.yellow {
background: linear-gradient(40deg, #f59e0b 30%, #b45309);
}
&.black {
background: linear-gradient(40deg, #1f2937, #111827);
}
.icon,
i {
font-size: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
color: white;
}
}
.icon-wrapper {
display: flex;
justify-content: center;

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

@@ -14,7 +14,6 @@ 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],
@@ -32,7 +31,6 @@ import { SettingsGridModule } from 'src/app/modules/settings-grid/settings-grid.
ShortcutsModule,
OnboardingModule,
MatRippleModule,
SettingsGridModule,
],
})
export default class HomeModule {}

14
console/src/app/pages/instance/instance.component.html
View File

@@ -8,20 +8,6 @@
stateTooltip="{{ 'INSTANCE.STATE.' + instance?.state | translate }}"
>
<div topContributors class="instance-action-wrapper">
<a
mat-raised-button
color="primary"
*ngIf="customerPortalLink$ | async as customerPortalLink"
class="portal-link external-link"
[href]="customerPortalLink"
target="_blank"
rel="noreferrer"
>
<div class="cnsl-action-button">
<span class="portal-span">{{ 'MENU.CUSTOMERPORTAL' | translate }}</span>
<i class="las la-external-link-alt"></i>
</div>
</a>
<cnsl-contributors
[totalResult]="totalMemberResult"
[loading]="loading$ | async"

8
console/src/app/pages/instance/instance.component.scss
View File

@@ -14,14 +14,6 @@
.instance-action-wrapper {
display: flex;
align-items: center;
.portal-link {
margin-right: 1rem;
.portal-span {
margin-right: 0.5rem;
}
}
}
.instance-table-desc {

2
console/src/app/pages/instance/instance.component.ts
View File

@@ -86,7 +86,6 @@ export class InstanceComponent {
];
protected readonly settingsList$: Observable<SidenavSetting[]>;
protected readonly customerPortalLink$ = this.envService.env.pipe(map((env) => env.customer_portal));
constructor(
protected readonly adminService: AdminService,
@@ -95,7 +94,6 @@ export class InstanceComponent {
breadcrumbService: BreadcrumbService,
private readonly router: Router,
private readonly authService: GrpcAuthService,
private readonly envService: EnvironmentService,
activatedRoute: ActivatedRoute,
private readonly destroyRef: DestroyRef,
) {

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

@@ -21,7 +21,6 @@ import { InputModule } from 'src/app/modules/input/input.module';
import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
import { OrgTableModule } from 'src/app/modules/org-table/org-table.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { SettingsGridModule } from 'src/app/modules/settings-grid/settings-grid.module';
import { TopViewModule } from 'src/app/modules/top-view/top-view.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
@@ -64,7 +63,6 @@ import { SettingsListModule } from 'src/app/modules/settings-list/settings-list.
HasRolePipeModule,
SettingsListModule,
MatSortModule,
SettingsGridModule,
],
})
export default class InstanceModule {}