IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* replace with Input component from grafana/ui

* removing placeholder classname

* change import

* fix import
This commit is contained in:
Peter Holmberg 2019-03-25 15:53:05 +01:00 committed by GitHub
parent dd388ed578
commit 4898502e4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 86 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
View File

@ -1,8 +1,10 @@
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>
);

2
packages/grafana-ui/src/components/Input/Input.tsx
View File

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

4
packages/grafana-ui/src/components/Input/__snapshots__/Input.test.tsx.snap
View File

@ -1,9 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Input renders correctly 1`] = `
<div
className="our-custom-wrapper-class"
>
<div>
<input
className="gf-form-input"
/>

3
packages/grafana-ui/src/components/Switch/Switch.tsx
View File

@ -1,5 +1,6 @@
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>

8
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
View File

@ -1,7 +1,7 @@
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}

14
packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
View File

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

9
packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
View File

@ -1,9 +1,8 @@
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}

4
public/app/features/api-keys/ApiKeysPage.tsx
View File

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

2
public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
View File

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

4
public/app/features/dashboard/panel_editor/DataSourceOption.tsx
View File

@ -1,5 +1,5 @@
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}

4
public/app/features/datasources/settings/BasicSettings.tsx
View File

@ -1,5 +1,5 @@
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}

2
public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
View File

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

6
public/app/features/explore/TimePicker.tsx
View File

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

3
public/app/features/folders/FolderSettingsPage.tsx
View File

@ -1,6 +1,7 @@
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}

4
public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap
View File

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

9
public/app/features/org/OrgProfile.tsx
View File

@ -1,4 +1,5 @@
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>

2
public/app/features/org/__snapshots__/OrgProfile.test.tsx.snap
View File

@ -23,7 +23,7 @@ exports[`Render should render component 1`] = `
>
Organization name
</span>
<input
<Input
className="gf-form-input"
onChange={[Function]}
type="text"

6
public/app/features/teams/TeamGroupSync.tsx
View File

@ -1,7 +1,9 @@
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}

6
public/app/features/teams/TeamSettings.tsx
View File

@ -1,6 +1,6 @@
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}

4
public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
View File

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

4
public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap
View File

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

7
public/app/features/templating/DefaultVariableQueryEditor.tsx
View File

@ -1,4 +1,5 @@
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
/>

3
public/app/plugins/datasource/stackdriver/components/AliasBy.tsx
View File

@ -1,5 +1,6 @@
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" />

6
public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx
View File

@ -1,5 +1,5 @@
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}

3
public/app/plugins/datasource/stackdriver/components/Project.tsx
View File

@ -1,4 +1,5 @@
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>
);
}

28
public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
View File

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