Use FormLayout from mds (#2788)

Author: reivaj05

portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx

@@ -19,7 +19,14 @@ import Grid from "@mui/material/Grid";
 import { LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
-import { BackLink, BucketsIcon, Button, HelpBox, InfoIcon } from "mds";
+import {
+  BackLink,
+  BucketsIcon,
+  Button,
+  FormLayout,
+  HelpBox,
+  InfoIcon,
+} from "mds";
 import {
   containerForHeader,
   modalBasic,
@@ -37,7 +44,6 @@ import {
 } from "../../../../../systemSlice";
 import PageLayout from "../../../Common/Layout/PageLayout";
 import InputUnitMenu from "../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
-import FormLayout from "../../../Common/FormLayout";
 import TooltipWrapper from "../../../Common/TooltipWrapper/TooltipWrapper";
 import SectionTitle from "../../../Common/SectionTitle";
 import {
@@ -243,7 +249,7 @@ const AddBucket = () => {
         <FormLayout
           title={"Create Bucket"}
           icon={<BucketsIcon />}
-          helpbox={
+          helpBox={
             <HelpBox
               iconComponent={<BucketsIcon />}
               title={"Buckets"}

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

@@ -21,8 +21,7 @@ import { tierTypes } from "./utils";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
 import PageLayout from "../../Common/Layout/PageLayout";
 import TierTypeCard from "./TierTypeCard";
-import { BackLink, HelpBox, TiersIcon } from "mds";
-import FormLayout from "../../Common/FormLayout";
+import { BackLink, FormLayout, HelpBox, TiersIcon } from "mds";
 import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const TierTypeSelector = () => {
@@ -50,7 +49,7 @@ const TierTypeSelector = () => {
         <FormLayout
           title={"Select Tier Type"}
           icon={<TiersIcon />}
-          helpbox={
+          helpBox={
             <HelpBox
               iconComponent={<TiersIcon />}
               title={"Tier Types"}

portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx

@@ -25,7 +25,7 @@ import {
 } from "../Common/FormComponents/common/styleLibrary";
 import Grid from "@mui/material/Grid";
 import { LinearProgress } from "@mui/material";
-import { BackLink, Button, CreateGroupIcon } from "mds";
+import { BackLink, Button, CreateGroupIcon, FormLayout } from "mds";
 import PageLayout from "../Common/Layout/PageLayout";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import AddGroupHelpBox from "./AddGroupHelpBox";
@@ -34,7 +34,6 @@ import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 import { ErrorResponseHandler } from "../../../../src/common/types";
 import api from "../../../../src/common/api";
 
-import FormLayout from "../Common/FormLayout";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
@@ -110,7 +109,7 @@ const AddGroupScreen = ({ classes }: IAddGroupProps) => {
           <FormLayout
             title={"Create Group"}
             icon={<CreateGroupIcon />}
-            helpbox={<AddGroupHelpBox />}
+            helpBox={<AddGroupHelpBox />}
           >
             <form noValidate autoComplete="off" onSubmit={setSaving}>
               <Grid container>

portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx

@@ -18,11 +18,10 @@ import React, { useState } from "react";
 import { Box } from "@mui/material";
 
 import Grid from "@mui/material/Grid";
-import { AddAccessRuleIcon, Button } from "mds";
+import { AddAccessRuleIcon, Button, FormLayout } from "mds";
 import PageLayout from "../Common/Layout/PageLayout";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { ErrorResponseHandler } from "../../../common/types";
-import FormLayout from "../Common/FormLayout";
 import useApi from "../Common/Hooks/useApi";
 import KMSHelpBox from "./KMSHelpbox";
 
@@ -57,7 +56,7 @@ const AddKeyForm = ({ onSuccess, onError }: IAddKeyFormProps) => {
       <FormLayout
         title={"Create Key"}
         icon={<AddAccessRuleIcon />}
-        helpbox={
+        helpBox={
           <KMSHelpBox
             helpText={"Encryption Key"}
             contents={[

portal-ui/src/screens/Console/KMS/AddKeyForm.tsx

@@ -18,12 +18,11 @@ import React, { Fragment, useState } from "react";
 import { Box } from "@mui/material";
 
 import Grid from "@mui/material/Grid";
-import { AddAccessRuleIcon, BackLink, Button } from "mds";
+import { AddAccessRuleIcon, BackLink, Button, FormLayout } from "mds";
 import PageLayout from "../Common/Layout/PageLayout";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 import { ErrorResponseHandler } from "../../../common/types";
-import FormLayout from "../Common/FormLayout";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../store";
@@ -81,7 +80,7 @@ const ImportKey = () => {
           <FormLayout
             title={"Import Key"}
             icon={<AddAccessRuleIcon />}
-            helpbox={
+            helpBox={
               <KMSHelpBox
                 helpText={"Encryption Key"}
                 contents={[

portal-ui/src/screens/Console/KMS/ImportKey.tsx

@@ -17,13 +17,12 @@
 import React, { Fragment, useState } from "react";
 import Grid from "@mui/material/Grid";
 import { Box } from "@mui/material";
-import { AddAccessRuleIcon, BackLink, Button } from "mds";
+import { AddAccessRuleIcon, BackLink, Button, FormLayout } from "mds";
 import PageLayout from "../Common/Layout/PageLayout";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import AddPolicyHelpBox from "./AddPolicyHelpBox";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
-import FormLayout from "../Common/FormLayout";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../store";
@@ -100,7 +99,7 @@ const AddPolicyScreen = () => {
           <FormLayout
             title={"Create Policy"}
             icon={<AddAccessRuleIcon />}
-            helpbox={<AddPolicyHelpBox />}
+            helpBox={<AddPolicyHelpBox />}
           >
             <form
               noValidate

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

@@ -16,7 +16,7 @@
 
 import React, { Fragment } from "react";
 import { Theme } from "@mui/material/styles";
-import { BackLink, Button, CreateUserIcon } from "mds";
+import { BackLink, Button, CreateUserIcon, FormLayout } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import UserSelector from "./UserSelector";
@@ -37,7 +37,6 @@ import GroupsSelectors from "./GroupsSelectors";
 
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 import { useNavigate } from "react-router-dom";
-import FormLayout from "../Common/FormLayout";
 import AddUserHelpBox from "./AddUserHelpBox";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { AppState, useAppDispatch } from "../../../store";
@@ -115,7 +114,7 @@ const AddUser = ({ classes }: IAddUserProps) => {
           <FormLayout
             title={"Create User"}
             icon={<CreateUserIcon />}
-            helpbox={<AddUserHelpBox />}
+            helpBox={<AddUserHelpBox />}
           >
             <form
               noValidate