From f296c0cf8cc11336bdc1fb95da1566fb6681a927 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Sat, 23 Nov 2024 09:45:40 +1100
Subject: [PATCH] [8.x] [Discover][Alerts] fix: add mobile width and fix title
 row wrap (#201354) (#201471)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Discover][Alerts] fix: add mobile width and fix title row wrap
(#201354)](https://github.com/elastic/kibana/pull/201354)

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

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

<!--BACKPORT [{"author":{"name":"Ania
Kowalska","email":"63072419+akowalska622@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-22T20:52:51Z","message":"[Discover][Alerts]
fix: add mobile width and fix title row wrap (#201354)\n\n##
Summary\r\n\r\nCloses
[#200162](https://github.com/elastic/kibana/issues/200162)\r\n\r\nLong
data view names weren't truncated on mobile view. Also noticed
the\r\n\"X\" icon to go on the second row - fixed it within the same
PR.\r\n\r\nBefore:\r\n\r\n![image](https://github.com/user-attachments/assets/de30a487-8025-41a3-8487-eb8f43108f79)\r\n\r\nAfter:\r\n\r\n<img
width=\"471\" alt=\"Screenshot 2024-11-22 at 11 55
47\"\r\nsrc=\"https://github.com/user-attachments/assets/c047c8f6-cace-4b99-814f-038bbc595572\">\r\n\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] If a plugin
configuration key changed, check if it needs to be\r\nallowlisted in the
cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\r\nchanges have been approved by the breaking-change committee.
The\r\n`release_note:breaking` label should be applied in these
situations.\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [x] The PR description includes
the appropriate Release Notes section,\r\nand the correct
`release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nDoes this PR introduce any risks? For example,
consider risks like hard\r\nto test bugs, performance regression,
potential of data loss.\r\n\r\nDescribe the risk, its severity, and
mitigation for each identified\r\nrisk. Invite stakeholders and evaluate
how to proceed before merging.\r\n\r\n- [x] No risks
identified","sha":"9c4785bfa18a7a149f746a300f69f9b36cf81c7f","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Discover","release_note:skip","v9.0.0","Team:DataDiscovery","backport:prev-minor"],"title":"[Discover][Alerts]
fix: add mobile width and fix title row
wrap","number":201354,"url":"https://github.com/elastic/kibana/pull/201354","mergeCommit":{"message":"[Discover][Alerts]
fix: add mobile width and fix title row wrap (#201354)\n\n##
Summary\r\n\r\nCloses
[#200162](https://github.com/elastic/kibana/issues/200162)\r\n\r\nLong
data view names weren't truncated on mobile view. Also noticed
the\r\n\"X\" icon to go on the second row - fixed it within the same
PR.\r\n\r\nBefore:\r\n\r\n![image](https://github.com/user-attachments/assets/de30a487-8025-41a3-8487-eb8f43108f79)\r\n\r\nAfter:\r\n\r\n<img
width=\"471\" alt=\"Screenshot 2024-11-22 at 11 55
47\"\r\nsrc=\"https://github.com/user-attachments/assets/c047c8f6-cace-4b99-814f-038bbc595572\">\r\n\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] If a plugin
configuration key changed, check if it needs to be\r\nallowlisted in the
cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\r\nchanges have been approved by the breaking-change committee.
The\r\n`release_note:breaking` label should be applied in these
situations.\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [x] The PR description includes
the appropriate Release Notes section,\r\nand the correct
`release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nDoes this PR introduce any risks? For example,
consider risks like hard\r\nto test bugs, performance regression,
potential of data loss.\r\n\r\nDescribe the risk, its severity, and
mitigation for each identified\r\nrisk. Invite stakeholders and evaluate
how to proceed before merging.\r\n\r\n- [x] No risks
identified","sha":"9c4785bfa18a7a149f746a300f69f9b36cf81c7f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/201354","number":201354,"mergeCommit":{"message":"[Discover][Alerts]
fix: add mobile width and fix title row wrap (#201354)\n\n##
Summary\r\n\r\nCloses
[#200162](https://github.com/elastic/kibana/issues/200162)\r\n\r\nLong
data view names weren't truncated on mobile view. Also noticed
the\r\n\"X\" icon to go on the second row - fixed it within the same
PR.\r\n\r\nBefore:\r\n\r\n![image](https://github.com/user-attachments/assets/de30a487-8025-41a3-8487-eb8f43108f79)\r\n\r\nAfter:\r\n\r\n<img
width=\"471\" alt=\"Screenshot 2024-11-22 at 11 55
47\"\r\nsrc=\"https://github.com/user-attachments/assets/c047c8f6-cace-4b99-814f-038bbc595572\">\r\n\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] If a plugin
configuration key changed, check if it needs to be\r\nallowlisted in the
cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\r\nchanges have been approved by the breaking-change committee.
The\r\n`release_note:breaking` label should be applied in these
situations.\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [x] The PR description includes
the appropriate Release Notes section,\r\nand the correct
`release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nDoes this PR introduce any risks? For example,
consider risks like hard\r\nto test bugs, performance regression,
potential of data loss.\r\n\r\nDescribe the risk, its severity, and
mitigation for each identified\r\nrisk. Invite stakeholders and evaluate
how to proceed before merging.\r\n\r\n- [x] No risks
identified","sha":"9c4785bfa18a7a149f746a300f69f9b36cf81c7f"}}]}]
BACKPORT-->

Co-authored-by: Ania Kowalska <63072419+akowalska622@users.noreply.github.com>
---
 .../components/data_view_select_popover.tsx      | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/stack_alerts/public/rule_types/components/data_view_select_popover.tsx b/x-pack/plugins/stack_alerts/public/rule_types/components/data_view_select_popover.tsx
index acb65de2a9a16..988afb8d2182b 100644
--- a/x-pack/plugins/stack_alerts/public/rule_types/components/data_view_select_popover.tsx
+++ b/x-pack/plugins/stack_alerts/public/rule_types/components/data_view_select_popover.tsx
@@ -8,6 +8,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
 import {
   EuiButtonEmpty,
   EuiButtonIcon,
@@ -19,6 +20,7 @@ import {
   EuiPopoverTitle,
   EuiText,
   useEuiPaddingCSS,
+  useIsWithinBreakpoints,
 } from '@elastic/eui';
 import { DataViewEditorStart } from '@kbn/data-view-editor-plugin/public';
 import type {
@@ -30,6 +32,9 @@ import { DataViewSelector } from '@kbn/unified-search-plugin/public';
 import type { DataViewListItemEnhanced } from '@kbn/unified-search-plugin/public/dataview_picker/dataview_list';
 import { EsQueryRuleMetaData } from '../es_query/types';
 
+const DESKTOP_WIDTH = 450;
+const MOBILE_WIDTH = 350;
+
 export interface DataViewSelectPopoverProps {
   dependencies: {
     dataViews: DataViewsPublicPluginStart;
@@ -61,6 +66,8 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
   const [dataViewItems, setDataViewsItems] = useState<DataViewListItemEnhanced[]>([]);
   const [dataViewPopoverOpen, setDataViewPopoverOpen] = useState(false);
 
+  const isMobile = useIsWithinBreakpoints(['xs']);
+
   const closeDataViewEditor = useRef<() => void | undefined>();
 
   const allDataViewItems = useMemo(
@@ -179,9 +186,14 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
       anchorPosition="downLeft"
       display="block"
     >
-      <div style={{ width: '450px' }} data-test-subj="chooseDataViewPopoverContent">
+      <div
+        css={css`
+          width: ${isMobile ? `${MOBILE_WIDTH}px` : `${DESKTOP_WIDTH}px`};
+        `}
+        data-test-subj="chooseDataViewPopoverContent"
+      >
         <EuiPopoverTitle>
-          <EuiFlexGroup alignItems="center" gutterSize="s">
+          <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
             <EuiFlexItem>
               {i18n.translate('xpack.stackAlerts.components.ui.alertParams.dataViewPopoverTitle', {
                 defaultMessage: 'Data view',