Connected filter searchbox for groups, users & user creation groups (#20)

* Connected group selector list

* Added groups filtering for create user form

* connected groups input filter

* Connected users input

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/src/screens/Console/Groups/Groups.tsx

@@ -107,6 +107,7 @@ const Groups = ({
     const [rowsPerPage, setRowsPerPage] = useState<number>(10);
     const [page, setPage] = useState<number>(0);
     const [error, setError] = useState<string>("");
+    const [filter, setFilter] = useState<string>("");
 
     const handleChangePage = (event: unknown, newPage: number) => {
         setPage(newPage);
@@ -171,6 +172,8 @@ const Groups = ({
         }
     };
 
+    const filteredRecords = records.filter((elementItem) => elementItem.includes(filter));
+
     return (<React.Fragment>
         { addGroupOpen &&
             <AddGroup
@@ -207,6 +210,9 @@ const Groups = ({
                             </InputAdornment>
                         ),
                     }}
+                    onChange={(e) => {
+                        setFilter(e.target.value);
+                    }}
                 />
                 <Button
                     variant="contained"
@@ -236,7 +242,7 @@ const Groups = ({
                                 </TableRow>
                             </TableHead>
                             <TableBody>
-                                {records.map(group => (
+                                {filteredRecords.map(group => (
                                     <TableRow key={`user-${group}`}>
                                         <TableCell className={classes.wrapCell}>
                                             {group}

portal-ui/src/screens/Console/Users/AddUser.tsx

@@ -233,6 +233,9 @@ class AddUserContent extends React.Component<
                   records={groupsList}
                 />
               </Grid>
+              <Grid item xs={12}>
+                <br />
+              </Grid>
               <Grid item xs={12}>
                 <Button
                   type="submit"

portal-ui/src/screens/Console/Users/GroupsSelectors.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React from "react";
+import React, {useEffect, useState} from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { LinearProgress } from "@material-ui/core";
 import Table from "@material-ui/core/Table";
@@ -29,6 +29,10 @@ import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";
 import TextField from "@material-ui/core/TextField";
 import Checkbox from "@material-ui/core/Checkbox";
+import api from "../../../common/api";
+import {UsersList} from "./types";
+import {groupsSort, usersSort} from "../../../utils/sortFunctions";
+import {GroupsList} from "../Groups/types";
 
 interface IGroupsProps {
   classes: any;
@@ -96,12 +100,37 @@ const GroupsSelectors = ({
   classes,
   selectedGroups,
   setSelectedGroups,
-  records,
-  loading
 }: IGroupsProps) => {
-  if (!records) {
-    return null;
-  }
+    // Local State
+    const [records, setRecords] = useState<any[]>([]);
+    const [loading, isLoading] = useState<boolean>(false);
+    const [error, setError] = useState<string>("");
+    const [filter, setFilter] = useState<string>("");
+
+    //Effects
+    useEffect(() => {
+        isLoading(true);
+    }, []);
+
+    useEffect(() => {
+        if(loading) {
+            fetchGroups();
+        }
+    },[loading]);
+
+    const fetchGroups = () => {
+        api
+            .invoke("GET", `/api/v1/groups`)
+            .then((res: GroupsList) => {
+                setRecords(res.groups.sort(groupsSort));
+                setError("");
+                isLoading(false);
+            })
+            .catch(err => {
+                setError(err);
+                isLoading(false);
+            });
+    };
 
   const selectionChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     const targetD = e.target;
@@ -122,6 +151,8 @@ const GroupsSelectors = ({
     return elements;
   };
 
+  const filteredRecords = records.filter((elementItem) => elementItem.includes(filter));
+
   return (
     <React.Fragment>
       <Title>Groups</Title>
@@ -144,6 +175,9 @@ const GroupsSelectors = ({
                       </InputAdornment>
                     )
                   }}
+                  onChange={(e) => {
+                      setFilter(e.target.value);
+                  }}
                 />
               </Grid>
               <Table size="medium">
@@ -154,21 +188,21 @@ const GroupsSelectors = ({
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {records.map(row => (
-                    <TableRow key={`group-${row.groupName}`}>
+                  {filteredRecords.map(groupName => (
+                    <TableRow key={`group-${groupName}`}>
                       <TableCell padding="checkbox">
                         <Checkbox
-                          value={row.groupName}
+                          value={groupName}
                           color="primary"
                           inputProps={{
                             "aria-label": "secondary checkbox"
                           }}
                           onChange={selectionChanged}
-                          checked={selectedGroups.includes(row.groupName)}
+                          checked={selectedGroups.includes(groupName)}
                         />
                       </TableCell>
                       <TableCell className={classes.wrapCell}>
-                        {row.groupName}
+                        {groupName}
                       </TableCell>
                     </TableRow>
                   ))}

portal-ui/src/screens/Console/Users/Users.tsx

@@ -111,6 +111,7 @@ interface IUsersState {
   deleteOpen: boolean;
   selectedUser: User | null;
   addGroupOpen: boolean;
+  filter: string;
 }
 
 class Users extends React.Component<IUsersProps, IUsersState> {
@@ -125,7 +126,8 @@ class Users extends React.Component<IUsersProps, IUsersState> {
     rowsPerPage: 10,
     deleteOpen: false,
     selectedUser: null,
-    addGroupOpen: false
+    addGroupOpen: false,
+    filter: "",
   };
 
   fetchRecords() {
@@ -188,7 +190,8 @@ class Users extends React.Component<IUsersProps, IUsersState> {
       page,
       rowsPerPage,
       deleteOpen,
-      selectedUser
+      selectedUser,
+      filter,
     } = this.state;
 
     const handleChangePage = (event: unknown, newPage: number) => {
@@ -206,6 +209,8 @@ class Users extends React.Component<IUsersProps, IUsersState> {
       });
     };
 
+    const filteredRecords = records.filter((elementItem) => elementItem.accessKey.includes(filter));
+
     return (
       <React.Fragment>
         <AddUser
@@ -237,6 +242,9 @@ class Users extends React.Component<IUsersProps, IUsersState> {
                   </InputAdornment>
                 )
               }}
+              onChange={(e) => {
+                  this.setState({filter: e.target.value});
+              }}
             />
             <Button
               variant="contained"
@@ -281,7 +289,7 @@ class Users extends React.Component<IUsersProps, IUsersState> {
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {records.map(row => (
+                    {filteredRecords.map(row => (
                       <TableRow key={`user-${row.accessKey}`}>
                         <TableCell padding="checkbox">
                           <Checkbox