Add edit project button to project page (#4982)

* Add edit project button to project page

* Ensure write permission

* Refresh secret list if project is edited

bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project-secrets.component.ts

@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { combineLatestWith, Observable, startWith, switchMap } from "rxjs";
+import { combineLatestWith, filter, Observable, startWith, switchMap } from "rxjs";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
@@ -18,6 +18,7 @@ import {
 } from "../../secrets/dialog/secret-dialog.component";
 import { SecretService } from "../../secrets/secret.service";
 import { SecretsListComponent } from "../../shared/secrets-list.component";
+import { ProjectService } from "../project.service";
 
 @Component({
   selector: "sm-project-secrets",
@@ -31,6 +32,7 @@ export class ProjectSecretsComponent {
 
   constructor(
     private route: ActivatedRoute,
+    private projectService: ProjectService,
     private secretService: SecretService,
     private dialogService: DialogService,
     private platformUtilsService: PlatformUtilsService,
@@ -38,9 +40,15 @@ export class ProjectSecretsComponent {
   ) {}
 
   ngOnInit() {
+    // Refresh list if project is edited
+    const currentProjectEdited = this.projectService.project$.pipe(
+      filter((p) => p?.id === this.projectId),
+      startWith(null)
+    );
+
     this.secrets$ = this.secretService.secret$.pipe(
       startWith(null),
-      combineLatestWith(this.route.params),
+      combineLatestWith(this.route.params, currentProjectEdited),
       switchMap(async ([_, params]) => {
         this.organizationId = params.organizationId;
         this.projectId = params.projectId;

bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project.component.html

@@ -10,5 +10,15 @@
     </ng-container>
   </bit-tab-nav-bar>
   <sm-new-menu></sm-new-menu>
+  <button
+    type="button"
+    slot="secondary"
+    bitButton
+    buttonType="secondary"
+    (click)="openEditDialog()"
+    *ngIf="project.write"
+  >
+    {{ "editProject" | i18n }}
+  </button>
 </sm-header>
 <router-outlet></router-outlet>

bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project.component.ts

@@ -1,24 +1,66 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { Observable, switchMap } from "rxjs";
+import { combineLatest, filter, Observable, startWith, Subject, switchMap, takeUntil } from "rxjs";
+
+import { DialogService } from "@bitwarden/components";
 
 import { ProjectPermissionDetailsView } from "../../models/view/project.view";
+import {
+  OperationType,
+  ProjectDialogComponent,
+  ProjectOperation,
+} from "../dialog/project-dialog.component";
 import { ProjectService } from "../project.service";
 
 @Component({
   selector: "sm-project",
   templateUrl: "./project.component.html",
 })
-export class ProjectComponent implements OnInit {
-  project$: Observable<ProjectPermissionDetailsView>;
+export class ProjectComponent implements OnInit, OnDestroy {
+  protected project$: Observable<ProjectPermissionDetailsView>;
 
-  constructor(private route: ActivatedRoute, private projectService: ProjectService) {}
+  private organizationId: string;
+  private projectId: string;
+
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private route: ActivatedRoute,
+    private projectService: ProjectService,
+    private dialogService: DialogService
+  ) {}
 
   ngOnInit(): void {
-    this.project$ = this.route.params.pipe(
-      switchMap((params) => {
+    // Update project if it is edited
+    const currentProjectEdited = this.projectService.project$.pipe(
+      filter((p) => p?.id === this.projectId),
+      startWith(null)
+    );
+
+    this.project$ = combineLatest([this.route.params, currentProjectEdited]).pipe(
+      switchMap(([params, _]) => {
         return this.projectService.getByProjectId(params.projectId);
       })
     );
+
+    this.route.params.pipe(takeUntil(this.destroy$)).subscribe((params) => {
+      this.organizationId = params.organizationId;
+      this.projectId = params.projectId;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  async openEditDialog() {
+    this.dialogService.open<unknown, ProjectOperation>(ProjectDialogComponent, {
+      data: {
+        organizationId: this.organizationId,
+        operation: OperationType.Edit,
+        projectId: this.projectId,
+      },
+    });
   }
 }