Fixed issues in Embeddable Object Browser (#2711)

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

portal-ui/package.json

@@ -31,6 +31,7 @@
     "react-window": "^1.8.8",
     "react-window-infinite-loader": "^1.0.7",
     "recharts": "^2.4.3",
+    "styled-components": "^5.3.6",
     "superagent": "^8.0.8",
     "tinycolor2": "^1.6.0",
     "websocket": "^1.0.31"

portal-ui/src/StyleHandler.tsx

@@ -54,8 +54,10 @@ const StyleHandler = ({ children }: IStyleHandler) => {
   if (colorVariants) {
     thm = generateOverrideTheme(colorVariants);
 
-    globalBody = { backgroundColor: colorVariants.backgroundColor };
+    globalBody = {
-    rowColor = { color: colorVariants.fontColor };
+      backgroundColor: `${colorVariants.backgroundColor}!important`,
+    };
+    rowColor = { color: `${colorVariants.fontColor}!important` };
     detailsListPanel = {
       backgroundColor: colorVariants.backgroundColor,
       color: colorVariants.fontColor,

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

@@ -26,6 +26,7 @@ import { useSelector } from "react-redux";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useDropzone } from "react-dropzone";
 import { Theme } from "@mui/material/styles";
+import { CSSObject } from "styled-components";
 import {
   BucketsIcon,
   Button,
@@ -276,6 +277,9 @@ const ListObjects = () => {
   const anonymousMode = useSelector(
     (state: AppState) => state.system.anonymousMode
   );
+  const colorVariants = useSelector(
+    (state: AppState) => state.system.overrideStyles
+  );
 
   const loadingBucket = useSelector(selBucketDetailsLoading);
   const bucketInfo = useSelector(selBucketDetailsInfo);
@@ -784,6 +788,40 @@ const ListObjects = () => {
     createdTime = DateTime.fromISO(bucketInfo.creation_date);
   }
 
+  let regularButtonOverride: CSSObject = {};
+  let callActionButtonOverride: CSSObject = {};
+
+  if (colorVariants) {
+    regularButtonOverride = {
+      backgroundColor: "transparent",
+    };
+
+    callActionButtonOverride = {
+      color: get(colorVariants, "buttonStyles.textColor", "#fff"),
+      backgroundColor: get(
+        colorVariants,
+        "buttonStyles.backgroundColor",
+        "#07193E"
+      ),
+      "&:hover": {
+        color: get(colorVariants, "buttonStyles.hoverText", "#fff"),
+        backgroundColor: get(
+          colorVariants,
+          "buttonStyles.hoverColor",
+          "#0D2453"
+        ),
+      },
+      "&:active": {
+        color: get(colorVariants, "buttonStyles.activeText", "#fff"),
+        backgroundColor: get(
+          colorVariants,
+          "buttonStyles.activeColor",
+          "#05132F"
+        ),
+      },
+    };
+  }
+
   const multiActionButtons = [
     {
       action: () => {
@@ -983,6 +1021,7 @@ const ListObjects = () => {
                           IAM_SCOPES.S3_GET_ACTIONS,
                         ])
                       }
+                      sx={regularButtonOverride}
                     />
                   </TooltipWrapper>
                 )}
@@ -1009,6 +1048,7 @@ const ListObjects = () => {
                             IAM_SCOPES.S3_ALL_LIST_BUCKET,
                           ]) || rewindEnabled
                     }
+                    sx={regularButtonOverride}
                   />
                 </TooltipWrapper>
                 <input
@@ -1040,6 +1080,7 @@ const ListObjects = () => {
                     }
                     closeMenu();
                   }}
+                  overrideStyles={callActionButtonOverride}
                 />
               </div>
             }

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

@@ -18,6 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { Box } from "@mui/material";
 import { withStyles } from "@mui/styles";
