From 52c9da1b11cc3e2aa9bcb3a9edb1c28a372f124f Mon Sep 17 00:00:00 2001
From: matt abrams <37156449+zuchka@users.noreply.github.com>
Date: Fri, 11 Mar 2022 00:10:27 -1000
Subject: [PATCH] A11y: add copy button to API Key modal (#46387)

* add copy button to API Key modal

* switch to inline button style

* update test snapshot
---
 .../features/api-keys/ApiKeysAddedModal.tsx   | 23 +++++++++++++++----
 .../ApiKeysAddedModal.test.tsx.snap           | 22 ++++++++++++++----
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/public/app/features/api-keys/ApiKeysAddedModal.tsx b/public/app/features/api-keys/ApiKeysAddedModal.tsx
index 89043776102..b345416b588 100644
--- a/public/app/features/api-keys/ApiKeysAddedModal.tsx
+++ b/public/app/features/api-keys/ApiKeysAddedModal.tsx
@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { css } from '@emotion/css';
-import { Alert, Field, Modal, useStyles2 } from '@grafana/ui';
+import { Alert, Field, Modal, useStyles2, Input, Icon, ClipboardButton } from '@grafana/ui';
 import { GrafanaTheme2 } from '@grafana/data';
+import { notifyApp } from '../../core/actions';
+import { dispatch } from '../../store/store';
+import { createSuccessNotification } from '../../core/copy/appNotification';
 
 export interface Props {
   onDismiss: () => void;
@@ -11,12 +14,24 @@ export interface Props {
 
 export function ApiKeysAddedModal({ onDismiss, apiKey, rootPath }: Props): JSX.Element {
   const styles = useStyles2(getStyles);
+  const getClipboardText = useCallback(() => apiKey, [apiKey]);
+  const onClipboardCopy = () => {
+    dispatch(notifyApp(createSuccessNotification('Content copied to clipboard')));
+  };
   return (
     <Modal title="API Key Created" onDismiss={onDismiss} onClickBackdrop={onDismiss} isOpen>
       <Field label="Key">
-        <span className={styles.label}>{apiKey}</span>
+        <Input
+          id="Key"
+          value={apiKey}
+          readOnly
+          addonAfter={
+            <ClipboardButton variant="primary" getText={getClipboardText} onClipboardCopy={onClipboardCopy}>
+              <Icon name="copy" /> Copy
+            </ClipboardButton>
+          }
+        />
       </Field>
-
       <Alert severity="info" title="You will only be able to view this key here once!">
         It is not stored in this form, so be sure to copy it now.
       </Alert>
diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap
index 380a868aad9..2a5670c70f1 100644
--- a/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap
+++ b/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap
@@ -10,11 +10,23 @@ exports[`Render should render component 1`] = `
   <Field
     label="Key"
   >
-    <span
-      className="css-ypoxjz"
-    >
-      api key test
-    </span>
+    <Input
+      addonAfter={
+        <ClipboardButton
+          getText={[Function]}
+          onClipboardCopy={[Function]}
+          variant="primary"
+        >
+          <Icon
+            name="copy"
+          />
+           Copy
+        </ClipboardButton>
+      }
+      id="Key"
+      readOnly={true}
+      value="api key test"
+    />
   </Field>
   <Alert
     severity="info"