From 3d1e718119827b7e4be0aade623973109b826593 Mon Sep 17 00:00:00 2001
From: hashi93 <hashigalappaththi1993@gmail.com>
Date: Wed, 14 Mar 2018 20:48:36 +0530
Subject: [PATCH] Bug 1441950 add ability to filter through the list of roles
 (#481)

* added search panel

* code refactoring

* use SearchForm component
---
 src/views/RoleManager/RoleManager.jsx   | 17 ++++++-
 src/views/RoleManager/SearchForm.jsx    | 60 +++++++++++++++++++++++++
 src/views/RoleManager/styles.module.css |  5 +++
 3 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 src/views/RoleManager/SearchForm.jsx
 create mode 100644 src/views/RoleManager/styles.module.css

diff --git a/src/views/RoleManager/RoleManager.jsx b/src/views/RoleManager/RoleManager.jsx
index 042bd0fa..ded7d5af 100644
--- a/src/views/RoleManager/RoleManager.jsx
+++ b/src/views/RoleManager/RoleManager.jsx
@@ -12,6 +12,7 @@ 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) {
@@ -19,7 +20,8 @@ export default class RoleManager extends PureComponent {
 
     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,6 +93,7 @@ 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>
@@ -96,11 +101,21 @@ export default class RoleManager extends PureComponent {
     );
   }
 
+  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
diff --git a/src/views/RoleManager/SearchForm.jsx b/src/views/RoleManager/SearchForm.jsx
new file mode 100644
index 00000000..917d441e
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/views/RoleManager/styles.module.css b/src/views/RoleManager/styles.module.css
new file mode 100644
index 00000000..49ba9924
--- /dev/null
+++ b/src/views/RoleManager/styles.module.css
@@ -0,0 +1,5 @@
+.typeInput {
+  min-width: 300px;
+  max-width: 600px;
+  margin-top: 10px;
+}