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

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,12 +459,22 @@ exports[`Render should render with base threshold 1`] = `
                 <div
                   className="thresholds-row-input-inner-value"
                 >
+                  <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>
           </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,13 +398,15 @@ Array [
       >
         Alias By
       </label>
+      <div>
         <input
-        className="gf-form-input width-24"
+          className="gf-form-input gf-form-input width-24"
           onChange={[Function]}
           type="text"
           value=""
         />
       </div>
+    </div>
     <div
       className="gf-form gf-form--grow"
     >
@@ -424,13 +426,15 @@ Array [
       >
         Project
       </span>
+      <div>
         <input
-        className="gf-form-input width-15"
+          className="gf-form-input gf-form-input width-15"
           disabled={true}
           type="text"
           value="Loading project..."
         />
       </div>
+    </div>
     <div
       className="gf-form"
       onClick={[Function]}