From f02786001ce2959b014a4f162cf614e3c546e21f Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Wed, 5 Jul 2023 22:29:17 -0600
Subject: [PATCH] Migrated Groups Module components to mds (#2923)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 .../FormComponents/common/styleLibrary.ts     |   6 -
 .../screens/Console/Groups/AddGroupMember.tsx |  77 ++-
 .../screens/Console/Groups/AddGroupScreen.tsx | 164 +++---
 .../screens/Console/Groups/DeleteGroup.tsx    |  18 +-
 .../Console/Groups/GroupDetailsHeader.tsx     |  33 --
 .../src/screens/Console/Groups/Groups.tsx     |  73 +--
 .../screens/Console/Groups/GroupsDetails.tsx  | 534 +++++++++---------
 .../screens/Console/Groups/UsersSelectors.tsx | 136 ++---
 .../screens/Console/Policies/SetPolicy.tsx    |  86 +--
 .../src/screens/Console/Users/ListUsers.tsx   |  54 +-
 .../src/screens/Console/Users/UserDetails.tsx |   4 +-
 portal-ui/tests/utils/elements.ts             |  13 +-
 12 files changed, 486 insertions(+), 712 deletions(-)
 delete mode 100644 portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx

diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index c1713b61c..12f9b2f15 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -358,12 +358,6 @@ export const objectBrowserCommon = {
 // ** According to W3 spec, default minimum values for flex width flex-grow is "auto" (https://drafts.csswg.org/css-flexbox/#min-size-auto). So in this case we need to enforce the use of an absolute width.
 // "The preferred width of a box element child containing text content is currently the text without line breaks, leading to very unintuitive width and flex calculations → declare a width on a box element child with more than a few words (ever wonder why flexbox demos are all “1,2,3”?)"
 
-export const selectorsCommon = {
-  multiSelectTable: {
-    height: 200,
-  },
-};
-
 export const settingsCommon: any = {
   settingsFormContainer: {
     padding: 38,
diff --git a/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx b/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
index efab4bb37..1f5b7fd27 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
@@ -1,26 +1,31 @@
-import React, { useState } from "react";
-import UsersSelectors from "./UsersSelectors";
-import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
-import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
-import Grid from "@mui/material/Grid";
-import { AddMembersToGroupIcon, Button } from "mds";
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import {
-  formFieldStyles,
-  modalBasic,
-  modalStyleUtils,
-} from "../Common/FormComponents/common/styleLibrary";
-import withStyles from "@mui/styles/withStyles";
+import React, { useState } from "react";
+import { AddMembersToGroupIcon, Button, FormLayout, Grid, ReadBox } from "mds";
+import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import { encodeURLString } from "../../../common/utils";
 import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
+import UsersSelectors from "./UsersSelectors";
+import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 
 type UserPickerModalProps = {
-  classes?: any;
   title?: string;
   preSelectedUsers?: string[];
   selectedGroup?: string;
@@ -30,21 +35,7 @@ type UserPickerModalProps = {
   groupStatus?: string;
 };
 
-const styles = (theme: Theme) =>
-  createStyles({
-    userSelector: {
-      "& .MuiPaper-root": {
-        padding: 0,
-        marginBottom: 15,
-      },
-    },
-    ...modalStyleUtils,
-    ...formFieldStyles,
-    ...modalBasic,
-  });
-
 const AddGroupMember = ({
-  classes,
   title = "",
   groupStatus = "enabled",
   preSelectedUsers = [],
@@ -77,21 +68,17 @@ const AddGroupMember = ({
       title={title}
       titleIcon={<AddMembersToGroupIcon />}
     >
-      <Grid container>
-        <Grid item xs={12}>
-          <div className={classes.formFieldRow}>
-            <PredefinedList label={`Selected Group`} content={selectedGroup} />
-          </div>
-          <div className={classes.userSelector}>
-            <UsersSelectors
-              selectedUsers={selectedUsers}
-              setSelectedUsers={setSelectedUsers}
-              editMode={!selectedGroup}
-            />
-          </div>
-        </Grid>
-      </Grid>
-      <Grid item xs={12} className={classes.modalButtonBar}>
+      <FormLayout withBorders={false} containerPadding={false}>
+        <ReadBox label={`Selected Group`} sx={{ width: "100%" }}>
+          {selectedGroup}
+        </ReadBox>
+        <UsersSelectors
+          selectedUsers={selectedUsers}
+          setSelectedUsers={setSelectedUsers}
+          editMode={!selectedGroup}
+        />
+      </FormLayout>
+      <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
         <Button
           id={"reset-add-group-member"}
           type="button"
@@ -116,4 +103,4 @@ const AddGroupMember = ({
   );
 };
 
-export default withStyles(styles)(AddGroupMember);
+export default AddGroupMember;
diff --git a/portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx b/portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx
index 2e771ea93..ba41930b7 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx
@@ -15,40 +15,29 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { Theme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import {
-  formFieldStyles,
-  modalStyleUtils,
-} from "../Common/FormComponents/common/styleLibrary";
-import Grid from "@mui/material/Grid";
+import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import { LinearProgress } from "@mui/material";
-import { BackLink, Button, CreateGroupIcon, FormLayout, PageLayout } from "mds";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import AddGroupHelpBox from "./AddGroupHelpBox";
-import UsersSelectors from "./UsersSelectors";
-import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
-
-import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
-import { useAppDispatch } from "../../../store";
-import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
-import HelpMenu from "../HelpMenu";
+import {
+  BackLink,
+  Button,
+  CreateGroupIcon,
+  FormLayout,
+  Grid,
+  InputBox,
+  PageLayout,
+} from "mds";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
+import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
+import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
+import { useAppDispatch } from "../../../store";
+import AddGroupHelpBox from "./AddGroupHelpBox";
+import UsersSelectors from "./UsersSelectors";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
+import HelpMenu from "../HelpMenu";
 
-interface IAddGroupProps {
-  classes: any;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...formFieldStyles,
-    ...modalStyleUtils,
-  });
-
-const AddGroupScreen = ({ classes }: IAddGroupProps) => {
+const AddGroupScreen = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const [groupName, setGroupName] = useState<string>("");
@@ -101,73 +90,64 @@ const AddGroupScreen = ({ classes }: IAddGroupProps) => {
 
   return (
     <Fragment>
-      <Grid item xs={12}>
-        <PageHeaderWrapper
-          label={
-            <BackLink
-              label={"Groups"}
-              onClick={() => navigate(IAM_PAGES.GROUPS)}
+      <PageHeaderWrapper
+        label={
+          <BackLink
+            label={"Groups"}
+            onClick={() => navigate(IAM_PAGES.GROUPS)}
+          />
+        }
+        actions={<HelpMenu />}
+      />
+      <PageLayout>
+        <FormLayout
+          title={"Create Group"}
+          icon={<CreateGroupIcon />}
+          helpBox={<AddGroupHelpBox />}
+        >
+          <form noValidate autoComplete="off" onSubmit={setSaving}>
+            <InputBox
+              id="group-name"
+              name="group-name"
+              label="Group Name"
+              autoFocus={true}
+              value={groupName}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setGroupName(e.target.value);
+              }}
             />
-          }
-          actions={<HelpMenu />}
-        />
-        <PageLayout>
-          <FormLayout
-            title={"Create Group"}
-            icon={<CreateGroupIcon />}
-            helpBox={<AddGroupHelpBox />}
-          >
-            <form noValidate autoComplete="off" onSubmit={setSaving}>
-              <Grid container>
-                <Grid item xs={12} className={classes.formFieldRow}>
-                  <InputBoxWrapper
-                    id="group-name"
-                    name="group-name"
-                    label="Group Name"
-                    autoFocus={true}
-                    value={groupName}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setGroupName(e.target.value);
-                    }}
-                  />
-                </Grid>
-                <Grid item xs={12} className={classes.userSelector}>
-                  <UsersSelectors
-                    selectedUsers={selectedUsers}
-                    setSelectedUsers={setSelectedUsers}
-                    editMode={true}
-                  />
-                </Grid>
-              </Grid>
-              <Grid item xs={12} className={classes.modalButtonBar}>
-                <Button
-                  id={"clear-group"}
-                  type="button"
-                  variant="regular"
-                  style={classes.spacerRight}
-                  onClick={resetForm}
-                  label={"Clear"}
-                />
+            <UsersSelectors
+              selectedUsers={selectedUsers}
+              setSelectedUsers={setSelectedUsers}
+              editMode={true}
+            />
+            <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
+              <Button
+                id={"clear-group"}
+                type="button"
+                variant="regular"
+                onClick={resetForm}
+                label={"Clear"}
+              />
 
-                <Button
-                  id={"save-group"}
-                  type="submit"
-                  variant="callAction"
-                  disabled={saving || !validGroup}
-                  label={"Save"}
-                />
+              <Button
+                id={"save-group"}
+                type="submit"
+                variant="callAction"
+                disabled={saving || !validGroup}
+                label={"Save"}
+              />
+            </Grid>
+            {saving && (
+              <Grid item xs={12}>
+                <LinearProgress />
               </Grid>
-              {saving && (
-                <Grid item xs={12}>
-                  <LinearProgress />
-                </Grid>
-              )}
-            </form>
-          </FormLayout>
-        </PageLayout>
-      </Grid>
+            )}
+          </form>
+        </FormLayout>
+      </PageLayout>
     </Fragment>
   );
 };
 
-export default withStyles(styles)(AddGroupScreen);
+export default AddGroupScreen;
diff --git a/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx b/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx
index 2ff2f41d1..ee5ace25e 100644
--- a/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx
+++ b/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx
@@ -14,17 +14,14 @@
 // 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 { DialogContentText } from "@mui/material";
-
+import React, { Fragment } from "react";
 import { ErrorResponseHandler } from "../../../common/types";
-import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
-import useApi from "../Common/Hooks/useApi";
 import { ConfirmDeleteIcon } from "mds";
 import { encodeURLString } from "../../../common/utils";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
+import useApi from "../Common/Hooks/useApi";
 
 interface IDeleteGroup {
   selectedGroups: string[];
@@ -72,11 +69,12 @@ const DeleteGroup = ({
       onConfirm={onDeleteGroups}
       onClose={onClose}
       confirmationContent={
-        <DialogContentText>
-          Are you sure you want to delete the following {selectedGroups.length}{" "}
-          group{selectedGroups.length > 1 ? "s?" : "?"}
+        <Fragment>
+          Are you sure you want to delete the following{" "}
+          {selectedGroups.length === 1 ? "" : selectedGroups.length} group
+          {selectedGroups.length > 1 ? "s?" : "?"}
           {renderGroups}
-        </DialogContentText>
+        </Fragment>
       }
     />
   );
diff --git a/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx b/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
deleted file mode 100644
index 93e051f97..000000000
--- a/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { Fragment, useEffect } from "react";
-import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
-import { BackLink } from "mds";
-import { useNavigate } from "react-router-dom";
-import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
-import HelpMenu from "../HelpMenu";
-import { useAppDispatch } from "../../../store";
-import { setHelpName } from "../../../systemSlice";
-
-const GroupDetailsHeader = () => {
-  const navigate = useNavigate();
-
-  const dispatch = useAppDispatch();
-  useEffect(() => {
-    dispatch(setHelpName("group_details"));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return (
-    <PageHeaderWrapper
-      label={
-        <Fragment>
-          <BackLink
-            label={"Groups"}
-            onClick={() => navigate(IAM_PAGES.GROUPS)}
-          />
-        </Fragment>
-      }
-      actions={<HelpMenu />}
-    />
-  );
-};
-
-export default GroupDetailsHeader;
diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx
index f61ee232c..33888189f 100644
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -15,7 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { Theme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 import {
   AddIcon,
@@ -26,22 +25,14 @@ import {
   IAMPoliciesIcon,
   PageLayout,
   UsersIcon,
+  DataTable,
+  Grid,
+  Box,
 } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import Grid from "@mui/material/Grid";
-import { Box, LinearProgress } from "@mui/material";
-
+import { LinearProgress } from "@mui/material";
+import { api } from "api";
 import { stringSort } from "../../../utils/sortFunctions";
-import {
-  actionsTray,
-  containerForHeader,
-  searchField,
-  tableStyles,
-} from "../Common/FormComponents/common/styleLibrary";
-import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import AButton from "../Common/AButton/AButton";
-import SearchBox from "../Common/SearchBox";
+import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
 import {
   applyPolicyPermissions,
   CONSOLE_UI_RESOURCE,
@@ -56,44 +47,23 @@ import {
   hasPermission,
   SecureComponent,
 } from "../../../common/SecureComponent";
-
+import { errorToHandler } from "../../../api/errors";
 import withSuspense from "../Common/Components/withSuspense";
-
 import { encodeURLString } from "../../../common/utils";
-
 import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
+import AButton from "../Common/AButton/AButton";
+import SearchBox from "../Common/SearchBox";
 
 const DeleteGroup = withSuspense(React.lazy(() => import("./DeleteGroup")));
 const SetPolicy = withSuspense(
   React.lazy(() => import("../Policies/SetPolicy"))
 );
 
-interface IGroupsProps {
-  classes: any;
-  openGroupModal: any;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    tableBlock: {
-      ...tableStyles.tableBlock,
-      marginTop: 15,
-    },
-    ...actionsTray,
-    searchField: {
-      ...searchField.searchField,
-      maxWidth: 380,
-    },
-    ...containerForHeader,
-  });
-
-const Groups = ({ classes }: IGroupsProps) => {
+const Groups = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
@@ -230,8 +200,8 @@ const Groups = ({ classes }: IGroupsProps) => {
       <PageHeaderWrapper label={"Groups"} actions={<HelpMenu />} />
 
       <PageLayout>
-        <Grid container spacing={1}>
-          <Grid item xs={12} className={classes.actionsTray}>
+        <Grid container>
+          <Grid item xs={12} sx={actionsTray.actionsTray}>
             <SecureComponent
               resource={CONSOLE_UI_RESOURCE}
               scopes={displayGroupsPermissions}
@@ -240,8 +210,8 @@ const Groups = ({ classes }: IGroupsProps) => {
               <SearchBox
                 placeholder={"Search Groups"}
                 onChange={setFilter}
-                overrideClass={classes.searchField}
                 value={filter}
+                sx={{ maxWidth: 380 }}
               />
             </SecureComponent>
             <Box
@@ -334,15 +304,15 @@ const Groups = ({ classes }: IGroupsProps) => {
             <Fragment>
               {records.length > 0 && (
                 <Fragment>
-                  <Grid item xs={12} className={classes.tableBlock}>
+                  <Grid item xs={12} sx={{ marginBottom: 15 }}>
                     <SecureComponent
                       resource={CONSOLE_UI_RESOURCE}
                       scopes={displayGroupsPermissions}
                       errorProps={{ disabled: true }}
                     >
-                      <TableWrapper
+                      <DataTable
                         itemActions={tableActions}
-                        columns={[{ label: "Name", elementKey: "" }]}
+                        columns={[{ label: "Name" }]}
                         isLoading={loading}
                         selectedItems={checkedGroups}
                         onSelect={
@@ -354,7 +324,7 @@ const Groups = ({ classes }: IGroupsProps) => {
                       />
                     </SecureComponent>
                   </Grid>
-                  <Grid item xs={12} marginTop={"25px"}>
+                  <Grid item xs={12}>
                     <HelpBox
                       title={"Groups"}
                       iconComponent={<GroupsIcon />}
@@ -382,12 +352,7 @@ const Groups = ({ classes }: IGroupsProps) => {
                 </Fragment>
               )}
               {records.length === 0 && (
-                <Grid
-                  container
-                  justifyContent={"center"}
-                  alignContent={"center"}
-                  alignItems={"center"}
-                >
+                <Grid container>
                   <Grid item xs={8}>
                     <HelpBox
                       title={"Groups"}
@@ -429,4 +394,4 @@ const Groups = ({ classes }: IGroupsProps) => {
   );
 };
 
-export default withStyles(styles)(Groups);
+export default Groups;
diff --git a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
index 264c5189e..8f761a00d 100644
--- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
+++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
@@ -1,34 +1,40 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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, { Fragment, useEffect, useState } from "react";
-import { Theme } from "@mui/material/styles";
 import { useNavigate, useParams } from "react-router-dom";
 import {
   AddIcon,
+  BackLink,
+  Box,
   Button,
+  DataTable,
+  Grid,
   GroupsIcon,
   IAMPoliciesIcon,
   PageLayout,
+  ScreenTitle,
+  SectionTitle,
+  Switch,
+  Tabs,
   TrashIcon,
 } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import {
-  actionsTray,
-  containerForHeader,
-  searchField,
-  spacingUtils,
-  tableStyles,
-} from "../Common/FormComponents/common/styleLibrary";
-
-import withStyles from "@mui/styles/withStyles";
-import { Grid } from "@mui/material";
-import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
-import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import SetPolicy from "../Policies/SetPolicy";
-import AddGroupMember from "./AddGroupMember";
-import DeleteGroup from "./DeleteGroup";
-import VerticalTabs from "../Common/VerticalTabs/VerticalTabs";
-import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-import PanelTitle from "../Common/PanelTitle/PanelTitle";
-import SearchBox from "../Common/SearchBox";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
+import { Group } from "api/consoleApi";
 import {
   addUserToGroupPermissions,
   CONSOLE_UI_RESOURCE,
@@ -47,83 +53,34 @@ import {
   hasPermission,
   SecureComponent,
 } from "../../../common/SecureComponent";
-import GroupDetailsHeader from "./GroupDetailsHeader";
-
 import { decodeURLString, encodeURLString } from "../../../common/utils";
 import { setHelpName, setModalErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import { setSelectedPolicies } from "../Users/AddUsersSlice";
+import SetPolicy from "../Policies/SetPolicy";
+import AddGroupMember from "./AddGroupMember";
+import DeleteGroup from "./DeleteGroup";
+import SearchBox from "../Common/SearchBox";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
-import { Group } from "api/consoleApi";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    pageContainer: {
-      border: "1px solid #EAEAEA",
-      width: "100%",
-    },
-    statusLabel: {
-      fontSize: ".8rem",
-      marginRight: ".7rem",
-    },
-    statusValue: {
-      fontWeight: "bold",
-      fontSize: ".9rem",
-      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",
-        },
-      },
-    },
-    ...containerForHeader,
-  });
-
-interface IGroupDetailsProps {
-  classes: any;
-}
+import HelpMenu from "../HelpMenu";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 export const formatPolicy = (policy: string = ""): string[] => {
   if (policy.length <= 0) return [];
   return policy.split(",");
 };
 
-const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
+const GroupsDetails = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const params = useParams();
 
   const [groupDetails, setGroupDetails] = useState<Group>({});
-
-  /*Modals*/
   const [policyOpen, setPolicyOpen] = useState<boolean>(false);
   const [usersOpen, setUsersOpen] = useState<boolean>(false);
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
   const [memberFilter, setMemberFilter] = useState<string>("");
+  const [currentTab, setCurrentTab] = useState<string>("members");
 
   const groupName = decodeURLString(params.groupName || "");
 
@@ -140,7 +97,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
   );
 
   useEffect(() => {
-    dispatch(setHelpName("groups_members"));
+    dispatch(setHelpName("group_details"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -207,73 +164,70 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
   }
 
   const groupsTabContent = (
-    <React.Fragment>
-      <div
-        className={classes.actionsTray}
-        onMouseMove={() => {
-          dispatch(setHelpName("groups_members"));
-        }}
-      >
-        <PanelTitle>Members</PanelTitle>
-        <SearchBox
-          placeholder={"Search members"}
-          onChange={(searchText) => {
-            setMemberFilter(searchText);
-          }}
-          overrideClass={classes.searchField}
-          value={memberFilter}
-        />
-        <SecureComponent
-          resource={CONSOLE_UI_RESOURCE}
-          scopes={addUserToGroupPermissions}
-          errorProps={{ disabled: true }}
-        >
-          <TooltipWrapper
-            tooltip={
-              canEditGroupMembers
-                ? memberActionText
-                : permissionTooltipHelper(
-                    createGroupPermissions,
-                    "edit Group membership"
-                  )
-            }
+    <Box
+      onMouseMove={() => {
+        dispatch(setHelpName("groups_members"));
+      }}
+    >
+      <SectionTitle
+        separator
+        sx={{ marginBottom: 15 }}
+        actions={
+          <Box
+            sx={{
+              display: "flex",
+              gap: 10,
+            }}
           >
-            <Button
-              id={"add-user-group"}
-              label={memberActionText}
-              variant="callAction"
-              icon={<AddIcon />}
-              onClick={() => {
-                setUsersOpen(true);
+            <SearchBox
+              placeholder={"Search members"}
+              onChange={(searchText) => {
+                setMemberFilter(searchText);
+              }}
+              value={memberFilter}
+              sx={{
+                maxWidth: 280,
               }}
-              disabled={!canEditGroupMembers}
             />
-          </TooltipWrapper>
-        </SecureComponent>
-      </div>
-
+            <SecureComponent
+              resource={CONSOLE_UI_RESOURCE}
+              scopes={addUserToGroupPermissions}
+              errorProps={{ disabled: true }}
+            >
+              <TooltipWrapper
+                tooltip={
+                  canEditGroupMembers
+                    ? memberActionText
+                    : permissionTooltipHelper(
+                        createGroupPermissions,
+                        "edit Group membership"
+                      )
+                }
+              >
+                <Button
+                  id={"add-user-group"}
+                  label={memberActionText}
+                  variant="callAction"
+                  icon={<AddIcon />}
+                  onClick={() => {
+                    setUsersOpen(true);
+                  }}
+                  disabled={!canEditGroupMembers}
+                />
+              </TooltipWrapper>
+            </SecureComponent>
+          </Box>
+        }
+      >
+        Members
+      </SectionTitle>
       <Grid item xs={12}>
         <SecureComponent
           resource={CONSOLE_UI_RESOURCE}
           scopes={listUsersPermissions}
           errorProps={{ disabled: true }}
         >
-          <TableWrapper
-            itemActions={[
-              {
-                type: "view",
-                onClick: (userName) => {
-                  navigate(`${IAM_PAGES.USERS}/${encodeURLString(userName)}`);
-                },
-                disableButtonFunction: () => !viewUser,
-              },
-            ]}
-            columns={[{ label: "Access Key", elementKey: "" }]}
-            selectedItems={[]}
-            isLoading={false}
-            records={filteredMembers}
-            entityName="Users"
-            idField=""
+          <TooltipWrapper
             tooltip={
               viewUser
                 ? ""
@@ -282,59 +236,68 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
                     "view User details"
                   )
             }
-          />
+          >
+            <DataTable
+              itemActions={[
+                {
+                  type: "view",
+                  onClick: (userName) => {
+                    navigate(`${IAM_PAGES.USERS}/${encodeURLString(userName)}`);
+                  },
+                  disableButtonFunction: () => !viewUser,
+                },
+              ]}
+              columns={[{ label: "Access Key" }]}
+              selectedItems={[]}
+              isLoading={false}
+              records={filteredMembers}
+              entityName="Users"
+            />
+          </TooltipWrapper>
         </SecureComponent>
       </Grid>
-    </React.Fragment>
+    </Box>
   );
 
   const policiesTabContent = (
-    <React.Fragment>
-      <div
-        className={classes.actionsTray}
+    <Fragment>
+      <Box
         onMouseMove={() => {
           dispatch(setHelpName("groups_policies"));
         }}
       >
-        <PanelTitle>Policies</PanelTitle>
-        <TooltipWrapper
-          tooltip={
-            canSetPolicies
-              ? "Set Policies"
-              : permissionTooltipHelper(
-                  setGroupPoliciesPermissions,
-                  "assign Policies"
-                )
+        <SectionTitle
+          separator
+          sx={{ marginBottom: 15 }}
+          actions={
+            <TooltipWrapper
+              tooltip={
+                canSetPolicies
+                  ? "Set Policies"
+                  : permissionTooltipHelper(
+                      setGroupPoliciesPermissions,
+                      "assign Policies"
+                    )
+              }
+            >
+              <Button
+                id={"set-policies"}
+                label={`Set Policies`}
+                variant="callAction"
+                icon={<IAMPoliciesIcon />}
+                onClick={() => {
+                  setPolicyOpen(true);
+                }}
+                disabled={!canSetPolicies}
+              />
+            </TooltipWrapper>
           }
         >
-          <Button
-            id={"set-policies"}
-            label={`Set Policies`}
-            variant="callAction"
-            icon={<IAMPoliciesIcon />}
-            onClick={() => {
-              setPolicyOpen(true);
-            }}
-            disabled={!canSetPolicies}
-          />
-        </TooltipWrapper>
-      </div>
+          Policies
+        </SectionTitle>
+      </Box>
       <Grid item xs={12}>
-        <TableWrapper
-          itemActions={[
-            {
-              type: "view",
-              onClick: (policy) => {
-                navigate(`${IAM_PAGES.POLICIES}/${encodeURLString(policy)}`);
-              },
-              disableButtonFunction: () => !canViewPolicy,
-            },
-          ]}
-          columns={[{ label: "Policy", elementKey: "" }]}
-          isLoading={false}
-          records={groupPolicies}
-          entityName="Policies"
-          idField=""
+        <TooltipWrapper
           tooltip={
             canViewPolicy
               ? ""
@@ -343,95 +306,29 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
                   "view Policy details"
                 )
           }
-        />
-      </Grid>
-    </React.Fragment>
-  );
-  return (
-    <React.Fragment>
-      <GroupDetailsHeader />
-
-      <PageLayout className={classes.pageContainer}>
-        <Grid item xs={12}>
-          <ScreenTitle
-            icon={
-              <Fragment>
-                <GroupsIcon width={40} />
-              </Fragment>
-            }
-            title={groupName}
-            subTitle={null}
-            actions={
-              <Fragment>
-                <span className={classes.statusLabel}>Group Status:</span>
-                <span id="group-status" className={classes.statusValue}>
-                  {isGroupEnabled ? "Enabled" : "Disabled"}
-                </span>
-                <TooltipWrapper
-                  tooltip={
-                    hasPermission(
-                      CONSOLE_UI_RESOURCE,
-                      enableDisableGroupPermissions,
-                      true
-                    )
-                      ? ""
-                      : permissionTooltipHelper(
-                          enableDisableGroupPermissions,
-                          "enable or disable Groups"
-                        )
-                  }
-                >
-                  <SecureComponent
-                    resource={CONSOLE_UI_RESOURCE}
-                    scopes={enableDisableGroupPermissions}
-                    errorProps={{ disabled: true }}
-                    matchAll
-                  >
-                    <FormSwitchWrapper
-                      indicatorLabels={["Enabled", "Disabled"]}
-                      checked={isGroupEnabled}
-                      value={"group_enabled"}
-                      id="group-status"
-                      name="group-status"
-                      onChange={() => {
-                        toggleGroupStatus(!isGroupEnabled);
-                      }}
-                      switchOnly
-                    />
-                  </SecureComponent>
-                </TooltipWrapper>
-
-                <div className={classes.spacerLeft}>
-                  <TooltipWrapper tooltip={"Delete Group"}>
-                    <Button
-                      id={"delete-user-group"}
-                      variant="secondary"
-                      icon={<TrashIcon />}
-                      onClick={() => {
-                        setDeleteOpen(true);
-                      }}
-                    />
-                  </TooltipWrapper>
-                </div>
-              </Fragment>
-            }
+        >
+          <DataTable
+            itemActions={[
+              {
+                type: "view",
+                onClick: (policy) => {
+                  navigate(`${IAM_PAGES.POLICIES}/${encodeURLString(policy)}`);
+                },
+                disableButtonFunction: () => !canViewPolicy,
+              },
+            ]}
+            columns={[{ label: "Policy" }]}
+            isLoading={false}
+            records={groupPolicies}
+            entityName="Policies"
           />
-        </Grid>
+        </TooltipWrapper>
+      </Grid>
+    </Fragment>
+  );
 
-        <Grid item xs={12}>
-          <VerticalTabs>
-            {{
-              tabConfig: { label: "Members" },
-              content: groupsTabContent,
-            }}
-            {{
-              tabConfig: { label: "Policies" },
-              content: policiesTabContent,
-            }}
-          </VerticalTabs>
-        </Grid>
-      </PageLayout>
-      {/*Modals*/}
+  return (
+    <Fragment>
       {policyOpen ? (
         <SetPolicy
           open={policyOpen}
@@ -472,9 +369,110 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
           }}
         />
       )}
-      {/*Modals*/}
-    </React.Fragment>
+      <PageHeaderWrapper
+        label={
+          <Fragment>
+            <BackLink
+              label={"Groups"}
+              onClick={() => navigate(IAM_PAGES.GROUPS)}
+            />
+          </Fragment>
+        }
+        actions={<HelpMenu />}
+      />
+      <PageLayout>
+        <Grid item xs={12}>
+          <ScreenTitle
+            icon={
+              <Fragment>
+                <GroupsIcon width={40} />
+              </Fragment>
+            }
+            title={groupName}
+            subTitle={null}
+            bottomBorder
+            actions={
+              <Box
+                sx={{
+                  display: "flex",
+                  fontSize: 14,
+                  alignItems: "center",
+                  gap: 15,
+                }}
+              >
+                <span>Group Status:</span>
+                <span id="group-status-label" style={{ fontWeight: "bold" }}>
+                  {isGroupEnabled ? "Enabled" : "Disabled"}
+                </span>
+                <TooltipWrapper
+                  tooltip={
+                    hasPermission(
+                      CONSOLE_UI_RESOURCE,
+                      enableDisableGroupPermissions,
+                      true
+                    )
+                      ? ""
+                      : permissionTooltipHelper(
+                          enableDisableGroupPermissions,
+                          "enable or disable Groups"
+                        )
+                  }
+                >
+                  <SecureComponent
+                    resource={CONSOLE_UI_RESOURCE}
+                    scopes={enableDisableGroupPermissions}
+                    errorProps={{ disabled: true }}
+                    matchAll
+                  >
+                    <Switch
+                      indicatorLabels={["Enabled", "Disabled"]}
+                      checked={isGroupEnabled}
+                      value={"group_enabled"}
+                      id="group-status"
+                      name="group-status"
+                      onChange={() => {
+                        toggleGroupStatus(!isGroupEnabled);
+                      }}
+                      switchOnly
+                    />
+                  </SecureComponent>
+                </TooltipWrapper>
+
+                <TooltipWrapper tooltip={"Delete Group"}>
+                  <Button
+                    id={"delete-user-group"}
+                    variant="secondary"
+                    icon={<TrashIcon />}
+                    onClick={() => {
+                      setDeleteOpen(true);
+                    }}
+                  />
+                </TooltipWrapper>
+              </Box>
+            }
+            sx={{ marginBottom: 15 }}
+          />
+        </Grid>
+
+        <Grid item xs={12}>
+          <Tabs
+            options={[
+              {
+                tabConfig: { id: "members", label: "Members" },
+                content: groupsTabContent,
+              },
+              {
+                tabConfig: { id: "policies", label: "Policies" },
+                content: policiesTabContent,
+              },
+            ]}
+            currentTabOrPath={currentTab}
+            onTabClick={setCurrentTab}
+          />
+        </Grid>
+      </PageLayout>
+    </Fragment>
   );
 };
 
-export default withStyles(styles)(GroupsDetails);
+export default GroupsDetails;
diff --git a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx b/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
index b97edffee..d65332d5a 100644
--- a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
+++ b/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
@@ -14,71 +14,24 @@
 // 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, { useCallback, useEffect, useState } from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { LinearProgress } from "@mui/material";
+import React, { useCallback, useEffect, useState, Fragment } from "react";
 import get from "lodash/get";
-import Paper from "@mui/material/Paper";
-import Grid from "@mui/material/Grid";
-import { usersSort } from "../../../utils/sortFunctions";
-import {
-  actionsTray,
-  selectorsCommon,
-  tableStyles,
-} from "../Common/FormComponents/common/styleLibrary";
-
-import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import SearchBox from "../Common/SearchBox";
-
-import { setModalErrorSnackMessage } from "../../../systemSlice";
-import { useAppDispatch } from "../../../store";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
+import { Box, DataTable, Grid } from "mds";
+import { LinearProgress } from "@mui/material";
+import { usersSort } from "../../../utils/sortFunctions";
+import { setModalErrorSnackMessage } from "../../../systemSlice";
+import { useAppDispatch } from "../../../store";
+import SearchBox from "../Common/SearchBox";
 
 interface IGroupsProps {
-  classes: any;
   selectedUsers: string[];
   setSelectedUsers: any;
   editMode?: boolean;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-      // paddingTop: 15,
-      boxShadow: "none",
-      border: 0,
-    },
-
-    tableBlock: {
-      ...tableStyles.tableBlock,
-    },
-    searchBox: {
-      flex: 1,
-    },
-    ...actionsTray,
-    actionsTitle: {
-      fontSize: 14,
-      alignSelf: "center",
-      minWidth: 160,
-      marginRight: 10,
-    },
-    noFound: {
-      textAlign: "center",
-      padding: theme.spacing(3),
-      border: "1px solid #EAEAEA",
-      fontSize: ".9rem",
-    },
-    ...selectorsCommon,
-  });
-
 const UsersSelectors = ({
-  classes,
   selectedUsers,
   setSelectedUsers,
   editMode = false,
@@ -146,44 +99,43 @@ const UsersSelectors = ({
   );
 
   return (
-    <React.Fragment>
-      <Grid item xs={12}>
-        <Paper className={classes.paper}>
-          {loading && <LinearProgress />}
-          {records !== null && records.length > 0 ? (
-            <React.Fragment>
-              <Grid item xs={12} className={classes.actionsTray}>
-                <label className={classes.actionsTitle}>
-                  {editMode ? "Edit Members" : "Assign Users"}
-                </label>
-                <div className={classes.searchBox}>
-                  <SearchBox
-                    placeholder="Filter Users"
-                    onChange={setFilter}
-                    value={filter}
-                  />
-                </div>
-              </Grid>
-              <Grid item xs={12} className={classes.tableBlock}>
-                <TableWrapper
-                  columns={[{ label: "Access Key", elementKey: "accessKey" }]}
-                  onSelect={selectionChanged}
-                  selectedItems={selUsers}
-                  isLoading={loading}
-                  records={filteredRecords}
-                  entityName="Users"
-                  idField="accessKey"
-                  customPaperHeight={classes.multiSelectTable}
-                />
-              </Grid>
-            </React.Fragment>
-          ) : (
-            <div className={classes.noFound}>No Users to display</div>
-          )}
-        </Paper>
-      </Grid>
-    </React.Fragment>
+    <Grid item xs={12} className={"inputItem"}>
+      <Box>
+        {loading && <LinearProgress />}
+        {records?.length > 0 ? (
+          <Fragment>
+            <Grid item xs={12} className={"inputItem"}>
+              <SearchBox
+                label={editMode ? "Edit Members" : "Assign Users"}
+                placeholder="Filter Users"
+                onChange={setFilter}
+                value={filter}
+              />
+            </Grid>
+            <DataTable
+              columns={[{ label: "Access Key", elementKey: "accessKey" }]}
+              onSelect={selectionChanged}
+              selectedItems={selUsers}
+              isLoading={loading}
+              records={filteredRecords}
+              entityName="Users"
+              idField="accessKey"
+              customPaperHeight={"200px"}
+            />
+          </Fragment>
+        ) : (
+          <Box
+            sx={{
+              textAlign: "center",
+              padding: "10px 0",
+            }}
+          >
+            No Users to display
+          </Box>
+        )}
+      </Box>
+    </Grid>
   );
 };
 
-export default withStyles(styles)(UsersSelectors);
+export default UsersSelectors;
diff --git a/portal-ui/src/screens/Console/Policies/SetPolicy.tsx b/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
index fd65dca0c..fb61e7858 100644
--- a/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
@@ -16,59 +16,28 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
-import { Theme } from "@mui/material/styles";
-import { Button } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
+import { useSelector } from "react-redux";
+import { Button, FormLayout, ReadBox, Grid } from "mds";
 import { LinearProgress } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import {
-  modalBasic,
-  spacingUtils,
-  tableStyles,
-} from "../Common/FormComponents/common/styleLibrary";
-import { User } from "../Users/types";
-
 import { ErrorResponseHandler } from "../../../common/types";
-import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
-import api from "../../../common/api";
-import PolicySelectors from "./PolicySelectors";
-import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
 import { encodeURLString } from "../../../common/utils";
 import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { AppState, useAppDispatch } from "../../../store";
-
-import { useSelector } from "react-redux";
+import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
+import { User } from "../Users/types";
 import { setSelectedPolicies } from "../Users/AddUsersSlice";
+import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
+import PolicySelectors from "./PolicySelectors";
+import api from "../../../common/api";
 
 interface ISetPolicyProps {
-  classes: any;
   closeModalAndRefresh: () => void;
   selectedUser: User | null;
   selectedGroups: string[] | null;
   open: boolean;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...modalBasic,
-    ...spacingUtils,
-    tableBlock: {
-      ...tableStyles.tableBlock,
-      marginTop: 15,
-    },
-    buttonContainer: {
-      display: "flex",
-      justifyContent: "flex-end",
-      marginTop: ".9rem",
-      "& button": {
-        marginLeft: 8,
-      },
-    },
-  });
-
 const SetPolicy = ({
-  classes,
   closeModalAndRefresh,
   selectedUser,
   selectedGroups,
@@ -158,41 +127,34 @@ const SetPolicy = ({
       modalOpen={open}
       title="Set Policies"
     >
-      <Grid container>
+      <FormLayout withBorders={false} containerPadding={false}>
         {(selectedGroups?.length === 1 || selectedUser != null) && (
           <Fragment>
-            <Grid item xs={12}>
-              <PredefinedList
-                label={`Selected ${selectedGroups !== null ? "Group" : "User"}`}
-                content={selectedGroups !== null ? selectedGroups[0] : userName}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <PredefinedList
-                label={"Current Policy"}
-                content={actualPolicy.join(", ")}
-              />
-            </Grid>
+            <ReadBox
+              label={`Selected ${selectedGroups !== null ? "Group" : "User"}`}
+              sx={{ width: "100%" }}
+            >
+              {selectedGroups !== null ? selectedGroups[0] : userName}
+            </ReadBox>
+            <ReadBox label={"Current Policy"} sx={{ width: "100%" }}>
+              {actualPolicy.join(", ")}
+            </ReadBox>
           </Fragment>
         )}
         {selectedGroups && selectedGroups?.length > 1 && (
-          <PredefinedList
-            label={"Selected Groups"}
-            content={selectedGroups.join(", ")}
-          />
+          <ReadBox label={"Selected Groups"} sx={{ width: "100%" }}>
+            {selectedGroups.join(", ")}
+          </ReadBox>
         )}
         <Grid item xs={12}>
-          <div className={classes.tableBlock}>
-            <PolicySelectors selectedPolicy={selectedPolicy} />
-          </div>
+          <PolicySelectors selectedPolicy={selectedPolicy} />
         </Grid>
-      </Grid>
-      <Grid item xs={12} className={classes.buttonContainer}>
+      </FormLayout>
+      <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
         <Button
           id={"reset"}
           type="button"
           variant="regular"
-          className={classes.spacerRight}
           onClick={resetSelection}
           label={"Reset"}
         />
@@ -215,4 +177,4 @@ const SetPolicy = ({
   );
 };
 
-export default withStyles(styles)(SetPolicy);
+export default SetPolicy;
diff --git a/portal-ui/src/screens/Console/Users/ListUsers.tsx b/portal-ui/src/screens/Console/Users/ListUsers.tsx
index a5734ca37..35217a2b7 100644
--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -15,8 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-
-import { Theme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 import {
   AddIcon,
@@ -29,23 +27,12 @@ import {
   DataTable,
   Grid,
 } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import api from "../../../common/api";
 import { LinearProgress } from "@mui/material";
 import { User, UsersList } from "./types";
 import { usersSort } from "../../../utils/sortFunctions";
-import {
-  actionsTray,
-  containerForHeader,
-  searchField,
-  tableStyles,
-} from "../Common/FormComponents/common/styleLibrary";
+import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../common/types";
 import { encodeURLString } from "../../../common/utils";
-import AButton from "../Common/AButton/AButton";
-import SearchBox from "../Common/SearchBox";
-import withSuspense from "../Common/Components/withSuspense";
 import {
   addUserToGroupPermissions,
   CONSOLE_UI_RESOURCE,
@@ -57,6 +44,10 @@ import {
   S3_ALL_RESOURCES,
   viewUserPermissions,
 } from "../../../common/SecureComponent/permissions";
+import api from "../../../common/api";
+import AButton from "../Common/AButton/AButton";
+import SearchBox from "../Common/SearchBox";
+import withSuspense from "../Common/Components/withSuspense";
 
 import {
   hasPermission,
@@ -71,24 +62,7 @@ import HelpMenu from "../HelpMenu";
 const DeleteUser = withSuspense(React.lazy(() => import("./DeleteUser")));
 const AddToGroup = withSuspense(React.lazy(() => import("./BulkAddToGroup")));
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...actionsTray,
-    ...searchField,
-    searchField: {
-      ...searchField.searchField,
-      marginRight: "auto",
-      maxWidth: 380,
-    },
-    ...tableStyles,
-    ...containerForHeader,
-  });
-
-interface IUsersProps {
-  classes: any;
-}
-
-const ListUsers = ({ classes }: IUsersProps) => {
+const ListUsers = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
@@ -219,12 +193,15 @@ const ListUsers = ({ classes }: IUsersProps) => {
 
       <PageLayout>
         <Grid container>
-          <Grid item xs={12} className={classes.actionsTray}>
+          <Grid item xs={12} sx={actionsTray.actionsTray}>
             <SearchBox
               placeholder={"Search Users"}
               onChange={setFilter}
-              overrideClass={classes.searchField}
               value={filter}
+              sx={{
+                marginRight: "auto",
+                maxWidth: 380,
+              }}
             />
             <SecureComponent
               resource={CONSOLE_UI_RESOURCE}
@@ -352,12 +329,7 @@ const ListUsers = ({ classes }: IUsersProps) => {
             <Fragment>
               {records.length > 0 && (
                 <Fragment>
-                  <Grid
-                    item
-                    xs={12}
-                    className={classes.tableBlock}
-                    sx={{ marginBottom: 15 }}
-                  >
+                  <Grid item xs={12} sx={{ marginBottom: 15 }}>
                     <SecureComponent
                       scopes={[IAM_SCOPES.ADMIN_LIST_USERS]}
                       resource={CONSOLE_UI_RESOURCE}
@@ -496,4 +468,4 @@ const ListUsers = ({ classes }: IUsersProps) => {
   );
 };
 
-export default withStyles(styles)(ListUsers);
+export default ListUsers;
diff --git a/portal-ui/src/screens/Console/Users/UserDetails.tsx b/portal-ui/src/screens/Console/Users/UserDetails.tsx
index 240f00b53..12d2a4050 100644
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -371,7 +371,7 @@ const UserDetails = () => {
                     disabled: !canAssignGroup,
                   },
                   content: (
-                    <React.Fragment>
+                    <Fragment>
                       <Box
                         onMouseMove={() =>
                           dispatch(setHelpName("user_details_groups"))
@@ -423,7 +423,7 @@ const UserDetails = () => {
                           idField="group"
                         />
                       </Grid>
-                    </React.Fragment>
+                    </Fragment>
                   ),
                 },
                 {
diff --git a/portal-ui/tests/utils/elements.ts b/portal-ui/tests/utils/elements.ts
index a20895240..16146e42c 100644
--- a/portal-ui/tests/utils/elements.ts
+++ b/portal-ui/tests/utils/elements.ts
@@ -52,7 +52,7 @@ export const assignPoliciesButton = Selector("button").withAttribute(
 //----------------------------------------------------
 // Switches
 //----------------------------------------------------
-export const switchInput = Selector(".MuiSwitch-input");
+export const switchInput = Selector("#group-status").sibling("span");
 export const deleteAllVersions =
   Selector("#delete-versions").sibling("span.switchRail");
 
@@ -84,11 +84,10 @@ export const filterUserInput = searchResourceInput.withAttribute(
   "placeholder",
   "Filter Users"
 );
-export const groupUserCheckbox = Selector(".ReactVirtualized__Table__row span")
-  .withText(constants.TEST_USER_NAME)
-  .parent(1)
-  .find(".ReactVirtualized__Grid input")
-  .withAttribute("type", "checkbox");
+export const groupUserCheckbox = Selector(".ReactVirtualized__Table__row input")
+  .withAttribute("type", "checkbox")
+  .withAttribute("value", constants.TEST_USER_NAME)
+  .sibling("span");
 
 //----------------------------------------------------
 // Dropdowns and options
@@ -103,7 +102,7 @@ export const bucketDropdownOptionFor = (modifier) => {
 //----------------------------------------------------
 // Text
 //----------------------------------------------------
-export const groupStatusText = Selector("#group-status");
+export const groupStatusText = Selector("#group-status-label");
 
 //----------------------------------------------------
 // Tables, table headers and content