Fixed issues in Embeddable Object Browser (#2711)
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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" : ""}`}
|
||||
/>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -44,8 +44,6 @@ export const doLoginAsync = createAsyncThunk(
|
||||
};
|
||||
}
|
||||
|
||||
console.log("PAYLOAD:", loginStrategyPayload);
|
||||
|
||||
return api
|
||||
.invoke("POST", "/api/v1/login", loginStrategyPayload)
|
||||
.then((res) => {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user