From fe6f609e4f5d77b5513603890eedb8fef35b55b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Ctan-nhu=E2=80=9D?= <“tan@harness.io”>
Date: Tue, 25 Jul 2023 13:52:27 -0700
Subject: [PATCH] Fix page body height + webpack prod assets

---
 web/config/webpack.common.js                      |  5 +----
 web/config/webpack.prod.js                        | 10 +++++-----
 web/src/global.d.ts                               |  1 -
 web/src/layouts/layout.module.scss                |  9 ++++++++-
 web/src/layouts/layout.module.scss.d.ts           |  1 +
 web/src/layouts/layout.tsx                        |  9 +++++++++
 web/src/layouts/menu/DefaultMenu.module.scss      |  5 +++++
 web/src/layouts/menu/DefaultMenu.module.scss.d.ts |  1 +
 web/src/layouts/menu/DefaultMenu.tsx              | 12 +-----------
 9 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/web/config/webpack.common.js b/web/config/webpack.common.js
index c71e03d8a..c96556268 100644
--- a/web/config/webpack.common.js
+++ b/web/config/webpack.common.js
@@ -12,9 +12,7 @@ const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin')
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 const moduleFederationConfig = require('./moduleFederation.config')
 const CONTEXT = process.cwd()
-
 const DEV = process.env.NODE_ENV === 'development'
