fix: fix centered headers on desktop [#121919] (#122643) (#122982)

(cherry picked from commit 8f26b63d09)

x-pack/plugins/uptime/public/apps/__snapshots__/uptime_page_template.test.tsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UptimePageTemplateComponent styling applies the header centering on mobile 1`] = `
+.c0 .euiPageHeaderContent > .euiFlexGroup {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.c0 .euiPageHeaderContent > .euiFlexGroup > .euiFlexItem {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<div
+  class="euiPage euiPage--grow euiPageTemplate c0"
+  style="min-height: 460px;"
+>
+  <div
+    class="euiPageBody euiPageBody--borderRadiusNone"
+  >
+    <div
+      class="euiPanel euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPageContent euiPageContent--borderRadiusNone"
+      role="main"
+    >
+      <div
+        class="euiPageContentBody euiPage--paddingLarge euiPage--restrictWidth-default"
+      >
+        <div
+          style="visibility: initial;"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`UptimePageTemplateComponent styling does not apply header centering on bigger resolutions 1`] = `
+.c0 .euiPageHeaderContent > .euiFlexGroup {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+<div
+  class="euiPage euiPage--grow euiPageTemplate c0"
+  style="min-height: 460px;"
+>
+  <div
+    class="euiPageBody euiPageBody--borderRadiusNone"
+  >
+    <div
+      class="euiPanel euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPageContent euiPageContent--borderRadiusNone"
+      role="main"
+    >
+      <div
+        class="euiPageContentBody euiPage--paddingLarge euiPage--restrictWidth-default"
+      >
+        <div
+          style="visibility: initial;"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

x-pack/plugins/uptime/public/apps/uptime_page_template.test.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+// app.test.js
+import React from 'react';
+import 'jest-styled-components';
+import { render } from '../lib/helper/rtl_helpers';
+import { UptimePageTemplateComponent } from './uptime_page_template';
+import { OVERVIEW_ROUTE } from '../../common/constants';
+import { useBreakpoints } from '../hooks/use_breakpoints';
+
+jest.mock('../hooks/use_breakpoints', () => {
+  const down = jest.fn().mockReturnValue(false);
+  return {
+    useBreakpoints: () => ({ down }),
+  };
+});
+
+describe('UptimePageTemplateComponent', () => {
+  describe('styling', () => {
+    // In this test we use snapshots because we're asserting on generated
+    // styles. Writing assertions manually here could make this test really
+    // convoluted, and it require us to manually update styling strings
+    // according to `styled-components` generator, which is counter-productive.
+    // In general, however, we avoid snaphshot tests.
+
+    it('does not apply header centering on bigger resolutions', () => {
+      const { container } = render(<UptimePageTemplateComponent path={OVERVIEW_ROUTE} />);
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
+    it('applies the header centering on mobile', () => {
+      (useBreakpoints().down as jest.Mock).mockReturnValue(true);
+      const { container } = render(<UptimePageTemplateComponent path={OVERVIEW_ROUTE} />);
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+});

x-pack/plugins/uptime/public/apps/uptime_page_template.tsx

@@ -16,28 +16,34 @@ import { EmptyStateLoading } from '../components/overview/empty_state/empty_stat
 import { EmptyStateError } from '../components/overview/empty_state/empty_state_error';
 import { useHasData } from '../components/overview/empty_state/use_has_data';
 import { useInspectorContext } from '../../../observability/public';
+import { useBreakpoints } from '../hooks/use_breakpoints';
 
 interface Props {
   path: string;
   pageHeader?: EuiPageHeaderProps;
 }
 
+const mobileCenteredHeader = `
+  .euiPageHeaderContent > .euiFlexGroup > .euiFlexItem {
+    align-items: center;
+  }
+`;
+
 export const UptimePageTemplateComponent: React.FC<Props> = ({ path, pageHeader, children }) => {
   const {
     services: { observability },
   } = useKibana<ClientPluginsStart>();
+  const { down } = useBreakpoints();
+  const isMobile = down('s');
 
   const PageTemplateComponent = observability.navigation.PageTemplate;
-
   const StyledPageTemplateComponent = useMemo(() => {
-    return styled(PageTemplateComponent)`
+    return styled(PageTemplateComponent)<{ isMobile: boolean }>`
       .euiPageHeaderContent > .euiFlexGroup {
         flex-wrap: wrap;
       }
 
-      .euiPageHeaderContent > .euiFlexGroup > .euiFlexItem {
-        align-items: center;
-      }
+      ${(props) => (props.isMobile ? mobileCenteredHeader : '')}
     `;
   }, [PageTemplateComponent]);
 
@@ -61,6 +67,7 @@ export const UptimePageTemplateComponent: React.FC<Props> = ({ path, pageHeader,
   return (
     <>
       <StyledPageTemplateComponent
+        isMobile={isMobile}
         pageHeader={pageHeader}
         data-test-subj={noDataConfig ? 'data-missing' : undefined}
         noDataConfig={isMainRoute && !loading ? noDataConfig : undefined}