From 1386b1e1df14e0bbe0eab3821fb9f13d27c30591 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 5 Nov 2024 06:22:16 +1100
Subject: [PATCH] [8.x] [ML] Fix page header right side items flex
 responsiveness (#198625) (#198835)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Fix page header right side items flex responsiveness
(#198625)](https://github.com/elastic/kibana/pull/198625)

<!--- Backport version: 9.4.3 -->

### 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","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","v8.16.0","backport:version","v8.17.0"],"title":"[ML]
Fix page header right side items flex
responsiveness","number":198625,"url":"https://github.com/elastic/kibana/pull/198625","mergeCommit":{"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":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198625","number":198625,"mergeCommit":{"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"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
---
 .../components/page_header/page_header.tsx    | 44 +++++++++---------
 .../data_drift/data_drift_page.tsx            | 46 +++++++++----------
 2 files changed, 45 insertions(+), 45 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 86bb350849a33..4623e886852d8 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
@@ -106,31 +106,31 @@ export const PageHeader: FC<PageHeaderProps> = ({ onRefresh, needsUpdate }) => {
           {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}
-            onRefresh={onRefresh}
-            needsUpdate={needsUpdate}
+        <DatePickerWrapper
+          isAutoRefreshOnly={!hasValidTimeField}
+          showRefresh={!hasValidTimeField}
+          width="full"
+          flexGroup={!hasValidTimeField}
+          onRefresh={onRefresh}
+          needsUpdate={needsUpdate}
+        />,
+        hasValidTimeField && (
+          <FullTimeRangeSelector
+            frozenDataPreference={frozenDataPreference}
+            setFrozenDataPreference={setFrozenDataPreference}
+            dataView={dataView}
+            query={undefined}
+            disabled={false}
+            timefilter={timefilter}
+            callback={updateTimeState}
           />
-        </EuiFlexGroup>,
-      ]}
+        ),
+      ].filter(Boolean)}
     />
   );
 };