From 16ba4e056fe09af05fda07ec97ac96eb391b6683 Mon Sep 17 00:00:00 2001
From: Shivanand Sonnad <shivanand.sonnad@harness.io>
Date: Mon, 9 Sep 2024 08:08:08 +0000
Subject: [PATCH] fix: fix issue with breaking page header css in code module
 (#2668)

* fix: add lazy loading for ar app
* fix: remove not used css and move global css behind arApp class to avoid conflicting with other modules
* fix: fix issue with breaking page header css in code module
---
 web/src/RouteDestinations.tsx                 |  10 +-
 web/src/ar/app/GitnessApp.tsx                 | 116 +++++++++---------
 .../version-details/OSSVersionDetailsPage.tsx |   1 +
 web/src/ar/styles/App.scss                    |  50 ++------
 web/src/ar/styles/App.scss.d.ts               |   3 +-
 5 files changed, 81 insertions(+), 99 deletions(-)

diff --git a/web/src/RouteDestinations.tsx b/web/src/RouteDestinations.tsx
index f18211e2b..e7da86c6d 100644
--- a/web/src/RouteDestinations.tsx
+++ b/web/src/RouteDestinations.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import React from 'react'
+import React, { lazy, Suspense } from 'react'
 import { Route, Switch, BrowserRouter } from 'react-router-dom'
-import ArApp from '@ar/gitness/ArApp'
+import { Spinner } from '@blueprintjs/core'
 import { SignIn } from 'pages/SignIn/SignIn'
 import { SignUp } from 'pages/SignUp/SignUp'
 import Repository from 'pages/Repository/Repository'
@@ -57,6 +57,8 @@ import GitspaceListing from 'cde-gitness/pages/GitspaceListing/GitspaceListing'
 import GitspaceCreate from 'cde-gitness/pages/GitspaceCreate/GitspaceCreate'
 import ManageLabels from 'pages/ManageSpace/ManageLabels/ManageLabels'
 
+const ArApp = lazy(() => import('@ar/gitness/ArApp'))
+
 export const RouteDestinations: React.FC = React.memo(function RouteDestinations() {
   const { getString } = useStrings()
   const repoPath = `${pathProps.space}/${pathProps.repoName}`
@@ -97,7 +99,9 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
         {standalone && (
           <Route path={routes.toAR({ space: pathProps.space })}>
             <LayoutWithSideNav title={getString('pageTitle.artifactRegistries')}>
-              <ArApp />
+              <Suspense fallback={<Spinner />}>
+                <ArApp />
+              </Suspense>
             </LayoutWithSideNav>
           </Route>
         )}
diff --git a/web/src/ar/app/GitnessApp.tsx b/web/src/ar/app/GitnessApp.tsx
index f40b31613..8a156900d 100644
--- a/web/src/ar/app/GitnessApp.tsx
+++ b/web/src/ar/app/GitnessApp.tsx
@@ -16,7 +16,7 @@
 
 import React, { createContext } from 'react'
 import { defaultTo, noop } from 'lodash-es'
-import { Button } from '@harnessio/uicore'
+import { Button, Container } from '@harnessio/uicore'
 
 import type { MFEAppProps } from '@ar/MFEAppTypes'
 
@@ -59,62 +59,64 @@ const GitnessApp = (props: Partial<MFEAppProps>): JSX.Element => {
     on401
   } = props
   return (
-    <PreferenceStoreProvider>
-      <App
-        parent={defaultTo(parent, Parent.OSS)}
-        parentContextObj={Object.assign(
-          {
-            appStoreContext: createContext({}) as any,
-            licenseStoreProvider: createContext({}) as any,
-            permissionsContext: createContext({}) as any
-          },
-          parentContextObj
-        )}
-        matchPath={defaultTo(matchPath, '/')}
-        renderUrl={defaultTo(renderUrl, '/')}
-        scope={defaultTo(scope, {})}
-        customScope={defaultTo(customScope, {})}
-        components={Object.assign(
-          { RbacButton: Button, NGBreadcrumbs, RbacMenuItem, SecretFormInput, VulnerabilityView, DependencyView },
-          components
-        )}
-        NavComponent={NavComponent}
-        hooks={Object.assign(
-          {
-            useDocumentTitle: () => ({ updateTitle: () => void 0 }),
-            useLogout: () => ({ forceLogout: () => void 0 }),
-            usePermission: () => [true]
-          },
-          hooks
-        )}
-        customHooks={Object.assign(
-          {
-            useQueryParams,
-            useUpdateQueryParams,
-            useQueryParamsOptions,
-            useDefaultPaginationProps,
-            usePreferenceStore,
-            useModalHook,
-            useConfirmationDialog
-          },
-          customHooks
-        )}
-        customComponents={Object.assign(
-          {
-            ModalProvider
-          },
-          customComponents
-        )}
-        customUtils={Object.assign(
-          {
-            getCustomHeaders,
-            getApiBaseUrl
-          },
-          customUtils
-        )}
-        on401={defaultTo(on401, noop)}
-      />
-    </PreferenceStoreProvider>
+    <Container className="arApp">
+      <PreferenceStoreProvider>
+        <App
+          parent={defaultTo(parent, Parent.OSS)}
+          parentContextObj={Object.assign(
+            {
+              appStoreContext: createContext({}) as any,
+              licenseStoreProvider: createContext({}) as any,
+              permissionsContext: createContext({}) as any
+            },
+            parentContextObj
+          )}
+          matchPath={defaultTo(matchPath, '/')}
+          renderUrl={defaultTo(renderUrl, '/')}
+          scope={defaultTo(scope, {})}
+          customScope={defaultTo(customScope, {})}
+          components={Object.assign(
+            { RbacButton: Button, NGBreadcrumbs, RbacMenuItem, SecretFormInput, VulnerabilityView, DependencyView },
+            components
+          )}
+          NavComponent={NavComponent}
+          hooks={Object.assign(
+            {
+              useDocumentTitle: () => ({ updateTitle: () => void 0 }),
+              useLogout: () => ({ forceLogout: () => void 0 }),
+              usePermission: () => [true]
+            },
+            hooks
+          )}
+          customHooks={Object.assign(
+            {
+              useQueryParams,
+              useUpdateQueryParams,
+              useQueryParamsOptions,
+              useDefaultPaginationProps,
+              usePreferenceStore,
+              useModalHook,
+              useConfirmationDialog
+            },
+            customHooks
+          )}
+          customComponents={Object.assign(
+            {
+              ModalProvider
+            },
+            customComponents
+          )}
+          customUtils={Object.assign(
+            {
+              getCustomHeaders,
+              getApiBaseUrl
+            },
+            customUtils
+          )}
+          on401={defaultTo(on401, noop)}
+        />
+      </PreferenceStoreProvider>
+    </Container>
   )
 }
 
diff --git a/web/src/ar/pages/version-details/OSSVersionDetailsPage.tsx b/web/src/ar/pages/version-details/OSSVersionDetailsPage.tsx
index afcbd38be..8f42aedcc 100644
--- a/web/src/ar/pages/version-details/OSSVersionDetailsPage.tsx
+++ b/web/src/ar/pages/version-details/OSSVersionDetailsPage.tsx
@@ -44,6 +44,7 @@ export default function OSSVersionDetailsPage() {
   const [showModal, hideModal] = useModalHook(() => {
     return (
       <Drawer
+        className="arApp"
         position={Position.RIGHT}
         isOpen={true}
         isCloseButtonShown={false}
diff --git a/web/src/ar/styles/App.scss b/web/src/ar/styles/App.scss
index 50a879967..f99fe1072 100644
--- a/web/src/ar/styles/App.scss
+++ b/web/src/ar/styles/App.scss
@@ -14,43 +14,19 @@
  * limitations under the License.
  */
 
-html,
-body,
-#react-root {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-}
+.arApp {
+  /* stylelint-disable  color-no-hex */
+  :root {
+    // AR Harness Artifact Registry
+    --har-foreground: #0095f7;
+    --har-border: #0095f7;
+    --har-background: #fff9fc;
+  }
 
-.ng-tooltip-native {
-  display: flex;
-  align-items: center;
-}
-
-body {
-  --font-family: 'Inter', sans-serif;
-  --font-family-mono: Monaco, 'Ubuntu Mono', 'Courier New', monospace;
-  --font-family-reenie-beanie: 'Reenie Beanie';
-  --font-size: var(--font-size-small);
-  min-width: 1280px;
-}
-
-/* stylelint-disable  color-no-hex */
-:root {
-  // AR Harness Artifact Registry
-  --har-foreground: #0095f7;
-  --har-border: #0095f7;
-  --har-background: #fff9fc;
-}
-/* stylelint-enable  color-no-hex */
-
-* {
-  outline: none !important;
-}
-
-[class*='PageBody--pageBody'] [class*='PageHeader--'] {
-  &:not([class*='PageHeader--standard--']) {
-    background-color: var(--ar-page-header-background-color, var(--primary-1)) !important;
+  [class*='PageBody--pageBody'] {
+    [class*='PageHeader--xlarge--'],
+    [class*='PageHeader--large--'] {
+      background-color: var(--ar-page-header-background-color, var(--primary-1)) !important;
+    }
   }
 }
diff --git a/web/src/ar/styles/App.scss.d.ts b/web/src/ar/styles/App.scss.d.ts
index e8b7a12a5..18fc389a9 100644
--- a/web/src/ar/styles/App.scss.d.ts
+++ b/web/src/ar/styles/App.scss.d.ts
@@ -16,5 +16,4 @@
 
 /* eslint-disable */
 // This is an auto-generated file
-export declare const ngTooltipNative: string
-export declare const reactRoot: string
+export declare const arApp: string