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

@@ -13,14 +13,7 @@ import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
 import appEvents from 'app/core/app_events';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 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;
 const { Input, Switch } = LegacyForms;
 import { NavModel, dateTimeFormat, rangeUtil } from '@grafana/data';
 import { NavModel, dateTimeFormat, rangeUtil } from '@grafana/data';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
@@ -182,10 +175,12 @@ export class ApiKeysPage extends PureComponent<Props, any> {
 
 
     return (
     return (
       <SlideDown in={isAdding}>
       <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}>
           <form className="gf-form-group" onSubmit={this.onAddApiKey}>
+            <h5>Add API Key</h5>
             <div className="gf-form-inline">
             <div className="gf-form-inline">
               <div className="gf-form max-width-21">
               <div className="gf-form max-width-21">
                 <span className="gf-form-label">Key name</span>
                 <span className="gf-form-label">Key name</span>

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}
       in={false}
     >
     >
       <div
       <div
-        className="cta-form"
+        className="gf-form-inline cta-form"
       >
       >
-        <IconButton
+        <button
           className="cta-form__close btn btn-transparent"
           className="cta-form__close btn btn-transparent"
-          name="times"
           onClick={[Function]}
           onClick={[Function]}
+        >
+          <Icon
+            name="times"
           />
           />
-        <h5>
-          Add API Key
-        </h5>
+        </button>
         <form
         <form
           className="gf-form-group"
           className="gf-form-group"
           onSubmit={[Function]}
           onSubmit={[Function]}
         >
         >
+          <h5>
+            Add API Key
+          </h5>
           <div
           <div
             className="gf-form-inline"
             className="gf-form-inline"
           >
           >