+import { CSSObject } from "styled-components";
 import {
   Button,
   DeleteIcon,
@@ -165,6 +166,9 @@ const ObjectDetailPanel = ({
   const loadingObjectInfo = useSelector(
     (state: AppState) => state.objectBrowser.loadingObjectInfo
   );
+  const colorVariants = useSelector(
+    (state: AppState) => state.system.overrideStyles
+  );
 
   const [shareFileModalOpen, setShareFileModalOpen] = useState<boolean>(false);
   const [retentionModalOpen, setRetentionModalOpen] = useState<boolean>(false);
@@ -582,6 +586,14 @@ const ObjectDetailPanel = ({
     return formatTime.trim() !== "" ? `${formatTime} ago` : "Just now";
   };
 
+  let regularButtonOverride: CSSObject = {};
+
+  if (colorVariants) {
+    regularButtonOverride = {
+      backgroundColor: "transparent",
+    };
+  }
+
   return (
     <Fragment>
       {shareFileModalOpen && actualInfo && (
@@ -714,9 +726,10 @@ const ObjectDetailPanel = ({
                   disabled={
                     selectedVersion === "" && actualInfo.is_delete_marker
                   }
-                  style={{
+                  sx={{
                     width: "calc(100% - 44px)",
                     margin: "8px 0",
+                    ...regularButtonOverride,
                   }}
                   label={`Delete${selectedVersion !== "" ? " version" : ""}`}
                 />

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

@@ -16,6 +16,7 @@
 
 import React, { Fragment, useState } from "react";
 import { Theme } from "@mui/material/styles";
+import { CSSObject } from "styled-components";
 import { Menu, MenuItem } from "@mui/material";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -38,6 +39,7 @@ interface IUploadFilesButton {
   uploadFileFunction: (closeFunction: () => void) => void;
   uploadFolderFunction: (closeFunction: () => void) => void;
   classes: any;
+  overrideStyles?: CSSObject;
 }
 
 const styles = (theme: Theme) =>
@@ -58,6 +60,7 @@ const UploadFilesButton = ({
   uploadFileFunction,
   uploadFolderFunction,
   classes,
+  overrideStyles = {},
 }: IUploadFilesButton) => {
   const anonymousMode = useSelector(
     (state: AppState) => state.system.anonymousMode
@@ -107,6 +110,7 @@ const UploadFilesButton = ({
           icon={<UploadIcon />}
           variant={"callAction"}
           disabled={forceDisable || !uploadEnabled}
+          sx={overrideStyles}
         />
       </TooltipWrapper>
       <Menu

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

@@ -460,7 +460,7 @@ const Console = ({ classes }: IConsoleProps) => {
 
   const allowedRoutes = routes.filter((route: any) =>
     obOnly
-      ? route.path.includes("buckets")
+      ? route.path.includes("browser")
       : (route.forceDisplay ||
           (route.customPermissionFnc
             ? route.customPermissionFnc()
@@ -488,11 +488,7 @@ const Console = ({ classes }: IConsoleProps) => {
   }, [snackBarMessage]);
 
   let hideMenu = false;
-  if (features?.includes("hide-menu")) {
+  if (features?.includes("hide-menu") || pathname.endsWith("/hop") || obOnly) {
-    hideMenu = true;
-  } else if (pathname.endsWith("/hop")) {
-    hideMenu = true;
-  } else if (obOnly) {
     hideMenu = true;
   }
 

portal-ui/src/screens/Console/ConsoleKBar.tsx

@@ -32,7 +32,12 @@ const ConsoleKBar = () => {
 
   // if we are hiding the menu also disable the k-bar so just return console
   if (features?.includes("hide-menu")) {
-    return <Console />;
+    return (
+      <Fragment>
+        <TrafficMonitor />
+        <Console />
+      </Fragment>
+    );
   }
   // for anonymous mode, we don't load Console, only AnonymousAccess
   if (anonymousMode) {

portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx

@@ -16,9 +16,11 @@
 
 import React, { Fragment, useState } from "react";
 import { useSelector } from "react-redux";
+import { CSSObject } from "styled-components";
 import CopyToClipboard from "react-copy-to-clipboard";
 import Grid from "@mui/material/Grid";
 import createStyles from "@mui/styles/createStyles";
+import makeStyles from "@mui/styles/makeStyles";
 import { Theme } from "@mui/material/styles";
 import { Link, useNavigate } from "react-router-dom";
 import { IconButton } from "@mui/material";
@@ -34,7 +36,6 @@ import withSuspense from "../Common/Components/withSuspense";
 import { setSnackBarMessage } from "../../../systemSlice";
 import { AppState, useAppDispatch } from "../../../store";
 import { setVersionsModeEnabled } from "./objectBrowserSlice";
-import makeStyles from "@mui/styles/makeStyles";
 
 const CreatePathModal = withSuspense(
   React.lazy(
@@ -80,6 +81,9 @@ const BrowserBreadcrumbs = ({
   const anonymousMode = useSelector(
     (state: AppState) => state.system.anonymousMode
   );
+  const colorVariants = useSelector(
+    (state: AppState) => state.system.overrideStyles
+  );
 
   const [createFolderOpen, setCreateFolderOpen] = useState<boolean>(false);
 
@@ -169,6 +173,14 @@ const BrowserBreadcrumbs = ({
     }
   };
 
+  let regularButtonOverride: CSSObject = {};
+
+  if (colorVariants) {
+    regularButtonOverride = {
+      backgroundColor: "transparent",
+    };
+  }
+
   return (
     <Fragment>
       <div className={classes.breadcrumbsMain}>
@@ -249,6 +261,7 @@ const BrowserBreadcrumbs = ({
               }}
               variant={"regular"}
               label={"Create new path"}
+              sx={regularButtonOverride}
             />
           </Tooltip>
         )}

portal-ui/src/screens/Console/ObjectBrowser/OBHeader.tsx

@@ -23,8 +23,7 @@ import {
 } from "../../../common/SecureComponent/permissions";
 import { SecureComponent } from "../../../common/SecureComponent";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
-import { BackLink, Button, SettingsIcon } from "mds";
+import { BackLink, Button, SettingsIcon, Grid } from "mds";
-import { Grid } from "@mui/material";
 import AutoColorIcon from "../Common/Components/AutoColorIcon";
 import { useSelector } from "react-redux";
 import { selFeatures } from "../consoleSlice";
@@ -35,6 +34,7 @@ import { setSearchVersions } from "./objectBrowserSlice";
 import { AppState, useAppDispatch } from "../../../store";
 import FilterObjectsSB from "./FilterObjectsSB";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
+import ObjectManagerButton from "../Common/ObjectManager/ObjectManagerButton";
 
 interface IOBHeader {
   bucketName: string;
@@ -164,8 +164,16 @@ const OBHeader = ({ bucketName }: IOBHeader) => {
           <Grid>
             <AutoColorIcon marginRight={30} marginTop={10} />
           </Grid>
-          <Grid item xs>
+          <Grid
+            item
+            xs
+            sx={{
+              display: "flex",
+              gap: 10,
+            }}
+          >
             {searchBar}
+            <ObjectManagerButton />
           </Grid>
         </Grid>
       )}

portal-ui/src/screens/LoginPage/loginThunks.ts

@@ -44,8 +44,6 @@ export const doLoginAsync = createAsyncThunk(
       };
     }
 
-    console.log("PAYLOAD:", loginStrategyPayload);
-
     return api
       .invoke("POST", "/api/v1/login", loginStrategyPayload)
       .then((res) => {

restapi/configure_console.go

@@ -388,13 +388,15 @@ func handleSPA(w http.ResponseWriter, r *http.Request) {
 		sf.HideMenu = true
 		sf.ObjectBrowser = true
 
-		err := ValidateEncodedStyles(overridenStyles)
+		if overridenStyles != "" {
-		if err != nil {
+			err := ValidateEncodedStyles(overridenStyles)
-			http.Error(w, err.Error(), http.StatusInternalServerError)
+			if err != nil {
-			return
+				http.Error(w, err.Error(), http.StatusInternalServerError)
-		}
+				return
+			}
 
-		sf.CustomStyleOB = overridenStyles
+			sf.CustomStyleOB = overridenStyles
+		}
 
 		sessionID, err := login(consoleCreds, sf)
 		if err != nil {