From f7f7b087c48167fe90dcc11665492de1acdc8415 Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Mon, 13 Mar 2023 21:42:19 -0700
Subject: [PATCH] Hide Header and Padding on iframed Metrics (#2703)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../Buckets/BucketDetails/BucketDetails.tsx   |  8 ++++---
 .../FormComponents/common/styleLibrary.ts     |  6 ------
 .../Console/Common/Layout/PageLayout.tsx      | 21 +++++++------------
 .../screens/Console/Dashboard/Dashboard.tsx   | 11 +++++++++-
 .../Dashboard/Prometheus/PrDashboard.tsx      | 11 +++++++++-
 .../Console/IDP/IDPConfigurationDetails.tsx   |  2 --
 6 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
index 581198b41..4807b07df 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
+++ b/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 />} />
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index 3472ad146..abd4df1ce 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/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",
diff --git a/portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx b/portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx
index c19040595..ff8a91299 100644
--- a/portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx
+++ b/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;
diff --git a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
index 33199c76b..f0ee74eed 100644
--- a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
+++ b/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}>
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
index 14fcc2f50..1e2aacff3 100644
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
+++ b/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}
diff --git a/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx b/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
index 0950c0bd5..f6bea053a 100644
--- a/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
+++ b/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,