cleanup settings grid

console/src/app/app-routing.module.ts

@@ -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'),

console/src/app/modules/nav/nav.component.html

@@ -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>

console/src/app/modules/nav/nav.component.scss

@@ -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;

console/src/app/modules/new-header/new-header.component.html

@@ -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 }}

console/src/app/modules/new-header/new-header.component.ts

@@ -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;
+    });
+  }
 }

console/src/app/modules/settings-grid/settings-grid.component.html

@@ -1,11 +1,8 @@
 <div class="org-title-row">
-  <h2>{{ 'DESCRIPTIONS.ORG.TITLE' | translate }}</h2>
+  <h2>{{ 'DESCRIPTIONS.SETTINGS.INSTANCE.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>
 </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">

console/src/app/modules/settings-grid/settings-grid.component.scss

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

console/src/app/pages/home/home.component.html

@@ -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">

console/src/app/pages/home/home.component.scss

@@ -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;
     }

console/src/app/pages/home/home.component.ts

@@ -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,

console/src/app/pages/home/home.module.ts

@@ -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 {}

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

@@ -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>

console/src/app/pages/orgs/org.module.ts

@@ -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,
   ],