Buttons: replace usage of .btn classnames (#33226)

* refactor(loginpage): migrate custom button styles to use Button component

* refactor(certificationkey): prefer grafana-ui form elements over html elements and classnames

* refactor(axisselector): prefer grafana-ui Button component over html button element

* refactor(input-datasource): replace use of btn class with grafana-ui components

* chore(grafana-ui): delete deprecated ToggleButtonGroup component

* refactor: replace btn and cta-form__close class usage with IconButton

* chore(closebutton): post master merge use v2 theme

* refactor(permissionlist): remove usage of .btn classname

* Wip

* docs(styling): update styling and theme docs import paths

* refactor(alerting): remote btn classnames from TestRuleResult

* refactor(apikeys): prefer grafana-ui Button components over btn classNames

* refactor(folders): prefer grafana-ui Button components over btn classNames

* refactor(teams): prefer grafana-ui Button components over btn classNames

* refactor(datasources): prefer grafana-ui Button components over btn classNames

* refactor: prefer grafana-ui Button components over btn classNames

* Minor style tweak to service buttons

* test: update snapshots related to button changes

* chore(input-datasource): remove unused import declaration

* refactor(loginservicebuttons): rename theme.palette to theme.colors

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Jack Westbrook
2021-04-23 10:06:42 +02:00
committed by GitHub
parent 6034bf37c6
commit c809d63065
36 changed files with 335 additions and 494 deletions

View File

@@ -5,8 +5,7 @@ import React, { PureComponent } from 'react';
import { InputDatasource, describeDataFrame } from './InputDatasource';
import { InputQuery, InputOptions } from './types';
import { InlineFormLabel, LegacyForms, TableInputCSV, Icon } from '@grafana/ui';
const { Select } = LegacyForms;
import { Select, TableInputCSV, LinkButton, Icon, InlineField } from '@grafana/ui';
import { DataFrame, toCSV, SelectableValue, MutableDataFrame, QueryEditorProps } from '@grafana/data';
import { dataFrameToCSV } from './utils';
@@ -68,21 +67,19 @@ export class InputQueryEditor extends PureComponent<Props, State> {
const selected = query.data ? options[0] : options[1];
return (
<div>
<div className="gf-form">
<InlineFormLabel width={4}>Data</InlineFormLabel>
<Select width={6} options={options} value={selected} onChange={this.onSourceChange} />
<div className="btn btn-link">
<InlineField label="Data" labelWidth={8}>
<>
<Select width={20} options={options} value={selected} onChange={this.onSourceChange} />
{query.data ? (
describeDataFrame(query.data)
<div style={{ alignSelf: 'center' }}>{describeDataFrame(query.data)}</div>
) : (
<a href={`datasources/edit/${id}/`}>
<LinkButton variant="link" href={`datasources/edit/${id}/`}>
{name}: {describeDataFrame(datasource.data)} &nbsp;&nbsp;
<Icon name="pen" />
</a>
</LinkButton>
)}
</div>
</div>
</>
</InlineField>
{query.data && <TableInputCSV text={text} onSeriesParsed={this.onSeriesParsed} width={'100%'} height={200} />}
</div>
);