From e9611ca550894897708382b93a6d7384ba5dc12a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Tue, 27 Dec 2022 17:00:41 +0100
Subject: [PATCH] Remove wrapped `StyledPageTemplateComponent`

Since #146212 we use a development build of React. This has surfaced
some existing problems in the `UptimePageTemplateComponent`, namely a
`useMemo` hook that was calling other hooks inside it by caching a
component.

The wrapped component seems to have some extra styling for mobile users.
For now we will remove this change to make the Uptime plugin work again
and tackle the issues with mobile rendering in a different PR.
---
 .../app/uptime_page_template.tsx              | 24 +++----------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_page_template.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_page_template.tsx
index df7735aef2695..2028e265ad2e7 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_page_template.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_page_template.tsx
@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect, useMemo } from 'react';
-import styled from 'styled-components';
+import React, { useEffect } from 'react';
 import { EuiPageHeaderProps, EuiPageTemplateProps, useIsWithinMaxBreakpoint } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useInspectorContext } from '@kbn/observability-plugin/public';
@@ -22,12 +21,6 @@ interface Props {
   pageHeader?: EuiPageHeaderProps;
 }
 
-const mobileCenteredHeader = `
-  .euiPageHeaderContent > .euiFlexGroup > .euiFlexItem {
-    align-items: center;
-  }
-`;
-
 export const UptimePageTemplateComponent: React.FC<Props & EuiPageTemplateProps> = ({
   path,
   pageHeader,
@@ -37,18 +30,8 @@ export const UptimePageTemplateComponent: React.FC<Props & EuiPageTemplateProps>
   const {
     services: { observability },
   } = useKibana<ClientPluginsStart>();
-  const isMobile = useIsWithinMaxBreakpoint('s');
 
   const PageTemplateComponent = observability.navigation.PageTemplate;
-  const StyledPageTemplateComponent = useMemo(() => {
-    return styled(PageTemplateComponent)<{ isMobile: boolean }>`
-      .euiPageHeaderContent > .euiFlexGroup {
-        flex-wrap: wrap;
-      }
-
-      ${(props) => (props.isMobile ? mobileCenteredHeader : '')}
-    `;
-  }, [PageTemplateComponent]);
 
   const noDataConfig = useNoDataConfig();
 
@@ -69,8 +52,7 @@ export const UptimePageTemplateComponent: React.FC<Props & EuiPageTemplateProps>
 
   return (
     <>
-      <StyledPageTemplateComponent
-        isMobile={isMobile}
+      <PageTemplateComponent
         pageHeader={pageHeader}
         data-test-subj={noDataConfig ? 'data-missing' : undefined}
         noDataConfig={isMainRoute && !loading ? noDataConfig : undefined}
@@ -84,7 +66,7 @@ export const UptimePageTemplateComponent: React.FC<Props & EuiPageTemplateProps>
         >
           {children}
         </div>
-      </StyledPageTemplateComponent>
+      </PageTemplateComponent>
     </>
   );
 };