Migrated Date Selectors & Chart Tooltips styles (#3107)

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

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx

@@ -179,7 +179,7 @@ const SetRetention = ({
           onSubmit(e);
         }}
       >
-        <FormLayout>
+        <FormLayout withBorders={false} containerPadding={false}>
           <Box className={"inputItem"}>
             <strong>Selected Object</strong>: {objectName}
           </Box>
@@ -212,22 +212,20 @@ const SetRetention = ({
               { label: "Compliance", value: ObjectRetentionMode.Compliance },
             ]}
           />
-          <Box className={"inputItem"}>
-            <DateSelector
-              id="date"
-              label="Date"
-              disableOptions={dateFieldDisabled()}
-              ref={dateElement}
-              value={date}
-              borderBottom={true}
-              onDateChange={(date: string, isValid: boolean) => {
-                setIsDateValid(isValid);
-                if (isValid) {
-                  setDate(date);
-                }
-              }}
-            />
-          </Box>
+          <DateSelector
+            id="date"
+            label="Date"
+            disableOptions={dateFieldDisabled()}
+            ref={dateElement}
+            value={date}
+            borderBottom={true}
+            onDateChange={(date: string, isValid: boolean) => {
+              setIsDateValid(isValid);
+              if (isValid) {
+                setDate(date);
+              }
+            }}
+          />
           <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
             <Button
               id={"reset"}

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

@@ -20,35 +20,13 @@ import React, {
   useImperativeHandle,
   useState,
 } from "react";
-import clsx from "clsx";
-import { Box, Grid, HelpIcon, InputLabel, Select, Switch, Tooltip } from "mds";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
+import { Box, HelpIcon, InputLabel, Select, Tooltip } from "mds";
 import { days, months, validDate, years } from "./utils";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...fieldBasic,
-    ...tooltipHelper,
-    fieldContainer: {
-      ...fieldBasic.fieldContainer,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      paddingBottom: 10,
-      marginTop: 11,
-      marginBottom: 6,
-    },
-  });
-
 interface IDateSelectorProps {
-  classes: any;
   id: string;
   label: string;
   disableOptions?: boolean;
-  addSwitch?: boolean;
   tooltip?: string;
   borderBottom?: boolean;
   value?: string;
@@ -58,11 +36,9 @@ interface IDateSelectorProps {
 const DateSelector = forwardRef(
   (
     {
-      classes,
       id,
       label,
       disableOptions = false,
-      addSwitch = false,
       tooltip = "",
       borderBottom = false,
       onDateChange,
@@ -72,7 +48,6 @@ const DateSelector = forwardRef(
   ) => {
     useImperativeHandle(ref, () => ({ resetDate }));
 
-    const [dateEnabled, setDateEnabled] = useState<boolean>(false);
     const [month, setMonth] = useState<string>("");
     const [day, setDay] = useState<string>("");
     const [year, setYear] = useState<string>("");
@@ -104,8 +79,6 @@ const DateSelector = forwardRef(
     const isDateDisabled = () => {
       if (disableOptions) {
         return disableOptions;
-      } else if (addSwitch) {
-        return !dateEnabled;
       } else {
         return false;
       }
@@ -116,45 +89,43 @@ const DateSelector = forwardRef(
     const yearsForDrop = [{ value: "", label: "<Year>" }, ...years];
 
     return (
-      <Grid
-        item
-        xs={12}
-        className={clsx(classes.fieldContainer, {
-          [classes.fieldContainerBorder]: borderBottom,
-        })}
-      >
-        <div className={classes.labelContainer}>
-          <Grid container>
-            <InputLabel htmlFor={id}>
-              <span>{label}</span>
-              {tooltip !== "" && (
-                <div className={classes.tooltipContainer}>
-                  <Tooltip tooltip={tooltip} placement="top">
-                    <div className={classes.tooltip}>
-                      <HelpIcon />
-                    </div>
-                  </Tooltip>
-                </div>
-              )}
-            </InputLabel>
-            {addSwitch && (
-              <Switch
-                indicatorLabels={["Specific Date", "Default (7 Days)"]}
-                checked={dateEnabled}
-                value={"date_enabled"}
-                id="date-status"
-                name="date-status"
-                onChange={(e) => {
-                  setDateEnabled(e.target.checked);
-                  if (!e.target.checked) {
-                    onDateChange("", true);
-                  }
+      <Box className={"inputItem"}>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: 5,
+            marginBottom: 5,
+          }}
+        >
+          <InputLabel htmlFor={id}>
+            <span>{label}</span>
+            {tooltip !== "" && (
+              <Box
+                sx={{
+                  marginLeft: 5,
+                  display: "flex",
+                  alignItems: "center",
+                  "& .min-icon": {
+                    width: 13,
+                  },
                 }}
-                switchOnly
-              />
+              >
+                <Tooltip tooltip={tooltip} placement="top">
+                  <Box
+                    sx={{
+                      "& .min-icon": {
+                        width: 13,
+                      },
+                    }}
+                  >
+                    <HelpIcon />
+                  </Box>
+                </Tooltip>
+              </Box>
             )}
-          </Grid>
-        </div>
+          </InputLabel>
+        </Box>
         <Box sx={{ display: "flex", gap: 12 }}>
           <Select
             id={`${id}-month`}
@@ -190,11 +161,14 @@ const DateSelector = forwardRef(
             options={yearsForDrop}
             label={""}
             disabled={isDateDisabled()}
+            sx={{
+              marginBottom: 12,
+            }}
           />
         </Box>
-      </Grid>
+      </Box>
     );
   },
 );
 
-export default withStyles(styles)(DateSelector);
+export default DateSelector;

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

@@ -14,16 +14,11 @@
 // 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 React, { useEffect, useState } from "react";
 import { DateTime } from "luxon";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
-import { Grid, InputBox, InputLabel, LinkIcon } from "mds";
+import { Box, InputBox, InputLabel, LinkIcon } from "mds";
 
 interface IDaysSelector {
-  classes: any;
   id: string;
   initialDate: Date;
   maxDays?: number;
@@ -32,74 +27,6 @@ interface IDaysSelector {
   onChange: (newDate: string, isValid: boolean) => void;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...fieldBasic,
-    ...tooltipHelper,
-    labelContainer: {
-      display: "flex",
-      alignItems: "center",
-      marginBottom: 15,
-    },
-    fieldContainer: {
-      ...fieldBasic.fieldContainer,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      paddingBottom: 10,
-      marginTop: 11,
-      marginBottom: 6,
-    },
-    durationInputs: {
-      display: "flex",
-      alignItems: "flex-start",
-      justifyContent: "flex-start",
-      gap: 10,
-    },
-
-    validityIndicator: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      marginTop: 25,
-      marginLeft: 10,
-    },
-    invalidDurationText: {
-      marginTop: 15,
-      display: "flex",
-      color: "red",
-      fontSize: 11,
-    },
-    reverseInput: {
-      flexFlow: "row-reverse",
-      "& > label": {
-        fontWeight: 400,
-        marginLeft: 15,
-        marginRight: 25,
-      },
-    },
-    validityText: {
-      fontSize: 14,
-      marginTop: 15,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      "@media (max-width: 900px)": {
-        flexFlow: "column",
-      },
-      "& > .min-icon": {
-        color: "#5E5E5E",
-        width: 15,
-        height: 15,
-        marginRight: 10,
-      },
-    },
-    validTill: {
-      fontWeight: "bold",
-      marginLeft: 15,
-    },
-  });
-
 const calculateNewTime = (
   initialDate: Date,
   days: number,
@@ -110,7 +37,6 @@ const calculateNewTime = (
 };
 
 const DaysSelector = ({
-  classes,
   id,
   initialDate,
   label,
@@ -204,88 +130,136 @@ const DaysSelector = ({
   };
 
   return (
-    <Fragment>
-      <Grid container className={classes.fieldContainer}>
-        <Grid item xs={12} className={classes.labelContainer}>
-          <InputLabel htmlFor={id}>{label}</InputLabel>
-        </Grid>
-        <Grid item xs={12} className={classes.durationInputs}>
-          <Grid item xs className={classes.dateInputContainer}>
-            <InputBox
-              id={id}
-              className={`${classes.reverseInput} removeArrows`}
-              type="number"
-              min="0"
-              max={maxDays ? maxDays.toString() : "999"}
-              label="Days"
-              name={id}
-              onChange={(e) => {
-                setSelectedDays(parseInt(e.target.value));
-              }}
-              value={selectedDays.toString()}
-              sx={extraStyles}
-              noLabelMinWidth
-            />
-          </Grid>
-          <Grid item xs className={classes.dateInputContainer}>
-            <InputBox
-              id={id}
-              className={`${classes.reverseInput} removeArrows`}
-              type="number"
-              min="0"
-              max="23"
-              label="Hours"
-              name={id}
-              onChange={(e) => {
-                setSelectedHours(parseInt(e.target.value));
-              }}
-              value={selectedHours.toString()}
-              sx={extraStyles}
-              noLabelMinWidth
-            />
-          </Grid>
-          <Grid item xs className={classes.dateInputContainer}>
-            <InputBox
-              id={id}
-              className={`${classes.reverseInput} removeArrows`}
-              type="number"
-              min="0"
-              max="59"
-              label="Minutes"
-              name={id}
-              onChange={(e) => {
-                setSelectedMinutes(parseInt(e.target.value));
-              }}
-              value={selectedMinutes.toString()}
-              sx={extraStyles}
-              noLabelMinWidth
-            />
-          </Grid>
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          className={`${classes.validityIndicator} ${classes.formFieldRow}`}
-        >
-          {validDate ? (
-            <div className={classes.validityText}>
-              <LinkIcon />
-              <div className={classes.validityLabel}>
-                {entity} will be available until:
-              </div>{" "}
-              <div className={classes.validTill}>
-                {dateSelected.toFormat("MM/dd/yyyy HH:mm:ss")}
-              </div>
+    <Box className={"inputItem"}>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          marginBottom: 5,
+        }}
+      >
+        <InputLabel htmlFor={id}>{label}</InputLabel>
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "space-evenly",
+          gap: 10,
+          "& .reverseInput": {
+            flexFlow: "row-reverse",
+            "& > label": {
+              fontWeight: 400,
+              marginLeft: 15,
+              marginRight: 25,
+            },
+          },
+        }}
+      >
+        <Box>
+          <InputBox
+            id={id}
+            className={`reverseInput removeArrows`}
+            type="number"
+            min="0"
+            max={maxDays ? maxDays.toString() : "999"}
+            label="Days"
+            name={id}
+            onChange={(e) => {
+              setSelectedDays(parseInt(e.target.value));
+            }}
+            value={selectedDays.toString()}
+            sx={extraStyles}
+            noLabelMinWidth
+          />
+        </Box>
+        <Box>
+          <InputBox
+            id={id}
+            className={`reverseInput removeArrows`}
+            type="number"
+            min="0"
+            max="23"
+            label="Hours"
+            name={id}
+            onChange={(e) => {
+              setSelectedHours(parseInt(e.target.value));
+            }}
+            value={selectedHours.toString()}
+            sx={extraStyles}
+            noLabelMinWidth
+          />
+        </Box>
+        <Box>
+          <InputBox
+            id={id}
+            className={`reverseInput removeArrows`}
+            type="number"
+            min="0"
+            max="59"
+            label="Minutes"
+            name={id}
+            onChange={(e) => {
+              setSelectedMinutes(parseInt(e.target.value));
+            }}
+            value={selectedMinutes.toString()}
+            sx={extraStyles}
+            noLabelMinWidth
+          />
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          marginTop: 25,
+          marginLeft: 10,
+          marginBottom: 15,
+          "& .validityText": {
+            fontSize: 14,
+            marginTop: 15,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            "@media (max-width: 900px)": {
+              flexFlow: "column",
+            },
+            "& > .min-icon": {
+              color: "#5E5E5E",
+              width: 15,
+              height: 15,
+              marginRight: 10,
+            },
+          },
+          "& .validTill": {
+            fontWeight: "bold",
+            marginLeft: 15,
+          },
+          "& .invalidDurationText": {
+            marginTop: 15,
+            display: "flex",
+            color: "red",
+            fontSize: 11,
+          },
+        }}
+      >
+        {validDate ? (
+          <div className={"validityText"}>
+            <LinkIcon />
+            <div>{entity} will be available until:</div>{" "}
+            <div className={"validTill"}>
+              {dateSelected.toFormat("MM/dd/yyyy HH:mm:ss")}
             </div>
-          ) : (
-            <div className={classes.invalidDurationText}>
-              Please select a valid duration.
-            </div>
-          )}
-        </Grid>
-      </Grid>
-    </Fragment>
+          </div>
+        ) : (
+          <div className={"invalidDurationText"}>
+            Please select a valid duration.
+          </div>
+        )}
+      </Box>
+    </Box>
   );
 };
 
-export default withStyles(styles)(DaysSelector);
+export default DaysSelector;

portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/tooltips/BarChartTooltip.tsx

@@ -15,51 +15,50 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
+import { Box } from "mds";
 import { tooltipCommon } from "../../../../Common/FormComponents/common/styleLibrary";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...tooltipCommon,
-  });
-
 const BarChartTooltip = ({
   active,
   payload,
   label,
   barChartConfiguration,
-  classes,
 }: any) => {
   if (active) {
     return (
-      <div className={classes.customTooltip}>
-        <div className={classes.timeStampTitle}>{label}</div>
+      <Box sx={tooltipCommon.customTooltip}>
+        <Box sx={tooltipCommon.timeStampTitle}>{label}</Box>
         {payload &&
           payload.map((pl: any, index: number) => {
             return (
-              <div
-                className={classes.labelContainer}
+              <Box
+                sx={tooltipCommon.labelContainer}
                 key={`pltiem-${index}-${label}`}
               >
-                <div
-                  className={classes.labelColor}
+                <Box
+                  sx={tooltipCommon.labelColor}
                   style={{
                     backgroundColor: barChartConfiguration[index].color,
                   }}
                 />
-                <div className={classes.itemValue}>
-                  <span className={classes.valueContainer}>{pl.value}</span>
-                </div>
-              </div>
+                <Box
+                  sx={{
+                    ...tooltipCommon.itemValue,
+                    "& span.valueContainer": {
+                      ...tooltipCommon.valueContainer,
+                    },
+                  }}
+                >
+                  <span className={"valueContainer"}>{pl.value}</span>
+                </Box>
+              </Box>
             );
           })}
-      </div>
+      </Box>
     );
   }
 
   return null;
 };
 
-export default withStyles(styles)(BarChartTooltip);
+export default BarChartTooltip;

portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/tooltips/LineChartTooltip.tsx

@@ -15,58 +15,57 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
+import { Box } from "mds";
 import { getTimeFromTimestamp } from "../../../../../../common/utils";
 import { tooltipCommon } from "../../../../Common/FormComponents/common/styleLibrary";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...tooltipCommon,
-  });
-
 const LineChartTooltip = ({
   active,
   payload,
   label,
   linearConfiguration,
   yAxisFormatter,
-  classes,
 }: any) => {
   if (active) {
     return (
-      <div className={classes.customTooltip}>
-        <div className={classes.timeStampTitle}>
+      <Box sx={tooltipCommon.customTooltip}>
+        <Box sx={tooltipCommon.timeStampTitle}>
           {getTimeFromTimestamp(label, true)}
-        </div>
+        </Box>
         {payload &&
           payload.map((pl: any, index: number) => {
             return (
-              <div
-                className={classes.labelContainer}
+              <Box
+                sx={tooltipCommon.labelContainer}
                 key={`lbPl-${index}-${linearConfiguration[index].keyLabel}`}
               >
-                <div
-                  className={classes.labelColor}
+                <Box
+                  sx={tooltipCommon.labelColor}
                   style={{
                     backgroundColor: linearConfiguration[index].lineColor,
                   }}
                 />
-                <div className={classes.itemValue}>
-                  <span className={classes.valueContainer}>
+                <Box
+                  sx={{
+                    ...tooltipCommon.itemValue,
+                    "& span.valueContainer": {
+                      ...tooltipCommon.valueContainer,
+                    },
+                  }}
+                >
+                  <span className={"valueContainer"}>
                     {linearConfiguration[index].keyLabel}:{" "}
                     {yAxisFormatter(pl.value)}
                   </span>
-                </div>
-              </div>
+                </Box>
+              </Box>
             );
           })}
-      </div>
+      </Box>
     );
   }
 
   return null;
 };
 
-export default withStyles(styles)(LineChartTooltip);
+export default LineChartTooltip;