Skip to content

N
nexpie-grafana-theme
Commit 4898502e by Peter Holmberg Committed by GitHub
Options

refactor(grafana/ui): Replace <input />with Input component from grafana/ui (#16085) 

* replace with Input component from grafana/ui

* removing placeholder classname

* change import

* fix import
parent dd388ed5
Showing with 74 additions and 55 deletions
packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
import React from 'react'; import React from 'react';
import { ColorPickerProps } from './ColorPickerPopover';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { ColorPickerProps } from './ColorPickerPopover';
import { Input } from '../Input/Input';
interface ColorInputState { interface ColorInputState {
previousColor: string; previousColor: string;
value: string; value: string;
...@@ -84,7 +86,7 @@ class ColorInput extends React.PureComponent<ColorInputProps, ColorInputState> { ...@@ -84,7 +86,7 @@ class ColorInput extends React.PureComponent<ColorInputProps, ColorInputState> {
flexGrow: 1, flexGrow: 1,
}} }}
> >
<input className="gf-form-input" value={value} onChange={this.onChange} onBlur={this.onBlur} /> <Input className="gf-form-input" value={value} onChange={this.onChange} onBlur={this.onBlur} />
</div> </div>
</div> </div>
); );
......
packages/grafana-ui/src/components/Input/Input.tsx
...@@ -72,7 +72,7 @@ export class Input extends PureComponent<Props> { ...@@ -72,7 +72,7 @@ export class Input extends PureComponent<Props> {
const inputElementProps = this.populateEventPropsWithStatus(restProps, validationEvents); const inputElementProps = this.populateEventPropsWithStatus(restProps, validationEvents);
return ( return (
<div className="our-custom-wrapper-class"> <div>
<input {...inputElementProps} className={inputClassName} /> <input {...inputElementProps} className={inputClassName} />
{error && !hideErrorMessage && <span>{error}</span>} {error && !hideErrorMessage && <span>{error}</span>}
</div> </div>
......
packages/grafana-ui/src/components/Input/__snapshots__/Input.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Input renders correctly 1`] = ` exports[`Input renders correctly 1`] = `
<div <div>
className="our-custom-wrapper-class"
>
<input <input
className="gf-form-input" className="gf-form-input"
/> />
......
packages/grafana-ui/src/components/Switch/Switch.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import uniqueId from 'lodash/uniqueId'; import uniqueId from 'lodash/uniqueId';
import { Input } from '@grafana/ui';
export interface Props { export interface Props {
label: string; label: string;
...@@ -38,7 +39,7 @@ export class Switch extends PureComponent<Props, State> { ...@@ -38,7 +39,7 @@ export class Switch extends PureComponent<Props, State> {
<label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className || ''}`}> <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className || ''}`}>
{label && <div className={labelClassName}>{label}</div>} {label && <div className={labelClassName}>{label}</div>}
<div className={switchClassName}> <div className={switchClassName}>
<input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} /> <Input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
<span className="gf-form-switch__slider" /> <span className="gf-form-switch__slider" />
</div> </div>
</label> </label>
......
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
import React, { PureComponent, ChangeEvent } from 'react'; import React, { PureComponent, ChangeEvent } from 'react';
import { Threshold } from '../../types'; import { Threshold } from '../../types';
import { ColorPicker } from '..'; import { ColorPicker } from '..';
import { PanelOptionsGroup } from '..'; import { Input, PanelOptionsGroup } from '..';
import { colors } from '../../utils'; import { colors } from '../../utils';
import { ThemeContext } from '../../themes'; import { ThemeContext } from '../../themes';
import { getColorFromHexRgbOrName } from '../../utils'; import { getColorFromHexRgbOrName } from '../../utils';
...@@ -176,16 +176,16 @@ export class ThresholdsEditor extends PureComponent<Props, State> { ...@@ -176,16 +176,16 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
</div> </div>
{threshold.index === 0 && ( {threshold.index === 0 && (
<div className="thresholds-row-input-inner-value"> <div className="thresholds-row-input-inner-value">
<input type="text" value="Base" readOnly /> <Input type="text" value="Base" readOnly />
</div> </div>
)} )}
{threshold.index > 0 && ( {threshold.index > 0 && (
<> <>
<div className="thresholds-row-input-inner-value"> <div className="thresholds-row-input-inner-value">
<input <Input
type="number" type="number"
step="0.0001" step="0.0001"
onChange={event => this.onChangeThresholdValue(event, threshold)} onChange={(event: ChangeEvent<HTMLInputElement>) => this.onChangeThresholdValue(event, threshold)}
value={threshold.value} value={threshold.value}
onBlur={this.onBlur} onBlur={this.onBlur}
readOnly={threshold.index === 0} readOnly={threshold.index === 0}
......
packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
...@@ -459,12 +459,22 @@ exports[`Render should render with base threshold 1`] = ` ...@@ -459,12 +459,22 @@ exports[`Render should render with base threshold 1`] = `
<div <div
className="thresholds-row-input-inner-value" className="thresholds-row-input-inner-value"
> >
<Input
className=""
readOnly={true}
type="text"
value="Base"
>
<div>
<input <input
className="gf-form-input"
readOnly={true} readOnly={true}
type="text" type="text"
value="Base" value="Base"
/> />
</div> </div>
</Input>
</div>
</div> </div>
</div> </div>
</div> </div>
......
packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
import React, { ChangeEvent, PureComponent } from 'react'; import React, { ChangeEvent, PureComponent } from 'react';
import { FormField, FormLabel, Input, Select } from '..';
import { MappingType, ValueMapping } from '../../types'; import { MappingType, ValueMapping } from '../../types';
import { Select } from '../Select/Select';
import { FormField } from '../FormField/FormField';
import { FormLabel } from '../FormLabel/FormLabel';
export interface Props { export interface Props {
valueMapping: ValueMapping; valueMapping: ValueMapping;
...@@ -81,7 +80,7 @@ export default class MappingRow extends PureComponent<Props, State> { ...@@ -81,7 +80,7 @@ export default class MappingRow extends PureComponent<Props, State> {
/> />
<div className="gf-form gf-form--grow"> <div className="gf-form gf-form--grow">
<FormLabel width={4}>Text</FormLabel> <FormLabel width={4}>Text</FormLabel>
<input <Input
className="gf-form-input" className="gf-form-input"
onBlur={this.updateMapping} onBlur={this.updateMapping}
value={text} value={text}
...@@ -104,7 +103,7 @@ export default class MappingRow extends PureComponent<Props, State> { ...@@ -104,7 +103,7 @@ export default class MappingRow extends PureComponent<Props, State> {
/> />
<div className="gf-form gf-form--grow"> <div className="gf-form gf-form--grow">
<FormLabel width={4}>Text</FormLabel> <FormLabel width={4}>Text</FormLabel>
<input <Input
className="gf-form-input" className="gf-form-input"
onBlur={this.updateMapping} onBlur={this.updateMapping}
value={text} value={text}
......
public/app/features/api-keys/ApiKeysPage.tsx
...@@ -12,7 +12,7 @@ import ApiKeysAddedModal from './ApiKeysAddedModal'; ...@@ -12,7 +12,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 } from '@grafana/ui'; import { DeleteButton, Input } from '@grafana/ui';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput'; import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
export interface Props { export interface Props {
...@@ -143,7 +143,7 @@ export class ApiKeysPage extends PureComponent<Props, any> { ...@@ -143,7 +143,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
<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>
<input <Input
type="text" type="text"
className="gf-form-input" className="gf-form-input"
value={newApiKey.name} value={newApiKey.name}
......
public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
...@@ -82,7 +82,7 @@ exports[`Render should render CTA if there are no API keys 1`] = ` ...@@ -82,7 +82,7 @@ exports[`Render should render CTA if there are no API keys 1`] = `
> >
Key name Key name
</span> </span>
<input <Input
className="gf-form-input" className="gf-form-input"
onChange={[Function]} onChange={[Function]}
placeholder="Name" placeholder="Name"
......
public/app/features/dashboard/panel_editor/DataSourceOption.tsx
import React, { FC, ChangeEvent } from 'react'; import React, { FC, ChangeEvent } from 'react';
import { FormLabel } from '@grafana/ui'; import { FormLabel, Input } from '@grafana/ui';
interface Props { interface Props {
label: string; label: string;
...@@ -15,7 +15,7 @@ export const DataSourceOption: FC<Props> = ({ label, placeholder, name, value, o ...@@ -15,7 +15,7 @@ export const DataSourceOption: FC<Props> = ({ label, placeholder, name, value, o
return ( return (
<div className="gf-form gf-form--flex-end"> <div className="gf-form gf-form--flex-end">
<FormLabel tooltip={tooltipInfo}>{label}</FormLabel> <FormLabel tooltip={tooltipInfo}>{label}</FormLabel>
<input <Input
type="text" type="text"
className="gf-form-input width-6" className="gf-form-input width-6"
placeholder={placeholder} placeholder={placeholder}
......
public/app/features/datasources/settings/BasicSettings.tsx
import React, { FC } from 'react'; import React, { FC } from 'react';
import { FormLabel, Switch } from '@grafana/ui'; import { FormLabel, Input, Switch } from '@grafana/ui';
export interface Props { export interface Props {
dataSourceName: string; dataSourceName: string;
...@@ -21,7 +21,7 @@ const BasicSettings: FC<Props> = ({ dataSourceName, isDefault, onDefaultChange, ...@@ -21,7 +21,7 @@ const BasicSettings: FC<Props> = ({ dataSourceName, isDefault, onDefaultChange,
> >
Name Name
</FormLabel> </FormLabel>
<input <Input
className="gf-form-input max-width-23" className="gf-form-input max-width-23"
type="text" type="text"
value={dataSourceName} value={dataSourceName}
......
public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
...@@ -20,7 +20,7 @@ exports[`Render should render component 1`] = ` ...@@ -20,7 +20,7 @@ exports[`Render should render component 1`] = `
> >
Name Name
</Component> </Component>
<input <Input
className="gf-form-input max-width-23" className="gf-form-input max-width-23"
onChange={[Function]} onChange={[Function]}
placeholder="Name" placeholder="Name"
......
public/app/features/explore/TimePicker.tsx
...@@ -3,7 +3,7 @@ import moment from 'moment'; ...@@ -3,7 +3,7 @@ import moment from 'moment';
import * as dateMath from 'app/core/utils/datemath'; import * as dateMath from 'app/core/utils/datemath';
import * as rangeUtil from 'app/core/utils/rangeutil'; import * as rangeUtil from 'app/core/utils/rangeutil';
import { RawTimeRange, TimeRange } from '@grafana/ui'; import { Input, RawTimeRange, TimeRange } from '@grafana/ui';
const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss'; const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
export const DEFAULT_RANGE = { export const DEFAULT_RANGE = {
...@@ -260,7 +260,7 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke ...@@ -260,7 +260,7 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
<label className="small">From:</label> <label className="small">From:</label>
<div className="gf-form-inline"> <div className="gf-form-inline">
<div className="gf-form max-width-28"> <div className="gf-form max-width-28">
<input <Input
type="text" type="text"
className="gf-form-input input-large timepicker-from" className="gf-form-input input-large timepicker-from"
value={fromRaw} value={fromRaw}
...@@ -272,7 +272,7 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke ...@@ -272,7 +272,7 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
<label className="small">To:</label> <label className="small">To:</label>
<div className="gf-form-inline"> <div className="gf-form-inline">
<div className="gf-form max-width-28"> <div className="gf-form max-width-28">
<input <Input
type="text" type="text"
className="gf-form-input input-large timepicker-to" className="gf-form-input input-large timepicker-to"
value={toRaw} value={toRaw}
......
public/app/features/folders/FolderSettingsPage.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Input } from '@grafana/ui';
import Page from 'app/core/components/Page/Page'; import Page from 'app/core/components/Page/Page';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import { getNavModel } from 'app/core/selectors/navModel'; import { getNavModel } from 'app/core/selectors/navModel';
...@@ -73,7 +74,7 @@ export class FolderSettingsPage extends PureComponent<Props, State> { ...@@ -73,7 +74,7 @@ export class FolderSettingsPage extends PureComponent<Props, State> {
<form name="folderSettingsForm" onSubmit={this.onSave}> <form name="folderSettingsForm" onSubmit={this.onSave}>
<div className="gf-form"> <div className="gf-form">
<label className="gf-form-label width-7">Name</label> <label className="gf-form-label width-7">Name</label>
<input <Input
type="text" type="text"
className="gf-form-input width-30" className="gf-form-input width-30"
value={folder.title} value={folder.title}
......
public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap
...@@ -27,7 +27,7 @@ exports[`Render should enable save button 1`] = ` ...@@ -27,7 +27,7 @@ exports[`Render should enable save button 1`] = `
> >
Name Name
</label> </label>
<input <Input
className="gf-form-input width-30" className="gf-form-input width-30"
onChange={[Function]} onChange={[Function]}
type="text" type="text"
...@@ -85,7 +85,7 @@ exports[`Render should render component 1`] = ` ...@@ -85,7 +85,7 @@ exports[`Render should render component 1`] = `
> >
Name Name
</label> </label>
<input <Input
className="gf-form-input width-30" className="gf-form-input width-30"
onChange={[Function]} onChange={[Function]}
type="text" type="text"
......
public/app/features/org/OrgProfile.tsx
import React, { FC } from 'react'; import React, { ChangeEvent, FC } from 'react';
import { Input } from '@grafana/ui';
export interface Props { export interface Props {
orgName: string; orgName: string;
...@@ -21,12 +22,10 @@ const OrgProfile: FC<Props> = ({ onSubmit, onOrgNameChange, orgName }) => { ...@@ -21,12 +22,10 @@ const OrgProfile: FC<Props> = ({ onSubmit, onOrgNameChange, orgName }) => {
<div className="gf-form-inline"> <div className="gf-form-inline">
<div className="gf-form max-width-28"> <div className="gf-form max-width-28">
<span className="gf-form-label">Organization name</span> <span className="gf-form-label">Organization name</span>
<input <Input
className="gf-form-input" className="gf-form-input"
type="text" type="text"
onChange={event => { onChange={(event: ChangeEvent<HTMLInputElement>) => onOrgNameChange(event.target.value)}
onOrgNameChange(event.target.value);
}}
value={orgName} value={orgName}
/> />
</div> </div>
......
public/app/features/org/__snapshots__/OrgProfile.test.tsx.snap
...@@ -23,7 +23,7 @@ exports[`Render should render component 1`] = ` ...@@ -23,7 +23,7 @@ exports[`Render should render component 1`] = `
> >
Organization name Organization name
</span> </span>
<input <Input
className="gf-form-input" className="gf-form-input"
onChange={[Function]} onChange={[Function]}
type="text" type="text"
......
public/app/features/teams/TeamGroupSync.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { SlideDown } from 'app/core/components/Animations/SlideDown'; import { SlideDown } from 'app/core/components/Animations/SlideDown';
import { Tooltip } from '@grafana/ui'; import { Input, Tooltip } from '@grafana/ui';
import { TeamGroup } from '../../types'; import { TeamGroup } from '../../types';
import { addTeamGroup, loadTeamGroups, removeTeamGroup } from './state/actions'; import { addTeamGroup, loadTeamGroups, removeTeamGroup } from './state/actions';
import { getTeamGroups } from './state/selectors'; import { getTeamGroups } from './state/selectors';
...@@ -98,7 +100,7 @@ export class TeamGroupSync extends PureComponent<Props, State> { ...@@ -98,7 +100,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
<h5>Add External Group</h5> <h5>Add External Group</h5>
<form className="gf-form-inline" onSubmit={this.onAddGroup}> <form className="gf-form-inline" onSubmit={this.onAddGroup}>
<div className="gf-form"> <div className="gf-form">
<input <Input
type="text" type="text"
className="gf-form-input width-30" className="gf-form-input width-30"
value={newGroupId} value={newGroupId}
......
public/app/features/teams/TeamSettings.tsx
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { FormLabel } from '@grafana/ui'; import { FormLabel, Input } from '@grafana/ui';
import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences'; import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
import { updateTeam } from './state/actions'; import { updateTeam } from './state/actions';
...@@ -52,7 +52,7 @@ export class TeamSettings extends React.Component<Props, State> { ...@@ -52,7 +52,7 @@ export class TeamSettings extends React.Component<Props, State> {
<form name="teamDetailsForm" className="gf-form-group" onSubmit={this.onUpdate}> <form name="teamDetailsForm" className="gf-form-group" onSubmit={this.onUpdate}>
<div className="gf-form max-width-30"> <div className="gf-form max-width-30">
<FormLabel>Name</FormLabel> <FormLabel>Name</FormLabel>
<input <Input
type="text" type="text"
required required
value={name} value={name}
...@@ -65,7 +65,7 @@ export class TeamSettings extends React.Component<Props, State> { ...@@ -65,7 +65,7 @@ export class TeamSettings extends React.Component<Props, State> {
<FormLabel tooltip="This is optional and is primarily used to set the team profile avatar (via gravatar service)"> <FormLabel tooltip="This is optional and is primarily used to set the team profile avatar (via gravatar service)">
Email Email
</FormLabel> </FormLabel>
<input <Input
type="email" type="email"
className="gf-form-input max-width-22" className="gf-form-input max-width-22"
value={email} value={email}
......
public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
...@@ -50,7 +50,7 @@ exports[`Render should render component 1`] = ` ...@@ -50,7 +50,7 @@ exports[`Render should render component 1`] = `
<div <div
className="gf-form" className="gf-form"
> >
<input <Input
className="gf-form-input width-30" className="gf-form-input width-30"
onChange={[Function]} onChange={[Function]}
placeholder="cn=ops,ou=groups,dc=grafana,dc=org" placeholder="cn=ops,ou=groups,dc=grafana,dc=org"
...@@ -168,7 +168,7 @@ exports[`Render should render groups table 1`] = ` ...@@ -168,7 +168,7 @@ exports[`Render should render groups table 1`] = `
<div <div
className="gf-form" className="gf-form"
> >
<input <Input
className="gf-form-input width-30" className="gf-form-input width-30"
onChange={[Function]} onChange={[Function]}
placeholder="cn=ops,ou=groups,dc=grafana,dc=org" placeholder="cn=ops,ou=groups,dc=grafana,dc=org"
......
public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap
...@@ -18,7 +18,7 @@ exports[`Render should render component 1`] = ` ...@@ -18,7 +18,7 @@ exports[`Render should render component 1`] = `
<Component> <Component>
Name Name
</Component> </Component>
<input <Input
className="gf-form-input max-width-22" className="gf-form-input max-width-22"
onChange={[Function]} onChange={[Function]}
required={true} required={true}
...@@ -34,7 +34,7 @@ exports[`Render should render component 1`] = ` ...@@ -34,7 +34,7 @@ exports[`Render should render component 1`] = `
> >
Email Email
</Component> </Component>
<input <Input
className="gf-form-input max-width-22" className="gf-form-input max-width-22"
onChange={[Function]} onChange={[Function]}
placeholder="team@email.com" placeholder="team@email.com"
......
public/app/features/templating/DefaultVariableQueryEditor.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { Input } from '@grafana/ui';
import { VariableQueryProps } from 'app/types/plugins'; import { VariableQueryProps } from 'app/types/plugins';
export default class DefaultVariableQueryEditor extends PureComponent<VariableQueryProps, any> { export default class DefaultVariableQueryEditor extends PureComponent<VariableQueryProps, any> {
...@@ -19,12 +20,12 @@ export default class DefaultVariableQueryEditor extends PureComponent<VariableQu ...@@ -19,12 +20,12 @@ export default class DefaultVariableQueryEditor extends PureComponent<VariableQu
return ( return (
<div className="gf-form"> <div className="gf-form">
<span className="gf-form-label width-10">Query</span> <span className="gf-form-label width-10">Query</span>
<input <Input
type="text" type="text"
className="gf-form-input" className="gf-form-input"
value={this.state.value} value={this.state.value}
onChange={e => this.handleChange(e)} onChange={this.handleChange}
onBlur={e => this.handleBlur(e)} onBlur={this.handleBlur}
placeholder="metric name or tags query" placeholder="metric name or tags query"
required required
/> />
......
public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
import React, { Component } from 'react'; import React, { Component } from 'react';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { Input } from '@grafana/ui';
export interface Props { export interface Props {
onChange: (alignmentPeriod) => void; onChange: (alignmentPeriod) => void;
...@@ -40,7 +41,7 @@ export class AliasBy extends Component<Props, State> { ...@@ -40,7 +41,7 @@ export class AliasBy extends Component<Props, State> {
<div className="gf-form-inline"> <div className="gf-form-inline">
<div className="gf-form"> <div className="gf-form">
<label className="gf-form-label query-keyword width-9">Alias By</label> <label className="gf-form-label query-keyword width-9">Alias By</label>
<input type="text" className="gf-form-input width-24" value={this.state.value} onChange={this.onChange} /> <Input type="text" className="gf-form-input width-24" value={this.state.value} onChange={this.onChange} />
</div> </div>
<div className="gf-form gf-form--grow"> <div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--grow" /> <div className="gf-form-label gf-form-label--grow" />
......
public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
import React from 'react'; import React from 'react';
import _ from 'lodash'; import { Input } from '@grafana/ui';
import { TemplateSrv } from 'app/features/templating/template_srv'; import { TemplateSrv } from 'app/features/templating/template_srv';
...@@ -91,7 +91,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> { ...@@ -91,7 +91,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
<div className="gf-form gf-form-inline"> <div className="gf-form gf-form-inline">
<div className="gf-form"> <div className="gf-form">
<span className="gf-form-label query-keyword width-9">Title</span> <span className="gf-form-label query-keyword width-9">Title</span>
<input <Input
type="text" type="text"
className="gf-form-input width-20" className="gf-form-input width-20"
value={title} value={title}
...@@ -100,7 +100,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> { ...@@ -100,7 +100,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
</div> </div>
<div className="gf-form"> <div className="gf-form">
<span className="gf-form-label query-keyword width-9">Text</span> <span className="gf-form-label query-keyword width-9">Text</span>
<input <Input
type="text" type="text"
className="gf-form-input width-20" className="gf-form-input width-20"
value={text} value={text}
......
public/app/plugins/datasource/stackdriver/components/Project.tsx
import React from 'react'; import React from 'react';
import { Input } from '@grafana/ui';
import StackdriverDatasource from '../datasource'; import StackdriverDatasource from '../datasource';
export interface Props { export interface Props {
...@@ -24,7 +25,7 @@ export class Project extends React.Component<Props, State> { ...@@ -24,7 +25,7 @@ export class Project extends React.Component<Props, State> {
return ( return (
<div className="gf-form"> <div className="gf-form">
<span className="gf-form-label width-9 query-keyword">Project</span> <span className="gf-form-label width-9 query-keyword">Project</span>
<input className="gf-form-input width-15" disabled type="text" value={projectName} /> <Input className="gf-form-input width-15" disabled type="text" value={projectName} />
</div> </div>
); );
} }
......
public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
...@@ -398,13 +398,15 @@ Array [ ...@@ -398,13 +398,15 @@ Array [
> >
Alias By Alias By
</label> </label>
<div>
<input <input
className="gf-form-input width-24" className="gf-form-input gf-form-input width-24"
onChange={[Function]} onChange={[Function]}
type="text" type="text"
value="" value=""
/> />
</div> </div>
</div>
<div <div
className="gf-form gf-form--grow" className="gf-form gf-form--grow"
> >
...@@ -424,13 +426,15 @@ Array [ ...@@ -424,13 +426,15 @@ Array [
> >
Project Project
</span> </span>
<div>
<input <input
className="gf-form-input width-15" className="gf-form-input gf-form-input width-15"
disabled={true} disabled={true}
type="text" type="text"
value="Loading project..." value="Loading project..."
/> />
</div> </div>
</div>
<div <div
className="gf-form" className="gf-form"
onClick={[Function]} onClick={[Function]}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment