Add a copy button to browser ext about dialog (#13465)

Add a copy button to browser extension about dialog for quickly copying the version number now that we have 3 different values we'd like to collect.

apps/browser/src/_locales/en/messages.json

@@ -176,6 +176,10 @@
   "copyNotes": {
     "message": "Copy notes"
   },
+  "copy": {
+    "message": "Copy",
+    "description": "Copy to clipboard"
+  },
   "fill":{
     "message": "Fill",
     "description": "This string is used on the vault page to indicate autofilling. Horizontal space is limited in the interface here so try and keep translations as concise as possible."

apps/browser/src/tools/popup/settings/about-dialog/about-dialog.component.html

@@ -5,8 +5,10 @@
   <div bitDialogTitle>Bitwarden</div>
   <div bitDialogContent>
     <p>&copy; Bitwarden Inc. 2015-{{ year }}</p>
-    <p class="user-select">{{ "version" | i18n }}: {{ version$ | async }}</p>
+
-    <p class="user-select">SDK: {{ sdkVersion$ | async }}</p>
+    <div #version class="user-select">
+      <p>{{ "version" | i18n }}: {{ version$ | async }}</p>
+      <p>SDK: {{ sdkVersion$ | async }}</p>
       <ng-container *ngIf="data$ | async as data">
         <p *ngIf="data.isCloud">
           {{ "serverVersion" | i18n }}: {{ data.serverConfig?.version }}
@@ -17,7 +19,7 @@
 
         <ng-container *ngIf="!data.isCloud">
           <ng-container *ngIf="data.serverConfig.server">
-          <p class="user-select">
+            <p>
               {{ "serverVersion" | i18n }} <small>({{ "thirdParty" | i18n }})</small>:
               {{ data.serverConfig?.version }}
               <span *ngIf="!data.serverConfig.isValid()">
@@ -29,7 +31,7 @@
             </div>
           </ng-container>
 
-        <p class="user-select" *ngIf="!data.serverConfig.server">
+          <p *ngIf="!data.serverConfig.server">
             {{ "serverVersion" | i18n }} <small>({{ "selfHostedServer" | i18n }})</small>:
             {{ data.serverConfig?.version }}
             <span *ngIf="!data.serverConfig.isValid()">
@@ -39,9 +41,13 @@
         </ng-container>
       </ng-container>
     </div>
+  </div>
   <div bitDialogFooter>
     <button bitButton bitDialogClose buttonType="primary" type="button">
       {{ "close" | i18n }}
     </button>
+    <button bitButton type="button" (click)="copyVersion()">
+      {{ "copy" | i18n }}
+    </button>
   </div>
 </bit-simple-dialog>

apps/browser/src/tools/popup/settings/about-dialog/about-dialog.component.ts

@@ -1,20 +1,24 @@
+import { DialogRef } from "@angular/cdk/dialog";
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, ElementRef, ViewChild } from "@angular/core";
 import { Observable, combineLatest, defer, map } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SdkService } from "@bitwarden/common/platform/abstractions/sdk/sdk.service";
-import { ButtonModule, DialogModule } from "@bitwarden/components";
+import { ButtonModule, DialogModule, ToastService, TypographyModule } from "@bitwarden/components";
 
 @Component({
   templateUrl: "about-dialog.component.html",
   standalone: true,
-  imports: [CommonModule, JslibModule, DialogModule, ButtonModule],
+  imports: [CommonModule, JslibModule, DialogModule, ButtonModule, TypographyModule],
 })
 export class AboutDialogComponent {
+  @ViewChild("version") protected version!: ElementRef;
+
   protected year = new Date().getFullYear();
   protected version$: Observable<string>;
 
@@ -26,11 +30,23 @@ export class AboutDialogComponent {
   protected sdkVersion$ = this.sdkService.version$;
 
   constructor(
+    private dialogRef: DialogRef,
     private configService: ConfigService,
     private environmentService: EnvironmentService,
     private platformUtilsService: PlatformUtilsService,
+    private toastService: ToastService,
+    private i18nService: I18nService,
     private sdkService: SdkService,
   ) {
     this.version$ = defer(() => this.platformUtilsService.getApplicationVersion());
   }
+
+  protected copyVersion() {
+    this.platformUtilsService.copyToClipboard(this.version.nativeElement.innerText);
+    this.toastService.showToast({
+      message: this.i18nService.t("copySuccessful"),
+      variant: "success",
+    });
+    this.dialogRef.close();
+  }
 }