diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 6971fbcc9bd..e3c25c55e99 100644 --- a/apps/web/src/locales/en/messages.json +++ b/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" :{ - "message": "Type or select Projects" - }, - "typeOrSelectProject" :{ - "message": "Type or select Project" + "selectProjects": { + "message": "Select projects" }, "project":{ "message": "Project" diff --git a/apps/web/src/scss/tailwind.css b/apps/web/src/scss/tailwind.css index e58785aecb0..41b79f8191f 100644 --- a/apps/web/src/scss/tailwind.css +++ b/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; +} diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-delete.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-delete.component.ts index 2056718781e..4bdb7cd9118 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-delete.component.ts +++ b/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)); diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html index 6f53b1a15c8..cba1d376ed0 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html +++ b/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html @@ -30,15 +30,16 @@ {{ "secretProjectAssociationDescription" | i18n }} - + {{ "project" | i18n }} - {{ "typeOrSelectProject" | i18n }} + {{ "selectProjects" | i18n }} @@ -49,7 +50,9 @@ - {{ e.name }} + + {{ e.name }} + + diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.ts index 938987b54dc..7a053255ad3 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.ts +++ b/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( + 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")); diff --git a/libs/components/src/dialog/dialog.service.ts b/libs/components/src/dialog/dialog.service.ts index b65390c7e3d..fdde775f66d 100644 --- a/libs/components/src/dialog/dialog.service.ts +++ b/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(