[SM-73] fix defects (#4572)

* [SM-431] fix project name overflow

* [SM-432] sort project list alphabetically

* [SM-458] add delete button

* [SM-430] misc UI fixes

* override tw-break-words in table cell

* update copy

* remove unused copy

apps/web/src/locales/en/messages.json

@@ -5674,6 +5674,9 @@
   "selectPlaceholder": {
     "message": "-- Select --"
   },
+  "selectPlaceholder": {
+    "message": "-- Select --"
+  },
   "multiSelectPlaceholder": {
     "message": "-- Type to filter --"
   },
@@ -5724,11 +5727,8 @@
   "secretProjectAssociationDescription" :{
     "message": "Select projects that the secret will be associated with. Only organization users with access to these projects will be able to see the secret."
   },
-  "typeOrSelectProjects" :{
+  "selectProjects": {
-    "message": "Type or select Projects"
+    "message": "Select projects"
-  },
-  "typeOrSelectProject" :{
-    "message": "Type or select Project"
   },
   "project":{
     "message": "Project"

apps/web/src/scss/tailwind.css

@@ -3,3 +3,11 @@
 @tailwind utilities;
 
 @import "../../../../libs/components/src/tw-theme.css";
+
+/** 
+ * tw-break-words does not work with table cells:
+ * https://github.com/tailwindlabs/tailwindcss/issues/835
+ */
+td.tw-break-words {
+  overflow-wrap: anywhere;
+}

bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-delete.component.ts

@@ -29,7 +29,7 @@ export class SecretDeleteDialogComponent {
 
   delete = async () => {
     await this.secretService.delete(this.data.secretIds);
-    this.dialogRef.close();
+    this.dialogRef.close(this.data.secretIds);
     const message =
       this.data.secretIds.length === 1 ? "softDeleteSuccessToast" : "softDeletesSuccessToast";
     this.platformUtilsService.showToast("success", null, this.i18nService.t(message));

bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html

@@ -30,15 +30,16 @@
           <bit-label class="tw-text-md">{{
             "secretProjectAssociationDescription" | i18n
           }}</bit-label>
-          <bit-form-field class="tw-mt-3">
+          <bit-form-field class="tw-mt-3 tw-mb-0">
             <bit-label>{{ "project" | i18n }}</bit-label>
             <select bitInput name="project" formControlName="project">
+              <option value="">{{ "selectPlaceholder" | i18n }}</option>
               <option *ngFor="let f of projects" [value]="f.id" (change)="updateProjectList()">
                 {{ f.name }}
               </option>
             </select>
           </bit-form-field>
-          <small class="form-text text-muted">{{ "typeOrSelectProject" | i18n }}</small>
+          <small class="form-text text-muted tw-mb-6">{{ "selectProjects" | i18n }}</small>
 
           <bit-table>
             <ng-container header>
@@ -49,7 +50,9 @@
             </ng-container>
             <ng-template body *ngIf="selectedProjects != null">
               <tr bitRow *ngFor="let e of selectedProjects">
-                <td bitCell>{{ e.name }}</td>
+                <td bitCell class="tw-overflow-hidden tw-break-words tw-text-sm">
+                  {{ e.name }}
+                </td>
                 <td bitCell class="tw-w-0">
                   <button
                     (click)="removeProjectAssociation(e.id)"
@@ -72,6 +75,15 @@
       <button type="button" bitButton buttonType="secondary" bitFormButton bitDialogClose>
         {{ "cancel" | i18n }}
       </button>
+      <button
+        *ngIf="deleteButtonIsVisible"
+        class="tw-ml-auto"
+        type="button"
+        bitIconButton="bwi-trash"
+        buttonType="danger"
+        bitFormButton
+        (click)="openDeleteSecretDialog()"
+      ></button>
     </div>
   </bit-dialog>
 </form>

bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.ts

@@ -1,10 +1,11 @@
 import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject, OnInit } from "@angular/core";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
-import { Subject, takeUntil } from "rxjs";
+import { lastValueFrom, Subject, takeUntil } from "rxjs";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { DialogService } from "@bitwarden/components";
 
 import { ProjectListView } from "../../models/view/project-list.view";
 import { SecretProjectView } from "../../models/view/secret-project.view";
@@ -12,6 +13,8 @@ import { SecretView } from "../../models/view/secret.view";
 import { ProjectService } from "../../projects/project.service";
 import { SecretService } from "../secret.service";
 
+import { SecretDeleteDialogComponent, SecretDeleteOperation } from "./secret-delete.component";
+
 export enum OperationType {
   Add,
   Edit,
@@ -47,11 +50,14 @@ export class SecretDialogComponent implements OnInit {
     private secretService: SecretService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private projectService: ProjectService
+    private projectService: ProjectService,
+    private dialogService: DialogService
   ) {}
 
   async ngOnInit() {
-    this.projects = await this.projectService.getProjects(this.data.organizationId);
+    this.projects = await this.projectService
+      .getProjects(this.data.organizationId)
+      .then((projects) => projects.sort((a, b) => a.name.localeCompare(b.name)));
 
     if (this.data.operation === OperationType.Edit && this.data.secretId) {
       await this.loadData();
@@ -135,6 +141,26 @@ export class SecretDialogComponent implements OnInit {
     this.dialogRef.close();
   };
 
+  get deleteButtonIsVisible(): boolean {
+    return this.data.operation === OperationType.Edit;
+  }
+
+  protected openDeleteSecretDialog() {
+    const dialogRef = this.dialogService.open<unknown, SecretDeleteOperation>(
+      SecretDeleteDialogComponent,
+      {
+        data: {
+          secretIds: [this.data.secretId],
+        },
+      }
+    );
+
+    // If the secret is deleted, chain close this dialog after the delete dialog
+    lastValueFrom(dialogRef.closed).then(
+      (closeData) => closeData !== undefined && this.dialogRef.close()
+    );
+  }
+
   private async createSecret(secretView: SecretView) {
     await this.secretService.create(this.data.organizationId, secretView);
     this.platformUtilsService.showToast("success", null, this.i18nService.t("secretCreated"));

libs/components/src/dialog/dialog.service.ts

@@ -33,7 +33,8 @@ export class DialogService extends Dialog implements OnDestroy {
     "tw-bg-black",
     "tw-bg-opacity-30",
     "tw-inset-0",
-    "tw-z-40",
+    // CDK dialog panels have a default z-index of 1000. Matching this allows us to easily stack dialogs.
+    "tw-z-[1000]",
   ];
 
   constructor(