From dd19a6fa88c3f1d57144d8af5e276ba101a92d35 Mon Sep 17 00:00:00 2001
From: Jared Snider <jsnider@bitwarden.com>
Date: Mon, 14 Jul 2025 16:22:56 -0400
Subject: [PATCH] PM-23733 - Feature Flags comp - add copy data functionality

---
 apps/web/src/locales/en/messages.json         |  3 +++
 .../feature-flags.component.html              | 18 ++++++++++++----
 .../feature-flags/feature-flags.component.ts  | 21 ++++++++++++++++++-
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index cd19e083008..0c1e7546431 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -2105,6 +2105,9 @@
   "flagValue": {
     "message": "Flag value"
   },
+  "copyData": {
+    "message": "Copy data"
+  },
   "domainRules": {
     "message": "Domain rules"
   },
diff --git a/libs/angular/src/platform/feature-flags/feature-flags.component.html b/libs/angular/src/platform/feature-flags/feature-flags.component.html
index 90696f6d39d..75bd0f11ce3 100644
--- a/libs/angular/src/platform/feature-flags/feature-flags.component.html
+++ b/libs/angular/src/platform/feature-flags/feature-flags.component.html
@@ -3,11 +3,21 @@
     <i class="bwi bwi-spinner bwi-spin tw-text-2xl" aria-hidden="true"></i>
   </div>
 } @else {
-  <button buttonType="primary" type="button" bitButton (click)="refresh()" class="tw-mb-4">
-    {{ "refresh" | i18n }}
-  </button>
+  <div class="tw-flex tw-flex-row tw-gap-3">
+    <button buttonType="primary" type="button" bitButton (click)="refresh()" class="tw-mb-4">
+      {{ "refresh" | i18n }}
+    </button>
 
-  <!-- TODO: add copy data button -->
+    <button
+      buttonType="primary"
+      type="button"
+      bitButton
+      (click)="copyJsonToClipboard()"
+      class="tw-mb-4"
+    >
+      {{ "copyData" | i18n }}
+    </button>
+  </div>
 
   <bit-search
     id="search"
diff --git a/libs/angular/src/platform/feature-flags/feature-flags.component.ts b/libs/angular/src/platform/feature-flags/feature-flags.component.ts
index 70f7036fb44..1112894600f 100644
--- a/libs/angular/src/platform/feature-flags/feature-flags.component.ts
+++ b/libs/angular/src/platform/feature-flags/feature-flags.component.ts
@@ -2,10 +2,12 @@ import { CommonModule } from "@angular/common";
 import { Component, DestroyRef, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormsModule } from "@angular/forms";
-import { map } from "rxjs";
+import { map, tap } from "rxjs";
 
 import { AllowedFeatureFlagTypes } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import {
   ButtonModule,
   FormFieldModule,
@@ -13,6 +15,7 @@ import {
   SearchModule,
   TableDataSource,
   TableModule,
+  ToastService,
 } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
@@ -34,17 +37,25 @@ export class FeatureFlagsComponent implements OnInit {
   loading = true;
   tableDataSource = new TableDataSource<{ key: string; value: AllowedFeatureFlagTypes }>();
 
+  featureStates: { [key: string]: AllowedFeatureFlagTypes } | undefined = undefined;
+
   searchText = "";
 
   constructor(
     private destroyRef: DestroyRef,
     private configService: ConfigService,
+    private platformUtilsService: PlatformUtilsService,
+    private toastService: ToastService,
+    private i18nService: I18nService,
   ) {}
 
   ngOnInit() {
     this.configService.featureStates$
       .pipe(
         takeUntilDestroyed(this.destroyRef),
+        tap((states) => {
+          this.featureStates = states;
+        }),
         map((states) => {
           if (!states) {
             return [];
@@ -71,4 +82,12 @@ export class FeatureFlagsComponent implements OnInit {
   refresh() {
     this.configService.refreshServerConfig();
   }
+
+  copyJsonToClipboard() {
+    this.platformUtilsService.copyToClipboard(JSON.stringify(this.featureStates));
+    this.toastService.showToast({
+      variant: "success",
+      message: this.i18nService.t("copySuccessful"),
+    });
+  }
 }