Hide Header and Padding on iframed Metrics (#2703)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

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

@@ -40,7 +40,6 @@ import api from "../../../../common/api";
 import { BucketInfo } from "../types";
 import {
   containerForHeader,
-  pageContentStyles,
   searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../../common/types";
@@ -106,7 +105,6 @@ const styles = (theme: Theme) =>
     pageContainer: {
       height: "100%",
     },
-    ...pageContentStyles,
     ...searchField,
     capitalize: {
       textTransform: "capitalize",
@@ -312,7 +310,11 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
             selectedTab={activeTab}
             isRouteTabs
             routes={
-              <div className={classes.contentSpacer}>
+              <div
+                style={{
+                  padding: "2rem",
+                }}
+              >
                 <Routes>
                   <Route path="summary" element={<BucketSummaryPanel />} />
                   <Route path="events" element={<BucketEventsPanel />} />

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -775,12 +775,6 @@ export const commonDashboardInfocard: any = {
   },
 };
 
-export const pageContentStyles = {
-  contentSpacer: {
-    padding: "2rem",
-  },
-};
-
 export const serviceAccountStyles: any = {
   buttonContainer: {
     display: "flex",

portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx

@@ -1,31 +1,26 @@
 import React from "react";
 import { Grid } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { pageContentStyles } from "../FormComponents/common/styleLibrary";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...pageContentStyles,
-  });
 
 type PageLayoutProps = {
   className?: string;
-  classes?: any;
   variant?: "constrained" | "full";
   children: any;
+  noPadding?: boolean;
 };
 
 const PageLayout = ({
-  classes,
   className = "",
   children,
   variant = "constrained",
+  noPadding = false,
 }: PageLayoutProps) => {
   let style = variant === "constrained" ? { maxWidth: 1220 } : {};
   return (
-    <div className={classes.contentSpacer}>
+    <div
+      style={{
+        padding: noPadding ? 0 : "2rem",
+      }}
+    >
       <Grid container>
         <Grid item xs={12} className={className} style={style}>
           {children}
@@ -35,4 +30,4 @@ const PageLayout = ({
   );
 };
 
-export default withStyles(styles)(PageLayout);
+export default PageLayout;

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

@@ -26,6 +26,7 @@ import { AppState, useAppDispatch } from "../../../store";
 import { getUsageAsync } from "./dashboardThunks";
 import { useSelector } from "react-redux";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
+import { selFeatures } from "../consoleSlice";
 
 interface IDashboardSimple {
   classes: any;
@@ -41,6 +42,14 @@ const Dashboard = ({ classes }: IDashboardSimple) => {
   const [loading, setLoading] = useState<boolean>(true);
 
   const usage = useSelector((state: AppState) => state.dashboard.usage);
+  const features = useSelector(selFeatures);
+  const obOnly = !!features?.includes("object-browser-only");
+  let hideMenu = false;
+  if (features?.includes("hide-menu")) {
+    hideMenu = true;
+  } else if (obOnly) {
+    hideMenu = true;
+  }
 
   useEffect(() => {
     if (loading) {
@@ -51,7 +60,7 @@ const Dashboard = ({ classes }: IDashboardSimple) => {
 
   return (
     <Fragment>
-      <PageHeaderWrapper label="Metrics" />
+      {!hideMenu && <PageHeaderWrapper label="Metrics" />}
       {loading ? (
         <Grid container>
           <Grid item xs={12} className={classes.container}>

portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx

@@ -48,6 +48,7 @@ import { Button, HelpBox, PrometheusErrorIcon, SyncIcon } from "mds";
 import { ITabOption } from "../../Common/TabSelector/types";
 import { getUsageAsync } from "../dashboardThunks";
 import { reloadWidgets } from "../dashboardSlice";
+import { selFeatures } from "../../consoleSlice";
 
 interface IPrDashboard {
   classes?: any;
@@ -68,6 +69,14 @@ const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
   const zoomWidget = useSelector(
     (state: AppState) => state.dashboard.zoom.widgetRender
   );
+  const features = useSelector(selFeatures);
+  const obOnly = !!features?.includes("object-browser-only");
+  let hideMenu = false;
+  if (features?.includes("hide-menu")) {
+    hideMenu = true;
+  } else if (obOnly) {
+    hideMenu = true;
+  }
 
   const [timeStart, setTimeStart] = useState<any>(null);
   const [timeEnd, setTimeEnd] = useState<any>(null);
@@ -168,7 +177,7 @@ const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
   }
 
   return (
-    <PageLayout>
+    <PageLayout noPadding={hideMenu}>
       {zoomOpen && (
         <ZoomWidget
           modalOpen={zoomOpen}

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

@@ -24,7 +24,6 @@ import {
   containerForHeader,
   formFieldStyles,
   modalBasic,
-  pageContentStyles,
   searchField,
 } from "../Common/FormComponents/common/styleLibrary";
 import { BackLink, Button, EditIcon, RefreshIcon, TrashIcon } from "mds";
@@ -66,7 +65,6 @@ const styles = (theme: Theme) =>
     pageContainer: {
       height: "100%",
     },
-    ...pageContentStyles,
     ...searchField,
 
     ...containerForHeader,