[Uptime UI] Remove wrapped StyledPageTemplateComponent (#148116)

Co-authored-by: kibanamachine <[email protected]> Co-authored-by: shahzad31 <[email protected]>
elastic · Dec 28, 2022 · 37df467 · 37df467
1 parent 2351910
commit 37df467
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 124 deletions.
diff --git a/...gins/synthetics/public/legacy_uptime/app/__snapshots__/uptime_page_template.test.tsx.snap b/...gins/synthetics/public/legacy_uptime/app/__snapshots__/uptime_page_template.test.tsx.snap
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_page_template.test.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/app/uptime_page_template.test.tsx
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
@@ -5,9 +5,8 @@
  * 2.0.
  */
 
-import React, { useEffect, useMemo } from 'react';
-import styled from 'styled-components';
-import { EuiPageHeaderProps, EuiPageTemplateProps, useIsWithinMaxBreakpoint } from '@elastic/eui';
+import React, { useEffect } from 'react';
+import { EuiPageHeaderProps, EuiPageTemplateProps } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useInspectorContext } from '@kbn/observability-plugin/public';
 import { CERTIFICATES_ROUTE, OVERVIEW_ROUTE } from '../../../common/constants';
@@ -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>
     </>
   );
 };