fix(console): simplify instance page (#7274)

* move settings, rm nav for single org

* move instance pages to settings

* i18n

* revalidate orgs on create

* Update bg.json

* show custome portal link

* Update console/src/app/modules/settings-list/settings.ts

Co-authored-by: Livio Spring <[email protected]>

* Update console/src/app/modules/settings-list/settings.ts

Co-authored-by: Livio Spring <[email protected]>

* Update console/src/app/modules/settings-list/settings.ts

Co-authored-by: Livio Spring <[email protected]>

* add org page to instance settings

* iam.read for org list

* i18n

* instance imgs, cleanup

* rm unused imgs

* remove unused imgs, replace default settings imgs

* event image

* e2e url

* instance url

---------

Co-authored-by: Livio Spring <[email protected]>

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

@@ -7,29 +7,45 @@
   [hasContributors]="true"
   stateTooltip="{{ 'INSTANCE.STATE.' + instance?.state | translate }}"
 >
-  <cnsl-contributors
-    topContributors
-    [totalResult]="totalMemberResult"
-    [loading]="loading$ | async"
-    [membersSubject]="membersSubject"
-    title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
-    description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}"
-    (addClicked)="openAddMember()"
-    (showDetailClicked)="showDetail()"
-    (refreshClicked)="loadMembers()"
-    [disabled]="(['iam.member.write'] | hasRole | async) === false"
-  >
-  </cnsl-contributors>
-
+  <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"
+      [membersSubject]="membersSubject"
+      title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
+      description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}"
+      (addClicked)="openAddMember()"
+      (showDetailClicked)="showDetail()"
+      (refreshClicked)="loadMembers()"
+      [disabled]="(['iam.member.write'] | hasRole | async) === false"
+    >
+    </cnsl-contributors>
+  </div>
   <cnsl-info-row topContent *ngIf="instance" [instance]="instance"></cnsl-info-row>
 </cnsl-top-view>
 
 <div class="max-width-container">
-  <h2 class="instance-table-title">{{ 'ORG.LIST.TITLE' | translate }}</h2>
-
-  <p class="instance-table-desc cnsl-secondary-text">{{ 'ORG.LIST.DESCRIPTION' | translate }}</p>
-
-  <cnsl-org-table></cnsl-org-table>
-
-  <cnsl-settings-grid [type]="PolicyComponentServiceType.ADMIN"></cnsl-settings-grid>
+  <div class="instance-settings-wrapper">
+    <ng-container *ngIf="settingsList | async as list">
+      <cnsl-settings-list
+        [selectedId]="id"
+        [serviceType]="PolicyComponentServiceType.ADMIN"
+        [settingsList]="list"
+      ></cnsl-settings-list>
+    </ng-container>
+  </div>
 </div>

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

@@ -11,6 +11,23 @@
   margin-top: 2rem;
 }
 
+.instance-action-wrapper {
+  display: flex;
+  align-items: center;
+
+  .portal-link {
+    margin-right: 1rem;
+
+    .portal-span {
+      margin-right: 0.5rem;
+    }
+  }
+}
+
 .instance-table-desc {
   font-size: 14px;
 }
+
+.instance-settings-wrapper {
+  margin-top: 2rem;
+}

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

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { Router } from '@angular/router';
-import { BehaviorSubject, from, Observable, of } from 'rxjs';
-import { catchError, finalize, map } from 'rxjs/operators';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { BehaviorSubject, from, Observable, of, Subject } from 'rxjs';
+import { catchError, finalize, map, takeUntil } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
 import { InstanceDetail, State } from 'src/app/proto/generated/zitadel/instance_pb';
@@ -11,7 +11,31 @@ import { User } from 'src/app/proto/generated/zitadel/user_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 import { ToastService } from 'src/app/services/toast.service';
-
+import {
+  BRANDING,
+  COMPLEXITY,
+  DOMAIN,
+  LANGUAGES,
+  IDP,
+  LOCKOUT,
+  LOGIN,
+  LOGINTEXTS,
+  MESSAGETEXTS,
+  NOTIFICATIONS,
+  OIDC,
+  PRIVACYPOLICY,
+  SECRETS,
+  SECURITY,
+  SMS_PROVIDER,
+  SMTP_PROVIDER,
+  VIEWS,
+  FAILEDEVENTS,
+  EVENTS,
+  ORGANIZATIONS,
+} from '../../modules/settings-list/settings';
+import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
+import { EnvironmentService } from 'src/app/services/environment.service';
 @Component({
   selector: 'cnsl-instance',
   templateUrl: './instance.component.html',
@@ -25,12 +49,51 @@ export class InstanceComponent {
   public totalMemberResult: number = 0;
   public membersSubject: BehaviorSubject<Member.AsObject[]> = new BehaviorSubject<Member.AsObject[]>([]);
   public State: any = State;
+
+  public id: string = '';
+  public defaultSettingsList: SidenavSetting[] = [
+    ORGANIZATIONS,
+    // notifications
+    // { showWarn: true, ...NOTIFICATIONS },
+    NOTIFICATIONS,
+    SMTP_PROVIDER,
+    SMS_PROVIDER,
+    // login
+    LOGIN,
+    IDP,
+    COMPLEXITY,
+    LOCKOUT,
+
+    DOMAIN,
+    // appearance
+    BRANDING,
+    MESSAGETEXTS,
+    LOGINTEXTS,
+    // storage
+    VIEWS,
+    EVENTS,
+    FAILEDEVENTS,
+    // others
+    PRIVACYPOLICY,
+    LANGUAGES,
+    OIDC,
+    SECRETS,
+    SECURITY,
+  ];
+
+  public settingsList: Observable<SidenavSetting[]> = of([]);
+  public customerPortalLink$ = this.envService.env.pipe(map((env) => env.customer_portal));
+
+  private destroy$: Subject<void> = new Subject();
   constructor(
     public adminService: AdminService,
     private dialog: MatDialog,
     private toast: ToastService,
     breadcrumbService: BreadcrumbService,
     private router: Router,
+    private authService: GrpcAuthService,
+    private envService: EnvironmentService,
+    activatedRoute: ActivatedRoute,
   ) {
     this.loadMembers();
 
@@ -52,6 +115,13 @@ export class InstanceComponent {
       .catch((error) => {
         this.toast.showError(error);
       });
+
+    activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params: Params) => {
+      const { id } = params;
+      if (id) {
+        this.id = id;
+      }
+    });
   }
 
   public loadMembers(): void {
@@ -113,4 +183,16 @@ export class InstanceComponent {
   public showDetail(): void {
     this.router.navigate(['/instance', 'members']);
   }
+
+  ngOnInit(): void {
+    this.settingsList = this.authService.isAllowedMapper(
+      this.defaultSettingsList,
+      (setting) => setting.requiredRoles.admin || [],
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

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

@@ -29,6 +29,7 @@ import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/
 
 import { IamRoutingModule } from './instance-routing.module';
 import { InstanceComponent } from './instance.component';
+import { SettingsListModule } from 'src/app/modules/settings-list/settings-list.module';
 
 @NgModule({
   declarations: [InstanceComponent],
@@ -61,6 +62,7 @@ import { InstanceComponent } from './instance.component';
     TimestampToDatePipeModule,
     RefreshTableModule,
     HasRolePipeModule,
+    SettingsListModule,
     MatSortModule,
     SettingsGridModule,
   ],