feat: Conditionally render masthead on Production and Standalone modes (#516)

Signed-off-by: Charles Thao <[email protected]>

Author: thaorell

workspaces/frontend/config/webpack.prod.js

@@ -2,11 +2,14 @@
 
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
+const { EnvironmentPlugin } = require('webpack');
 const { stylePaths } = require('./stylePaths');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
 
+const PRODUCTION = process.env.PRODUCTION || 'false';
+
 module.exports = merge(common('production'), {
   mode: 'production',
   devtool: 'source-map',
@@ -25,6 +28,9 @@ module.exports = merge(common('production'), {
       filename: '[name].css',
       chunkFilename: '[name].bundle.css',
     }),
+    new EnvironmentPlugin({
+      PRODUCTION,
+    }),
   ],
   module: {
     rules: [

workspaces/frontend/package.json

@@ -18,7 +18,7 @@
     "build:bundle-profile": "webpack --config ./config/webpack.prod.js --profile --json > ./bundle.stats.json",
     "build:bundle-analyze": "webpack-bundle-analyzer ./bundle.stats.json",
     "build:clean": "rimraf ./dist",
-    "build:prod": "webpack --config ./config/webpack.prod.js",
+    "build:prod": "cross-env PRODUCTION=true webpack --config ./config/webpack.prod.js",
     "generate:api": "./scripts/generate-api.sh && npm run prettier",
     "start:dev": "cross-env STYLE_THEME=$npm_config_theme webpack serve --hot --color --config ./config/webpack.dev.js",
     "start:dev:mock": "cross-env MOCK_API_ENABLED=true STYLE_THEME=$npm_config_theme npm run start:dev",

workspaces/frontend/src/app/App.tsx

@@ -12,7 +12,11 @@ import {
   MastheadMain,
   MastheadToggle,
 } from '@patternfly/react-core/dist/esm/components/Masthead';
-import { Page, PageToggleButton } from '@patternfly/react-core/dist/esm/components/Page';
+import {
+  Page,
+  PageSidebar,
+  PageToggleButton,
+} from '@patternfly/react-core/dist/esm/components/Page';
 import { Title } from '@patternfly/react-core/dist/esm/components/Title';
 import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ErrorBoundary from '~/app/error/ErrorBoundary';
@@ -25,6 +29,8 @@ import { NotebookContextProvider } from './context/NotebookContext';
 import { isMUITheme, Theme } from './const';
 import { BrowserStorageContextProvider } from './context/BrowserStorageContext';
 
+const isStandalone = process.env.PRODUCTION !== 'true';
+
 const App: React.FC = () => {
   useEffect(() => {
     // Apply the theme based on the value of STYLE_THEME
@@ -43,14 +49,12 @@ const App: React.FC = () => {
             <BarsIcon />
           </PageToggleButton>
         </MastheadToggle>
-        {!isMUITheme() ? (
+        {!isMUITheme() && (
           <MastheadBrand>
             <MastheadLogo component="a">
               <Brand src={logoDarkTheme} alt="Kubeflow" heights={{ default: '36px' }} />
             </MastheadLogo>
           </MastheadBrand>
-        ) : (
-          ''
         )}
       </MastheadMain>
       <MastheadContent>
@@ -63,6 +67,7 @@ const App: React.FC = () => {
       </MastheadContent>
     </Masthead>
   );
+  const sidebar = <PageSidebar isSidebarOpen={false} />;
 
   return (
     <ErrorBoundary>
@@ -71,10 +76,11 @@ const App: React.FC = () => {
           <NamespaceContextProvider>
             <Page
               mainContainerId="primary-app-container"
-              masthead={masthead}
+              masthead={isStandalone ? masthead : ''}
               isContentFilled
-              isManagedSidebar
-              sidebar={<NavSidebar />}
+              sidebar={isStandalone ? <NavSidebar /> : sidebar}
+              isManagedSidebar={isStandalone}
+              className={isStandalone ? '' : 'embedded'}
             >
               <AppRoutes />
             </Page>

workspaces/frontend/src/shared/style/MUI-theme.scss

@@ -887,6 +887,12 @@
   /* Move content area below the app bar */
 }
 
+.mui-theme .pf-v6-c-page.embedded {
+  .pf-v6-c-page__main-container {
+    margin: 0px;
+  }
+}
+
 /* Hide Masthead Toggle by default */
 .mui-theme .pf-v6-c-masthead__toggle {
   display: none;