Adding UUID under the secret name on secrets list (#5773)

* adding UUID under the secret name on secrets list

* thomas' suggested changes

* Adding small attribute to bitbutton

* Copying a secret will work on all pages now that show secrets

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

@@ -717,6 +717,9 @@
   "yourVaultIsLocked": {
     "message": "Your vault is locked. Verify your master password to continue."
   },
+  "uuid":{
+    "message" : "UUID"
+  },
   "unlock": {
     "message": "Unlock"
   },
@@ -948,6 +951,9 @@
   "copyVerificationCode": {
     "message": "Copy verification code"
   },
+  "copyUuid": {
+    "message": "Copy UUID"
+  },
   "warning": {
     "message": "Warning"
   },

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

@@ -63,6 +63,7 @@
         (editSecretEvent)="openEditSecret($event)"
         (copySecretNameEvent)="copySecretName($event)"
         (copySecretValueEvent)="copySecretValue($event)"
+        (copySecretUuidEvent)="copySecretUuid($event)"
         [secrets]="view.latestSecrets"
       ></sm-secrets-list>
       <div *ngIf="view.allSecrets.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">

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

@@ -290,6 +290,10 @@ export class OverviewComponent implements OnInit, OnDestroy {
     );
   }
 
+  copySecretUuid(id: string) {
+    SecretsListComponent.copySecretUuid(id, this.platformUtilsService, this.i18nService);
+  }
+
   protected hideOnboarding() {
     this.showOnboarding = false;
     this.saveCompletedTasks(this.organizationId, {

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

@@ -16,6 +16,7 @@
       (editSecretEvent)="openEditSecret($event)"
       (copySecretNameEvent)="copySecretName($event)"
       (copySecretValueEvent)="copySecretValue($event)"
+      (copySecretUuidEvent)="copySecretUuid($event)"
       [secrets]="projectSecrets.secrets"
     ></sm-secrets-list>
   </ng-container>

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

@@ -109,4 +109,8 @@ export class ProjectSecretsComponent {
       this.secretService
     );
   }
+
+  copySecretUuid(id: string) {
+    SecretsListComponent.copySecretUuid(id, this.platformUtilsService, this.i18nService);
+  }
 }

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

@@ -12,6 +12,7 @@
   (editSecretEvent)="openEditSecret($event)"
   (copySecretNameEvent)="copySecretName($event)"
   (copySecretValueEvent)="copySecretValue($event)"
+  (copySecretUuidEvent)="copySecretUuid($event)"
   [secrets]="secrets$ | async"
   [search]="search"
 ></sm-secrets-list>

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

@@ -96,4 +96,8 @@ export class SecretsComponent implements OnInit {
       this.secretService
     );
   }
+
+  copySecretUuid(id: string) {
+    SecretsListComponent.copySecretUuid(id, this.platformUtilsService, this.i18nService);
+  }
 }

bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html

@@ -64,9 +64,30 @@
       <td bitCell>
         <div class="tw-flex tw-items-center tw-gap-4 tw-break-all">
           <i class="bwi bwi-key tw-text-muted" aria-hidden="true"></i>
-          <button type="button" bitLink (click)="editSecretEvent.emit(secret.id)" *ngIf="!trash">
+          <div>
+            <div>
+              <button
+                type="button"
+                bitLink
+                (click)="editSecretEvent.emit(secret.id)"
+                *ngIf="!trash"
+              >
                 {{ secret.name }}
               </button>
+            </div>
+            <div class="tw-text-sm tw-text-muted">
+              {{ secret.id }}
+              <button
+                type="button"
+                bitIconButton="bwi-clone"
+                buttonType="main"
+                size="small"
+                [title]="'copyUuid' | i18n"
+                [attr.aria-label]="'copyUuid' | i18n"
+                (click)="copySecretUuidEvent.emit(secret.id)"
+              ></button>
+            </div>
+          </div>
           <div *ngIf="trash">{{ secret.name }}</div>
         </div>
       </td>

bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.ts

@@ -38,6 +38,7 @@ export class SecretsListComponent implements OnDestroy {
   @Output() editSecretEvent = new EventEmitter<string>();
   @Output() copySecretNameEvent = new EventEmitter<string>();
   @Output() copySecretValueEvent = new EventEmitter<string>();
+  @Output() copySecretUuidEvent = new EventEmitter<string>();
   @Output() onSecretCheckedEvent = new EventEmitter<string[]>();
   @Output() deleteSecretsEvent = new EventEmitter<SecretListView[]>();
   @Output() newSecretEvent = new EventEmitter();
@@ -149,6 +150,19 @@ export class SecretsListComponent implements OnDestroy {
     });
   }
 
+  static copySecretUuid(
+    id: string,
+    platformUtilsService: PlatformUtilsService,
+    i18nService: I18nService
+  ) {
+    platformUtilsService.copyToClipboard(id);
+    platformUtilsService.showToast(
+      "success",
+      null,
+      i18nService.t("valueCopied", i18nService.t("uuid"))
+    );
+  }
+
   /**
    * TODO: Remove in favor of updating `PlatformUtilsService.copyToClipboard`
    */