From 1241e78292af6a9b27529391dcd5e37e40869932 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Tue, 5 Nov 2024 10:26:59 -0800
Subject: [PATCH] [8.16] [ML] Fix page header right side items flex
 responsiveness (#198625) (#198882)

# Backport

This will backport the following commits from `main` to `8.16`:
- [ML] Fix page header right side items flex responsiveness (#198625)
(4fdc70bf)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Cee
Chen","email":"549407+cee-chen@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-04T17:38:07Z","message":"[ML]
Fix page header right side items flex responsiveness (#198625)\n\n##
Summary\r\n\r\nPartially addresses
https://github.com/elastic/kibana/issues/197892, but\r\nnot fully -
https://github.com/elastic/eui/pull/8109
and\r\nhttps://github.com/elastic/eui/pull/8110 will need to be merged
in first\r\nand in Kibana main as well. We can hold this PR until then
if desired to\r\nconfirm that the final UI/responsive UX works as
expected.\r\n\r\n| Before | After |\r\n|--------|--------|\r\n| <img
width=\"974\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d\">\r\n|
<img width=\"983\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418\">\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard
only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"4fdc70bf8c3b729733415820b48248abbfb5ddf8"},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[]}]
BACKPORT-->
---
 .../components/page_header/page_header.tsx    | 44 +++++++++----------
 .../data_drift/data_drift_page.tsx            | 42 +++++++++---------
 2 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/x-pack/plugins/aiops/public/components/page_header/page_header.tsx b/x-pack/plugins/aiops/public/components/page_header/page_header.tsx
index 9895fe082fcc1..a01e715e86272 100644
--- a/x-pack/plugins/aiops/public/components/page_header/page_header.tsx
+++ b/x-pack/plugins/aiops/public/components/page_header/page_header.tsx
@@ -9,7 +9,7 @@ import { css } from '@emotion/react';
 import type { FC } from 'react';
 import React, { useCallback, useMemo } from 'react';
 
-import { EuiFlexGroup, EuiFlexItem, EuiPageHeader } from '@elastic/eui';
+import { EuiPageHeader } from '@elastic/eui';
 
 import { useUrlState } from '@kbn/ml-url-state';
 import { useStorage } from '@kbn/ml-local-storage';
@@ -71,29 +71,29 @@ export const PageHeader: FC = () => {
   return (
     <EuiPageHeader
       pageTitle={<div css={dataViewTitleHeader}>{dataView.getName()}</div>}
+      rightSideGroupProps={{
+        gutterSize: 's',
+        'data-test-subj': 'aiopsTimeRangeSelectorSection',
+      }}
       rightSideItems={[
-        <EuiFlexGroup gutterSize="s" data-test-subj="aiopsTimeRangeSelectorSection">
-          {hasValidTimeField ? (
-            <EuiFlexItem grow={false}>
-              <FullTimeRangeSelector
-                frozenDataPreference={frozenDataPreference}
-                setFrozenDataPreference={setFrozenDataPreference}
-                dataView={dataView}
-                query={undefined}
-                disabled={false}
-                timefilter={timefilter}
-                callback={updateTimeState}
-              />
-            </EuiFlexItem>
-          ) : null}
-          <DatePickerWrapper
-            isAutoRefreshOnly={!hasValidTimeField}
-            showRefresh={!hasValidTimeField}
-            width="full"
-            flexGroup={false}
+        <DatePickerWrapper
+          isAutoRefreshOnly={!hasValidTimeField}
+          showRefresh={!hasValidTimeField}
+          width="full"
+          flexGroup={!hasValidTimeField}
+        />,
+        hasValidTimeField && (
+          <FullTimeRangeSelector
+            frozenDataPreference={frozenDataPreference}
+            setFrozenDataPreference={setFrozenDataPreference}
+            dataView={dataView}
+            query={undefined}
+            disabled={false}
+            timefilter={timefilter}
+            callback={updateTimeState}
           />
-        </EuiFlexGroup>,
-      ]}
+        ),
+      ].filter(Boolean)}
     />
   );
 };
diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx
index 668ca7bf43f6e..956bb76d0973c 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx
@@ -101,29 +101,29 @@ export const PageHeader: FC = () => {
           {dataView.getName()}
         </div>
       }
+      rightSideGroupProps={{
+        gutterSize: 's',
+        'data-test-subj': 'dataComparisonTimeRangeSelectorSection',
+      }}
       rightSideItems={[
-        <EuiFlexGroup gutterSize="s" data-test-subj="dataComparisonTimeRangeSelectorSection">
-          {hasValidTimeField ? (
-            <EuiFlexItem grow={false}>
-              <FullTimeRangeSelector
-                frozenDataPreference={frozenDataPreference}
-                setFrozenDataPreference={setFrozenDataPreference}
-                dataView={dataView}
-                query={undefined}
-                disabled={false}
-                timefilter={timefilter}
-                callback={updateTimeState}
-              />
-            </EuiFlexItem>
-          ) : null}
-          <DatePickerWrapper
-            isAutoRefreshOnly={!hasValidTimeField}
-            showRefresh={!hasValidTimeField}
-            width="full"
-            flexGroup={false}
+        <DatePickerWrapper
+          isAutoRefreshOnly={!hasValidTimeField}
+          showRefresh={!hasValidTimeField}
+          width="full"
+          flexGroup={!hasValidTimeField}
+        />,
+        hasValidTimeField && (
+          <FullTimeRangeSelector
+            frozenDataPreference={frozenDataPreference}
+            setFrozenDataPreference={setFrozenDataPreference}
+            dataView={dataView}
+            query={undefined}
+            disabled={false}
+            timefilter={timefilter}
+            callback={updateTimeState}
           />
-        </EuiFlexGroup>,
-      ]}
+        ),
+      ].filter(Boolean)}
     />
   );
 };