Merge pull request #15382 from grafana/hugoh/bug-pressing-brackets-key-in-input-fields

Bug pressing special regexp chars in input fields
2025-02-25 18:55:37 -06:00 · 2019-02-12 17:55:42 +01:00 · 2019-02-12 17:55:42 +01:00 · 960fa56033
commit 960fa56033
parent ef7236439a 90d162e608
22 changed files with 224 additions and 287 deletions
--- a/public/app/core/components/FilterInput/FilterInput.tsx
+++ b/public/app/core/components/FilterInput/FilterInput.tsx
@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react';
+
+const specialChars = ['(', '[', '{', '}', ']', ')', '|', '*', '+', '-', '.', '?', '<', '>', '#', '&', '^', '$'];
+
+export const escapeStringForRegex = (value: string) => {
+  if (!value) {
+    return value;
+  }
+
+  const newValue = specialChars.reduce(
+    (escaped, currentChar) => escaped.replace(currentChar, '\\' + currentChar),
+    value
+  );
+
+  return newValue;
+};
+
+export const unEscapeStringFromRegex = (value: string) => {
+  if (!value) {
+    return value;
+  }
+
+  const newValue = specialChars.reduce(
+    (escaped, currentChar) => escaped.replace('\\' + currentChar, currentChar),
+    value
+  );
+
+  return newValue;
+};
+
+export interface Props {
+  value: string | undefined;
+  placeholder?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  onChange: (value: string) => void;
+}
+
+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>
+));
--- a/public/app/core/components/OrgActionBar/OrgActionBar.tsx
+++ b/public/app/core/components/OrgActionBar/OrgActionBar.tsx
@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import LayoutSelector, { LayoutMode } from '../LayoutSelector/LayoutSelector';
+import { FilterInput } from '../FilterInput/FilterInput';

 export interface Props {
  searchQuery: string;
@ -22,16 +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">
-            <input
-              type="text"
-              className="gf-form-input width-20"
-              value={searchQuery}
-              onChange={event => setSearchQuery(event.target.value)}
-              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" />
--- a/public/app/core/components/OrgActionBar/snapshots/OrgActionBar.test.tsx.snap
+++ b/public/app/core/components/OrgActionBar/snapshots/OrgActionBar.test.tsx.snap
@ -7,20 +7,13 @@ exports[`Render should render component 1`] = `
  <div
    className="gf-form gf-form--grow"
  >
-    <label
-      className="gf-form--has-input-icon"
-    >
-      <input
-        className="gf-form-input width-20"
-        onChange={[Function]}
-        placeholder="Filter by name or type"
-        type="text"
-        value=""
-      />
-      <i
-        className="gf-form-input-icon fa fa-search"
-      />
-    </label>
+    <ForwardRef
+      inputClassName="gf-form-input width-20"
+      labelClassName="gf-form--has-input-icon"
+      onChange={[MockFunction]}
+      placeholder="Filter by name or type"
+      value=""
+    />
    <LayoutSelector
      onLayoutModeChanged={[Function]}
    />
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/public/app/core/components/TagFilter/TagFilter.tsx
@ -5,6 +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 '../FilterInput/FilterInput';

 export interface Props {
  tags: string[];
@ -51,7 +52,7 @@ export class TagFilter extends React.Component<Props, any> {
      value: tags,
      styles: resetSelectStyles(),
      filterOption: (option, searchQuery) => {
-        const regex = RegExp(searchQuery, 'i');
+        const regex = RegExp(escapeStringForRegex(searchQuery), 'i');
        return regex.test(option.value);
      },
      components: {
--- a/public/app/features/alerting/AlertRuleList.test.tsx
+++ b/public/app/features/alerting/AlertRuleList.test.tsx
@ -18,7 +18,7 @@ const setup = (propOverrides?: object) => {
    togglePauseAlertRule: jest.fn(),
    stateFilter: '',
    search: '',
-    isLoading: false
+    isLoading: false,
  };

  Object.assign(props, propOverrides);
@ -147,9 +147,8 @@ describe('Functions', () => {
  describe('Search query change', () => {
    it('should set search query', () => {
      const { instance } = setup();
-      const mockEvent = { target: { value: 'dashboard' } } as React.ChangeEvent<HTMLInputElement>;

-      instance.onSearchQueryChange(mockEvent);
+      instance.onSearchQueryChange('dashboard');

      expect(instance.props.setSearchQuery).toHaveBeenCalledWith('dashboard');
    });
--- a/public/app/features/alerting/AlertRuleList.tsx
+++ b/public/app/features/alerting/AlertRuleList.tsx
@ -9,6 +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 { FilterInput } from 'app/core/components/FilterInput/FilterInput';

 export interface Props {
  navModel: NavModel;
@ -69,8 +70,7 @@ export class AlertRuleList extends PureComponent<Props, any> {
    });
  };

-  onSearchQueryChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = evt.target;
+  onSearchQueryChange = (value: string) => {
    this.props.setSearchQuery(value);
  };

@ -78,7 +78,7 @@ export class AlertRuleList extends PureComponent<Props, any> {
    this.props.togglePauseAlertRule(rule.id, { paused: rule.state !== 'paused' });
  };

-  alertStateFilterOption = ({ text, value }: { text: string; value: string; }) => {
+  alertStateFilterOption = ({ text, value }: { text: string; value: string }) => {
    return (
      <option key={value} value={value}>
        {text}
@ -94,16 +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">
-                <input
-                  type="text"
-                  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>
@ -142,7 +139,7 @@ const mapStateToProps = (state: StoreState) => ({
  alertRules: getAlertRuleItems(state.alertRules),
  stateFilter: state.location.query.state,
  search: getSearchQuery(state.alertRules),
-  isLoading: state.alertRules.isLoading
+  isLoading: state.alertRules.isLoading,
 });

 const mapDispatchToProps = {
--- a/public/app/features/alerting/snapshots/AlertRuleList.test.tsx.snap
+++ b/public/app/features/alerting/snapshots/AlertRuleList.test.tsx.snap
@ -13,20 +13,13 @@ exports[`Render should render alert rules 1`] = `
      <div
        className="gf-form gf-form--grow"
      >
-        <label
-          className="gf-form--has-input-icon gf-form--grow"
-        >
-          <input
-            className="gf-form-input"
-            onChange={[Function]}
-            placeholder="Search alerts"
-            type="text"
-            value=""
-          />
-          <i
-            className="gf-form-input-icon fa fa-search"
-          />
-        </label>
+        <ForwardRef
+          inputClassName="gf-form-input"
+          labelClassName="gf-form--has-input-icon gf-form--grow"
+          onChange={[Function]}
+          placeholder="Search alerts"
+          value=""
+        />
      </div>
      <div
        className="gf-form"
@ -167,20 +160,13 @@ exports[`Render should render component 1`] = `
      <div
        className="gf-form gf-form--grow"
      >
-        <label
-          className="gf-form--has-input-icon gf-form--grow"
-        >
-          <input
-            className="gf-form-input"
-            onChange={[Function]}
-            placeholder="Search alerts"
-            type="text"
-            value=""
-          />
-          <i
-            className="gf-form-input-icon fa fa-search"
-          />
-        </label>
+        <ForwardRef
+          inputClassName="gf-form-input"
+          labelClassName="gf-form--has-input-icon gf-form--grow"
+          onChange={[Function]}
+          placeholder="Search alerts"
+          value=""
+        />
      </div>
      <div
        className="gf-form"
--- a/public/app/features/api-keys/ApiKeysPage.test.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.test.tsx
@ -8,11 +8,11 @@ const setup = (propOverrides?: object) => {
  const props: Props = {
    navModel: {
      main: {
-        text: 'Configuration'
+        text: 'Configuration',
      },
      node: {
-        text: 'Api Keys'
-      }
+        text: 'Api Keys',
+      },
    } as NavModel,
    apiKeys: [] as ApiKey[],
    searchQuery: '',
@ -78,9 +78,8 @@ describe('Functions', () => {
  describe('on search query change', () => {
    it('should call setSearchQuery', () => {
      const { instance } = setup();
-      const mockEvent = { target: { value: 'test' } };

-      instance.onSearchQueryChange(mockEvent);
+      instance.onSearchQueryChange('test');

      expect(instance.props.setSearchQuery).toHaveBeenCalledWith('test');
    });
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@ -13,6 +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 { FilterInput } from 'app/core/components/FilterInput/FilterInput';

 export interface Props {
  navModel: NavModel;
@ -59,8 +60,8 @@ export class ApiKeysPage extends PureComponent<Props, any> {
    this.props.deleteApiKey(key.id);
  }

-  onSearchQueryChange = evt => {
-    this.props.setSearchQuery(evt.target.value);
+  onSearchQueryChange = (value: string) => {
+    this.props.setSearchQuery(value);
  };

  onToggleAdding = () => {
@ -186,16 +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">
-              <input
-                type="text"
-                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" />
@ -241,13 +239,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
    return (
      <Page navModel={navModel}>
        <Page.Contents isLoading={!hasFetched}>
-          {hasFetched && (
-            apiKeysCount > 0 ? (
-              this.renderApiKeyList()
-            ) : (
-              this.renderEmptyList()
-            )
-          )}
+          {hasFetched && (apiKeysCount > 0 ? this.renderApiKeyList() : this.renderEmptyList())}
        </Page.Contents>
      </Page>
    );
--- a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
+++ b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
@ -17,6 +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 { FilterInput } from 'app/core/components/FilterInput/FilterInput';

 interface Props {
  panel: PanelModel;
@ -170,8 +171,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
    this.setState({ isVizPickerOpen: false });
  };

-  onSearchQueryChange = evt => {
-    const value = evt.target.value;
+  onSearchQueryChange = (value: string) => {
    this.setState({
      searchQuery: value,
    });
@ -184,17 +184,14 @@ export class VisualizationTab extends PureComponent<Props, State> {
    if (this.state.isVizPickerOpen) {
      return (
        <>
-          <label className="gf-form--has-input-icon">
-            <input
-              type="text"
-              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>
--- a/public/app/features/datasources/NewDataSourcePage.tsx
+++ b/public/app/features/datasources/NewDataSourcePage.tsx
@ -6,6 +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 { FilterInput } from 'app/core/components/FilterInput/FilterInput';

 export interface Props {
  navModel: NavModel;
@ -26,8 +27,8 @@ class NewDataSourcePage extends PureComponent<Props> {
    this.props.addDataSource(plugin);
  };

-  onSearchQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    this.props.setDataSourceTypeSearchQuery(event.target.value);
+  onSearchQueryChange = (value: string) => {
+    this.props.setDataSourceTypeSearchQuery(value);
  };

  render() {
@ -37,16 +38,13 @@ class NewDataSourcePage extends PureComponent<Props> {
        <Page.Contents isLoading={isLoading}>
          <h2 className="add-data-source-header">Choose data source type</h2>
          <div className="add-data-source-search">
-            <label className="gf-form--has-input-icon">
-              <input
-                type="text"
-                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) => {
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@ -5,13 +5,7 @@ import * as rangeUtil from 'app/core/utils/rangeutil';
 import { RawTimeRange, Switch } from '@grafana/ui';
 import TimeSeries from 'app/core/time_series2';

-import {
-  LogsDedupDescription,
-  LogsDedupStrategy,
-  LogsModel,
-  LogLevel,
-  LogsMetaKind,
-} from 'app/core/logs_model';
+import { LogsDedupDescription, LogsDedupStrategy, LogsModel, LogLevel, LogsMetaKind } from 'app/core/logs_model';

 import ToggleButtonGroup, { ToggleButton } from 'app/core/components/ToggleButtonGroup/ToggleButtonGroup';

--- a/public/app/features/explore/state/actionTypes.ts
+++ b/public/app/features/explore/state/actionTypes.ts
@ -193,7 +193,7 @@ export interface ToggleLogsPayload {
  exploreId: ExploreId;
 }

-export interface UpdateUIStatePayload extends Partial<ExploreUIState>{
+export interface UpdateUIStatePayload extends Partial<ExploreUIState> {
  exploreId: ExploreId;
 }

@ -403,9 +403,7 @@ export const updateDatasourceInstanceAction = actionCreatorFactory<UpdateDatasou
  'explore/UPDATE_DATASOURCE_INSTANCE'
 ).create();

-export const toggleLogLevelAction = actionCreatorFactory<ToggleLogLevelPayload>(
-  'explore/TOGGLE_LOG_LEVEL'
-).create();
+export const toggleLogLevelAction = actionCreatorFactory<ToggleLogLevelPayload>('explore/TOGGLE_LOG_LEVEL').create();

 /**
 * Resets state for explore.
--- a/public/app/features/explore/state/reducers.ts
+++ b/public/app/features/explore/state/reducers.ts
@ -474,7 +474,7 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
      const { hiddenLogLevels } = action.payload;
      return {
        ...state,
-        hiddenLogLevels: Array.from(hiddenLogLevels)
+        hiddenLogLevels: Array.from(hiddenLogLevels),
      };
    },
  })
--- a/public/app/features/teams/TeamList.test.tsx
+++ b/public/app/features/teams/TeamList.test.tsx
@ -8,11 +8,11 @@ const setup = (propOverrides?: object) => {
  const props: Props = {
    navModel: {
      main: {
-        text: 'Configuration'
+        text: 'Configuration',
      },
      node: {
-        text: 'Team List'
-      }
+        text: 'Team List',
+      },
    } as NavModel,
    teams: [] as Team[],
    loadTeams: jest.fn(),
@ -74,9 +74,8 @@ describe('Functions', () => {
  describe('on search query change', () => {
    it('should call setSearchQuery', () => {
      const { instance } = setup();
-      const mockEvent = { target: { value: 'test' } };

-      instance.onSearchQueryChange(mockEvent);
+      instance.onSearchQueryChange('test');

      expect(instance.props.setSearchQuery).toHaveBeenCalledWith('test');
    });
--- a/public/app/features/teams/TeamList.tsx
+++ b/public/app/features/teams/TeamList.tsx
@ -8,6 +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 { FilterInput } from 'app/core/components/FilterInput/FilterInput';

 export interface Props {
  navModel: NavModel;
@ -33,8 +34,8 @@ export class TeamList extends PureComponent<Props, any> {
    this.props.deleteTeam(team.id);
  };

-  onSearchQueryChange = event => {
-    this.props.setSearchQuery(event.target.value);
+  onSearchQueryChange = (value: string) => {
+    this.props.setSearchQuery(value);
  };

  renderTeam(team: Team) {
@ -89,16 +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">
-              <input
-                type="text"
-                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" />
@ -141,9 +139,7 @@ export class TeamList extends PureComponent<Props, any> {

    return (
      <Page navModel={navModel}>
-        <Page.Contents isLoading={!hasFetched}>
-          {hasFetched && this.renderList()}
-        </Page.Contents>
+        <Page.Contents isLoading={!hasFetched}>{hasFetched && this.renderList()}</Page.Contents>
      </Page>
    );
  }
--- a/public/app/features/teams/TeamMembers.test.tsx
+++ b/public/app/features/teams/TeamMembers.test.tsx
@ -55,9 +55,8 @@ describe('Functions', () => {
  describe('on search member query change', () => {
    it('it should call setSearchMemberQuery', () => {
      const { instance } = setup();
-      const mockEvent = { target: { value: 'member' } };

-      instance.onSearchQueryChange(mockEvent);
+      instance.onSearchQueryChange('member');

      expect(instance.props.setSearchMemberQuery).toHaveBeenCalledWith('member');
    });
--- a/public/app/features/teams/TeamMembers.tsx
+++ b/public/app/features/teams/TeamMembers.tsx
@ -7,6 +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 { FilterInput } from 'app/core/components/FilterInput/FilterInput';

 export interface Props {
  members: TeamMember[];
@ -33,8 +34,8 @@ export class TeamMembers extends PureComponent<Props, State> {
    this.props.loadTeamMembers();
  }

-  onSearchQueryChange = event => {
-    this.props.setSearchMemberQuery(event.target.value);
+  onSearchQueryChange = (value: string) => {
+    this.props.setSearchMemberQuery(value);
  };

  onRemoveMember(member: TeamMember) {
@ -89,16 +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">
-              <input
-                type="text"
-                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" />
--- a/public/app/features/teams/snapshots/TeamList.test.tsx.snap
+++ b/public/app/features/teams/snapshots/TeamList.test.tsx.snap
@ -41,20 +41,13 @@ exports[`Render should render teams table 1`] = `
      <div
        className="gf-form gf-form--grow"
      >
-        <label
-          className="gf-form--has-input-icon gf-form--grow"
-        >
-          <input
-            className="gf-form-input"
-            onChange={[Function]}
-            placeholder="Search teams"
-            type="text"
-            value=""
-          />
-          <i
-            className="gf-form-input-icon fa fa-search"
-          />
-        </label>
+        <ForwardRef
+          inputClassName="gf-form-input"
+          labelClassName="gf-form--has-input-icon gf-form--grow"
+          onChange={[Function]}
+          placeholder="Search teams"
+          value=""
+        />
      </div>
      <div
        className="page-action-bar__spacer"
--- a/public/app/features/teams/snapshots/TeamMembers.test.tsx.snap
+++ b/public/app/features/teams/snapshots/TeamMembers.test.tsx.snap
@ -8,20 +8,13 @@ exports[`Render should render component 1`] = `
    <div
      className="gf-form gf-form--grow"
    >
-      <label
-        className="gf-form--has-input-icon gf-form--grow"
-      >
-        <input
-          className="gf-form-input"
-          onChange={[Function]}
-          placeholder="Search members"
-          type="text"
-          value=""
-        />
-        <i
-          className="gf-form-input-icon fa fa-search"
-        />
-      </label>
+      <ForwardRef
+        inputClassName="gf-form-input"
+        labelClassName="gf-form--has-input-icon gf-form--grow"
+        onChange={[Function]}
+        placeholder="Search members"
+        value=""
+      />
    </div>
    <div
      className="page-action-bar__spacer"
@ -102,20 +95,13 @@ exports[`Render should render team members 1`] = `
    <div
      className="gf-form gf-form--grow"
    >
-      <label
-        className="gf-form--has-input-icon gf-form--grow"
-      >
-        <input
-          className="gf-form-input"
-          onChange={[Function]}
-          placeholder="Search members"
-          type="text"
-          value=""
-        />
-        <i
-          className="gf-form-input-icon fa fa-search"
-        />
-      </label>
+      <ForwardRef
+        inputClassName="gf-form-input"
+        labelClassName="gf-form--has-input-icon gf-form--grow"
+        onChange={[Function]}
+        placeholder="Search members"
+        value=""
+      />
    </div>
    <div
      className="page-action-bar__spacer"
@ -322,20 +308,13 @@ exports[`Render should render team members when sync enabled 1`] = `
    <div
      className="gf-form gf-form--grow"
    >
-      <label
-        className="gf-form--has-input-icon gf-form--grow"
-      >
-        <input
-          className="gf-form-input"
-          onChange={[Function]}
-          placeholder="Search members"
-          type="text"
-          value=""
-        />
-        <i
-          className="gf-form-input-icon fa fa-search"
-        />
-      </label>
+      <ForwardRef
+        inputClassName="gf-form-input"
+        labelClassName="gf-form--has-input-icon gf-form--grow"
+        onChange={[Function]}
+        placeholder="Search members"
+        value=""
+      />
    </div>
    <div
      className="page-action-bar__spacer"
--- a/public/app/features/users/UsersActionBar.tsx
+++ b/public/app/features/users/UsersActionBar.tsx
@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { setUsersSearchQuery } from './state/actions';
 import { getInviteesCount, getUsersSearchQuery } from './state/selectors';
+import { FilterInput } from 'app/core/components/FilterInput/FilterInput';

 export interface Props {
  searchQuery: string;
@ -43,16 +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">
-            <input
-              type="text"
-              className="gf-form-input width-20"
-              value={searchQuery}
-              onChange={event => setUsersSearchQuery(event.target.value)}
-              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}>
--- a/public/app/features/users/snapshots/UsersActionBar.test.tsx.snap
+++ b/public/app/features/users/snapshots/UsersActionBar.test.tsx.snap
@ -7,20 +7,13 @@ exports[`Render should render component 1`] = `
  <div
    className="gf-form gf-form--grow"
  >
-    <label
-      className="gf-form--has-input-icon"
-    >
-      <input
-        className="gf-form-input width-20"
-        onChange={[Function]}
-        placeholder="Filter by name or type"
-        type="text"
-        value=""
-      />
-      <i
-        className="gf-form-input-icon fa fa-search"
-      />
-    </label>
+    <ForwardRef
+      inputClassName="gf-form-input width-20"
+      labelClassName="gf-form--has-input-icon"
+      onChange={[MockFunction]}
+      placeholder="Filter by name or type"
+      value=""
+    />
    <div
      className="page-action-bar__spacer"
    />
@ -35,20 +28,13 @@ exports[`Render should render pending invites button 1`] = `
  <div
    className="gf-form gf-form--grow"
  >
-    <label
-      className="gf-form--has-input-icon"
-    >
-      <input
-        className="gf-form-input width-20"
-        onChange={[Function]}
-        placeholder="Filter by name or type"
-        type="text"
-        value=""
-      />
-      <i
-        className="gf-form-input-icon fa fa-search"
-      />
-    </label>
+    <ForwardRef
+      inputClassName="gf-form-input width-20"
+      labelClassName="gf-form--has-input-icon"
+      onChange={[MockFunction]}
+      placeholder="Filter by name or type"
+      value=""
+    />
    <div
      style={
        Object {
@ -87,20 +73,13 @@ exports[`Render should show external user management button 1`] = `
  <div
    className="gf-form gf-form--grow"
  >
-    <label
-      className="gf-form--has-input-icon"
-    >
-      <input
-        className="gf-form-input width-20"
-        onChange={[Function]}
-        placeholder="Filter by name or type"
-        type="text"
-        value=""
-      />
-      <i
-        className="gf-form-input-icon fa fa-search"
-      />
-    </label>
+    <ForwardRef
+      inputClassName="gf-form-input width-20"
+      labelClassName="gf-form--has-input-icon"
+      onChange={[MockFunction]}
+      placeholder="Filter by name or type"
+      value=""
+    />
    <div
      className="page-action-bar__spacer"
    />
@ -125,20 +104,13 @@ exports[`Render should show invite button 1`] = `
  <div
    className="gf-form gf-form--grow"
  >
-    <label
-      className="gf-form--has-input-icon"
-    >
-      <input
-        className="gf-form-input width-20"
-        onChange={[Function]}
-        placeholder="Filter by name or type"
-        type="text"
-        value=""
-      />
-      <i
-        className="gf-form-input-icon fa fa-search"
-      />
-    </label>
+    <ForwardRef
+      inputClassName="gf-form-input width-20"
+      labelClassName="gf-form--has-input-icon"
+      onChange={[MockFunction]}
+      placeholder="Filter by name or type"
+      value=""
+    />
    <div
      className="page-action-bar__spacer"
    />