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