Bug 1441950 add ability to filter through the list of roles (taskclus…

…ter#481)

* added search panel

* code refactoring

* use SearchForm component

src/views/RoleManager/RoleManager.jsx

@@ -12,14 +12,16 @@ import equal from 'deep-equal';
 import Spinner from '../../components/Spinner';
 import RoleEditor from '../../components/RoleEditor';
 import HelmetTitle from '../../components/HelmetTitle';
+import SearchForm from './SearchForm';
 
 export default class RoleManager extends PureComponent {
   constructor(props) {
     super(props);
 
     this.state = {
       roles: null,
-      error: null
+      error: null,
+      roleIdContains: ''
     };
   }
 
@@ -73,6 +75,8 @@ export default class RoleManager extends PureComponent {
     );
   };
 
+  handleSetRoleId = value => this.setState({ roleIdContains: value });
+
   renderRolesTable() {
     const { roles } = this.state;
 
@@ -89,18 +93,29 @@ export default class RoleManager extends PureComponent {
         </thead>
         <tbody>
           {this.state.roles
+            .filter(role => role.roleId.includes(this.state.roleIdContains))
             .sort((a, b) => a.roleId.localeCompare(b.roleId))
             .map(this.renderRoleRow)}
         </tbody>
       </Table>
     );
   }
 
+  renderTypeInput() {
+    return (
+      <SearchForm
+        default={this.state.roleIdContains}
+        onSearch={this.handleSetRoleId}
+      />
+    );
+  }
+
   render() {
     return (
       <Row style={{ marginTop: 10 }}>
         <HelmetTitle title="Role Manager" />
         <Col md={5}>
+          {this.renderTypeInput()}
           {this.renderRolesTable()}
           <ButtonToolbar>
             <Button

src/views/RoleManager/SearchForm.jsx

@@ -0,0 +1,60 @@
+import { PureComponent } from 'react';
+import { func } from 'prop-types';
+import {
+  Glyphicon,
+  FormGroup,
+  InputGroup,
+  FormControl,
+  Form
+} from 'react-bootstrap';
+import styles from './styles.module.css';
+
+export default class SearchForm extends PureComponent {
+  static propTypes = {
+    onSearch: func.isRequired
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = { value: '' };
+  }
+
+  componentWillMount() {
+    if (this.props.default) {
+      this.setState({ value: this.props.default });
+    }
+  }
+
+  handleChange = e => this.setState({ value: e.target.value });
+
+  handleSearch = () => this.props.onSearch(this.state.value);
+
+  handleSubmit = e => {
+    e.preventDefault();
+
+    this.handleSearch();
+  };
+
+  render() {
+    return (
+      <div>
+        <Form onSubmit={this.handleSubmit} className={styles.typeInput}>
+          <FormGroup>
+            <InputGroup bsSize="sm">
+              <InputGroup.Addon>Role Id Containing</InputGroup.Addon>
+              <FormControl
+                onChange={this.handleChange}
+                value={this.state.value}
+                type="text"
+              />
+              <InputGroup.Addon onClick={this.handleSearch} role="button">
+                <Glyphicon glyph="search" />
+              </InputGroup.Addon>
+            </InputGroup>
+          </FormGroup>
+        </Form>
+      </div>
+    );
+  }
+}

src/views/RoleManager/styles.module.css

@@ -0,0 +1,5 @@
+.typeInput {
+  min-width: 300px;
+  max-width: 600px;
+  margin-top: 10px;
+}