Object Browser Refactor (#3066)

- Refactored navigation to be handled only with URL
- Refactored & simplified websocket
- Updated components to use mds
- Fixed an issue with Anonymous access and file selection
- Fixed an issue with anonymous access and download selection click
- Fixed an issue with object details selection on root path from a bucket
- Simplified reducer

Signed-off-by: Benjamin Perez <[email protected]>

Author: bexsoft

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

@@ -46,7 +46,6 @@ import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
 import { useSelector } from "react-redux";
 import { selFeatures } from "../../consoleSlice";
-import { setLoadingObjects } from "../../ObjectBrowser/objectBrowserSlice";
 import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 import { api } from "../../../../api";
 import { Bucket } from "../../../../api/consoleApi";
@@ -91,7 +90,6 @@ const ListBuckets = () => {
           if (res.data) {
             setLoading(false);
             setRecords(res.data.buckets || []);
-            dispatch(setLoadingObjects(true));
           } else if (res.error) {
             setLoading(false);
             dispatch(setErrorSnackMessage(errorToHandler(res.error)));

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

@@ -15,10 +15,7 @@
 // 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 { Button, ClosePanelIcon, Grid } from "mds";
-import makeStyles from "@mui/styles/makeStyles";
+import { Box, Button, ClosePanelIcon } from "mds";
 
 interface IDetailsListPanel {
   open: boolean;
@@ -27,51 +24,44 @@ interface IDetailsListPanel {
   children: React.ReactNode;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    detailsList: {
-      borderColor: "#EAEDEE",
-      borderWidth: 0,
-      borderStyle: "solid",
-      borderRadius: 3,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-      width: 0,
-      transitionDuration: "0.3s",
-      overflowX: "hidden",
-      overflowY: "auto",
-      position: "relative",
-      opacity: 0,
-      marginLeft: -1,
-      "&.open": {
-        width: 300,
-        minWidth: 300,
-        borderLeftWidth: 1,
-        opacity: 1,
-      },
-      "@media (max-width: 799px)": {
-        "&.open": {
-          width: "100%",
-          minWidth: "100%",
-          borderLeftWidth: 0,
-        },
-      },
-    },
-  }),
-);
-
 const DetailsListPanel = ({
   open,
   closePanel,
   className = "",
   children,
 }: IDetailsListPanel) => {
-  const classes = useStyles();
-
   return (
-    <Grid
-      item
-      className={`${classes.detailsList} ${open ? "open" : ""} ${className}`}
+    <Box
+      id={"details-panel"}
+      sx={{
+        borderColor: "#EAEDEE",
+        borderWidth: 0,
+        borderStyle: "solid",
+        borderRadius: 3,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        width: 0,
+        transitionDuration: "0.3s",
+        overflowX: "hidden",
+        overflowY: "auto",
+        position: "relative",
+        opacity: 0,
+        marginLeft: -1,
+        "&.open": {
+          width: 300,
+          minWidth: 300,
+          borderLeftWidth: 1,
+          opacity: 1,
+        },
+        "@media (max-width: 799px)": {
+          "&.open": {
+            width: "100%",
+            minWidth: "100%",
+            borderLeftWidth: 0,
+          },
+        },
+      }}
+      className={`${open ? "open" : ""} ${className}`}
     >
       <Button
         variant={"text"}
@@ -90,7 +80,7 @@ const DetailsListPanel = ({
         }}
       />
       {children}
-    </Grid>
+    </Box>
   );
 };