Add a copy button to browser ext about dialog (bitwarden#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.

Author: Hinton

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,43 +5,49 @@
   <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>
-    <ng-container *ngIf="data$ | async as data">
-      <p *ngIf="data.isCloud">
-        {{ "serverVersion" | i18n }}: {{ data.serverConfig?.version }}
-        <span *ngIf="!data.serverConfig.isValid()">
-          ({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
-        </span>
-      </p>
 
-      <ng-container *ngIf="!data.isCloud">
-        <ng-container *ngIf="data.serverConfig.server">
-          <p class="user-select">
-            {{ "serverVersion" | i18n }} <small>({{ "thirdParty" | i18n }})</small>:
+    <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 }}
+          <span *ngIf="!data.serverConfig.isValid()">
+            ({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
+          </span>
+        </p>
+
+        <ng-container *ngIf="!data.isCloud">
+          <ng-container *ngIf="data.serverConfig.server">
+            <p>
+              {{ "serverVersion" | i18n }} <small>({{ "thirdParty" | i18n }})</small>:
+              {{ data.serverConfig?.version }}
+              <span *ngIf="!data.serverConfig.isValid()">
+                ({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
+              </span>
+            </p>
+            <div>
+              <small>{{ "thirdPartyServerMessage" | i18n: data.serverConfig.server?.name }}</small>
+            </div>
+          </ng-container>
+
+          <p *ngIf="!data.serverConfig.server">
+            {{ "serverVersion" | i18n }} <small>({{ "selfHostedServer" | i18n }})</small>:
             {{ data.serverConfig?.version }}
             <span *ngIf="!data.serverConfig.isValid()">
               ({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
             </span>
           </p>
-          <div>
-            <small>{{ "thirdPartyServerMessage" | i18n: data.serverConfig.server?.name }}</small>
-          </div>
         </ng-container>
-
-        <p class="user-select" *ngIf="!data.serverConfig.server">
-          {{ "serverVersion" | i18n }} <small>({{ "selfHostedServer" | i18n }})</small>:
-          {{ data.serverConfig?.version }}
-          <span *ngIf="!data.serverConfig.isValid()">
-            ({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
-          </span>
-        </p>
       </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();
+  }
 }