Replaced LinearProgress as loader in favor of ProgressBar from mds (#3020)

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

Author: bexsoft

portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx

@@ -15,9 +15,16 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { Button, ChangePasswordIcon, InputBox, Grid, FormLayout } from "mds";
+import {
+  Button,
+  ChangePasswordIcon,
+  InputBox,
+  Grid,
+  FormLayout,
+  ProgressBar,
+} from "mds";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
-import { LinearProgress } from "@mui/material";
+
 import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
@@ -167,7 +174,7 @@ const ChangePassword = ({ open, closeModal }: IChangePasswordProps) => {
           </Grid>
           {loading && (
             <Grid item xs={12}>
-              <LinearProgress />
+              <ProgressBar />
             </Grid>
           )}
         </Grid>

portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx

@@ -15,8 +15,14 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { Box, Button, ChangePasswordIcon, FormLayout, InputBox } from "mds";
-import { LinearProgress } from "@mui/material";
+import {
+  Box,
+  Button,
+  ChangePasswordIcon,
+  FormLayout,
+  InputBox,
+  ProgressBar,
+} from "mds";
 import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
@@ -138,7 +144,7 @@ const ChangeUserPassword = ({
           </Box>
           {loading && (
             <Box>
-              <LinearProgress />
+              <ProgressBar />
             </Box>
           )}
         </FormLayout>

portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx

@@ -24,6 +24,7 @@ import {
   RadioGroup,
   Select,
   Grid,
+  ProgressBar,
 } from "mds";
 import { useSelector } from "react-redux";
 import { api } from "api";
@@ -33,7 +34,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  LinearProgress,
   Typography,
 } from "@mui/material";
 import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
@@ -198,7 +198,7 @@ const AddLifecycleModal = ({
       {loadingTiers && (
         <Grid container>
           <Grid item xs={12}>
-            <LinearProgress />
+            <ProgressBar />
           </Grid>
         </Grid>
       )}
@@ -362,7 +362,7 @@ const AddLifecycleModal = ({
             </Grid>
             {addLoading && (
               <Grid item xs={12}>
-                <LinearProgress />
+                <ProgressBar />
               </Grid>
             )}
           </FormLayout>

portal-ui/src/screens/Console/Buckets/BucketDetails/EditLifecycleConfiguration.tsx

@@ -22,6 +22,7 @@ import {
   Grid,
   InputBox,
   LifecycleConfigIcon,
+  ProgressBar,
   RadioGroup,
   Select,
   Switch,
@@ -30,7 +31,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  LinearProgress,
   Typography,
 } from "@mui/material";
 import { api } from "api";
@@ -525,7 +525,7 @@ const EditLifecycleConfiguration = ({
           </Grid>
           {addLoading && (
             <Grid item xs={12}>
-              <LinearProgress />
+              <ProgressBar />
             </Grid>
           )}
         </FormLayout>

portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx

@@ -15,14 +15,15 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { LinearProgress } from "@mui/material";
+
 import {
   AddIcon,
   Box,
   BucketEncryptionIcon,
   Button,
   FormLayout,
   Grid,
+  ProgressBar,
   Select,
 } from "mds";
 import {
@@ -241,7 +242,7 @@ const EnableBucketEncryption = ({
             </Grid>
             {loading && (
               <Grid item xs={12}>
-                <LinearProgress />
+                <ProgressBar />
               </Grid>
             )}
           </FormLayout>

portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx

@@ -22,6 +22,7 @@ import {
   InputBox,
   Switch,
   Grid,
+  ProgressBar,
 } from "mds";
 import {
   calculateBytes,
@@ -38,7 +39,6 @@ import { useAppDispatch } from "../../../../store";
 import { BucketQuota } from "api/consoleApi";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
-import { LinearProgress } from "@mui/material";
 
 interface IEnableQuotaProps {
   open: boolean;
@@ -187,7 +187,7 @@ const EnableQuota = ({
           </Grid>
           {loading && (
             <Grid item xs={12}>
-              <LinearProgress />
+              <ProgressBar />
             </Grid>
           )}
         </FormLayout>

portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx

@@ -15,11 +15,19 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
-import { Button, Loader, Grid, FormLayout, RadioGroup, InputBox } from "mds";
+import {
+  Button,
+  Loader,
+  Grid,
+  FormLayout,
+  RadioGroup,
+  InputBox,
+  ProgressBar,
+} from "mds";
 import { api } from "api";
 import { ObjectRetentionMode, ObjectRetentionUnit } from "api/consoleApi";
 import { errorToHandler } from "api/errors";
-import { LinearProgress } from "@mui/material";
+
 import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
@@ -177,7 +185,7 @@ const SetRetentionConfig = ({
             </Grid>
             {addLoading && (
               <Grid item xs={12}>
-                <LinearProgress />
+                <ProgressBar />
               </Grid>
             )}
           </FormLayout>

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

@@ -17,7 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import styled from "styled-components";
 import get from "lodash/get";
-import { LinearProgress } from "@mui/material";
+
 import { useNavigate } from "react-router-dom";
 import {
   BackLink,
@@ -33,6 +33,7 @@ import {
   RadioGroup,
   Switch,
   SectionTitle,
+  ProgressBar,
 } from "mds";
 import { k8sScalarUnitsExcluding } from "../../../../../common/utils";
 import { AppState, useAppDispatch } from "../../../../../store";
@@ -557,7 +558,7 @@ const AddBucket = () => {
             </Grid>
             {addLoading && (
               <Grid item xs={12}>
-                <LinearProgress />
+                <ProgressBar />
               </Grid>
             )}
           </form>

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

@@ -15,8 +15,8 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useState } from "react";
-import { Grid, ExpandOptionsButton } from "mds";
-import { LinearProgress } from "@mui/material";
+import { Grid, ExpandOptionsButton, ProgressBar } from "mds";
+
 import { AppState } from "../../../../../store";
 import { useSelector } from "react-redux";
 import ValidRule from "./ValidRule";
@@ -129,7 +129,7 @@ const BucketNamingRules = ({ errorList }: { errorList: boolean[] }) => {
 
       {addLoading && (
         <Grid item xs={12}>
-          <LinearProgress />
+          <ProgressBar />
         </Grid>
       )}
     </Fragment>

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

@@ -29,8 +29,9 @@ import {
   SelectMultipleIcon,
   Grid,
   breakPoints,
+  ProgressBar,
 } from "mds";
-import { LinearProgress } from "@mui/material";
+
 import { actionsTray } from "../../Common/FormComponents/common/styleLibrary";
 import { SecureComponent } from "../../../../common/SecureComponent";
 import {
@@ -371,7 +372,7 @@ const ListBuckets = () => {
           </Grid>
         </Grid>
 
-        {loading && <LinearProgress />}
+        {loading && <ProgressBar />}
         {!loading && (
           <Grid
             item