From 5a06ed431cc3bd97759ed514589fbea4ba236777 Mon Sep 17 00:00:00 2001
From: Nick Svanidze <svanidze.nikoloz@gmail.com>
Date: Thu, 17 Sep 2020 09:36:47 +0400
Subject: [PATCH] ApiKeys: Fixes close('X') button layout issue (#27625)

* ApiKeys: Fixes add API key layout

* ApiKeys: snapshot tests updated
---
 public/app/features/api-keys/ApiKeysPage.tsx    | 17 ++++++-----------
 .../__snapshots__/ApiKeysPage.test.tsx.snap     | 17 ++++++++++-------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index faa954b1754..9ee316b8dc0 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -13,14 +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,
-  EventsWithValidation,
-  InlineFormLabel,
-  LegacyForms,
-  ValidationEvents,
-  IconButton,
-} from '@grafana/ui';
+import { DeleteButton, EventsWithValidation, InlineFormLabel, LegacyForms, ValidationEvents, Icon } from '@grafana/ui';
 const { Input, Switch } = LegacyForms;
 import { NavModel, dateTimeFormat, rangeUtil } from '@grafana/data';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
@@ -182,10 +175,12 @@ export class ApiKeysPage extends PureComponent<Props, any> {
 
     return (
       <SlideDown in={isAdding}>
-        <div className="cta-form">
-          <IconButton name="times" className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding} />
-          <h5>Add API Key</h5>
+        <div className="gf-form-inline cta-form">
+          <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
+            <Icon name="times" />
+          </button>
           <form className="gf-form-group" onSubmit={this.onAddApiKey}>
+            <h5>Add API Key</h5>
             <div className="gf-form-inline">
               <div className="gf-form max-width-21">
                 <span className="gf-form-label">Key name</span>
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 5893486b92a..6b83de8b8cc 100644
--- a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
+++ b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
@@ -47,20 +47,23 @@ exports[`Render should render CTA if there are no API keys 1`] = `
       in={false}
     >
       <div
-        className="cta-form"
+        className="gf-form-inline cta-form"
       >
-        <IconButton
+        <button
           className="cta-form__close btn btn-transparent"
-          name="times"
           onClick={[Function]}
-        />
-        <h5>
-          Add API Key
-        </h5>
+        >
+          <Icon
+            name="times"
+          />
+        </button>
         <form
           className="gf-form-group"
           onSubmit={[Function]}
         >
+          <h5>
+            Add API Key
+          </h5>
           <div
             className="gf-form-inline"
           >