From 1df3428f7d85263dfb3d78fd7c1f18e2c9a1329a Mon Sep 17 00:00:00 2001
From: Sam Winslow <sammywinslow@gmail.com>
Date: Wed, 12 May 2021 16:08:52 -0400
Subject: [PATCH] Wrap feature flag key name in CopyToClipboardInline (#4322)

---
 .../scenes/experimentation/FeatureFlags.tsx   | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/src/scenes/experimentation/FeatureFlags.tsx b/frontend/src/scenes/experimentation/FeatureFlags.tsx
index 94a055baf6e..08c96497b96 100644
--- a/frontend/src/scenes/experimentation/FeatureFlags.tsx
+++ b/frontend/src/scenes/experimentation/FeatureFlags.tsx
@@ -11,6 +11,7 @@ import { createdAtColumn, createdByColumn } from 'lib/components/Table'
 import { FeatureFlagGroupType, FeatureFlagType } from '~/types'
 import { router } from 'kea-router'
 import { LinkButton } from 'lib/components/LinkButton'
+import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
 
 export function FeatureFlags(): JSX.Element {
     const { featureFlags, featureFlagsLoading } = useValues(featureFlagsLogic)
@@ -27,14 +28,18 @@ export function FeatureFlags(): JSX.Element {
             sorter: (a: FeatureFlagType, b: FeatureFlagType) => ('' + a.key).localeCompare(b.key),
             render: function Render(_: string, featureFlag: FeatureFlagType) {
                 return (
-                    <>
-                        {!featureFlag.active && (
-                            <Tooltip title="This feature flag is disabled.">
-                                <DisconnectOutlined style={{ marginRight: 4 }} />
-                            </Tooltip>
-                        )}
-                        {featureFlag.key}
-                    </>
+                    <div onClick={(e) => e.stopPropagation()}>
+                        <CopyToClipboardInline iconPosition="start" explicitValue={featureFlag.key}>
+                            <>
+                                {!featureFlag.active && (
+                                    <Tooltip title="This feature flag is disabled.">
+                                        <DisconnectOutlined style={{ marginRight: 4 }} />
+                                    </Tooltip>
+                                )}
+                                {featureFlag.key}
+                            </>
+                        </CopyToClipboardInline>
+                    </div>
                 )
             },
         },