Merge branch 'ui/nav-height-fix' of _OKE5H2PQKOUfzFFDuD4FA/default/CODE/gitness (#236)

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({

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: {}
     })
   ]
 }

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

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;
   }
 }

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
 }

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}

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 {

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

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"