chore(console): resolve warnings due to dependency update (#4270)

* cli, core * material cdk * schematics * chore(deps): bump ngx-color from 7.3.3 to 8.0.2 in /console (#4228) Bumps [ngx-color](https://github.com/scttcper/ngx-color) from 7.3.3 to 8.0.2. - [Release notes](https://github.com/scttcper/ngx-color/releases) - [Commits](https://github.com/scttcper/ngx-color/compare/v7.3.3...v8.0.2) --- updated-dependencies: - dependency-name: ngx-color dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * eslint-plugin * chore(deps): bump moment from 2.29.3 to 2.29.4 in /console (#3926) Bumps [moment](https://github.com/moment/moment) from 2.29.3 to 2.29.4. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](https://github.com/moment/moment/compare/2.29.3...2.29.4) --- updated-dependencies: - dependency-name: moment dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump codemirror from 5.65.6 to 6.0.1 in /console (#3928) Bumps [codemirror](https://github.com/codemirror/basic-setup) from 5.65.6 to 6.0.1. - [Release notes](https://github.com/codemirror/basic-setup/releases) - [Changelog](https://github.com/codemirror/basic-setup/blob/main/CHANGELOG.md) - [Commits](https://github.com/codemirror/basic-setup/commits/6.0.1) --- updated-dependencies: - dependency-name: codemirror dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * lock * use codemirror 5 * remove redundant null undefined checks * i18n, undefined checks * remove redundant null and undefined checks * checks * fix: resolve null check warnings * commonjs deps Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Livio Spring <[email protected]>
2026-11-12 00:55:12 +00:00 · 2022-09-01 07:44:39 +00:00
parent 2f647ce9a2
commit 861464598a
62 changed files with 927 additions and 780 deletions
@@ -186,7 +186,7 @@
          </span>
          <span class="right">
            <span>
-              {{ 'APP.OIDC.AUTHMETHOD.' + oidcAppRequest?.authMethodType | translate }}
+              {{ 'APP.OIDC.AUTHMETHOD.' + oidcAppRequest.authMethodType | translate }}
            </span>
          </span>
        </div>
@@ -226,7 +226,7 @@
          </span>
          <span class="right">
            <span>
-              {{ 'APP.API.AUTHMETHOD.' + apiAppRequest?.authMethodType | translate }}
+              {{ 'APP.API.AUTHMETHOD.' + apiAppRequest.authMethodType | translate }}
            </span>
          </span>
        </div>
@@ -9,17 +9,17 @@ import { Subject, Subscription } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
 import {
-    APIAuthMethodType,
-    OIDCAppType,
-    OIDCAuthMethodType,
-    OIDCGrantType,
-    OIDCResponseType,
+  APIAuthMethodType,
+  OIDCAppType,
+  OIDCAuthMethodType,
+  OIDCGrantType,
+  OIDCResponseType,
 } from 'src/app/proto/generated/zitadel/app_pb';
 import {
-    AddAPIAppRequest,
-    AddAPIAppResponse,
-    AddOIDCAppRequest,
-    AddOIDCAppResponse,
+  AddAPIAppRequest,
+  AddAPIAppResponse,
+  AddOIDCAppRequest,
+  AddOIDCAppResponse,
 } from 'src/app/proto/generated/zitadel/management_pb';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
@@ -27,13 +27,13 @@ import { ToastService } from 'src/app/services/toast.service';

 import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
 import {
-    BASIC_AUTH_METHOD,
-    CODE_METHOD,
-    getPartialConfigFromAuthMethod,
-    IMPLICIT_METHOD,
-    PK_JWT_METHOD,
-    PKCE_METHOD,
-    POST_METHOD,
+  BASIC_AUTH_METHOD,
+  CODE_METHOD,
+  getPartialConfigFromAuthMethod,
+  IMPLICIT_METHOD,
+  PK_JWT_METHOD,
+  PKCE_METHOD,
+  POST_METHOD,
 } from '../authmethods';
 import { API_TYPE, AppCreateType, NATIVE_TYPE, RadioItemAppType, USER_AGENT_TYPE, WEB_TYPE } from '../authtypes';

@@ -43,7 +43,7 @@ import { API_TYPE, AppCreateType, NATIVE_TYPE, RadioItemAppType, USER_AGENT_TYPE
  styleUrls: ['./app-create.component.scss'],
 })
 export class AppCreateComponent implements OnInit, OnDestroy {
-  private subscription?: Subscription;
+  private subscription: Subscription = new Subscription();
  private destroyed$: Subject<void> = new Subject();
  public devmode: boolean = false;
  public projectId: string = '';
@@ -57,7 +57,10 @@
 </cnsl-top-view>

 <div class="max-width-container">
-  <div class="compliance" *ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
+  <div
+    class="compliance"
+    *ngIf="app && app.oidcConfig && app.oidcConfig.complianceProblemsList && app.oidcConfig.complianceProblemsList?.length"
+  >
    <h2 class="compliance-title">{{ 'APP.COMPLIANCE' | translate }}</h2>
    <cnsl-info-section class="problem" [type]="InfoSectionType.ALERT">
      <ul style="margin: 0">
@@ -355,7 +358,7 @@

        <ng-container *ngIf="currentSetting === 'configuration'">
          <cnsl-card
-            *ngIf="initialAuthMethod === 'PK_JWT' && projectId && app?.id"
+            *ngIf="initialAuthMethod === 'PK_JWT' && projectId && app && app.id"
            title="{{ 'USER.MACHINE.KEYSTITLE' | translate }}"
            description="{{ 'USER.MACHINE.KEYSDESC' | translate }}"
          >
@@ -17,21 +17,21 @@ import { NameDialogComponent } from 'src/app/modules/name-dialog/name-dialog.com
 import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import {
-    APIAuthMethodType,
-    APIConfig,
-    App,
-    AppState,
-    OIDCAppType,
-    OIDCAuthMethodType,
-    OIDCConfig,
-    OIDCGrantType,
-    OIDCResponseType,
-    OIDCTokenType,
+  APIAuthMethodType,
+  APIConfig,
+  App,
+  AppState,
+  OIDCAppType,
+  OIDCAuthMethodType,
+  OIDCConfig,
+  OIDCGrantType,
+  OIDCResponseType,
+  OIDCTokenType,
 } from 'src/app/proto/generated/zitadel/app_pb';
 import {
-    GetOIDCInformationResponse,
-    UpdateAPIAppConfigRequest,
-    UpdateOIDCAppConfigRequest,
+  GetOIDCInformationResponse,
+  UpdateAPIAppConfigRequest,
+  UpdateOIDCAppConfigRequest,
 } from 'src/app/proto/generated/zitadel/management_pb';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
@@ -40,15 +40,15 @@ import { ToastService } from 'src/app/services/toast.service';

 import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
 import {
-    BASIC_AUTH_METHOD,
-    CODE_METHOD,
-    CUSTOM_METHOD,
-    getAuthMethodFromPartialConfig,
-    getPartialConfigFromAuthMethod,
-    IMPLICIT_METHOD,
-    PK_JWT_METHOD,
-    PKCE_METHOD,
-    POST_METHOD,
+  BASIC_AUTH_METHOD,
+  CODE_METHOD,
+  CUSTOM_METHOD,
+  getAuthMethodFromPartialConfig,
+  getPartialConfigFromAuthMethod,
+  IMPLICIT_METHOD,
+  PK_JWT_METHOD,
+  PKCE_METHOD,
+  POST_METHOD,
 } from '../authmethods';
 import { AuthMethodDialogComponent } from './auth-method-dialog/auth-method-dialog.component';

@@ -71,7 +71,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
  public authMethods: RadioItemAuthType[] = [];
  private subscription?: Subscription;
  public projectId: string = '';
-  public app!: App.AsObject;
+  public app?: App.AsObject;

  public environmentMap: { [key: string]: string } = {};

@@ -183,7 +183,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
  public openNameDialog(): void {
    const dialogRef = this.dialog.open(NameDialogComponent, {
      data: {
-        name: this.app.name,
+        name: this.app?.name,
        titleKey: 'APP.NAMEDIALOG.TITLE',
        descKey: 'APP.NAMEDIALOG.DESCRIPTION',
        labelKey: 'APP.NAMEDIALOG.NAME',
@@ -193,7 +193,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {

    dialogRef.afterClosed().subscribe((name) => {
      if (name) {
-        this.app.name = name;
+        this.app!.name = name;
        this.saveApp();
      }
    });
@@ -344,7 +344,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
            }
          })
          .catch((error) => {
-            console.error(error);
            this.toast.showError(error);
            this.errorMessage = error.message;
          });
@@ -354,7 +353,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {

  private getAuthMethodOptions(type: string): void {
    if (type === 'OIDC') {
-      switch (this.app.oidcConfig?.appType) {
+      switch (this.app?.oidcConfig?.appType) {
        case OIDCAppType.OIDC_APP_TYPE_NATIVE:
          this.authMethods = [PKCE_METHOD, CUSTOM_METHOD];
          break;
@@ -378,17 +377,17 @@ export class AppDetailComponent implements OnInit, OnDestroy {

  public setPartialConfigFromAuthMethod(authMethod: string): void {
    const partialConfig = getPartialConfigFromAuthMethod(authMethod);
-    if (partialConfig && partialConfig.oidc && this.app.oidcConfig) {
-      this.app.oidcConfig.responseTypesList = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).responseTypesList ?? [];
+    if (partialConfig && partialConfig.oidc && this.app?.oidcConfig) {
+      this.app!.oidcConfig.responseTypesList = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).responseTypesList ?? [];

-      this.app.oidcConfig.grantTypesList = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).grantTypesList ?? [];
+      this.app!.oidcConfig.grantTypesList = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).grantTypesList ?? [];

-      this.app.oidcConfig.authMethodType =
+      this.app!.oidcConfig.authMethodType =
        (partialConfig.oidc as Partial<OIDCConfig.AsObject>).authMethodType ?? OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE;

      this.oidcForm.patchValue(this.app.oidcConfig);
      this.oidcTokenForm.patchValue(this.app.oidcConfig);
-    } else if (partialConfig && partialConfig.api && this.app.apiConfig) {
+    } else if (partialConfig && partialConfig.api && this.app?.apiConfig) {
      this.app.apiConfig.authMethodType =
        (partialConfig.api as Partial<APIConfig.AsObject>).authMethodType ?? APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC;

@@ -408,7 +407,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
    });

    dialogRef.afterClosed().subscribe((resp) => {
-      if (resp && this.projectId && this.app.id) {
+      if (resp && this.projectId && this.app?.id) {
        this.mgmtService
          .removeApp(this.projectId, this.app.id)
          .then(() => {
@@ -424,21 +423,21 @@ export class AppDetailComponent implements OnInit, OnDestroy {
  }

  public changeState(state: AppState): void {
-    if (state === AppState.APP_STATE_ACTIVE) {
+    if (state === AppState.APP_STATE_ACTIVE && this.app) {
      this.mgmtService
        .reactivateApp(this.projectId, this.app.id)
        .then(() => {
-          this.app.state = state;
+          this.app!.state = state;
          this.toast.showInfo('APP.TOAST.REACTIVATED', true);
        })
        .catch((error: any) => {
          this.toast.showError(error);
        });
-    } else if (state === AppState.APP_STATE_INACTIVE) {
+    } else if (state === AppState.APP_STATE_INACTIVE && this.app) {
      this.mgmtService
        .deactivateApp(this.projectId, this.app.id)
        .then(() => {
-          this.app.state = state;
+          this.app!.state = state;
          this.toast.showInfo('APP.TOAST.DEACTIVATED', true);
        })
        .catch((error: any) => {
@@ -448,15 +447,17 @@ export class AppDetailComponent implements OnInit, OnDestroy {
  }

  public saveApp(): void {
-    this.mgmtService
-      .updateApp(this.projectId, this.app.id, this.app.name)
-      .then(() => {
-        this.toast.showInfo('APP.TOAST.UPDATED', true);
-        this.editState = false;
-      })
-      .catch((error) => {
-        this.toast.showError(error);
-      });
+    if (this.app) {
+      this.mgmtService
+        .updateApp(this.projectId, this.app.id, this.app.name)
+        .then(() => {
+          this.toast.showInfo('APP.TOAST.UPDATED', true);
+          this.editState = false;
+        })
+        .catch((error) => {
+          this.toast.showError(error);
+        });
+    }
  }

  public toggleRefreshToken(event: MatCheckboxChange): void {
@@ -481,7 +482,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
  public saveOIDCApp(): void {
    this.requestRedirectValuesSubject$.next();
    if (this.oidcForm.valid) {
-      if (this.app.oidcConfig) {
+      if (this.app?.oidcConfig) {
        //   configuration
        this.app.oidcConfig.responseTypesList = this.responseTypesList?.value;
        this.app.oidcConfig.grantTypesList = this.grantTypesList?.value;
@@ -532,7 +533,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
        this.mgmtService
          .updateOIDCAppConfig(req)
          .then(() => {
-            if (this.app.oidcConfig) {
+            if (this.app?.oidcConfig) {
              const config = { oidc: this.app.oidcConfig };
              this.currentAuthMethod = this.authMethodFromPartialConfig(config);
            }
@@ -546,7 +547,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
  }

  public saveAPIApp(): void {
-    if (this.apiForm.valid && this.app.apiConfig) {
+    if (this.apiForm.valid && this.app?.apiConfig) {
      this.app.apiConfig.authMethodType = this.apiAuthMethodType?.value;

      const req = new UpdateAPIAppConfigRequest();
@@ -557,7 +558,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
      this.mgmtService
        .updateAPIAppConfig(req)
        .then(() => {
-          if (this.app.apiConfig) {
+          if (this.app?.apiConfig) {
            const config = { api: this.app.apiConfig };
            this.currentAuthMethod = this.authMethodFromPartialConfig(config);

@@ -581,21 +582,23 @@ export class AppDetailComponent implements OnInit, OnDestroy {
  }

  public regenerateOIDCClientSecret(): void {
-    this.mgmtService
-      .regenerateOIDCClientSecret(this.app.id, this.projectId)
-      .then((resp) => {
-        this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
-        this.dialog.open(AppSecretDialogComponent, {
-          data: {
-            // clientId: data.toObject() as ClientSecret.AsObject.clientId,
-            clientSecret: resp.clientSecret,
-          },
-          width: '400px',
+    if (this.app) {
+      this.mgmtService
+        .regenerateOIDCClientSecret(this.app.id, this.projectId)
+        .then((resp) => {
+          this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
+          this.dialog.open(AppSecretDialogComponent, {
+            data: {
+              // clientId: data.toObject() as ClientSecret.AsObject.clientId,
+              clientSecret: resp.clientSecret,
+            },
+            width: '400px',
+          });
+        })
+        .catch((error) => {
+          this.toast.showError(error);
        });
-      })
-      .catch((error) => {
-        this.toast.showError(error);
-      });
+    }
  }

  public changeAuthMethod(): void {
@@ -617,20 +620,22 @@ export class AppDetailComponent implements OnInit, OnDestroy {
  }

  public regenerateAPIClientSecret(): void {
-    this.mgmtService
-      .regenerateAPIClientSecret(this.app.id, this.projectId)
-      .then((resp) => {
-        this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
-        this.dialog.open(AppSecretDialogComponent, {
-          data: {
-            clientSecret: resp.clientSecret,
-          },
-          width: '400px',
+    if (this.app) {
+      this.mgmtService
+        .regenerateAPIClientSecret(this.app.id, this.projectId)
+        .then((resp) => {
+          this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
+          this.dialog.open(AppSecretDialogComponent, {
+            data: {
+              clientSecret: resp.clientSecret,
+            },
+            width: '400px',
+          });
+        })
+        .catch((error) => {
+          this.toast.showError(error);
        });
-      })
-      .catch((error) => {
-        this.toast.showError(error);
-      });
+    }
  }

  public get currentRadioItemAuthType(): RadioItemAuthType | undefined {
@@ -54,7 +54,12 @@
    </ng-template>

    <div metainfo>
-      <cnsl-changes *ngIf="project" [changeType]="ChangeType.PROJECT_GRANT" [id]="project.projectId" [secId]="project.grantId"></cnsl-changes>
+      <cnsl-changes
+        *ngIf="project"
+        [changeType]="ChangeType.PROJECT_GRANT"
+        [id]="project.projectId"
+        [secId]="project.grantId"
+      ></cnsl-changes>
    </div>
  </cnsl-meta-layout>
 </div>
@@ -23,16 +23,12 @@ import { ToastService } from 'src/app/services/toast.service';
 export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
  public projectId: string = '';
  public grantId: string = '';
-  public project!: GrantedProject.AsObject;
-
+  public project?: GrantedProject.AsObject;
  public ProjectGrantState: any = ProjectGrantState;
  public ChangeType: any = ChangeType;
-
-  private subscription?: Subscription;
-
  public isZitadel: boolean = false;
-
-  UserGrantContext: any = UserGrantContext;
+  public UserGrantContext: any = UserGrantContext;
+  private subscription: Subscription = new Subscription();

  // members
  public totalMemberResult: number = 0;
@@ -56,7 +52,7 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
  }

  public ngOnDestroy(): void {
-    this.subscription?.unsubscribe();
+    this.subscription.unsubscribe();
  }

  private async getData({ id, grantId }: Params): Promise<void> {
@@ -155,6 +151,8 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
  }

  public showDetail(): void {
-    this.router.navigate(['granted-projects', this.project.projectId, 'grant', this.grantId, 'members']);
+    if (this.project) {
+      this.router.navigate(['granted-projects', this.project.projectId, 'grant', this.grantId, 'members']);
+    }
  }
 }
@@ -1,8 +1,12 @@
-<cnsl-refresh-table [loading]="dataSource.loading$ | async" [selection]="selection" (refreshed)="refreshPage()"
-  [dataSize]="dataSource.totalResult" [timestamp]="dataSource?.viewTimestamp">
+<cnsl-refresh-table
+  [loading]="dataSource.loading$ | async"
+  [selection]="selection"
+  (refreshed)="refreshPage()"
+  [dataSize]="dataSource.totalResult"
+  [timestamp]="dataSource.viewTimestamp"
+>
  <ng-template cnslHasRole [hasRole]="['project.app.write']" actions>
-    <a [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'apps', 'create']" color="primary"
-      mat-raised-button>
+    <a [disabled]="disabled" [routerLink]="['/projects', projectId, 'apps', 'create']" color="primary" mat-raised-button>
      <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
    </a>
  </ng-template>
@@ -11,66 +15,87 @@
    <table [dataSource]="dataSource" mat-table class="table" aria-label="Elements">
      <ng-container matColumnDef="select">
        <th class="selection" mat-header-cell *matHeaderCellDef>
-          <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+          <mat-checkbox
+            color="primary"
+            (change)="$event ? masterToggle() : null"
            [checked]="selection.hasValue() && isAllSelected()"
-            [indeterminate]="selection.hasValue() && !isAllSelected()">
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+          >
          </mat-checkbox>
        </th>
        <td class="selection" mat-cell *matCellDef="let row">
-          <mat-checkbox color="primary" (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+          <mat-checkbox
+            color="primary"
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+          >
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{ 'APP.NAME' | translate }} </th>
-        <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id ]" mat-cell *matCellDef="let app">
-          {{app.name}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'APP.NAME' | translate }}</th>
+        <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id]" mat-cell *matCellDef="let app">
+          {{ app.name }}
+        </td>
      </ng-container>

      <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef> {{ 'APP.TYPE' | translate }} </th>
-        <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id ]" mat-cell *matCellDef="let app">
+        <th mat-header-cell *matHeaderCellDef>{{ 'APP.TYPE' | translate }}</th>
+        <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id]" mat-cell *matCellDef="let app">
          <span *ngIf="app?.oidcConfig?.appType !== undefined && app?.oidcConfig?.appType !== null">
-            {{'APP.OIDC.APPTYPE.'+app?.oidcConfig?.appType | translate}}
+            {{ 'APP.OIDC.APPTYPE.' + app?.oidcConfig?.appType | translate }}
          </span>
          <span *ngIf="app.apiConfig">API</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="state">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.DATA.STATE' | translate }} </th>
-        <td class="pointer" mat-cell *matCellDef="let app" [routerLink]="['/projects', projectId, 'apps', app.id ]">
-          <span class="state"
-            [ngClass]="{'active': app.state === AppState.APP_STATE_ACTIVE, 'inactive': app.state === AppState.APP_STATE_INACTIVE}">
-            {{('APP.PAGES.DETAIL.STATE.'+app?.state) | translate}}
+        <th mat-header-cell *matHeaderCellDef>{{ 'USER.DATA.STATE' | translate }}</th>
+        <td class="pointer" mat-cell *matCellDef="let app" [routerLink]="['/projects', projectId, 'apps', app.id]">
+          <span
+            class="state"
+            [ngClass]="{
+              active: app.state === AppState.APP_STATE_ACTIVE,
+              inactive: app.state === AppState.APP_STATE_INACTIVE
+            }"
+          >
+            {{ 'APP.PAGES.DETAIL.STATE.' + app?.state | translate }}
          </span>
        </td>
      </ng-container>

      <ng-container matColumnDef="creationDate">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CREATIONDATE' | translate }} </th>
-        <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id ]" mat-cell *matCellDef="let app">
-          <span *ngIf="app?.details?.creationDate">{{app.details.creationDate | timestampToDate |
-            localizedDate: 'dd. MMM, HH:mm' }}</span>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CREATIONDATE' | translate }}</th>
+        <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id]" mat-cell *matCellDef="let app">
+          <span *ngIf="app?.details?.creationDate">{{
+            app.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
+          }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="changeDate">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CHANGEDATE' | translate }} </th>
-        <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id ]" mat-cell *matCellDef="let app">
-          <span *ngIf="app?.details?.changeDate">{{app.details.changeDate | timestampToDate |
-            localizedDate: 'dd. MMM, HH:mm' }}</span>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CHANGEDATE' | translate }}</th>
+        <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id]" mat-cell *matCellDef="let app">
+          <span *ngIf="app?.details?.changeDate">{{
+            app.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
+          }}</span>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
  </div>

-  <cnsl-paginator class="paginator" #paginator [timestamp]="dataSource?.viewTimestamp" [length]="dataSource.totalResult"
-    [pageSize]="25" [pageSizeOptions]="[25, 50, 100, 250]">
+  <cnsl-paginator
+    class="paginator"
+    #paginator
+    [timestamp]="dataSource.viewTimestamp"
+    [length]="dataSource.totalResult"
+    [pageSize]="25"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
  </cnsl-paginator>
-</cnsl-refresh-table>
+</cnsl-refresh-table>
@@ -19,7 +19,7 @@ export class ApplicationsComponent implements AfterViewInit, OnInit {
  @Input() public disabled: boolean = false;
  @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
  @ViewChild(MatTable) public table!: MatTable<App.AsObject>;
-  public dataSource!: ProjectApplicationsDataSource;
+  public dataSource: ProjectApplicationsDataSource = new ProjectApplicationsDataSource(this.mgmtService);
  public selection: SelectionModel<App.AsObject> = new SelectionModel<App.AsObject>(true, []);

  public displayedColumns: string[] = ['name', 'type', 'state', 'creationDate', 'changeDate'];
@@ -27,7 +27,6 @@ export class ApplicationsComponent implements AfterViewInit, OnInit {
  constructor(private mgmtService: ManagementService) {}

  ngOnInit(): void {
-    this.dataSource = new ProjectApplicationsDataSource(this.mgmtService);
    this.dataSource.loadApps(this.projectId, 0, 25);
  }

@@ -15,7 +15,7 @@

    <button
      mat-menu-item
-      [disabled]="isZitadel || (['project.write$', 'project.write:' + project.id] | hasRole | async) === false"
+      [disabled]="isZitadel || (['project.write$', 'project.write:' + project?.id] | hasRole | async) === false"
      *ngIf="project?.state === ProjectState.PROJECT_STATE_ACTIVE"
      (click)="changeState(ProjectState.PROJECT_STATE_INACTIVE)"
    >
@@ -24,7 +24,7 @@

    <button
      mat-menu-item
-      [disabled]="isZitadel || (['project.write$', 'project.write:' + project.id] | hasRole | async) === false"
+      [disabled]="isZitadel || (['project.write$', 'project.write:' + project?.id] | hasRole | async) === false"
      *ngIf="project?.state === ProjectState.PROJECT_STATE_INACTIVE"
      (click)="changeState(ProjectState.PROJECT_STATE_ACTIVE)"
    >
@@ -8,9 +8,7 @@ import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, finalize, map, take } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
-import {
-    ProjectPrivateLabelingDialogComponent,
-} from 'src/app/modules/project-private-labeling-dialog/project-private-labeling-dialog.component';
+import { ProjectPrivateLabelingDialogComponent } from 'src/app/modules/project-private-labeling-dialog/project-private-labeling-dialog.component';
 import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { UserGrantContext } from 'src/app/modules/user-grants/user-grants-datasource';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
@@ -39,7 +37,7 @@ const GRANTS: SidenavSetting = { id: 'grants', i18nKey: 'MENU.GRANTS' };
 })
 export class OwnedProjectDetailComponent implements OnInit {
  public projectId: string = '';
-  public project!: Project.AsObject;
+  public project?: Project.AsObject;

  public pageSizeApps: number = 10;
  public appsDataSource: MatTableDataSource<App.AsObject> = new MatTableDataSource<App.AsObject>();
@@ -95,7 +93,7 @@ export class OwnedProjectDetailComponent implements OnInit {
  public openNameDialog(): void {
    const dialogRef = this.dialog.open(NameDialogComponent, {
      data: {
-        name: this.project.name,
+        name: this.project?.name,
        titleKey: 'PROJECT.NAMEDIALOG.TITLE',
        descKey: 'PROJECT.NAMEDIALOG.DESCRIPTION',
        labelKey: 'PROJECT.NAMEDIALOG.NAME',
@@ -105,7 +103,7 @@ export class OwnedProjectDetailComponent implements OnInit {

    dialogRef.afterClosed().subscribe((name) => {
      if (name) {
-        this.project.name = name;
+        this.project!.name = name;
        this.updateName();
      }
    });
@@ -114,14 +112,14 @@ export class OwnedProjectDetailComponent implements OnInit {
  public openPrivateLabelingDialog(): void {
    const dialogRef = this.dialog.open(ProjectPrivateLabelingDialogComponent, {
      data: {
-        setting: this.project.privateLabelingSetting,
+        setting: this.project?.privateLabelingSetting,
      },
      width: '400px',
    });

    dialogRef.afterClosed().subscribe((resp: PrivateLabelingSetting) => {
      if (resp !== undefined) {
-        this.project.privateLabelingSetting = resp;
+        this.project!.privateLabelingSetting = resp;
      }
    });
  }
@@ -143,7 +141,7 @@ export class OwnedProjectDetailComponent implements OnInit {
              }),
              new Breadcrumb({
                type: BreadcrumbType.PROJECT,
-                name: this.project.name,
+                name: this.project?.name,
                param: { key: ROUTEPARAM, value: projectId },
                routerLink: ['/projects', projectId],
                isZitadel: this.isZitadel,
@@ -198,7 +196,7 @@ export class OwnedProjectDetailComponent implements OnInit {
            .reactivateProject(this.projectId)
            .then(() => {
              this.toast.showInfo('PROJECT.TOAST.REACTIVATED', true);
-              this.project.state = ProjectState.PROJECT_STATE_ACTIVE;
+              this.project!.state = ProjectState.PROJECT_STATE_ACTIVE;
              this.refreshChanges$.emit();
            })
            .catch((error) => {
@@ -222,7 +220,7 @@ export class OwnedProjectDetailComponent implements OnInit {
            .deactivateProject(this.projectId)
            .then(() => {
              this.toast.showInfo('PROJECT.TOAST.DEACTIVATED', true);
-              this.project.state = ProjectState.PROJECT_STATE_INACTIVE;
+              this.project!.state = ProjectState.PROJECT_STATE_INACTIVE;
              this.refreshChanges$.emit();
            })
            .catch((error) => {
@@ -262,23 +260,25 @@ export class OwnedProjectDetailComponent implements OnInit {
  }

  public saveProject(): void {
-    const req = new UpdateProjectRequest();
-    req.setId(this.project.id);
-    req.setName(this.project.name);
-    req.setProjectRoleAssertion(this.project.projectRoleAssertion);
-    req.setProjectRoleCheck(this.project.projectRoleCheck);
-    req.setHasProjectCheck(this.project.hasProjectCheck);
-    req.setPrivateLabelingSetting(this.project.privateLabelingSetting);
+    if (this.project) {
+      const req = new UpdateProjectRequest();
+      req.setId(this.project.id);
+      req.setName(this.project.name);
+      req.setProjectRoleAssertion(this.project.projectRoleAssertion);
+      req.setProjectRoleCheck(this.project.projectRoleCheck);
+      req.setHasProjectCheck(this.project.hasProjectCheck);
+      req.setPrivateLabelingSetting(this.project.privateLabelingSetting);

-    this.mgmtService
-      .updateProject(req)
-      .then(() => {
-        this.toast.showInfo('PROJECT.TOAST.UPDATED', true);
-        this.refreshChanges$.emit();
-      })
-      .catch((error) => {
-        this.toast.showError(error);
-      });
+      this.mgmtService
+        .updateProject(req)
+        .then(() => {
+          this.toast.showInfo('PROJECT.TOAST.UPDATED', true);
+          this.refreshChanges$.emit();
+        })
+        .catch((error) => {
+          this.toast.showError(error);
+        });
+    }
  }

  public navigateBack(): void {
@@ -293,7 +293,7 @@ export class OwnedProjectDetailComponent implements OnInit {
    const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
      data: {
        creationType: CreationType.PROJECT_OWNED,
-        projectId: this.project.id,
+        projectId: this.project?.id,
      },
      width: '400px',
    });
@@ -323,6 +323,8 @@ export class OwnedProjectDetailComponent implements OnInit {
  }

  public showDetail(): void {
-    this.router.navigate(['projects', this.project.id, 'members']);
+    if (this.project) {
+      this.router.navigate(['projects', this.project.id, 'members']);
+    }
  }
 }
@@ -19,7 +19,7 @@
      </button>
    </form>

-    <span *ngIf="org"> {{ 'PROJECT.GRANT.CREATE.FOR_ORG' | translate }} {{ org?.name }} </span>
+    <span *ngIf="org"> {{ 'PROJECT.GRANT.CREATE.FOR_ORG' | translate }} {{ org.name }} </span>
  </ng-container>

  <ng-container *ngIf="currentCreateStep === 2">
@@ -16,7 +16,7 @@ const ROUTEPARAM = 'projectid';
  styleUrls: ['./project-grant-create.component.scss'],
 })
 export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
-  public org!: Org.AsObject;
+  public org?: Org.AsObject;
  public projectId: string = '';
  public grantId: string = '';
  public rolesKeyList: string[] = [];
@@ -77,14 +77,16 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
  }

  public addGrant(): void {
-    this.mgmtService
-      .addProjectGrant(this.org.id, this.projectId, this.rolesKeyList)
-      .then(() => {
-        this.close();
-      })
-      .catch((error) => {
-        this.toast.showError(error);
-      });
+    if (this.org) {
+      this.mgmtService
+        .addProjectGrant(this.org.id, this.projectId, this.rolesKeyList)
+        .then(() => {
+          this.close();
+        })
+        .catch((error) => {
+          this.toast.showError(error);
+        });
+    }
  }

  public selectRoles(roles: Role.AsObject[]): void {
@@ -2,12 +2,12 @@
  <div class="project-grants-wrapper">
    <div class="project-grants">
      <cnsl-refresh-table
-        [loading]="dataSource?.loading$ | async"
+        [loading]="dataSource.loading$ | async"
        *ngIf="projectId"
        (refreshed)="loadGrantsPage()"
        [dataSize]="dataSource.totalResult"
        [selection]="selection"
-        [timestamp]="dataSource?.viewTimestamp"
+        [timestamp]="dataSource.viewTimestamp"
        (refreshed)="getRoleOptions(projectId)"
      >
        <div actions>
@@ -149,7 +149,7 @@
          class="paginator"
          #paginator
          [pageSize]="50"
-          [timestamp]="dataSource?.viewTimestamp"
+          [timestamp]="dataSource.viewTimestamp"
          [pageSizeOptions]="[25, 50, 100, 250]"
          [length]="dataSource.totalResult"
          (page)="loadGrantsPage($event.pageIndex, $event.pageSize)"
@@ -32,12 +32,12 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
  @Input() public projectId: string = '';
  @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
  @ViewChild(MatTable) public table!: MatTable<GrantedProject.AsObject>;
-  public dataSource!: ProjectGrantsDataSource;
+  public dataSource: ProjectGrantsDataSource = new ProjectGrantsDataSource(this.mgmtService, this.toast);
  public selection: SelectionModel<GrantedProject.AsObject> = new SelectionModel<GrantedProject.AsObject>(true, []);
  public memberRoleOptions: Role.AsObject[] = [];
  public displayedColumns: string[] = ['grantedOrgName', 'state', 'creationDate', 'changeDate', 'roleNamesList', 'actions'];

-  ProjectGrantState: any = ProjectGrantState;
+  public ProjectGrantState: any = ProjectGrantState;

  constructor(
    private mgmtService: ManagementService,
@@ -51,7 +51,6 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
  }

  public ngOnInit(): void {
-    this.dataSource = new ProjectGrantsDataSource(this.mgmtService, this.toast);
    this.dataSource.loadGrants(this.projectId, 0, 25, 'asc');
    this.getRoleOptions(this.projectId);
  }