Skip to content

Commit

Permalink
[8.x] [ML] Fix page header right side items flex responsiveness (#198625
Browse files Browse the repository at this point in the history 
) (#198835)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Fix page header right side items flex responsiveness
(#198625)](#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":"[email protected]"},"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
#197892, but\r\nnot fully -
elastic/eui#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
#197892, but\r\nnot fully -
elastic/eui#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
#197892, but\r\nnot fully -
elastic/eui#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 <[email protected]>
  • Loading branch information
@kibanamachine @cee-chen
kibanamachine and cee-chen authored Nov 4, 2024
1 parent d00e325 commit 1386b1e
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 45 deletions.
44 changes: 22 additions & 22 deletions x-pack/plugins/aiops/public/components/page_header/page_header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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)}
/>
);
};
46 changes: 23 additions & 23 deletions x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
/>
);
};
Expand Down

0 comments on commit 1386b1e

Please sign in to comment.