diff --git a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx b/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx index a8af897a7..f1655ea00 100644 --- a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx +++ b/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([]); const [loading, isLoading] = useState(false); const [error, setError] = useState(""); + const [filter, setFilter] = useState(""); //Effects useEffect(() => { @@ -145,6 +156,10 @@ const UsersSelectors = ({ }); }; + const filteredRecords = records.filter(elementItem => + elementItem.accessKey.includes(filter) + ); + return ( Members @@ -153,34 +168,59 @@ const UsersSelectors = ({ {loading && } {records != null && records.length > 0 ? ( - - - - Select - Access Key - - - - {records.map(row => ( - - - + + + + + ) + }} + onChange={e => { + setFilter(e.target.value); + }} + /> + + +
+ + + + Select - - {row.accessKey} + + Access Key - ))} - -
+ + + {filteredRecords.map(row => ( + + + + + + {row.accessKey} + + + ))} + + +
) : (
No Users Available
diff --git a/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx b/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx index e86b23b57..76e055e7a 100644 --- a/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx +++ b/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 = ({ }} /> - - - - Select - Group - - - - {filteredRecords.map(groupName => ( - - - + +
+ + + + Select - - {groupName} + + Group - ))} - -
+ + + {filteredRecords.map(groupName => ( + + + + + + {groupName} + + + ))} + + +
) : (
No Groups Available
diff --git a/portal-ui/src/screens/Console/Users/types.tsx b/portal-ui/src/screens/Console/Users/types.tsx index 72fea5bd5..2842ed5fd 100644 --- a/portal-ui/src/screens/Console/Users/types.tsx +++ b/portal-ui/src/screens/Console/Users/types.tsx @@ -15,16 +15,16 @@ // along with this program. If not, see . 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; }