ApiKeys: Fixes close('X') button layout issue (#27625)

* ApiKeys: Fixes add API key layout

* ApiKeys: snapshot tests updated
This commit is contained in:
Nick Svanidze 2020-09-17 09:36:47 +04:00 committed by GitHub
parent 31e2b7e7c8
commit 5a06ed431c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 18 deletions

View File

@ -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>

View File

@ -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"
>