-const ON_PREM = `${process.env.ON_PREM}` === 'true'
 
 module.exports = {
   target: 'web',
@@ -159,8 +157,7 @@ module.exports = {
     new ModuleFederationPlugin(moduleFederationConfig),
     new DefinePlugin({
       'process.env': '{}', // required for @blueprintjs/core
-      __DEV__: DEV,
-      __ON_PREM__: ON_PREM
+      __DEV__: DEV
     }),
     new GenerateStringTypesPlugin(),
     new RetryChunkLoadPlugin({
diff --git a/web/config/webpack.prod.js b/web/config/webpack.prod.js
index 8d3a4816f..982448683 100644
--- a/web/config/webpack.prod.js
+++ b/web/config/webpack.prod.js
@@ -1,13 +1,15 @@
 const { merge } = require('webpack-merge')
+const path = require('path')
 const HTMLWebpackPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const { DefinePlugin } = require('webpack')
 
 const commonConfig = require('./webpack.common')
-
-const ON_PREM = `${process.env.ON_PREM}` === 'true'
+const CONTEXT = process.cwd()
 
 const prodConfig = {
+  context: CONTEXT,
+  entry: path.resolve(CONTEXT, '/src/index.tsx'),
   mode: 'production',
   devtool: 'source-map',
   output: {
@@ -39,9 +41,7 @@ const prodConfig = {
       filename: 'index.html',
       favicon: 'src/favicon.svg',
       minify: false,
-      templateParameters: {
-        __ON_PREM__: ON_PREM
-      }
+      templateParameters: {}
     })
   ]
 }
diff --git a/web/src/global.d.ts b/web/src/global.d.ts
index de66a28cb..d174c6273 100644
--- a/web/src/global.d.ts
+++ b/web/src/global.d.ts
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 declare const __DEV__: boolean
-declare const __ON_PREM__: booelan
 
 declare module '*.png' {
   const value: string
diff --git a/web/src/layouts/layout.module.scss b/web/src/layouts/layout.module.scss
index 7e9eded47..697222d4b 100644
--- a/web/src/layouts/layout.module.scss
+++ b/web/src/layouts/layout.module.scss
@@ -12,10 +12,16 @@
       display: flex;
       flex-direction: column;
 
-      .profile {
+      .settings {
         margin: 0 var(--spacing-medium);
         padding: var(--spacing-small) 0;
         border-top: 1px solid var(--grey-200);
+        border-bottom: 1px solid var(--grey-200);
+      }
+
+      .profile {
+        margin: 0 var(--spacing-medium);
+        padding: var(--spacing-medium) 0;
       }
     }
   }
@@ -23,5 +29,6 @@
   .content {
     flex-grow: 1;
     background-color: var(--page-background);
+    overflow: auto;
   }
 }
diff --git a/web/src/layouts/layout.module.scss.d.ts b/web/src/layouts/layout.module.scss.d.ts
index bf33f3f2c..bcc0aec7d 100644
--- a/web/src/layouts/layout.module.scss.d.ts
+++ b/web/src/layouts/layout.module.scss.d.ts
@@ -4,6 +4,7 @@ declare const styles: {
   readonly main: string
   readonly layout: string
   readonly menu: string
+  readonly settings: string
   readonly profile: string
   readonly content: string
 }
diff --git a/web/src/layouts/layout.tsx b/web/src/layouts/layout.tsx
index 1181133d2..7e8a45072 100644
--- a/web/src/layouts/layout.tsx
+++ b/web/src/layouts/layout.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
 import { Avatar, Container, FlexExpander, Layout } from '@harness/uicore'
+import { Render } from 'react-jsx-match'
 import { routes } from 'RouteDefinitions'
 import { useAppContext } from 'AppContext'
+import { useStrings } from 'framework/strings'
 import { useDocumentTitle } from 'hooks/useDocumentTitle'
 import { NavMenuItem } from './menu/NavMenuItem'
 import { GitnessLogo } from '../components/GitnessLogo/GitnessLogo'
@@ -15,6 +17,7 @@ interface LayoutWithSideNavProps {
 
 export const LayoutWithSideNav: React.FC<LayoutWithSideNavProps> = ({ title, children, menu = <DefaultMenu /> }) => {
   const { currentUser } = useAppContext()
+  const { getString } = useStrings()
 
   useDocumentTitle(title)
 
@@ -29,6 +32,12 @@ export const LayoutWithSideNav: React.FC<LayoutWithSideNavProps> = ({ title, chi
 
           <FlexExpander />
 
+          <Render when={currentUser?.admin}>
+            <Container className={css.settings}>
+              <NavMenuItem icon="user-groups" label={getString('userManagement.text')} to={routes.toCODEUsers()} />
+            </Container>
+          </Render>
+
           <Container className={css.profile}>
             <NavMenuItem
               label={currentUser?.display_name || currentUser?.email}
diff --git a/web/src/layouts/menu/DefaultMenu.module.scss b/web/src/layouts/menu/DefaultMenu.module.scss
index 33aea0614..9738b2528 100644
--- a/web/src/layouts/menu/DefaultMenu.module.scss
+++ b/web/src/layouts/menu/DefaultMenu.module.scss
@@ -47,6 +47,11 @@
       padding-top: 3px;
     }
   }
+
+  .repoLinks {
+    border-left: 1px solid var(--grey-200);
+    margin-left: 17px;
+  }
 }
 
 .popoverPortal {
diff --git a/web/src/layouts/menu/DefaultMenu.module.scss.d.ts b/web/src/layouts/menu/DefaultMenu.module.scss.d.ts
index f23a6dd3e..156fca2b5 100644
--- a/web/src/layouts/menu/DefaultMenu.module.scss.d.ts
+++ b/web/src/layouts/menu/DefaultMenu.module.scss.d.ts
@@ -8,6 +8,7 @@ declare const styles: {
   readonly label: string
   readonly spaceLabel: string
   readonly spaceName: string
+  readonly repoLinks: string
   readonly popoverPortal: string
   readonly popoverTarget: string
   readonly popoverContent: string
diff --git a/web/src/layouts/menu/DefaultMenu.tsx b/web/src/layouts/menu/DefaultMenu.tsx
index 1f84273ce..4331d7198 100644
--- a/web/src/layouts/menu/DefaultMenu.tsx
+++ b/web/src/layouts/menu/DefaultMenu.tsx
@@ -3,7 +3,6 @@ import { Container, Layout } from '@harness/uicore'
 import { Render } from 'react-jsx-match'
 import { useHistory, useRouteMatch } from 'react-router-dom'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
-import { useAppContext } from 'AppContext'
 import { useStrings } from 'framework/strings'
 import { routes } from 'RouteDefinitions'
 import type { TypesSpace } from 'services/code'
@@ -16,7 +15,6 @@ export const DefaultMenu: React.FC = () => {
   const [selectedSpace, setSelectedSpace] = useState<TypesSpace | undefined>()
   const { repoMetadata, gitRef, commitRef } = useGetRepositoryMetadata()
   const { getString } = useStrings()
-  const { currentUser } = useAppContext()
   const repoPath = useMemo(() => repoMetadata?.path || '', [repoMetadata])
   const routeMatch = useRouteMatch()
   const isFilesSelected = useMemo(
@@ -59,11 +57,7 @@ export const DefaultMenu: React.FC = () => {
         </Render>
 
         <Render when={repoMetadata}>
-          <Container
-            style={{
-              borderLeft: '1px solid var(--grey-200)',
-              marginLeft: '17px'
-            }}>
+          <Container className={css.repoLinks}>
             <Layout.Vertical spacing="small">
               <NavMenuItem
                 data-code-repo-section="files"
@@ -131,10 +125,6 @@ export const DefaultMenu: React.FC = () => {
           </Container>
         </Render>
 
-        <Render when={currentUser?.admin}>
-          <NavMenuItem icon="user-groups" label={getString('userManagement.text')} to={routes.toCODEUsers()} />
-        </Render>
-
         <Render when={selectedSpace}>
           <NavMenuItem
             icon="nav-project"