Add fancy delete button for ApiKeys.

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>
                 );

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>