update as per mds components

minio · Nov 15, 2023 · 6cccd8a · 6cccd8a
1 parent 7489f34
commit 6cccd8a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 64 deletions.
diff --git a/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx b/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
@@ -29,6 +29,7 @@ import {
   Switch,
   ServiceAccountIcon,
   HelpTip,
+  DateTimeInput,
 } from "mds";
 import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
@@ -45,7 +46,6 @@ import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
 import { useAppDispatch } from "store";
 import { getRandomString } from "common/utils";
-import DateTimePickerWrapper from "../Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper";
 
 const AddServiceAccount = () => {
   const dispatch = useAppDispatch();
@@ -257,22 +257,23 @@ const AddServiceAccount = () => {
                   marginTop: "15px",
                 }}
               >
-                <label style={{ width: "150px" }}>Expiry</label>
                 <Box
                   sx={{
-                    padding: "2px",
+                    marginTop: "15px",
+                    width: "100%",
+                    "& label": { width: "180px" },
                   }}
                 >
-                  <DateTimePickerWrapper
-                    forSearchBlock={true}
-                    forFilterContained={false}
+                  <DateTimeInput
+                    noLabelMinWidth
                     value={expiry}
                     onChange={(e) => {
                       setExpiry(e);
                     }}
                     id="expiryTime"
-                    classNamePrefix={""}
-                    noInputIcon={true}
+                    label={"Expiry"}
+                    timeFormat={"24h"}
+                    secondsSelector={false}
                   />
                 </Box>
               </Grid>

diff --git a/portal-ui/src/screens/Console/Account/EditServiceAccount.tsx b/portal-ui/src/screens/Console/Account/EditServiceAccount.tsx
@@ -19,6 +19,7 @@ import {
   Box,
   Button,
   ChangeAccessPolicyIcon,
+  DateTimeInput,
   Grid,
   InputBox,
   Switch,
@@ -32,7 +33,6 @@ import { encodeURLString } from "common/utils";
 import { setErrorSnackMessage, setModalErrorSnackMessage } from "systemSlice";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
-import DateTimePickerWrapper from "../Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper";
 import { DateTime } from "luxon";
 
 interface IServiceAccountPolicyProps {
@@ -66,7 +66,11 @@ const EditServiceAccount = ({
           const saInfo = res.data;
 
           setName(saInfo?.name || "");
-          setExpiry(saInfo?.expiration);
+
+          if (saInfo?.expiration) {
+            setExpiry(DateTime.fromISO(saInfo?.expiration));
+          }
+
           setDescription(saInfo?.description || "");
           setStatus(saInfo.accountStatus);
 
@@ -136,39 +140,27 @@ const EditServiceAccount = ({
               }
             />
           </Grid>
-
-          <Grid
-            xs={12}
+          <Box
             sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "start",
-              fontWeight: 600,
-              color: "rgb(7, 25, 62)",
-              gap: 2,
               marginBottom: "15px",
               marginTop: "15px",
+              display: "flex",
+              width: "100%",
+              "& label": { width: "195px" },
             }}
           >
-            <label style={{ width: "150px" }}>Expiry</label>
-            <Box
-              sx={{
-                padding: "2px",
+            <DateTimeInput
+              noLabelMinWidth
+              value={expiry}
+              onChange={(e) => {
+                setExpiry(e);
               }}
-            >
-              <DateTimePickerWrapper
-                forSearchBlock={true}
-                forFilterContained={false}
-                value={DateTime.fromISO(expiry)}
-                onChange={(e) => {
-                  setExpiry(e);
-                }}
-                id="expiryTime"
-                classNamePrefix={""}
-                noInputIcon={true}
-              />
-            </Box>
-          </Grid>
+              id="expiryTime"
+              label={"Expiry"}
+              timeFormat={"24h"}
+              secondsSelector={false}
+            />
+          </Box>
           <Grid
             xs={12}
             sx={{

diff --git a/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx b/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx
@@ -29,6 +29,7 @@ import {
   ServiceAccountIcon,
   Switch,
   HelpTip,
+  DateTimeInput,
 } from "mds";
 import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
@@ -48,7 +49,6 @@ import AddUserServiceAccountHelpBox from "./AddUserServiceAccountHelpBox";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
 import PanelTitle from "../Common/PanelTitle/PanelTitle";
-import DateTimePickerWrapper from "../Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper";
 
 const AddServiceAccount = () => {
   const dispatch = useAppDispatch();
@@ -271,38 +271,27 @@ const AddServiceAccount = () => {
                 </Grid>
               )}
 
-              <Grid
-                xs={12}
+              <Box
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "start",
-                  fontWeight: 600,
-                  color: "rgb(7, 25, 62)",
-                  gap: 2,
                   marginBottom: "15px",
                   marginTop: "15px",
+                  width: "100%",
+                  "& label": { width: "180px" },
                 }}
               >
-                <label style={{ width: "150px" }}>Expiry</label>
-                <Box
-                  sx={{
-                    padding: "2px",
+                <DateTimeInput
+                  noLabelMinWidth
+                  value={expiry}
+                  onChange={(e) => {
+                    setExpiry(e);
                   }}
-                >
-                  <DateTimePickerWrapper
-                    forSearchBlock={true}
-                    forFilterContained={false}
-                    value={expiry}
-                    onChange={(e) => {
-                      setExpiry(e);
-                    }}
-                    id="expiryTime"
-                    classNamePrefix={""}
-                    noInputIcon={true}
-                  />
-                </Box>
-              </Grid>
+                  id="expiryTime"
+                  label={"Expiry"}
+                  timeFormat={"24h"}
+                  secondsSelector={false}
+                />
+              </Box>
+
               <InputBox
                 value={name}
                 label={"Name"}