Fixes bug #12972 with a new type of input that escapes and unescapes special regexp characters

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');
     });

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 { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
 
 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) {
@@ -90,8 +91,7 @@ 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"
+              <RegExpSafeInput
                 className="gf-form-input"
                 placeholder="Search teams"
                 value={searchQuery}
@@ -141,9 +141,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>
     );
   }

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');
     });

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 { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
 
 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) {
@@ -90,8 +91,7 @@ export class TeamMembers extends PureComponent<Props, State> {
         <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"
+              <RegExpSafeInput
                 className="gf-form-input"
                 placeholder="Search members"
                 value={searchMemberQuery}

public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap

@@ -11,11 +11,10 @@ exports[`Render should render component 1`] = `
       <label
         className="gf-form--has-input-icon gf-form--grow"
       >
-        <input
+        <ForwardRef
           className="gf-form-input"
           onChange={[Function]}
           placeholder="Search members"
-          type="text"
           value=""
         />
         <i
@@ -105,11 +104,10 @@ exports[`Render should render team members 1`] = `
       <label
         className="gf-form--has-input-icon gf-form--grow"
       >
-        <input
+        <ForwardRef
           className="gf-form-input"
           onChange={[Function]}
           placeholder="Search members"
-          type="text"
           value=""
         />
         <i
@@ -325,11 +323,10 @@ exports[`Render should render team members when sync enabled 1`] = `
       <label
         className="gf-form--has-input-icon gf-form--grow"
       >
-        <input
+        <ForwardRef
           className="gf-form-input"
           onChange={[Function]}
           placeholder="Search members"
-          type="text"
           value=""
         />
         <i