All files / microfrontends ChildAppMounter.tsx

67.74% Statements 21/31
0% Branches 0/2
0% Functions 0/5
67.74% Lines 21/31

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110              8x 8x   8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x     8x                           8x                                                                                                                     8x               8x  
/*
 * Copyright 2021 Harness Inc. All rights reserved.
 * Use of this source code is governed by the PolyForm Shield 1.0.0 license
 * that can be found in the licenses directory at the root of this repository, also available at
 * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
 */
 
import React from 'react'
import { RouteComponentProps, withRouter } from 'react-router-dom'
 
import { loggerFor } from 'framework/logging/logging'
import { ModuleName } from 'framework/types/ModuleName'
import { PermissionsContext } from 'framework/rbac/PermissionsContext'
import { LicenseStoreContext } from 'framework/LicenseStore/LicenseStoreContext'
import { AppStoreContext } from 'framework/AppStore/AppStoreContext'
import { PageSpinner } from '@common/components'
import RbacButton from '@rbac/components/Button/Button'
import RbacMenuItem from '@rbac/components/MenuItem/MenuItem'
import { useDocumentTitle } from '@common/hooks/useDocumentTitle'
import { NGBreadcrumbs } from '@common/components/NGBreadcrumbs/NGBreadcrumbs'
import MonacoEditor from '@common/components/MonacoEditor/MonacoEditor'
import MonacoDiffEditor from '@common/components/MonacoDiffEditor/MonacoDiffEditor'
import YAMLBuilder from '@common/components/YAMLBuilder/YamlBuilder'
import { global401HandlerUtils } from '@common/utils/global401HandlerUtils'
import ChildAppError from './ChildAppError'
import type { ChildAppProps, Scope } from './index'
 
const logger = loggerFor(ModuleName.FRAMEWORK)
 
export { ChildAppProps }
 
export interface BaseChildAppMounterProps {
  ChildApp: React.LazyExoticComponent<React.ComponentType<ChildAppProps>>
}
 
export type ChildAppMounterProps<T = never> = T extends never ? BaseChildAppMounterProps : T & BaseChildAppMounterProps
 
export interface ChildAppMounterState {
  hasError: boolean
}
 
export class ChildAppMounter<T = never> extends React.Component<
  ChildAppMounterProps<T> & RouteComponentProps<Scope>,
  ChildAppMounterState
> {
  state: ChildAppMounterState = {
    hasError: false
  }
 
  static getDerivedStateFromError(e: Error): ChildAppMounterState {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    logger.error(e.message, e as any)
    return { hasError: true }
  }
 
  render(): React.ReactElement {
    const { ChildApp, match, children, history, ...rest } = this.props
 
    // We use routeMatch instead of location because,
    // we want to pass the mount url and not the actual url
    const { url, params, path } = match
 
    if (this.state.hasError) {
      return <ChildAppError />
    }
 
    return (
      <React.Suspense fallback={<PageSpinner />}>
        <ChildApp
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          {...(rest as any)}
          renderUrl={url}
          matchPath={path}
          scope={params}
          parentContextObj={{
            appStoreContext: AppStoreContext,
            permissionsContext: PermissionsContext,
            licenseStoreProvider: LicenseStoreContext
          }}
          on401={() => {
            global401HandlerUtils(history)
          }}
          components={{
            RbacButton,
            RbacMenuItem,
            NGBreadcrumbs,
            MonacoEditor,
            YAMLBuilder,
            MonacoDiffEditor
          }}
          hooks={{
            useDocumentTitle
          }}
        />
      </React.Suspense>
    )
  }
}
 
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const ChildAppMounterWithRouter = withRouter(ChildAppMounter as any)
 
// It's impossible to use a HOC with Generics, while using `withRouter`
// hence, we need to create a wrapper around it to add support for generics
function ChildAppMounterWithRouterWrapper<T = never>(props: ChildAppMounterProps<T>): React.ReactElement {
  return <ChildAppMounterWithRouter {...props} />
}
 
export default ChildAppMounterWithRouterWrapper