diff --git a/portal-ui/package.json b/portal-ui/package.json index 1a4fcfcdb..f9ff6b865 100644 --- a/portal-ui/package.json +++ b/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" diff --git a/portal-ui/src/StyleHandler.tsx b/portal-ui/src/StyleHandler.tsx index 20f897056..bfe5cfcab 100644 --- a/portal-ui/src/StyleHandler.tsx +++ b/portal-ui/src/StyleHandler.tsx @@ -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, diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx index 53f348d28..f109c0b1c 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx +++ b/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} /> )} @@ -1009,6 +1048,7 @@ const ListObjects = () => { IAM_SCOPES.S3_ALL_LIST_BUCKET, ]) || rewindEnabled } + sx={regularButtonOverride} /> { } closeMenu(); }} + overrideStyles={callActionButtonOverride} /> } diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx index 600159481..27076ecf7 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx +++ b/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(false); const [retentionModalOpen, setRetentionModalOpen] = useState(false); @@ -582,6 +586,14 @@ const ObjectDetailPanel = ({ return formatTime.trim() !== "" ? `${formatTime} ago` : "Just now"; }; + let regularButtonOverride: CSSObject = {}; + + if (colorVariants) { + regularButtonOverride = { + backgroundColor: "transparent", + }; + } + return ( {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" : ""}`} /> diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx index 609995f26..507b1e2b9 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx +++ b/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={} variant={"callAction"} disabled={forceDisable || !uploadEnabled} + sx={overrideStyles} /> { 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; } diff --git a/portal-ui/src/screens/Console/ConsoleKBar.tsx b/portal-ui/src/screens/Console/ConsoleKBar.tsx index 2fda08deb..986dce54e 100644 --- a/portal-ui/src/screens/Console/ConsoleKBar.tsx +++ b/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 ; + return ( + + + + + ); } // for anonymous mode, we don't load Console, only AnonymousAccess if (anonymousMode) { diff --git a/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx b/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx index 414df587e..36261fc97 100644 --- a/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx +++ b/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(false); @@ -169,6 +173,14 @@ const BrowserBreadcrumbs = ({ } }; + let regularButtonOverride: CSSObject = {}; + + if (colorVariants) { + regularButtonOverride = { + backgroundColor: "transparent", + }; + } + return (
@@ -249,6 +261,7 @@ const BrowserBreadcrumbs = ({ }} variant={"regular"} label={"Create new path"} + sx={regularButtonOverride} /> )} diff --git a/portal-ui/src/screens/Console/ObjectBrowser/OBHeader.tsx b/portal-ui/src/screens/Console/ObjectBrowser/OBHeader.tsx index b489bce2d..b30306b12 100644 --- a/portal-ui/src/screens/Console/ObjectBrowser/OBHeader.tsx +++ b/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 { 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) => { - + {searchBar} + )} diff --git a/portal-ui/src/screens/LoginPage/loginThunks.ts b/portal-ui/src/screens/LoginPage/loginThunks.ts index 6e8b37c6f..9210c8c5d 100644 --- a/portal-ui/src/screens/LoginPage/loginThunks.ts +++ b/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) => { diff --git a/restapi/configure_console.go b/restapi/configure_console.go index de6ba034c..27a6dd984 100644 --- a/restapi/configure_console.go +++ b/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 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 {