From 813458c4c15963af94652aa2281d5b63f9857549 Mon Sep 17 00:00:00 2001 From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com> Date: Fri, 19 Nov 2021 02:43:07 +0530 Subject: [PATCH] UX cosmetics for users, groups, service accounts (#1236) Co-authored-by: Alex <33497058+bexsoft@users.noreply.github.com> --- portal-ui/src/common/HelpBox.tsx | 10 +- portal-ui/src/icons/TrashIcon.tsx | 49 ++++--- .../src/screens/Console/Account/Account.tsx | 35 ++--- .../Console/Account/DeleteServiceAccount.tsx | 28 +++- .../FormComponents/common/styleLibrary.ts | 82 ++++++++++- .../Console/Common/PanelTitle/PanelTitle.tsx | 2 +- .../Common/ScreenTitle/ScreenTitle.tsx | 6 +- .../src/screens/Console/Common/SearchBox.tsx | 57 ++++++++ .../src/screens/Console/Groups/AddGroup.tsx | 41 +++--- .../screens/Console/Groups/AddGroupMember.tsx | 29 ++-- .../screens/Console/Groups/DeleteGroup.tsx | 95 +++++++++---- .../src/screens/Console/Groups/Groups.tsx | 71 ++-------- .../screens/Console/Groups/GroupsDetails.tsx | 129 ++++++++++++------ .../screens/Console/Groups/UsersSelectors.tsx | 97 ++++--------- .../Console/Policies/PolicySelectors.tsx | 96 ++++--------- .../screens/Console/Policies/SetPolicy.tsx | 37 +++-- .../src/screens/Console/Users/AddUser.tsx | 93 +++++++------ .../Console/Users/ChangeUserGroups.tsx | 33 +++-- .../src/screens/Console/Users/DeleteUser.tsx | 43 +++++- .../screens/Console/Users/GroupsSelectors.tsx | 85 ++---------- .../src/screens/Console/Users/ListUsers.tsx | 40 ++---- .../screens/Console/Users/SetUserPolicies.tsx | 1 + .../src/screens/Console/Users/UserDetails.tsx | 62 +++++---- .../Users/UserServiceAccountsPanel.tsx | 20 +-- 24 files changed, 694 insertions(+), 547 deletions(-) create mode 100644 portal-ui/src/screens/Console/Common/SearchBox.tsx diff --git a/portal-ui/src/common/HelpBox.tsx b/portal-ui/src/common/HelpBox.tsx index 9ff0d3803..7b646b55d 100644 --- a/portal-ui/src/common/HelpBox.tsx +++ b/portal-ui/src/common/HelpBox.tsx @@ -33,13 +33,15 @@ const styles = (theme: Theme) => marginBottom: 10, backgroundColor: "#fbfafa", }, - icon: { + leftItems: { fontSize: 16, fontWeight: "bold", marginBottom: 20, + display: "flex", + alignItems: "center", "& .MuiSvgIcon-root": { - fontSize: 44, - marginRight: 15, + fontSize: "2.5rem", + marginRight: ".8rem", }, }, iconSize: { @@ -61,7 +63,7 @@ const HelpBox = ({ classes, iconComponent, title, help }: IHelpBox) => { return (
- + {iconComponent} {title} diff --git a/portal-ui/src/icons/TrashIcon.tsx b/portal-ui/src/icons/TrashIcon.tsx index fddaba0b4..2c7cebd93 100644 --- a/portal-ui/src/icons/TrashIcon.tsx +++ b/portal-ui/src/icons/TrashIcon.tsx @@ -15,29 +15,36 @@ // along with this program. If not, see . import * as React from "react"; -import { SvgIcon, SvgIconProps } from "@mui/material"; -const TrashIcon = (props: SvgIconProps) => { +const TrashIcon = () => { return ( - - - - - - - - - - - - - + + + + + + ); }; diff --git a/portal-ui/src/screens/Console/Account/Account.tsx b/portal-ui/src/screens/Console/Account/Account.tsx index 5d670496d..8b00b2273 100644 --- a/portal-ui/src/screens/Console/Account/Account.tsx +++ b/portal-ui/src/screens/Console/Account/Account.tsx @@ -28,8 +28,6 @@ import AddServiceAccount from "./AddServiceAccount"; import DeleteServiceAccount from "./DeleteServiceAccount"; import CredentialsPrompt from "../Common/CredentialsPrompt/CredentialsPrompt"; import { AccountIcon, AddIcon, LockIcon } from "../../../icons"; -import TextField from "@mui/material/TextField"; -import InputAdornment from "@mui/material/InputAdornment"; import TableWrapper from "../Common/TableWrapper/TableWrapper"; import { stringSort } from "../../../utils/sortFunctions"; import PageHeader from "../Common/PageHeader/PageHeader"; @@ -37,12 +35,13 @@ import { actionsTray, containerForHeader, searchField, + tableStyles, } from "../Common/FormComponents/common/styleLibrary"; import { ErrorResponseHandler } from "../../../common/types"; import ChangePasswordModal from "./ChangePasswordModal"; -import SearchIcon from "../../../icons/SearchIcon"; import HelpBox from "../../../common/HelpBox"; import PageLayout from "../Common/Layout/PageLayout"; +import SearchBox from "../Common/SearchBox"; const styles = (theme: Theme) => createStyles({ @@ -84,6 +83,12 @@ const styles = (theme: Theme) => }, ...actionsTray, ...searchField, + searchField: { + ...searchField.searchField, + marginRight: "auto", + maxWidth: 380, + }, + ...tableStyles, ...containerForHeader(theme.spacing(4)), }); @@ -234,24 +239,12 @@ const Account = ({ /> - - - - ), - }} - onChange={(e) => { - setFilter(e.target.value); - }} - variant="standard" + + +
-
{actions}
+
{actions}
); diff --git a/portal-ui/src/screens/Console/Common/SearchBox.tsx b/portal-ui/src/screens/Console/Common/SearchBox.tsx new file mode 100644 index 000000000..273aac993 --- /dev/null +++ b/portal-ui/src/screens/Console/Common/SearchBox.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import InputAdornment from "@mui/material/InputAdornment"; +import SearchIcon from "../../../icons/SearchIcon"; +import TextField from "@mui/material/TextField"; +import withStyles from "@mui/styles/withStyles"; +import { Theme } from "@mui/material/styles"; +import createStyles from "@mui/styles/createStyles"; +import { searchField } from "./FormComponents/common/styleLibrary"; + +const styles = (theme: Theme) => + createStyles({ + searchField: { + ...searchField.searchField, + }, + adornment: {}, + }); + +type SearchBoxProps = { + placeholder?: string; + classes: any; + onChange: (value: string) => void; + adornmentPosition?: "start" | "end"; +}; + +const SearchBox = ({ + placeholder = "", + classes, + onChange, + adornmentPosition = "end", +}: SearchBoxProps) => { + const inputProps = { + disableUnderline: true, + [`${adornmentPosition}Adornment`]: ( + + + + ), + }; + return ( + { + onChange(e.target.value); + }} + variant="standard" + /> + ); +}; + +export default withStyles(styles)(SearchBox); diff --git a/portal-ui/src/screens/Console/Groups/AddGroup.tsx b/portal-ui/src/screens/Console/Groups/AddGroup.tsx index 44fed2657..d31c71665 100644 --- a/portal-ui/src/screens/Console/Groups/AddGroup.tsx +++ b/portal-ui/src/screens/Console/Groups/AddGroup.tsx @@ -21,7 +21,11 @@ import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; import { Button, LinearProgress } from "@mui/material"; import Grid from "@mui/material/Grid"; -import { modalBasic } from "../Common/FormComponents/common/styleLibrary"; +import { + formFieldStyles, + modalBasic, + spacingUtils, +} from "../Common/FormComponents/common/styleLibrary"; import { setModalErrorSnackMessage } from "../../../actions"; import { ErrorResponseHandler } from "../../../common/types"; import api from "../../../common/api"; @@ -56,6 +60,8 @@ const styles = (theme: Theme) => buttonContainer: { textAlign: "right", }, + ...formFieldStyles, + ...spacingUtils, ...modalBasic, }); @@ -193,19 +199,17 @@ const AddGroup = ({ {selectedGroup === null ? ( - - - ) => { - setGroupName(e.target.value); - }} - /> - - + + ) => { + setGroupName(e.target.value); + }} + /> + ) : ( @@ -213,6 +217,7 @@ const AddGroup = ({ )} - + + + Reset + - - - - + + + + + + {isDeleting && } + + Are you sure you want to delete group
+ {selectedGroup}? + + + + + + + ); }; @@ -115,4 +150,4 @@ const mapDispatchToProps = { const connector = connect(null, mapDispatchToProps); -export default connector(DeleteGroup); +export default withStyles(styles)(connector(DeleteGroup)); diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx index 98033b64b..bfdadc9f1 100644 --- a/portal-ui/src/screens/Console/Groups/Groups.tsx +++ b/portal-ui/src/screens/Console/Groups/Groups.tsx @@ -20,8 +20,6 @@ import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; import Grid from "@mui/material/Grid"; -import TextField from "@mui/material/TextField"; -import InputAdornment from "@mui/material/InputAdornment"; import { Button, LinearProgress } from "@mui/material"; import { AddIcon, GroupsIcon, UsersIcon } from "../../../icons"; import { setErrorSnackMessage } from "../../../actions"; @@ -31,6 +29,7 @@ import { actionsTray, containerForHeader, searchField, + tableStyles, } from "../Common/FormComponents/common/styleLibrary"; import { ErrorResponseHandler } from "../../../common/types"; import api from "../../../common/api"; @@ -39,11 +38,11 @@ import DeleteGroup from "./DeleteGroup"; import TableWrapper from "../Common/TableWrapper/TableWrapper"; import SetPolicy from "../Policies/SetPolicy"; import PageHeader from "../Common/PageHeader/PageHeader"; -import SearchIcon from "../../../icons/SearchIcon"; import HelpBox from "../../../common/HelpBox"; import history from "../../../history"; import AButton from "../Common/AButton/AButton"; import PageLayout from "../Common/Layout/PageLayout"; +import SearchBox from "../Common/SearchBox"; interface IGroupsProps { classes: any; @@ -53,45 +52,19 @@ interface IGroupsProps { const styles = (theme: Theme) => createStyles({ - seeMore: { - marginTop: theme.spacing(3), - }, pageContainer: { border: "1px solid #EAEAEA", width: "100%", }, - paper: { - // padding: theme.spacing(2), - display: "flex", - overflow: "auto", - flexDirection: "column", - }, - addSideBar: { - width: "320px", - padding: "20px", - }, - tableToolbar: { - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(0), - }, - wrapCell: { - maxWidth: "200px", - whiteSpace: "normal", - wordWrap: "break-word", - }, - twHeight: { - minHeight: 600, - }, - minTableHeader: { - color: "#393939", - "& tr": { - "& th": { - fontWeight: "bold", - }, - }, + tableBlock: { + ...tableStyles.tableBlock, + marginTop: 15, }, ...actionsTray, - ...searchField, + searchField: { + ...searchField.searchField, + maxWidth: 380, + }, ...containerForHeader(theme.spacing(4)), }); @@ -195,23 +168,10 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => { - - - - ), - }} - onChange={(e) => { - setFilter(e.target.value); - }} - variant="standard" + - -
- {loading && } {!loading && ( {records.length > 0 && ( - + createStyles({ @@ -42,15 +46,40 @@ const styles = (theme: Theme) => }, statusLabel: { fontSize: ".8rem", - marginRight: ".5rem", + marginRight: ".7rem", }, statusValue: { fontWeight: "bold", fontSize: ".9rem", - marginRight: ".5rem", + marginRight: ".7rem", + }, + searchField: { + ...searchField.searchField, + maxWidth: 280, + }, + ...tableStyles, + ...spacingUtils, + actionsTray: { + ...actionsTray.actionsTray, + + alignItems: "center", + "& h1": { + flex: 1, + }, + "& button": { + marginLeft: ".8rem", + }, + "@media (max-width: 900px)": { + justifyContent: "flex-end", + "& h1": { + display: "none", + }, + "& button": { + whiteSpace: "nowrap", + textOverflow: "ellipsis", + }, + }, }, - ...actionsTray, - ...searchField, ...containerForHeader(theme.spacing(4)), }); @@ -102,11 +131,18 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => { const [policyOpen, setPolicyOpen] = useState(false); const [usersOpen, setUsersOpen] = useState(false); const [deleteOpen, setDeleteOpen] = useState(false); + const [memberFilter, setMemberFilter] = useState(""); + + //const [policyFilter, setPolicyFilter] = useState(""); const { groupName = "" } = useParams>(); const { members = [], policy = "", status: groupEnabled } = groupDetails; + const filteredMembers = members.filter((elementItem) => + elementItem.includes(memberFilter) + ); + useEffect(() => { if (groupName) { fetchGroupInfo(); @@ -149,6 +185,13 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
Members + { + setMemberFilter(searchText); + }} + classes={classes} + />
- +
+ +
); @@ -189,22 +234,23 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => { Set Policies - - { - history.push(`/policies/${policy}`); +
+ { + history.push(`/policies/${policy}`); + }, }, - }, - ]} - columns={[{ label: "Policy", elementKey: "" }]} - isLoading={false} - records={groupPolicies} - entityName="Policies" - idField="" - /> + ]} + columns={[{ label: "Policy", elementKey: "" }]} + isLoading={false} + records={groupPolicies} + entityName="Policies" + idField="" + /> +
); return ( @@ -239,18 +285,19 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => { }} switchOnly /> - - { - setDeleteOpen(true); - }} - size="large" - > - - + +
+ { + setDeleteOpen(true); + }} + size="large" + > + + +
} diff --git a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx b/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx index f4f4c609f..b14cd8771 100644 --- a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx +++ b/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx @@ -23,19 +23,18 @@ import { LinearProgress } from "@mui/material"; import get from "lodash/get"; import Paper from "@mui/material/Paper"; import Grid from "@mui/material/Grid"; -import TextField from "@mui/material/TextField"; -import InputAdornment from "@mui/material/InputAdornment"; import { UsersList } from "../Users/types"; import { usersSort } from "../../../utils/sortFunctions"; import { actionsTray, selectorsCommon, + tableStyles, } from "../Common/FormComponents/common/styleLibrary"; import { setModalErrorSnackMessage } from "../../../actions"; import { ErrorResponseHandler } from "../../../common/types"; import api from "../../../common/api"; import TableWrapper from "../Common/TableWrapper/TableWrapper"; -import SearchIcon from "../../../icons/SearchIcon"; +import SearchBox from "../Common/SearchBox"; interface IGroupsProps { classes: any; @@ -54,60 +53,30 @@ const styles = (theme: Theme) => display: "flex", overflow: "auto", flexDirection: "column", - paddingTop: 15, + // paddingTop: 15, boxShadow: "none", + border: 0, }, - addSideBar: { - width: "320px", - padding: "20px", + + tableBlock: { + ...tableStyles.tableBlock, }, - tableToolbar: { - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(0), + searchBox: { + flex: 1, }, - wrapCell: { - maxWidth: "200px", - whiteSpace: "normal", - wordWrap: "break-word", - }, - minTableHeader: { - color: "#393939", - "& tr": { - "& th": { - fontWeight: "bold", - }, - }, + ...actionsTray, + actionsTitle: { + fontSize: 14, + alignSelf: "center", + minWidth: 160, + marginRight: 10, }, noFound: { textAlign: "center", - padding: "10px 0", + padding: theme.spacing(3), + border: "1px solid #EAEAEA", + fontSize: ".9rem", }, - tableContainer: { - maxHeight: 200, - }, - stickyHeader: { - backgroundColor: "#fff", - }, - actionsTitle: { - fontWeight: 600, - color: "#000", - fontSize: 16, - alignSelf: "center", - }, - tableBlock: { - marginTop: 15, - }, - filterField: { - width: 375, - fontWeight: 600, - "& .input": { - "&::placeholder": { - fontWeight: 600, - color: "#000", - }, - }, - }, - ...actionsTray, ...selectorsCommon, }); @@ -187,26 +156,16 @@ const UsersSelectors = ({ {records !== null && records.length > 0 ? ( - + - - - - ), - }} - onChange={(e) => { - setFilter(e.target.value); - }} - variant="standard" - /> + +
+ +
) : ( -
No Users Available
+
No Users to display
)} diff --git a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx index ab62cdc40..d33b8f076 100644 --- a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx +++ b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx @@ -21,19 +21,18 @@ import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; import { LinearProgress } from "@mui/material"; import Grid from "@mui/material/Grid"; -import InputAdornment from "@mui/material/InputAdornment"; -import TextField from "@mui/material/TextField"; import { policySort } from "../../../utils/sortFunctions"; import { actionsTray, selectorsCommon, + tableStyles, } from "../Common/FormComponents/common/styleLibrary"; import { PolicyList } from "./types"; import { setModalErrorSnackMessage } from "../../../actions"; import { ErrorResponseHandler } from "../../../common/types"; import api from "../../../common/api"; import TableWrapper from "../Common/TableWrapper/TableWrapper"; -import SearchIcon from "../../../icons/SearchIcon"; +import SearchBox from "../Common/SearchBox"; interface ISelectPolicyProps { classes: any; @@ -44,65 +43,26 @@ interface ISelectPolicyProps { const styles = (theme: Theme) => createStyles({ - seeMore: { - marginTop: theme.spacing(3), - }, - paper: { - display: "flex", - overflow: "auto", - flexDirection: "column", - paddingTop: 15, - boxShadow: "none", - }, - addSideBar: { - width: "320px", - padding: "20px", - }, - tableToolbar: { - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(0), - }, - wrapCell: { - maxWidth: "200px", - whiteSpace: "normal", - wordWrap: "break-word", - }, - minTableHeader: { - color: "#393939", - "& tr": { - "& th": { - fontWeight: "bold", - }, - }, - }, noFound: { textAlign: "center", padding: "10px 0", }, - tableContainer: { - maxHeight: 200, + filterBox: { + flex: 1, }, - stickyHeader: { - backgroundColor: "#fff", + searchField: { + display: "flex", + alignItems: "center", + justifyContent: "space-between", + marginBottom: ".9rem", }, - actionsTitle: { + fieldLabel: { fontWeight: 600, - color: "#000", - fontSize: 16, - alignSelf: "center", + width: 160, + marginRight: 10, }, tableBlock: { - marginTop: 15, - }, - filterField: { - width: 375, - fontWeight: 600, - "& .input": { - "&::placeholder": { - fontWeight: 600, - color: "#000", - }, - }, + ...tableStyles.tableBlock, }, ...actionsTray, ...selectorsCommon, @@ -176,25 +136,17 @@ const PolicySelectors = ({ {loading && } {records.length > 0 ? ( - - Assign Policies - - - - ), - }} - onChange={(e) => { - setFilter(e.target.value); - }} - variant="standard" - /> + + Assign Policies + +
+ { + setFilter(value); + }} + /> +
createStyles({ ...modalBasic, + ...spacingUtils, + tableBlock: { + ...tableStyles.tableBlock, + marginTop: 15, + }, buttonContainer: { textAlign: "right", + marginTop: ".9rem", + }, + predefinedTitle: { + fontWeight: "normal", }, }); @@ -137,32 +150,34 @@ const SetPolicy = ({ > - - -
- +
+ +
- + + + + + + - +
+ +
), }} @@ -407,21 +407,23 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => { Assign Policies - { - history.push(`/policies/${policy.policy}`); +
+ { + history.push(`/policies/${policy.policy}`); + }, }, - }, - ]} - columns={[{ label: "Name", elementKey: "policy" }]} - isLoading={loading} - records={currentPolicies} - entityName="Policies" - idField="policy" - /> + ]} + columns={[{ label: "Name", elementKey: "policy" }]} + isLoading={loading} + records={currentPolicies} + entityName="Policies" + idField="policy" + /> +
), }} diff --git a/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx b/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx index 70fac8ebd..b018523f1 100644 --- a/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx +++ b/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx @@ -22,6 +22,7 @@ import withStyles from "@mui/styles/withStyles"; import { actionsTray, searchField, + tableStyles, } from "../Common/FormComponents/common/styleLibrary"; import api from "../../../common/api"; import TableWrapper from "../Common/TableWrapper/TableWrapper"; @@ -51,6 +52,7 @@ const styles = (theme: Theme) => actionsTray: { ...actionsTray.actionsTray, }, + ...tableStyles, }); const UserServiceAccountsPanel = ({ @@ -178,14 +180,16 @@ const UserServiceAccountsPanel = ({ Create service account - +
+ +
); };