feat(console): project privatelabelling, catch query param to set org context (#2277)

* feat: privatelabeling setting, query param for context * lint * Update console/src/assets/i18n/de.json Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com> * Update console/src/assets/i18n/de.json Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com> * Update console/src/assets/i18n/en.json Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com> * Update console/src/assets/i18n/en.json Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com> Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
2025-12-13 16:42:34 +00:00 · 2021-08-31 08:25:24 +02:00
parent e8da0e3f4f
commit c884a11f1b
16 changed files with 300 additions and 59 deletions
--- a/console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html
+++ b/console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html
@@ -34,7 +34,7 @@
            <div class="meta-row">
                <span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
                <span *ngIf="project && project.state !== undefined" class="state"
-                    [ngClass]="{'active': project.state === ProjectState.PROJECTSTATE_ACTIVE, 'inactive': project.state === ProjectState.PROJECTSTATE_INACTIVE}">{{'PROJECT.STATE.'+project.state | translate}}</span>
+                    [ngClass]="{'active': project.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE, 'inactive': project.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE}">{{'PROJECT.STATE.'+project.state | translate}}</span>
            </div>
        </div>

--- a/console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.ts
+++ b/console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.ts
@@ -9,7 +9,7 @@ import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-m
 import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { UserGrantContext } from 'src/app/modules/user-grants/user-grants-datasource';
 import { Member } from 'src/app/proto/generated/zitadel/member_pb';
-import { GrantedProject, ProjectState } from 'src/app/proto/generated/zitadel/project_pb';
+import { GrantedProject, ProjectGrantState } from 'src/app/proto/generated/zitadel/project_pb';
 import { User } from 'src/app/proto/generated/zitadel/user_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -24,7 +24,7 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
  public grantId: string = '';
  public project!: GrantedProject.AsObject;

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

  private subscription?: Subscription;
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
@@ -53,6 +53,14 @@
        </div>

        <ng-container *ngIf="project">
+            <div class="privatelabel-info">
+              <h2 class="setting-title">{{'PROJECT.PAGES.PRIVATELABEL.TITLE' | translate}}</h2>
+              <p class="setting-desc">
+                <span>{{'PROJECT.PAGES.PRIVATELABEL.'+project.privateLabelingSetting+'.TITLE' | translate}}</span>
+                <button (click)="openPrivateLabelingDialog()" mat-icon-button><i class="las la-edit"></i></button>
+              </p>
+            </div>
+
            <ng-template appHasRole [appHasRole]="['project.app.read:' + project.id, 'project.app.read']">
                <app-application-grid *ngIf="grid" [disabled]="isZitadel" (changeView)="grid = false"
                    [projectId]="projectId"></app-application-grid>
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss
@@ -1,7 +1,7 @@
 .head {
  display: flex;
  align-items: center;
-  border-bottom: 1px solid #ffffff20;
+  border-bottom: 1px solid #81868a30;
  flex-wrap: wrap;
  margin-bottom: 1rem;

@@ -41,6 +41,30 @@
  }
 }

+.privatelabel-info {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid #81868a30;
+  padding: .5rem 0 1rem 0;
+
+  .setting-title {
+    font-size: 14px;
+    color: var(--grey);
+    text-transform: uppercase;
+    margin: 0;
+  }
+
+  .setting-desc {
+    margin: 0;
+    display: flex;
+    align-items: center;
+
+    .icon-button {
+      margin-left: .5rem;
+    }
+  }
+}
+
 .line {
  .formfield {
    flex: 1;
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.ts
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.ts
@@ -8,12 +8,15 @@ import { BehaviorSubject, from, Observable, of, Subscription } from 'rxjs';
 import { catchError, finalize, map } 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 { UserGrantContext } from 'src/app/modules/user-grants/user-grants-datasource';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import { App } from 'src/app/proto/generated/zitadel/app_pb';
 import { ListAppsResponse, UpdateProjectRequest } from 'src/app/proto/generated/zitadel/management_pb';
 import { Member } from 'src/app/proto/generated/zitadel/member_pb';
-import { Project, ProjectState } from 'src/app/proto/generated/zitadel/project_pb';
+import { PrivateLabelingSetting, Project, ProjectState } from 'src/app/proto/generated/zitadel/project_pb';
 import { User } from 'src/app/proto/generated/zitadel/user_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -70,6 +73,22 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
    this.subscription?.unsubscribe();
  }

+  public openPrivateLabelingDialog(): void {
+    const dialogRef = this.dialog.open(ProjectPrivateLabelingDialogComponent, {
+      data: {
+        setting: this.project.privateLabelingSetting,
+      },
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe((resp: PrivateLabelingSetting) => {
+      if (resp !== undefined) {
+        this.project.privateLabelingSetting = resp;
+        this.saveProject();
+      }
+    });
+  }
+
  private async getData({ id }: Params): Promise<void> {
    this.projectId = id;

@@ -186,6 +205,7 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
    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);
--- a/console/src/app/pages/projects/owned-projects/owned-projects.module.ts
+++ b/console/src/app/pages/projects/owned-projects/owned-projects.module.ts
@@ -24,45 +24,49 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';

+import {
+  ProjectPrivateLabelingDialogModule,
+} from '../../../modules/project-private-labeling-dialog/project-private-labeling-dialog.module';
 import { OwnedProjectGridComponent } from './owned-project-list/owned-project-grid/owned-project-grid.component';
 import { OwnedProjectListComponent } from './owned-project-list/owned-project-list.component';
 import { OwnedProjectsRoutingModule } from './owned-projects-routing.module';
 import { OwnedProjectsComponent } from './owned-projects.component';

@NgModule({
-    declarations: [
-        OwnedProjectsComponent,
-        OwnedProjectListComponent,
-        OwnedProjectGridComponent,
-    ],
-    imports: [
-        CommonModule,
-        OwnedProjectsRoutingModule,
-        UserGrantsModule,
-        FormsModule,
-        ReactiveFormsModule,
-        TranslateModule,
-        AvatarModule,
-        ReactiveFormsModule,
-        HasRoleModule,
-        MatTableModule,
-        PaginatorModule,
-        InputModule,
-        MatChipsModule,
-        MatIconModule,
-        WarnDialogModule,
-        MatButtonModule,
-        MatProgressSpinnerModule,
-        MatProgressBarModule,
-        MatCheckboxModule,
-        CardModule,
-        MatTooltipModule,
-        MatSortModule,
-        HasRolePipeModule,
-        TimestampToDatePipeModule,
-        LocalizedDatePipeModule,
-        SharedModule,
-        RefreshTableModule,
-    ],
+  declarations: [
+    OwnedProjectsComponent,
+    OwnedProjectListComponent,
+    OwnedProjectGridComponent,
+  ],
+  imports: [
+    CommonModule,
+    OwnedProjectsRoutingModule,
+    UserGrantsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    AvatarModule,
+    ReactiveFormsModule,
+    HasRoleModule,
+    MatTableModule,
+    PaginatorModule,
+    ProjectPrivateLabelingDialogModule,
+    InputModule,
+    MatChipsModule,
+    MatIconModule,
+    WarnDialogModule,
+    MatButtonModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatCheckboxModule,
+    CardModule,
+    MatTooltipModule,
+    MatSortModule,
+    HasRolePipeModule,
+    TimestampToDatePipeModule,
+    LocalizedDatePipeModule,
+    SharedModule,
+    RefreshTableModule,
+  ],
 })
 export class OwnedProjectsModule { }