From b12170010371a9c3e642ba7dae04357f3894a870 Mon Sep 17 00:00:00 2001
From: Carlos Mondragon <cadragon@gmail.com>
Date: Wed, 10 Oct 2018 17:22:48 -0700
Subject: [PATCH] Add fancy delete button for ApiKeys.

---
 public/app/features/api-keys/ApiKeysPage.tsx  |  5 +-
 .../__snapshots__/ApiKeysPage.test.tsx.snap   | 55 +++++--------------
 2 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index d6c83c2a566..bd22d850f6d 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -13,6 +13,7 @@ import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
+import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
 
 export interface Props {
   navModel: NavModel;
@@ -219,9 +220,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
                     <td>{key.name}</td>
                     <td>{key.role}</td>
                     <td>
-                      <a onClick={() => this.onDeleteApiKey(key)} className="btn btn-danger btn-mini">
-                        <i className="fa fa-remove" />
-                      </a>
+                      <DeleteButton onConfirmDelete={() => this.onDeleteApiKey(key)} />
                     </td>
                   </tr>
                 );
diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
index fcd22a14479..6ea7fe57124 100644
--- a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
+++ b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
@@ -174,14 +174,9 @@ exports[`Render should render API keys table if there are any keys 1`] = `
             Viewer
           </td>
           <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
+            <DeleteButton
+              onConfirmDelete={[Function]}
+            />
           </td>
         </tr>
         <tr
@@ -194,14 +189,9 @@ exports[`Render should render API keys table if there are any keys 1`] = `
             Viewer
           </td>
           <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
+            <DeleteButton
+              onConfirmDelete={[Function]}
+            />
           </td>
         </tr>
         <tr
@@ -214,14 +204,9 @@ exports[`Render should render API keys table if there are any keys 1`] = `
             Viewer
           </td>
           <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
+            <DeleteButton
+              onConfirmDelete={[Function]}
+            />
           </td>
         </tr>
         <tr
@@ -234,14 +219,9 @@ exports[`Render should render API keys table if there are any keys 1`] = `
             Viewer
           </td>
           <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
+            <DeleteButton
+              onConfirmDelete={[Function]}
+            />
           </td>
         </tr>
         <tr
@@ -254,14 +234,9 @@ exports[`Render should render API keys table if there are any keys 1`] = `
             Viewer
           </td>
           <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
+            <DeleteButton
+              onConfirmDelete={[Function]}
+            />
           </td>
         </tr>
       </tbody>