Migrated Policies module to mds (#2911)

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

Author: bexsoft

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -197,8 +197,8 @@ export const actionsTray = {
   actionsTray: {
     display: "flex" as const,
     justifyContent: "space-between" as const,
-    marginBottom: "1rem",
     alignItems: "center",
+    marginBottom: "1rem",
     "& button": {
       flexGrow: 0,
       marginLeft: 8,

portal-ui/src/screens/Console/Common/SearchBox.tsx

@@ -23,6 +23,7 @@ type SearchBoxProps = {
   value: string;
   onChange: (value: string) => void;
   overrideClass?: any;
+  id?: string;
   sx?: CSSObject;
 };
 
@@ -31,23 +32,20 @@ const SearchBox = ({
   onChange,
   overrideClass,
   value,
+  id = "search-resource",
   sx,
 }: SearchBoxProps) => {
   return (
     <InputBox
       placeholder={placeholder}
       className={overrideClass ? overrideClass : ""}
-      id="search-resource"
+      id={id}
       label=""
       onChange={(e) => {
         onChange(e.target.value);
       }}
       value={value}
-      overlayObject={
-        <SearchIcon
-          style={{ width: 16, height: 16, marginTop: 5, marginRight: 5 }}
-        />
-      }
+      startIcon={<SearchIcon />}
       sx={sx}
     />
   );

portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx

@@ -15,27 +15,27 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import Grid from "@mui/material/Grid";
-import { Box } from "@mui/material";
 import {
   AddAccessRuleIcon,
   BackLink,
   Button,
   FormLayout,
   PageLayout,
+  Box,
+  Grid,
+  InputBox,
 } from "mds";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import AddPolicyHelpBox from "./AddPolicyHelpBox";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
+import HelpMenu from "../HelpMenu";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
 import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../store";
 import { emptyPolicy } from "./utils";
-import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import { api } from "../../../api";
 import { Error, HttpResponse, Policy } from "../../../api/consoleApi";
-import HelpMenu from "../HelpMenu";
 
 const AddPolicyScreen = () => {
   const dispatch = useAppDispatch();
@@ -119,9 +119,9 @@ const AddPolicyScreen = () => {
                 addRecord(e);
               }}
             >
-              <Grid container item spacing={1}>
+              <Grid container>
                 <Grid item xs={12}>
-                  <InputBoxWrapper
+                  <InputBox
                     id="policy-name"
                     name="policy-name"
                     label="Policy Name"
@@ -143,7 +143,7 @@ const AddPolicyScreen = () => {
                     editorHeight={"350px"}
                   />
                 </Grid>
-                <Grid item xs={12} textAlign={"right"}>
+                <Grid item xs={12} sx={{ textAlign: "right" }}>
                   <Box
                     sx={{
                       display: "flex",

portal-ui/src/screens/Console/Policies/DeletePolicy.tsx

@@ -14,9 +14,7 @@
 // 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 useApi from "../Common/Hooks/useApi";
 import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
@@ -65,10 +63,10 @@ const DeletePolicy = ({
       onConfirm={onConfirmDelete}
       onClose={onClose}
       confirmationContent={
-        <DialogContentText>
+        <Fragment>
           Are you sure you want to delete policy <br />
           <b>{selectedPolicy}</b>?
-        </DialogContentText>
+        </Fragment>
       }
     />
   );

portal-ui/src/screens/Console/Policies/ListPolicies.tsx

@@ -15,21 +15,18 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { AddIcon, Button, HelpBox, IAMPoliciesIcon, PageLayout } from "mds";
-import { useNavigate } from "react-router-dom";
-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 {
-  actionsTray,
-  containerForHeader,
-  searchField,
-} from "../Common/FormComponents/common/styleLibrary";
+  AddIcon,
+  Button,
+  DataTable,
+  Grid,
+  HelpBox,
+  IAMPoliciesIcon,
+  PageLayout,
+} from "mds";
+import { useNavigate } from "react-router-dom";
+import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../common/types";
-
-import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import {
   CONSOLE_UI_RESOURCE,
   createPolicyPermissions,
@@ -44,42 +41,25 @@ import {
   hasPermission,
   SecureComponent,
 } from "../../../common/SecureComponent";
-import SearchBox from "../Common/SearchBox";
-
-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 { api } from "../../../api";
 import {
   Error,
   HttpResponse,
   ListPoliciesResponse,
   Policy,
 } from "../../../api/consoleApi";
+import { encodeURLString } from "../../../common/utils";
+import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
+import { useAppDispatch } from "../../../store";
+import { api } from "../../../api";
+import SearchBox from "../Common/SearchBox";
+import withSuspense from "../Common/Components/withSuspense";
+import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
 
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...actionsTray,
-    ...searchField,
-    searchField: {
-      ...searchField.searchField,
-      maxWidth: 380,
-    },
-    ...containerForHeader,
-  });
-
-interface IPoliciesProps {
-  classes: any;
-}
-
-const ListPolicies = ({ classes }: IPoliciesProps) => {
+const ListPolicies = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
@@ -194,7 +174,7 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
   }, []);
 
   return (
-    <React.Fragment>
+    <Fragment>
       {deleteOpen && (
         <DeletePolicy
           deleteOpen={deleteOpen}
@@ -204,14 +184,14 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
       )}
       <PageHeaderWrapper label="IAM Policies" actions={<HelpMenu />} />
 
-      <PageLayout className={classes.pageContainer}>
-        <Grid container spacing={1}>
-          <Grid item xs={12} className={classes.actionsTray}>
+      <PageLayout>
+        <Grid container sx={{ gap: 15 }}>
+          <Grid item xs={12} sx={actionsTray.actionsTray}>
             <SearchBox
               onChange={setFilterPolicies}
               placeholder="Search Policies"
-              overrideClass={classes.searchField}
               value={filterPolicies}
+              sx={{ maxWidth: 380 }}
             />
 
             <SecureComponent
@@ -242,19 +222,13 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
               </TooltipWrapper>
             </SecureComponent>
           </Grid>
-          <Grid item xs={12} className={classes.tableBlock}>
+          <Grid item xs={12}>
             <SecureComponent
               scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
               resource={CONSOLE_UI_RESOURCE}
               errorProps={{ disabled: true }}
             >
-              <TableWrapper
-                itemActions={tableActions}
-                columns={[{ label: "Name", elementKey: "name" }]}
-                isLoading={loading}
-                records={filteredRecords}
-                entityName="Policies"
-                idField="name"
+              <TooltipWrapper
                 tooltip={
                   canViewPolicy
                     ? ""
@@ -263,10 +237,19 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
                         "view Policy details"
                       )
                 }
-              />
+              >
+                <DataTable
+                  itemActions={tableActions}
+                  columns={[{ label: "Name", elementKey: "name" }]}
+                  isLoading={loading}
+                  records={filteredRecords}
+                  entityName="Policies"
+                  idField="name"
+                />
+              </TooltipWrapper>
             </SecureComponent>
           </Grid>
-          <Grid item xs={12}>
+          <Grid item xs={12} sx={{ marginTop: 15 }}>
             <HelpBox
               title={"Learn more about IAM POLICIES"}
               iconComponent={<IAMPoliciesIcon />}
@@ -301,8 +284,8 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
           </Grid>
         </Grid>
       </PageLayout>
-    </React.Fragment>
+    </Fragment>
   );
 };
 
-export default withStyles(styles)(ListPolicies);
+export default ListPolicies;