User search functionality

.github/workflows/build.yml

@@ -11,6 +11,7 @@ jobs:
     name: Yarn Build
     runs-on: ubuntu-latest
     strategy:
+      fail-fast: false
       matrix:
         node-version: [12.x]
     timeout-minutes: 3

package.json

@@ -18,10 +18,10 @@
     "preinstall": "yarn run check-npm"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.24",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.11.1",
-    "@fortawesome/free-solid-svg-icons": "^5.11.1",
-    "@fortawesome/react-fontawesome": "^0.1.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.15",
     "@sentry/browser": "^5.11.2",
     "@types/history": "^4.7.3",
     "@types/humanize-duration": "^3.18.0",

src/components/AdminPanelLayout/UsersPane.tsx

@@ -1,4 +1,4 @@
-import {Button, Modal, ModalBody, ModalFooter, Table} from 'react-bootstrap';
+import {Button, Form, InputGroup, Modal, ModalBody, ModalFooter, Table} from 'react-bootstrap';
 import React, {useState} from 'react';
 import {Role, User} from '../../types/User';
 import {changeUserRole, getCurrentUserFromServer, getUserList} from '../../api';
@@ -13,13 +13,16 @@ import {connect, useDispatch} from 'react-redux';
 import {WebState} from '../../redux/types/WebState';
 import {getCurrentUser} from '../../redux/selectors/entities';
 import {setCurrentUser} from '../../redux/actions/entities/currentUser';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faSearch} from '@fortawesome/free-solid-svg-icons';
 
 interface Props {
   currentUser: User;
 }
 
 const UsersPane = (props: Props) => {
   const [users, setUsers] = useState();
+  const [usersToDisplay, setUsersToDisplay] = useState();
   const [loading, setLoading] = useState(true);
   const [updateRequests, setUpdateRequests] = useState<ChangeUserRoleRequest[]>([]);
   const [commitResponseCode, setCommitResponseCode] = useState();
@@ -30,7 +33,9 @@ const UsersPane = (props: Props) => {
   const dispatch = useDispatch();
 
   useMount(async () => {
-    setUsers(await getUserList());
+    const userList = await getUserList();
+    setUsers(userList);
+    setUsersToDisplay(userList);
     setLoading(false);
   });
 
@@ -143,12 +148,30 @@ const UsersPane = (props: Props) => {
     }
   };
 
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const searchValue = event.currentTarget.value.toLowerCase().trim().split(` +`);
+    const foundUsers = searchValue ? users.filter((u: User) => {
+      const searchString = `${u.firstName} ${u.lastName} ${u.email} ${u.role}`.toLowerCase();
+      return searchValue.some((word) => searchString.indexOf(word) !== -1);
+    }) : users;
+    setUsersToDisplay(foundUsers);
+  };
+
   return <Layout>{loading ? <HorizontallyCenteredSpinner/> : (
     <div>
       <ConfirmRoleChange/>
       <div style={{textAlign: 'right', padding: '10px 20px'}}>
         <CommitStatus/>
-        <Button variant={'outline-primary'} onClick={commitUsers}>Save</Button>
+      <InputGroup>
+        <Form.Control
+          onChange={handleSearch}
+          placeholder={'Search'}
+          aria-label={'Search Users'}
+          aria-describedby={'search-users'}
+        />
+        <InputGroup.Text id={'search-users'}><FontAwesomeIcon icon={faSearch}/></InputGroup.Text>
+        <Button style={{marginLeft: '10px'}} variant={'outline-primary'} onClick={commitUsers}>Save</Button>
+      </InputGroup>
       </div>
       <Table striped={true} bordered={true} hover={true}>
         <thead style={{backgroundColor: '#adb5bd'}}>
@@ -159,7 +182,7 @@ const UsersPane = (props: Props) => {
         </tr>
         </thead>
         <tbody>
-        {users.map((u: User) => (
+        {usersToDisplay.map((u: User) => (
           <UserListItem key={u.id} user={u} onRoleChange={handleRoleChange}/>
         ))}
         </tbody>

yarn.lock

@@ -1397,12 +1397,17 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.26.tgz#6e0b13a752676036f8196f8a1500d53a27b4adc1"
   integrity sha512-CcM/fIFwZlRdiWG/25xE/wHbtyUuCtqoCTrr6BsWw7hH072fR++n4L56KPydAr3ANgMJMjT8v83ZFIsDc7kE+A==
 
-"@fortawesome/fontawesome-svg-core@^1.2.24":
-  version "1.2.26"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.26.tgz#671569271d6b532cdea5e3deb8ff16f8b7ac251d"
-  integrity sha512-3Dfd/v2IztP1TxKOxZiB5+4kaOZK9mNy0KU1vVK7nFlPWz3gzxrCWB+AloQhQUoJ8HhGqbzjliK89Vl7PExGbw==
+"@fortawesome/fontawesome-common-types@^0.2.36":
+  version "0.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
+  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+
+"@fortawesome/fontawesome-svg-core@^1.2.36":
+  version "1.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
+  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.26"
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
 
 "@fortawesome/free-brands-svg-icons@^5.11.1":
   version "5.12.0"
@@ -1411,19 +1416,19 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "^0.2.26"
 
-"@fortawesome/free-solid-svg-icons@^5.11.1":
-  version "5.12.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.12.0.tgz#8decac5844e60453cc0c7c51437d1461df053a35"
-  integrity sha512-CnpsWs6GhTs9ekNB3d8rcO5HYqRkXbYKf2YNiAlTWbj5eVlPqsd/XH1F9If8jkcR1aegryAbln/qYeKVZzpM0g==
+"@fortawesome/free-solid-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
+  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.26"
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
 
-"@fortawesome/react-fontawesome@^0.1.4":
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.8.tgz#cb6d4dd3aeec45b6ff2d48c812317a6627618511"
-  integrity sha512-I5h9YQg/ePA3Br9ISS18fcwOYmzQYDSM1ftH03/8nHkiqIVHtUyQBw482+60dnzvlr82gHt3mGm+nDUp159FCw==
+"@fortawesome/react-fontawesome@^0.1.15":
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.15.tgz#1450b838f905981d721bf07e14e3b52c0e9a91ed"
+  integrity sha512-/HFHdcoLESxxMkqZAcZ6RXDJ69pVApwdwRos/B2kiMWxDSAX2dFK8Er2/+rG+RsrzWB/dsAyjefLmemgmfE18g==
   dependencies:
-    prop-types "^15.5.10"
+    prop-types "^15.7.2"
 
 "@hapi/address@2.x.x":
   version "2.1.4"