[Uptime/UX] Fixes page template wrapper (#110058) (#110092)

Co-authored-by: Casper Hübertz <[email protected]>
elastic · Aug 25, 2021 · 0897999 · 0897999
1 parent 121d28c
commit 0897999
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/x-pack/plugins/apm/public/application/uxApp.tsx b/x-pack/plugins/apm/public/application/uxApp.tsx
@@ -33,6 +33,7 @@ import { UXActionMenu } from '../components/app/RumDashboard/ActionMenu';
 import { redirectTo } from '../components/routing/redirect_to';
 import { useBreadcrumbs } from '../../../observability/public';
 import { useApmPluginContext } from '../context/apm_plugin/use_apm_plugin_context';
+import { APP_WRAPPER_CLASS } from '../../../../../src/core/public';
 
 export const uxRoutes: APMRouteDefinition[] = [
   {
@@ -71,7 +72,11 @@ function UxApp() {
         darkMode,
       })}
     >
-      <div data-test-subj="csmMainContainer" role="main">
+      <div
+        className={APP_WRAPPER_CLASS}
+        data-test-subj="csmMainContainer"
+        role="main"
+      >
         <ReactRouterRoute component={ScrollToTopOnPathChange} />
         <RumHome />
       </div>
@@ -109,7 +114,10 @@ export function UXAppRoot({
   };
 
   return (
-    <RedirectAppLinks application={core.application}>
+    <RedirectAppLinks
+      className={APP_WRAPPER_CLASS}
+      application={core.application}
+    >
       <ApmPluginContext.Provider value={apmPluginContextValue}>
         <KibanaContextProvider
           services={{ ...core, ...plugins, embeddable, data }}

diff --git a/x-pack/plugins/uptime/public/apps/uptime_app.tsx b/x-pack/plugins/uptime/public/apps/uptime_app.tsx
@@ -10,6 +10,7 @@ import { Router } from 'react-router-dom';
 import { EuiErrorBoundary } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { I18nStart, ChromeBreadcrumb, CoreStart, AppMountParameters } from 'kibana/public';
+import { APP_WRAPPER_CLASS } from '../../../../../src/core/public';
 import {
   KibanaContextProvider,
   RedirectAppLinks,
@@ -118,13 +119,14 @@ const Application = (props: UptimeAppProps) => {
                   <UptimeSettingsContextProvider {...props}>
                     <UptimeThemeContextProvider darkMode={darkMode}>
                       <UptimeStartupPluginsContextProvider {...startPlugins}>
-                        <div data-test-subj="uptimeApp">
-                          <RedirectAppLinks application={core.application}>
-                            <main>
-                              <UptimeAlertsFlyoutWrapper />
-                              <PageRouter />
-                              <ActionMenu appMountParameters={appMountParameters} />
-                            </main>
+                        <div className={APP_WRAPPER_CLASS} data-test-subj="uptimeApp">
+                          <RedirectAppLinks
+                            className={APP_WRAPPER_CLASS}
+                            application={core.application}
+                          >
+                            <UptimeAlertsFlyoutWrapper />
+                            <PageRouter />
+                            <ActionMenu appMountParameters={appMountParameters} />
                           </RedirectAppLinks>
                         </div>
                       </UptimeStartupPluginsContextProvider>

diff --git a/x-pack/plugins/uptime/public/routes.tsx b/x-pack/plugins/uptime/public/routes.tsx
@@ -34,6 +34,7 @@ import { useKibana } from '../../../../src/plugins/kibana_react/public';
 import { CertRefreshBtn } from './components/certificates/cert_refresh_btn';
 import { CertificateTitle } from './components/certificates/certificate_title';
 import { SyntheticsCallout } from './components/overview/synthetics_callout';
+import { APP_WRAPPER_CLASS } from '../../../../src/core/public';
 import {
   StepDetailPageChildren,
   StepDetailPageHeader,
@@ -174,7 +175,7 @@ export const PageRouter: FC = () => {
       {Routes.map(
         ({ title, path, component: RouteComponent, dataTestSubj, telemetryId, pageHeader }) => (
           <Route path={path} key={telemetryId} exact={true}>
-            <div data-test-subj={dataTestSubj}>
+            <div className={APP_WRAPPER_CLASS} data-test-subj={dataTestSubj}>
               <SyntheticsCallout />
               <RouteInit title={title} path={path} telemetryId={telemetryId} />
               <StyledPageTemplateComponent pageHeader={pageHeader}>