Fixed issues in Embeddable Object Browser (#2711)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2023-03-16 09:42:35 -06:00
committed by GitHub
parent f7efbc66f7
commit eb3913ba48
11 changed files with 105 additions and 22 deletions

View File

@@ -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"

View File

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

View File

@@ -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>
}

View File

@@ -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" : ""}`}
/>

View File

@@ -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

View File

@@ -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")) {
hideMenu = true;
} else if (pathname.endsWith("/hop")) {
hideMenu = true;
} else if (obOnly) {
if (features?.includes("hide-menu") || pathname.endsWith("/hop") || obOnly) {
hideMenu = true;
}

View File

@@ -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) {

View File

@@ -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>
)}

View File

@@ -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 { Grid } from "@mui/material";
import { BackLink, Button, SettingsIcon, Grid } from "mds";
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>
)}

View File

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

View File

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