cleanup instance selection, home

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

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

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

@@ -1,14 +1,26 @@
-<div class="upper-content">
+<div class="instance-selector-container">
-  <span class="dropdown-label">{{ 'MENU.INSTANCEOVERVIEW' | translate }}</span>
+  <div class="upper-content">
-  <a (click)="setInstance(instance)" mat-button class="dropdown-button"
+    <span class="dropdown-label">{{ 'MENU.INSTANCEOVERVIEW' | translate }}</span>
-    >{{ instance.name }}
+    <a (click)="setInstance(instance)" mat-button class="dropdown-button"
-    <ng-icon name="heroChevronRight"></ng-icon>
+      >{{ instance.name }}
-  </a>
+      <ng-icon name="heroChevronRight"></ng-icon>
-</div>
+    </a>
+  </div>
 
-<div class="footer">
+  <div class="footer">
-  <a [routerLink]="['/instance']" (click)="settingsClicked.emit()" mat-button class="dropdown-button settings-button">
+    <a
-    <h3>{{ 'MENU.SETTINGS' | translate }}</h3>
+      mat-raised-button
-    <ng-icon name="heroCog8ToothSolid"></ng-icon>
+      color="primary"
-  </a>
+      *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>

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

@@ -1,47 +1,40 @@
-: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);
 
-  .upper-content {
+  .instance-selector-container {
-    flex: 1;
+    background: map-get($background, footer);
+    height: 100%;
     display: flex;
     flex-direction: column;
-    gap: 10px;
-    padding: 10px;
-    background: map-get($background, footer);
-  }
-
-  .dropdown-label {
-    color: if($is-dark-theme, #ffffff60, #00000060);
-    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 {
+    .upper-content {
-    padding: 10px;
+      flex: 1;
-    padding-top: 5px;
+      display: flex;
-    background: map-get($background, cards);
+      flex-direction: column;
-    border-bottom-left-radius: inherit;
+      gap: 10px;
+      padding: 10px;
+    }
+
+    .dropdown-label {
+      color: if($is-dark-theme, #ffffff60, #00000060);
+      font-size: 14px;
+    }
+
+    .footer {
+      padding: 10px;
+      padding-top: 5px;
+      border-bottom-left-radius: inherit;
+    }
+
+    .portal-link {
+      margin-right: 1rem;
+      width: 100%;
+
+      .portal-span {
+        margin-right: 0.5rem;
+      }
+    }
   }
 }

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

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

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

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

console/src/app/modules/settings-grid/settinglinks.ts

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

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

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

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

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

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

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

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

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

console/src/app/modules/settings-grid/settings-grid.module.ts

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

console/src/app/modules/shortcuts/shortcuts.component.ts

@@ -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 { Subject, takeUntil } from 'rxjs';
-import { Org } from 'src/app/proto/generated/zitadel/org_pb';
 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,
   ) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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