Migrated Access Keys page components to mds (#2834)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

Author: bexsoft

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

@@ -18,24 +18,21 @@ import React, { Fragment, useEffect, useState } from "react";
 import {
   AccountIcon,
   AddIcon,
+  Box,
   Button,
+  DataTable,
   DeleteIcon,
+  Grid,
   HelpBox,
   PageLayout,
   PasswordKeyIcon,
 } from "mds";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import Grid from "@mui/material/Grid";
 import api from "../../../common/api";
-import { Box } from "@mui/material";
-import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import { stringSort } from "../../../utils/sortFunctions";
 import {
   actionsTray,
-  searchField,
   tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 
@@ -54,7 +51,6 @@ import { selectSAs } from "../Configurations/utils";
 import DeleteMultipleServiceAccounts from "../Users/DeleteMultipleServiceAccounts";
 import ServiceAccountPolicy from "./ServiceAccountPolicy";
 import { setErrorSnackMessage, setSnackBarMessage } from "../../../systemSlice";
-import makeStyles from "@mui/styles/makeStyles";
 import { selFeatures } from "../consoleSlice";
 import { useAppDispatch } from "../../../store";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
@@ -64,24 +60,10 @@ const DeleteServiceAccount = withSuspense(
   React.lazy(() => import("./DeleteServiceAccount"))
 );
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    ...actionsTray,
-    ...searchField,
-    searchField: {
-      ...searchField.searchField,
-      marginRight: "auto",
-      maxWidth: 380,
-    },
-    ...tableStyles,
-  })
-);
-
 const Account = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
-  const classes = useStyles();
   const features = useSelector(selFeatures);
 
   const [records, setRecords] = useState<string[]>([]);
@@ -199,27 +181,29 @@ const Account = () => {
           closeModalAndRefresh={closePolicyModal}
         />
       )}
-      <ChangePasswordModal
-        open={changePasswordModalOpen}
-        closeModal={() => setChangePasswordModalOpen(false)}
-      />
+      {changePasswordModalOpen && (
+        <ChangePasswordModal
+          open={changePasswordModalOpen}
+          closeModal={() => setChangePasswordModalOpen(false)}
+        />
+      )}
       <PageHeaderWrapper label="Access Keys" />
       <PageLayout>
-        <Grid container spacing={1}>
-          <Grid item={true} xs={12} className={classes.actionsTray}>
+        <Grid container>
+          <Grid item xs={12} sx={{ ...actionsTray.actionsTray }}>
             <SearchBox
               placeholder={"Search Access Keys"}
               onChange={setFilter}
-              overrideClass={classes.searchField}
+              sx={{ marginRight: "auto", maxWidth: 380 }}
               value={filter}
             />
-
             <Box
               sx={{
                 display: "flex",
+                flexWrap: "nowrap",
+                gap: 5,
               }}
             >
-              {" "}
               <TooltipWrapper tooltip={"Delete Selected"}>
                 <Button
                   id={"delete-selected-accounts"}
@@ -266,20 +250,19 @@ const Account = () => {
             </Box>
           </Grid>
 
-          <Grid item xs={12} className={classes.tableBlock}>
-            <TableWrapper
+          <Grid item xs={12} sx={{ ...tableStyles.tableBlock }}>
+            <DataTable
               isLoading={loading}
               records={filteredRecords}
               entityName={"Access Keys"}
-              idField={""}
-              columns={[{ label: "Access Key", elementKey: "" }]}
+              columns={[{ label: "Access Key" }]}
               itemActions={tableActions}
               selectedItems={selectedSAs}
               onSelect={(e) => selectSAs(e, setSelectedSAs, selectedSAs)}
               onSelectAll={selectAllItems}
             />
           </Grid>
-          <Grid item xs={12} marginTop={"15px"}>
+          <Grid item xs={12} sx={{ marginTop: 15 }}>
             <HelpBox
               title={"Learn more about ACCESS KEYS"}
               iconComponent={<AccountIcon />}
@@ -295,11 +278,8 @@ const Account = () => {
                   <br />
                   <br />
                   You can learn more at our{" "}
-                  {
-                    // TODO: Change this link once it is called access keys
-                  }
                   <a
-                    href="https://min.io/docs/minio/linux/administration/identity-access-management/minio-user-management.html?ref=con#service-accounts"
+                    href="https://min.io/docs/minio/linux/administration/identity-access-management/minio-user-management.html?ref=con#id3"
                     target="_blank"
                     rel="noopener"
                   >