Replaced CircularProgress component with new Loader (#1690)

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

Author: bexsoft

portal-ui/src/common/LoadingComponent.tsx

@@ -15,7 +15,8 @@
 //  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { CircularProgress, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
+import Loader from "../screens/Console/Common/Loader/Loader";
 
 const LoadingComponent = () => {
   return (
@@ -28,7 +29,7 @@ const LoadingComponent = () => {
       style={{ minHeight: "100vh" }}
     >
       <Grid item xs={3} style={{ textAlign: "center" }}>
-        <CircularProgress />
+        <Loader style={{ width: 35, height: 35 }} />
         <br />
         Loading...
       </Grid>

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

@@ -16,7 +16,7 @@
 
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { Button, LinearProgress, CircularProgress } from "@mui/material";
+import { Button, LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -36,6 +36,7 @@ import api from "../../../../common/api";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import Loader from "../../Common/Loader/Loader";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -124,7 +125,7 @@ const SetRetentionConfig = ({
       }}
     >
       {loadingForm ? (
-        <CircularProgress color="primary" size={16} variant="indeterminate" />
+        <Loader style={{ width: 16, height: 16 }} />
       ) : (
         <form
           noValidate

portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ActionLink.tsx

@@ -15,7 +15,8 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Button, CircularProgress } from "@mui/material";
+import { Button } from "@mui/material";
+import Loader from "../../../Common/Loader/Loader";
 
 type ActionLinkProps = {
   isLoading: boolean;
@@ -54,11 +55,7 @@ const ActionLink = ({
       disableFocusRipple
       {...restProps}
     >
-      {isLoading ? (
-        <CircularProgress color="primary" size={16} variant="indeterminate" />
-      ) : (
-        label
-      )}
+      {isLoading ? <Loader style={{ width: 16, height: 16 }} /> : label}
     </Button>
   );
 };

portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketTags.tsx

@@ -17,14 +17,15 @@ import React, { useEffect, useState } from "react";
 import { Bucket } from "../../../Watch/types";
 import { ErrorResponseHandler } from "../../../../../common/types";
 import useApi from "../../../Common/Hooks/useApi";
-import { Box, CircularProgress } from "@mui/material";
+import { Box } from "@mui/material";
 import { IAM_SCOPES } from "../../../../../common/SecureComponent/permissions";
 import { SecureComponent } from "../../../../../common/SecureComponent";
 import get from "lodash/get";
 import Chip from "@mui/material/Chip";
 import CloseIcon from "@mui/icons-material/Close";
 import AddIcon from "@mui/icons-material/Add";
 import withSuspense from "../../../Common/Components/withSuspense";
+import Loader from "../../../Common/Loader/Loader";
 
 const AddBucketTagModal = withSuspense(
   React.lazy(() => import("../AddBucketTagModal"))
@@ -89,9 +90,7 @@ const BucketTags = ({ setErrorSnackMessage, bucketName }: BucketTagProps) => {
 
   return (
     <Box>
-      {isLoading ? (
-        <CircularProgress color="primary" size={16} variant="indeterminate" />
-      ) : null}
+      {isLoading ? <Loader style={{ width: 16, height: 16 }} /> : null}
       <SecureComponent
         scopes={[IAM_SCOPES.S3_GET_BUCKET_TAGGING]}
         resource={bucketName}

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx

@@ -80,18 +80,6 @@ import InspectObject from "./InspectObject";
 
 const styles = () =>
   createStyles({
-    tag: {
-      marginRight: 6,
-      fontSize: 10,
-      fontWeight: 700,
-      "&.MuiChip-sizeSmall": {
-        height: 18,
-      },
-      "& .min-icon": {
-        height: 10,
-        width: 10,
-      },
-    },
     ObjectDetailsTitle: {
       display: "flex",
       alignItems: "center",
@@ -117,20 +105,6 @@ const styles = () =>
     capitalizeFirst: {
       textTransform: "capitalize",
     },
-    "@global": {
-      ".progressDetails": {
-        paddingTop: 3,
-        display: "inline-block",
-        position: "relative",
-        width: 18,
-        height: 18,
-      },
-      ".progressDetails > .MuiCircularProgress-root": {
-        position: "absolute",
-        left: 0,
-        top: 3,
-      },
-    },
     ...buttonsStyles,
     ...actionsTray,
     ...spacingUtils,

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/types.tsx

@@ -21,7 +21,7 @@ export interface BucketObject {
   last_modified: Date;
   content_type: string;
   version_id: string;
-  delete_flag?:boolean;
+  delete_flag?: boolean;
 }
 
 export interface BucketObjectsList {

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

@@ -60,65 +60,10 @@ import SelectWrapper from "../../../../Common/FormComponents/SelectWrapper/Selec
 
 const styles = (theme: Theme) =>
   createStyles({
-    propertiesIcon: {
-      marginLeft: 5,
-      "& .min-icon": {
-        height: 12,
-      },
-    },
-    tag: {
-      marginRight: 6,
-      fontSize: 10,
-      fontWeight: 700,
-      "&.MuiChip-sizeSmall": {
-        height: 18,
-      },
-      "& .min-icon": {
-        height: 10,
-        width: 10,
-      },
-    },
-    search: {
-      marginBottom: 8,
-      "&.MuiFormControl-root": {
-        marginRight: 0,
-      },
-    },
-    capitalizeFirst: {
-      textTransform: "capitalize",
-      "& .min-icon": {
-        width: 16,
-        height: 16,
-      },
-    },
-    titleCol: {
-      width: "25%",
-    },
-    titleItem: {
-      width: "35%",
-    },
     versionsContainer: {
       border: "#EAEDEE 1px solid",
       padding: 10,
     },
-    "@global": {
-      ".progressDetails": {
-        paddingTop: 3,
-        display: "inline-block",
-        position: "relative",
-        width: 18,
-        height: 18,
-      },
-      ".progressDetails > .MuiCircularProgress-root": {
-        position: "absolute",
-        left: 0,
-        top: 3,
-      },
-    },
-    tabsContainer: {
-      border: "1px solid #eaeaea",
-      borderTop: 0,
-    },
     noBottomBorder: {
       borderBottom: 0,
     },

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -384,7 +384,7 @@ export const objectBrowserCommon = {
     },
   },
   additionalOptions: {
-    paddingRight: "10px"
+    paddingRight: "10px",
   },
   smallLabel: {
     color: "#9C9C9C",

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

@@ -33,7 +33,6 @@ import * as cicons from "../../../icons";
 import * as micons from "../../../icons/SidebarMenus";
 import Loader from "./Loader/Loader";
 
-
 interface IIconsScreenSimple {
   classes: any;
 }
@@ -47,7 +46,7 @@ const styles = (theme: Theme) =>
       "& .min-loader": {
         width: 45,
         height: 45,
-      }
+      },
     },
     def: {},
     red: {
@@ -106,12 +105,12 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
       </Grid>
       <h1>Loaders</h1>
       <Grid
-          container
-          spacing={4}
-          textAlign={"center"}
-          className={clsx(classes.root, {
-            [classes.red]: color === "red",
-          })}
+        container
+        spacing={4}
+        textAlign={"center"}
+        className={clsx(classes.root, {
+          [classes.red]: color === "red",
+        })}
       >
         <Grid item xs={3}>
           <Loader />