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

@@ -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')}>
+              <Suspense fallback={<Spinner />}>
                 <ArApp />
+              </Suspense>
             </LayoutWithSideNav>
           </Route>
         )}

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,6 +59,7 @@ const GitnessApp = (props: Partial<MFEAppProps>): JSX.Element => {
     on401
   } = props
   return (
+    <Container className="arApp">
       <PreferenceStoreProvider>
         <App
           parent={defaultTo(parent, Parent.OSS)}
@@ -115,6 +116,7 @@ const GitnessApp = (props: Partial<MFEAppProps>): JSX.Element => {
           on401={defaultTo(on401, noop)}
         />
       </PreferenceStoreProvider>
+    </Container>
   )
 }
 

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}

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%;
-}
-
-.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 {
+.arApp {
+  /* 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--']) {
+  [class*='PageBody--pageBody'] {
+    [class*='PageHeader--xlarge--'],
+    [class*='PageHeader--large--'] {
       background-color: var(--ar-page-header-background-color, var(--primary-1)) !important;
     }
+  }
 }

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