Updated Audit Logs page to use mds (#2897)

Signed-off-by: Benjamin Perez <[email protected]>

Author: bexsoft

portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx

@@ -15,9 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Button, OpenListIcon, SyncIcon } from "mds";
+import { Button, OpenListIcon, SyncIcon, Grid } from "mds";
 import { DateTime } from "luxon";
-import { Box, Grid } from "@mui/material";
+import { Box } from "@mui/material";
 import ScheduleIcon from "@mui/icons-material/Schedule";
 import WatchLaterIcon from "@mui/icons-material/WatchLater";
 import DateTimePickerWrapper from "../DateTimePickerWrapper/DateTimePickerWrapper";

portal-ui/src/screens/Console/Common/FormComponents/FilterInputWrapper/FilterInputWrapper.tsx

@@ -15,14 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import TextField from "@mui/material/TextField";
-import { searchField } from "../common/styleLibrary";
+import { InputBox, InputLabel, Box } from "mds";
 
 interface IFilterInputWrapper {
-  classes: any;
   value: string;
   onChange: (txtVar: string) => any;
   label: string;
@@ -31,45 +26,7 @@ interface IFilterInputWrapper {
   name: string;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    searchField: {
-      ...searchField.searchField,
-      height: 30,
-      padding: 0,
-      "& input": {
-        padding: "0 12px",
-        height: 28,
-        fontSize: 12,
-        fontWeight: 600,
-        color: "#393939",
-      },
-      "&.isDisabled": {
-        "&:hover": {
-          borderColor: "#EAEDEE",
-        },
-      },
-      "& input.Mui-disabled": {
-        backgroundColor: "#EAEAEA",
-      },
-    },
-    labelStyle: {
-      color: "#393939",
-      fontSize: 12,
-      marginBottom: 4,
-    },
-    buttonKit: {
-      display: "flex",
-      alignItems: "center",
-    },
-    fieldContainer: {
-      flexGrow: 1,
-      margin: "0 15px",
-    },
-  });
-
 const FilterInputWrapper = ({
-  classes,
   label,
   onChange,
   value,
@@ -79,27 +36,31 @@ const FilterInputWrapper = ({
 }: IFilterInputWrapper) => {
   return (
     <Fragment>
-      <div className={classes.fieldContainer}>
-        <div className={classes.labelStyle}>{label}</div>
-        <div className={classes.buttonKit}>
-          <TextField
-            placeholder={placeholder}
-            id={id}
-            name={name}
-            label=""
-            onChange={(val) => {
-              onChange(val.target.value);
-            }}
-            InputProps={{
-              disableUnderline: true,
-            }}
-            className={classes.searchField}
-            value={value}
-          />
-        </div>
-      </div>
+      <Box
+        sx={{
+          flexGrow: 1,
+          margin: "0 15px",
+        }}
+      >
+        <InputLabel>{label}</InputLabel>
+        <InputBox
+          placeholder={placeholder}
+          id={id}
+          name={name}
+          label=""
+          onChange={(val) => {
+            onChange(val.target.value);
+          }}
+          sx={{
+            "& input": {
+              height: 30,
+            },
+          }}
+          value={value}
+        />
+      </Box>
     </Fragment>
   );
 };
 
-export default withStyles(styles)(FilterInputWrapper);
+export default FilterInputWrapper;

portal-ui/src/screens/Console/Logs/LogSearch/LogSearchFullModal.tsx

@@ -15,42 +15,22 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Grid } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import { Button } from "mds";
+import { Button, Grid } from "mds";
 import get from "lodash/get";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import { IReqInfoSearchResults } from "./types";
 import { LogSearchColumnLabels } from "./utils";
 
 interface ILogSearchFullModal {
   modalOpen: boolean;
   logSearchElement: IReqInfoSearchResults;
   onClose: () => void;
-  classes: any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    objectKeyCol: {
-      fontWeight: 700,
-      paddingRight: "10px",
-      textAlign: "left",
-    },
-    ...modalBasic,
-  });
-
 const LogSearchFullModal = ({
   modalOpen,
   logSearchElement,
   onClose,
-  classes,
 }: ILogSearchFullModal) => {
   const jsonItems = Object.keys(logSearchElement);
 
@@ -69,7 +49,13 @@ const LogSearchFullModal = ({
               <tbody>
                 {jsonItems.map((objectKey: string, index: number) => (
                   <tr key={`logSearch-${index.toString()}`}>
-                    <th className={classes.objectKeyCol}>
+                    <th
+                      style={{
+                        fontWeight: 700,
+                        paddingRight: "10px",
+                        textAlign: "left",
+                      }}
+                    >
                       {get(LogSearchColumnLabels, objectKey, `${objectKey}`)}
                     </th>
                     <td>{get(logSearchElement, objectKey, "")}</td>
@@ -78,7 +64,11 @@ const LogSearchFullModal = ({
               </tbody>
             </table>
           </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
+          <Grid
+            item
+            xs={12}
+            sx={{ display: "flex", justifyContent: "flex-end" }}
+          >
             <Button
               id={"close-log-search"}
               variant="callAction"
@@ -93,4 +83,4 @@ const LogSearchFullModal = ({
   );
 };
 
-export default withStyles(styles)(LogSearchFullModal);
+export default LogSearchFullModal;