Improvements for Users / Groups selection lists. (#26)

* List improvements

* Prettier files

* made smaller tables for select users & select groups components. added sticky header & prettier files

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

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

@@ -17,6 +17,7 @@
 import React, { useState, useEffect } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { LinearProgress } from "@material-ui/core";
+import TableContainer from "@material-ui/core/TableContainer";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -29,6 +30,9 @@ import Checkbox from "@material-ui/core/Checkbox";
 import { UsersList } from "../Users/types";
 import { usersSort } from "../../../utils/sortFunctions";
 import api from "../../../common/api";
+import TextField from "@material-ui/core/TextField";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import SearchIcon from "@material-ui/icons/Search";
 
 interface IGroupsProps {
   classes: any;
@@ -87,6 +91,12 @@ const styles = (theme: Theme) =>
     noFound: {
       textAlign: "center",
       padding: "10px 0"
+    },
+    tableContainer: {
+      maxHeight: 250
+    },
+    stickyHeader: {
+      backgroundColor: "transparent"
     }
   });
 
@@ -99,6 +109,7 @@ const UsersSelectors = ({
   const [records, setRecords] = useState<any[]>([]);
   const [loading, isLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
+  const [filter, setFilter] = useState<string>("");
 
   //Effects
   useEffect(() => {
@@ -145,6 +156,10 @@ const UsersSelectors = ({
       });
   };
 
+  const filteredRecords = records.filter(elementItem =>
+    elementItem.accessKey.includes(filter)
+  );
+
   return (
     <React.Fragment>
       <Title>Members</Title>
@@ -153,34 +168,59 @@ const UsersSelectors = ({
           {loading && <LinearProgress />}
           {records != null && records.length > 0 ? (
             <React.Fragment>
-              <Table size="medium">
-                <TableHead className={classes.minTableHeader}>
-                  <TableRow>
-                    <TableCell>Select</TableCell>
-                    <TableCell>Access Key</TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {records.map(row => (
-                    <TableRow key={`group-${row.accessKey}`}>
-                      <TableCell padding="checkbox">
-                        <Checkbox
-                          value={row.accessKey}
-                          color="primary"
-                          inputProps={{
-                            "aria-label": "secondary checkbox"
-                          }}
-                          onChange={selectionChanged}
-                          checked={selectedUsers.includes(row.accessKey)}
-                        />
+              <Grid item xs={12} className={classes.actionsTray}>
+                <TextField
+                  placeholder="Filter Groups"
+                  className={classes.filterField}
+                  id="search-resource"
+                  label=""
+                  InputProps={{
+                    disableUnderline: true,
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <SearchIcon />
+                      </InputAdornment>
+                    )
+                  }}
+                  onChange={e => {
+                    setFilter(e.target.value);
+                  }}
+                />
+              </Grid>
+              <TableContainer className={classes.tableContainer}>
+                <Table size="small" stickyHeader aria-label="sticky table">
+                  <TableHead className={classes.minTableHeader}>
+                    <TableRow>
+                      <TableCell className={classes.stickyHeader}>
+                        Select
                       </TableCell>
-                      <TableCell className={classes.wrapCell}>
-                        {row.accessKey}
+                      <TableCell className={classes.stickyHeader}>
+                        Access Key
                       </TableCell>
                     </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
+                  </TableHead>
+                  <TableBody>
+                    {filteredRecords.map(row => (
+                      <TableRow key={`group-${row.accessKey}`}>
+                        <TableCell padding="checkbox">
+                          <Checkbox
+                            value={row.accessKey}
+                            color="primary"
+                            inputProps={{
+                              "aria-label": "secondary checkbox"
+                            }}
+                            onChange={selectionChanged}
+                            checked={selectedUsers.includes(row.accessKey)}
+                          />
+                        </TableCell>
+                        <TableCell className={classes.wrapCell}>
+                          {row.accessKey}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
             </React.Fragment>
           ) : (
             <div className={classes.noFound}>No Users Available</div>

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

@@ -17,6 +17,7 @@
 import React, { useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { LinearProgress } from "@material-ui/core";
+import TableContainer from "@material-ui/core/TableContainer";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -93,6 +94,12 @@ const styles = (theme: Theme) =>
     noFound: {
       textAlign: "center",
       padding: "10px 0"
+    },
+    tableContainer: {
+      maxHeight: 250
+    },
+    stickyHeader: {
+      backgroundColor: "transparent"
     }
   });
 
@@ -182,34 +189,40 @@ const GroupsSelectors = ({
                   }}
                 />
               </Grid>
-              <Table size="medium">
-                <TableHead className={classes.minTableHeader}>
-                  <TableRow>
-                    <TableCell>Select</TableCell>
-                    <TableCell>Group</TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {filteredRecords.map(groupName => (
-                    <TableRow key={`group-${groupName}`}>
-                      <TableCell padding="checkbox">
-                        <Checkbox
-                          value={groupName}
-                          color="primary"
-                          inputProps={{
-                            "aria-label": "secondary checkbox"
-                          }}
-                          onChange={selectionChanged}
-                          checked={selectedGroups.includes(groupName)}
-                        />
+              <TableContainer className={classes.tableContainer}>
+                <Table size="small" stickyHeader aria-label="sticky table">
+                  <TableHead className={classes.minTableHeader}>
+                    <TableRow>
+                      <TableCell className={classes.stickyHeader}>
+                        Select
                       </TableCell>
-                      <TableCell className={classes.wrapCell}>
-                        {groupName}
+                      <TableCell className={classes.stickyHeader}>
+                        Group
                       </TableCell>
                     </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
+                  </TableHead>
+                  <TableBody>
+                    {filteredRecords.map(groupName => (
+                      <TableRow key={`group-${groupName}`}>
+                        <TableCell padding="checkbox">
+                          <Checkbox
+                            value={groupName}
+                            color="primary"
+                            inputProps={{
+                              "aria-label": "secondary checkbox"
+                            }}
+                            onChange={selectionChanged}
+                            checked={selectedGroups.includes(groupName)}
+                          />
+                        </TableCell>
+                        <TableCell className={classes.wrapCell}>
+                          {groupName}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
             </React.Fragment>
           ) : (
             <div className={classes.noFound}>No Groups Available</div>

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

@@ -15,16 +15,16 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 export interface User {
-    name: string;
-    id: string;
-    email: string;
-    is_me: boolean;
-    enabled: boolean;
-    accessKey: string;
-    secretKey: string;
+  name: string;
+  id: string;
+  email: string;
+  is_me: boolean;
+  enabled: boolean;
+  accessKey: string;
+  secretKey: string;
 }
 
 export interface UsersList {
-    users: User[];
-    total_users:number;
+  users: User[];
+  total_users: number;
 }