Renamed to FilterInput and added label and search icon

public/app/core/components/RegExpSafeInput/RegExpSafeInput.tsx → public/app/core/components/FilterInput/FilterInput.tsx

@@ -31,17 +31,21 @@ export const unEscapeStringFromRegex = (value: string) => {
 export interface Props {
   value: string | undefined;
   placeholder?: string;
-  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
   onChange: (value: string) => void;
 }
 
-export const RegExpSafeInput = forwardRef<HTMLInputElement, Props>((props, ref) => (
-  <input
-    ref={ref}
-    type="text"
-    className={props.className}
-    value={unEscapeStringFromRegex(props.value)}
-    onChange={event => props.onChange(escapeStringForRegex(event.target.value))}
-    placeholder={props.placeholder ? props.placeholder : null}
-  />
+export const FilterInput = forwardRef<HTMLInputElement, Props>((props, ref) => (
+  <label className={props.labelClassName}>
+    <input
+      ref={ref}
+      type="text"
+      className={props.inputClassName}
+      value={unEscapeStringFromRegex(props.value)}
+      onChange={event => props.onChange(escapeStringForRegex(event.target.value))}
+      placeholder={props.placeholder ? props.placeholder : null}
+    />
+    <i className="gf-form-input-icon fa fa-search" />
+  </label>
 ));

public/app/core/components/OrgActionBar/OrgActionBar.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import LayoutSelector, { LayoutMode } from '../LayoutSelector/LayoutSelector';
-import { RegExpSafeInput } from '../RegExpSafeInput/RegExpSafeInput';
+import { FilterInput } from '../FilterInput/FilterInput';
 
 export interface Props {
   searchQuery: string;
@@ -23,15 +23,13 @@ export default class OrgActionBar extends PureComponent<Props> {
     return (
       <div className="page-action-bar">
         <div className="gf-form gf-form--grow">
-          <label className="gf-form--has-input-icon">
-            <RegExpSafeInput
-              className={'gf-form-input width-20'}
-              value={searchQuery}
-              onChange={setSearchQuery}
-              placeholder={'Filter by name or type'}
-            />
-            <i className="gf-form-input-icon fa fa-search" />
-          </label>
+          <FilterInput
+            labelClassName="gf-form--has-input-icon"
+            inputClassName="gf-form-input width-20"
+            value={searchQuery}
+            onChange={setSearchQuery}
+            placeholder={'Filter by name or type'}
+          />
           <LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} />
         </div>
         <div className="page-action-bar__spacer" />

public/app/core/components/TagFilter/TagFilter.tsx

@@ -5,7 +5,7 @@ import AsyncSelect from '@torkelo/react-select/lib/Async';
 import { TagOption } from './TagOption';
 import { TagBadge } from './TagBadge';
 import { components } from '@torkelo/react-select';
-import { escapeStringForRegex } from '../RegExpSafeInput/RegExpSafeInput';
+import { escapeStringForRegex } from '../FilterInput/FilterInput';
 
 export interface Props {
   tags: string[];

public/app/features/alerting/AlertRuleList.tsx

@@ -9,7 +9,7 @@ import { getNavModel } from 'app/core/selectors/navModel';
 import { NavModel, StoreState, AlertRule } from 'app/types';
 import { getAlertRulesAsync, setSearchQuery, togglePauseAlertRule } from './state/actions';
 import { getAlertRuleItems, getSearchQuery } from './state/selectors';
-import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
+import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 
 export interface Props {
   navModel: NavModel;
@@ -94,15 +94,13 @@ export class AlertRuleList extends PureComponent<Props, any> {
         <Page.Contents isLoading={isLoading}>
           <div className="page-action-bar">
             <div className="gf-form gf-form--grow">
-              <label className="gf-form--has-input-icon gf-form--grow">
-                <RegExpSafeInput
-                  className="gf-form-input"
-                  placeholder="Search alerts"
-                  value={search}
-                  onChange={this.onSearchQueryChange}
-                />
-                <i className="gf-form-input-icon fa fa-search" />
-              </label>
+              <FilterInput
+                labelClassName="gf-form--has-input-icon gf-form--grow"
+                inputClassName="gf-form-input"
+                placeholder="Search alerts"
+                value={search}
+                onChange={this.onSearchQueryChange}
+              />
             </div>
             <div className="gf-form">
               <label className="gf-form-label">States</label>

public/app/features/api-keys/ApiKeysPage.tsx

@@ -13,7 +13,7 @@ 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 { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
+import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 
 export interface Props {
   navModel: NavModel;
@@ -187,15 +187,13 @@ export class ApiKeysPage extends PureComponent<Props, any> {
       <>
         <div className="page-action-bar">
           <div className="gf-form gf-form--grow">
-            <label className="gf-form--has-input-icon gf-form--grow">
-              <RegExpSafeInput
-                className="gf-form-input"
-                placeholder="Search keys"
-                value={searchQuery}
-                onChange={this.onSearchQueryChange}
-              />
-              <i className="gf-form-input-icon fa fa-search" />
-            </label>
+            <FilterInput
+              labelClassName="gf-form--has-input-icon gf-form--grow"
+              inputClassName="gf-form-input"
+              placeholder="Search keys"
+              value={searchQuery}
+              onChange={this.onSearchQueryChange}
+            />
           </div>
 
           <div className="page-action-bar__spacer" />

public/app/features/dashboard/panel_editor/VisualizationTab.tsx

@@ -17,7 +17,7 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn';
 import { PanelModel } from '../state/PanelModel';
 import { DashboardModel } from '../state/DashboardModel';
 import { PanelPlugin } from 'app/types/plugins';
-import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
+import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 
 interface Props {
   panel: PanelModel;
@@ -184,16 +184,14 @@ export class VisualizationTab extends PureComponent<Props, State> {
     if (this.state.isVizPickerOpen) {
       return (
         <>
-          <label className="gf-form--has-input-icon">
-            <RegExpSafeInput
-              className="gf-form-input width-13"
-              placeholder=""
-              onChange={this.onSearchQueryChange}
-              value={searchQuery}
-              ref={elem => elem && elem.focus()}
-            />
-            <i className="gf-form-input-icon fa fa-search" />
-          </label>
+          <FilterInput
+            labelClassName="gf-form--has-input-icon"
+            inputClassName="gf-form-input width-13"
+            placeholder=""
+            onChange={this.onSearchQueryChange}
+            value={searchQuery}
+            ref={elem => elem && elem.focus()}
+          />
           <button className="btn btn-link toolbar__close" onClick={this.onCloseVizPicker}>
             <i className="fa fa-chevron-up" />
           </button>

public/app/features/datasources/NewDataSourcePage.tsx

@@ -6,7 +6,7 @@ import { NavModel, Plugin, StoreState } from 'app/types';
 import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getDataSourceTypes } from './state/selectors';
-import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
+import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 
 export interface Props {
   navModel: NavModel;
@@ -39,15 +39,13 @@ class NewDataSourcePage extends PureComponent<Props> {
           <div className="page-container page-body">
             <h2 className="add-data-source-header">Choose data source type</h2>
             <div className="add-data-source-search">
-              <label className="gf-form--has-input-icon">
-                <RegExpSafeInput
-                  className="gf-form-input width-20"
-                  value={dataSourceTypeSearchQuery}
-                  onChange={this.onSearchQueryChange}
-                  placeholder="Filter by name or type"
-                />
-                <i className="gf-form-input-icon fa fa-search" />
-              </label>
+              <FilterInput
+                labelClassName="gf-form--has-input-icon"
+                inputClassName="gf-form-input width-20"
+                value={dataSourceTypeSearchQuery}
+                onChange={this.onSearchQueryChange}
+                placeholder="Filter by name or type"
+              />
             </div>
             <div className="add-data-source-grid">
               {dataSourceTypes.map((plugin, index) => {

public/app/features/teams/TeamList.tsx

@@ -8,7 +8,7 @@ import { NavModel, Team } from 'app/types';
 import { loadTeams, deleteTeam, setSearchQuery } from './state/actions';
 import { getSearchQuery, getTeams, getTeamsCount } from './state/selectors';
 import { getNavModel } from 'app/core/selectors/navModel';
-import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
+import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 
 export interface Props {
   navModel: NavModel;
@@ -90,15 +90,13 @@ export class TeamList extends PureComponent<Props, any> {
       <>
         <div className="page-action-bar">
           <div className="gf-form gf-form--grow">
-            <label className="gf-form--has-input-icon gf-form--grow">
-              <RegExpSafeInput
-                className="gf-form-input"
-                placeholder="Search teams"
-                value={searchQuery}
-                onChange={this.onSearchQueryChange}
-              />
-              <i className="gf-form-input-icon fa fa-search" />
-            </label>
+            <FilterInput
+              labelClassName="gf-form--has-input-icon gf-form--grow"
+              inputClassName="gf-form-input"
+              placeholder="Search teams"
+              value={searchQuery}
+              onChange={this.onSearchQueryChange}
+            />
           </div>
 
           <div className="page-action-bar__spacer" />

public/app/features/teams/TeamMembers.tsx

@@ -7,7 +7,7 @@ import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
 import { TeamMember, User } from 'app/types';
 import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions';
 import { getSearchMemberQuery, getTeamMembers } from './state/selectors';
-import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
+import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 
 export interface Props {
   members: TeamMember[];
@@ -90,15 +90,13 @@ export class TeamMembers extends PureComponent<Props, State> {
       <div>
         <div className="page-action-bar">
           <div className="gf-form gf-form--grow">
-            <label className="gf-form--has-input-icon gf-form--grow">
-              <RegExpSafeInput
-                className="gf-form-input"
-                placeholder="Search members"
-                value={searchMemberQuery}
-                onChange={this.onSearchQueryChange}
-              />
-              <i className="gf-form-input-icon fa fa-search" />
-            </label>
+            <FilterInput
+              labelClassName="gf-form--has-input-icon gf-form--grow"
+              inputClassName="gf-form-input"
+              placeholder="Search members"
+              value={searchMemberQuery}
+              onChange={this.onSearchQueryChange}
+            />
           </div>
 
           <div className="page-action-bar__spacer" />

public/app/features/users/UsersActionBar.tsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { setUsersSearchQuery } from './state/actions';
 import { getInviteesCount, getUsersSearchQuery } from './state/selectors';
-import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
+import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 
 export interface Props {
   searchQuery: string;
@@ -44,15 +44,13 @@ export class UsersActionBar extends PureComponent<Props> {
     return (
       <div className="page-action-bar">
         <div className="gf-form gf-form--grow">
-          <label className="gf-form--has-input-icon">
-            <RegExpSafeInput
-              className="gf-form-input width-20"
-              value={searchQuery}
-              onChange={setUsersSearchQuery}
-              placeholder="Filter by name or type"
-            />
-            <i className="gf-form-input-icon fa fa-search" />
-          </label>
+          <FilterInput
+            labelClassName="gf-form--has-input-icon"
+            inputClassName="gf-form-input width-20"
+            value={searchQuery}
+            onChange={setUsersSearchQuery}
+            placeholder="Filter by name or type"
+          />
           {pendingInvitesCount > 0 && (
             <div style={{ marginLeft: '1rem' }}>
               <button className={usersButtonStyle} key="users" onClick={onShowInvites}>