From cadd8d8130647b564630b570e04573112304ede0 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Wed, 13 Sep 2023 16:40:38 -0700 Subject: [PATCH 01/20] Use push flyout for Discover document flyout --- .../discover_grid_flyout/discover_grid_flyout.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx index a9130df52738e..46a208793d795 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx @@ -14,6 +14,7 @@ import { EuiFlexItem, EuiFlyout, EuiFlyoutBody, + EuiFlyoutFooter, EuiFlyoutHeader, EuiIconTip, EuiTitle, @@ -112,7 +113,9 @@ export function DiscoverGridFlyout({ + + + + + Close + + + + ); From cea128852d7e0a8d72dc3689b9ee1f65d4ba6b5e Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Wed, 27 Sep 2023 14:09:41 -0700 Subject: [PATCH 02/20] Add export --- .../components/discover_grid_flyout/discover_grid_flyout.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx index c7ead1edd7cd4..43b8070fe7932 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx @@ -21,6 +21,7 @@ import { EuiPortal, EuiPagination, keys, + EuiButtonEmpty, } from '@elastic/eui'; import type { Filter, Query, AggregateQuery } from '@kbn/es-query'; import type { DataTableRecord } from '@kbn/discover-utils/types'; From 54d24b63ffff2a7dcfddf2250333efefbeb987b1 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Fri, 12 Jan 2024 10:50:40 -0700 Subject: [PATCH 03/20] Use resizable flyout --- .../discover_grid_flyout/discover_grid_flyout.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx index 56b733611181c..1cff39d4e177a 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx @@ -13,7 +13,7 @@ import type { DataView } from '@kbn/data-views-plugin/public'; import { EuiFlexGroup, EuiFlexItem, - EuiFlyout, + EuiFlyoutResizable, EuiFlyoutBody, EuiFlyoutFooter, EuiFlyoutHeader, @@ -204,7 +204,7 @@ export function DiscoverGridFlyout({ return ( - - + ); } From 8e70fb3250306c81579fd4cefadb45afe9a106f6 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Tue, 16 Jan 2024 16:55:57 -0700 Subject: [PATCH 04/20] Add i18n --- .../components/discover_grid_flyout/discover_grid_flyout.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx index 1cff39d4e177a..472b44927e6c3 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx @@ -259,7 +259,9 @@ export function DiscoverGridFlyout({ - Close + {i18n.translate('discover.grid.flyout.close', { + defaultMessage: 'Close', + })} From 0b977363555656147074b8b02005acb5d3fdcd35 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Wed, 17 Jan 2024 11:10:56 -0700 Subject: [PATCH 05/20] Add min/max & use ownFocus=true --- .../main/components/layout/discover_resizable_layout.tsx | 2 +- .../discover_grid_flyout/discover_grid_flyout.tsx | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx b/src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx index 179914b9fb68a..69ed0128e8a72 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx @@ -42,7 +42,7 @@ export const DiscoverResizableLayout = ({ const { euiTheme } = useEuiTheme(); const minSidebarWidth = euiTheme.base * 13; const defaultSidebarWidth = euiTheme.base * 19; - const minMainPanelWidth = euiTheme.base * 30; + const minMainPanelWidth = euiTheme.base * 24; const [sidebarWidth, setSidebarWidth] = useLocalStorage(SIDEBAR_WIDTH_KEY, defaultSidebarWidth); diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx index 472b44927e6c3..fd043c3605c8c 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx @@ -23,6 +23,7 @@ import { EuiPagination, keys, EuiButtonEmpty, + useEuiTheme, } from '@elastic/eui'; import type { Filter, Query, AggregateQuery } from '@kbn/es-query'; import type { DataTableRecord } from '@kbn/discover-utils/types'; @@ -73,6 +74,10 @@ export function DiscoverGridFlyout({ onAddColumn, setExpandedDoc, }: DiscoverGridFlyoutProps) { + const { euiTheme } = useEuiTheme(); + const minWidth = euiTheme.base * 24; + const maxWidth = euiTheme.breakpoint.xl; + const services = useDiscoverServices(); const flyoutCustomization = useDiscoverCustomization('flyout'); @@ -211,7 +216,9 @@ export function DiscoverGridFlyout({ pushMinBreakpoint="xl" data-test-subj="docTableDetailsFlyout" onKeyDown={onKeyDown} - ownFocus={false} + ownFocus={true} + minWidth={minWidth} + maxWidth={maxWidth} > Date: Tue, 23 Jan 2024 13:21:09 -0700 Subject: [PATCH 06/20] Text & size changes --- .../discover_grid_flyout/discover_grid_flyout.tsx | 3 ++- .../query_string_input/query_string_input.tsx | 14 +------------- .../fleet/components/search_bar.test.tsx | 2 +- .../plugins/translations/translations/fr-FR.json | 1 - .../plugins/translations/translations/ja-JP.json | 1 - .../plugins/translations/translations/zh-CN.json | 1 - 6 files changed, 4 insertions(+), 18 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx index fd043c3605c8c..20d6e69941b70 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx @@ -75,6 +75,7 @@ export function DiscoverGridFlyout({ setExpandedDoc, }: DiscoverGridFlyoutProps) { const { euiTheme } = useEuiTheme(); + const initialWidth = 540; // Give enough room to search bar to not wrap const minWidth = euiTheme.base * 24; const maxWidth = euiTheme.breakpoint.xl; @@ -205,7 +206,7 @@ export function DiscoverGridFlyout({ defaultMessage: 'Document', }); const flyoutTitle = flyoutCustomization?.title ?? defaultFlyoutTitle; - const flyoutSize = flyoutCustomization?.size ?? 'm'; + const flyoutSize = flyoutCustomization?.size ?? initialWidth; return ( diff --git a/src/plugins/unified_search/public/query_string_input/query_string_input.tsx b/src/plugins/unified_search/public/query_string_input/query_string_input.tsx index 597d5788df60b..17fa47a1a92fa 100644 --- a/src/plugins/unified_search/public/query_string_input/query_string_input.tsx +++ b/src/plugins/unified_search/public/query_string_input/query_string_input.tsx @@ -22,7 +22,6 @@ import { EuiTextArea, htmlIdGenerator, PopoverAnchorPosition, - toSentenceCase, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -63,11 +62,6 @@ export const strings = { i18n.translate('unifiedSearch.query.queryBar.searchInputPlaceholderForText', { defaultMessage: 'Filter your data', }), - getSearchInputPlaceholder: (language: string) => - i18n.translate('unifiedSearch.query.queryBar.searchInputPlaceholder', { - defaultMessage: 'Filter your data using {language} syntax', - values: { language }, - }), getQueryBarComboboxAriaLabel: (pageType: string) => i18n.translate('unifiedSearch.query.queryBar.comboboxAriaLabel', { defaultMessage: 'Search and filter the {pageType} page', @@ -753,13 +747,7 @@ export default class QueryStringInputUI extends PureComponent { - if (!this.props.query.language || this.props.query.language === 'text') { - return strings.getSearchInputPlaceholderForText(); - } - const language = - this.props.query.language === 'kuery' ? 'KQL' : toSentenceCase(this.props.query.language); - - return strings.getSearchInputPlaceholder(language); + return strings.getSearchInputPlaceholderForText(); }; public render() { diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/search_bar.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/search_bar.test.tsx index ebbbeb0814bcf..1538b8cba5dfd 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/components/search_bar.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/components/search_bar.test.tsx @@ -160,7 +160,7 @@ describe('SearchBar', () => { }); const textArea = result.queryByTestId('queryInput'); expect(textArea).not.toBeNull(); - expect(textArea?.getAttribute('placeholder')).toEqual('Filter your data using KQL syntax'); + expect(textArea?.getAttribute('placeholder')).toEqual('Filter your data'); expect(textArea?.getAttribute('aria-label')).toEqual( 'Start typing to search and filter the Fleet page' ); diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index be3e8b9b14bad..e34c2c0f2223f 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -6213,7 +6213,6 @@ "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalBody": "Modifier la vue de données supprime la requête {language} en cours. Sauvegardez cette recherche pour ne pas perdre de travail.", "unifiedSearch.query.queryBar.KQLNestedQuerySyntaxInfoText": "Il semblerait que votre requête porte sur un champ imbriqué. Selon le résultat visé, il existe plusieurs façons de construire une syntaxe KQL pour des requêtes imbriquées. Apprenez-en plus dans notre {link}.", "unifiedSearch.query.queryBar.searchInputAriaLabel": "Commencer à taper pour rechercher et filtrer la page {pageType}", - "unifiedSearch.query.queryBar.searchInputPlaceholder": "Filtrer vos données à l'aide de la syntaxe {language}", "unifiedSearch.query.queryBar.textBasedNonTimestampWarning": "La sélection de plage de données pour les requêtes en {language} requiert la présence d’un champ @timestamp dans l’ensemble de données.", "unifiedSearch.search.searchBar.savedQueryPopoverConfirmDeletionTitle": "Supprimer \"{savedQueryName}\" ?", "unifiedSearch.search.searchBar.savedQueryPopoverSaveChangesButtonAriaLabel": "Enregistrer les modifications apportées à {title}", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index a2b9dbfe95c87..4f73ebf25c215 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -6228,7 +6228,6 @@ "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalBody": "データビューを切り替えると、現在の{language}クエリが削除されます。この検索を保存すると、作業内容が失われないことが保証されます。", "unifiedSearch.query.queryBar.KQLNestedQuerySyntaxInfoText": "ネストされたフィールドをクエリされているようです。ネストされたクエリに対しては、ご希望の結果により異なる方法でKQL構文を構築することができます。{link}で詳細をご覧ください。", "unifiedSearch.query.queryBar.searchInputAriaLabel": "{pageType}ページの検索とフィルタリングを行うには入力を開始してください", - "unifiedSearch.query.queryBar.searchInputPlaceholder": "{language}構文を使用してデータをフィルタリング", "unifiedSearch.query.queryBar.textBasedNonTimestampWarning": "{language}クエリの日付範囲選択では、データセットに@timestampフィールドが存在している必要があります。", "unifiedSearch.search.searchBar.savedQueryPopoverConfirmDeletionTitle": "\"{savedQueryName}\"を削除しますか？", "unifiedSearch.search.searchBar.savedQueryPopoverSaveChangesButtonAriaLabel": "{title}への変更を保存", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 54261e08bc1e8..a78dec9c4dcc2 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -6321,7 +6321,6 @@ "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalBody": "切换数据视图会移除当前的 {language} 查询。保存此搜索以确保不会丢失工作。", "unifiedSearch.query.queryBar.KQLNestedQuerySyntaxInfoText": "似乎您正在查询嵌套字段。您可以使用不同的方式构造嵌套查询的 KQL 语法，具体取决于您想要的结果。详细了解我们的 {link}。", "unifiedSearch.query.queryBar.searchInputAriaLabel": "开始键入内容，以搜索并筛选 {pageType} 页面", - "unifiedSearch.query.queryBar.searchInputPlaceholder": "使用 {language} 语法筛选数据", "unifiedSearch.query.queryBar.textBasedNonTimestampWarning": "{language} 查询的日期范围选择要求数据集中存在 @timestamp 字段。", "unifiedSearch.search.searchBar.savedQueryPopoverConfirmDeletionTitle": "删除“{savedQueryName}”？", "unifiedSearch.search.searchBar.savedQueryPopoverSaveChangesButtonAriaLabel": "将更改保存到 {title}", From dfebc4061805a9874ac219255b5df1dae9ac2de9 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Tue, 30 Jan 2024 06:08:27 -0700 Subject: [PATCH 07/20] Undo text changes --- .../query_string_input/query_string_input.tsx | 14 +++++++++++++- .../fleet/components/search_bar.test.tsx | 2 +- .../plugins/translations/translations/fr-FR.json | 1 + .../plugins/translations/translations/ja-JP.json | 1 + .../plugins/translations/translations/zh-CN.json | 1 + 5 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/plugins/unified_search/public/query_string_input/query_string_input.tsx b/src/plugins/unified_search/public/query_string_input/query_string_input.tsx index 17fa47a1a92fa..597d5788df60b 100644 --- a/src/plugins/unified_search/public/query_string_input/query_string_input.tsx +++ b/src/plugins/unified_search/public/query_string_input/query_string_input.tsx @@ -22,6 +22,7 @@ import { EuiTextArea, htmlIdGenerator, PopoverAnchorPosition, + toSentenceCase, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -62,6 +63,11 @@ export const strings = { i18n.translate('unifiedSearch.query.queryBar.searchInputPlaceholderForText', { defaultMessage: 'Filter your data', }), + getSearchInputPlaceholder: (language: string) => + i18n.translate('unifiedSearch.query.queryBar.searchInputPlaceholder', { + defaultMessage: 'Filter your data using {language} syntax', + values: { language }, + }), getQueryBarComboboxAriaLabel: (pageType: string) => i18n.translate('unifiedSearch.query.queryBar.comboboxAriaLabel', { defaultMessage: 'Search and filter the {pageType} page', @@ -747,7 +753,13 @@ export default class QueryStringInputUI extends PureComponent { - return strings.getSearchInputPlaceholderForText(); + if (!this.props.query.language || this.props.query.language === 'text') { + return strings.getSearchInputPlaceholderForText(); + } + const language = + this.props.query.language === 'kuery' ? 'KQL' : toSentenceCase(this.props.query.language); + + return strings.getSearchInputPlaceholder(language); }; public render() { diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/search_bar.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/search_bar.test.tsx index 1538b8cba5dfd..ebbbeb0814bcf 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/components/search_bar.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/components/search_bar.test.tsx @@ -160,7 +160,7 @@ describe('SearchBar', () => { }); const textArea = result.queryByTestId('queryInput'); expect(textArea).not.toBeNull(); - expect(textArea?.getAttribute('placeholder')).toEqual('Filter your data'); + expect(textArea?.getAttribute('placeholder')).toEqual('Filter your data using KQL syntax'); expect(textArea?.getAttribute('aria-label')).toEqual( 'Start typing to search and filter the Fleet page' ); diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index e34c2c0f2223f..be3e8b9b14bad 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -6213,6 +6213,7 @@ "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalBody": "Modifier la vue de données supprime la requête {language} en cours. Sauvegardez cette recherche pour ne pas perdre de travail.", "unifiedSearch.query.queryBar.KQLNestedQuerySyntaxInfoText": "Il semblerait que votre requête porte sur un champ imbriqué. Selon le résultat visé, il existe plusieurs façons de construire une syntaxe KQL pour des requêtes imbriquées. Apprenez-en plus dans notre {link}.", "unifiedSearch.query.queryBar.searchInputAriaLabel": "Commencer à taper pour rechercher et filtrer la page {pageType}", + "unifiedSearch.query.queryBar.searchInputPlaceholder": "Filtrer vos données à l'aide de la syntaxe {language}", "unifiedSearch.query.queryBar.textBasedNonTimestampWarning": "La sélection de plage de données pour les requêtes en {language} requiert la présence d’un champ @timestamp dans l’ensemble de données.", "unifiedSearch.search.searchBar.savedQueryPopoverConfirmDeletionTitle": "Supprimer \"{savedQueryName}\" ?", "unifiedSearch.search.searchBar.savedQueryPopoverSaveChangesButtonAriaLabel": "Enregistrer les modifications apportées à {title}", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 4f73ebf25c215..a2b9dbfe95c87 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -6228,6 +6228,7 @@ "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalBody": "データビューを切り替えると、現在の{language}クエリが削除されます。この検索を保存すると、作業内容が失われないことが保証されます。", "unifiedSearch.query.queryBar.KQLNestedQuerySyntaxInfoText": "ネストされたフィールドをクエリされているようです。ネストされたクエリに対しては、ご希望の結果により異なる方法でKQL構文を構築することができます。{link}で詳細をご覧ください。", "unifiedSearch.query.queryBar.searchInputAriaLabel": "{pageType}ページの検索とフィルタリングを行うには入力を開始してください", + "unifiedSearch.query.queryBar.searchInputPlaceholder": "{language}構文を使用してデータをフィルタリング", "unifiedSearch.query.queryBar.textBasedNonTimestampWarning": "{language}クエリの日付範囲選択では、データセットに@timestampフィールドが存在している必要があります。", "unifiedSearch.search.searchBar.savedQueryPopoverConfirmDeletionTitle": "\"{savedQueryName}\"を削除しますか？", "unifiedSearch.search.searchBar.savedQueryPopoverSaveChangesButtonAriaLabel": "{title}への変更を保存", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index a78dec9c4dcc2..54261e08bc1e8 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -6321,6 +6321,7 @@ "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalBody": "切换数据视图会移除当前的 {language} 查询。保存此搜索以确保不会丢失工作。", "unifiedSearch.query.queryBar.KQLNestedQuerySyntaxInfoText": "似乎您正在查询嵌套字段。您可以使用不同的方式构造嵌套查询的 KQL 语法，具体取决于您想要的结果。详细了解我们的 {link}。", "unifiedSearch.query.queryBar.searchInputAriaLabel": "开始键入内容，以搜索并筛选 {pageType} 页面", + "unifiedSearch.query.queryBar.searchInputPlaceholder": "使用 {language} 语法筛选数据", "unifiedSearch.query.queryBar.textBasedNonTimestampWarning": "{language} 查询的日期范围选择要求数据集中存在 @timestamp 字段。", "unifiedSearch.search.searchBar.savedQueryPopoverConfirmDeletionTitle": "删除“{savedQueryName}”？", "unifiedSearch.search.searchBar.savedQueryPopoverSaveChangesButtonAriaLabel": "将更改保存到 {title}", From 46d4424493e5f1daca651c6eeefe93be759aea7c Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Wed, 31 Jan 2024 16:57:21 -0700 Subject: [PATCH 08/20] Persist flyout width on resize --- .../discover_grid_flyout.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx index 20d6e69941b70..aa1ee3cb37f15 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx @@ -29,6 +29,7 @@ import type { Filter, Query, AggregateQuery } from '@kbn/es-query'; import type { DataTableRecord } from '@kbn/discover-utils/types'; import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types'; import { UnifiedDocViewer } from '@kbn/unified-doc-viewer-plugin/public'; +import useLocalStorage from 'react-use/lib/useLocalStorage'; import { useDiscoverServices } from '../../hooks/use_discover_services'; import { isTextBasedQuery } from '../../application/main/utils/is_text_based_query'; import { useFlyoutActions } from './use_flyout_actions'; @@ -56,6 +57,8 @@ function getIndexByDocId(hits: DataTableRecord[], id: string) { return h.id === id; }); } + +export const FLYOUT_WIDTH_KEY = 'discover:flyoutWidth'; /** * Flyout displaying an expanded Elasticsearch document */ @@ -74,14 +77,15 @@ export function DiscoverGridFlyout({ onAddColumn, setExpandedDoc, }: DiscoverGridFlyoutProps) { + const services = useDiscoverServices(); + const flyoutCustomization = useDiscoverCustomization('flyout'); const { euiTheme } = useEuiTheme(); - const initialWidth = 540; // Give enough room to search bar to not wrap + + const defaultWidth = flyoutCustomization?.size ?? 540; // Give enough room to search bar to not wrap + const [flyoutWidth, setFlyoutWidth] = useLocalStorage(FLYOUT_WIDTH_KEY, defaultWidth); const minWidth = euiTheme.base * 24; const maxWidth = euiTheme.breakpoint.xl; - const services = useDiscoverServices(); - const flyoutCustomization = useDiscoverCustomization('flyout'); - const isPlainRecord = isTextBasedQuery(query); // Get actual hit with updated highlighted searches const actualHit = useMemo(() => hits?.find(({ id }) => id === hit?.id) || hit, [hit, hits]); @@ -206,20 +210,20 @@ export function DiscoverGridFlyout({ defaultMessage: 'Document', }); const flyoutTitle = flyoutCustomization?.title ?? defaultFlyoutTitle; - const flyoutSize = flyoutCustomization?.size ?? initialWidth; return ( Date: Fri, 5 Apr 2024 15:09:14 -0700 Subject: [PATCH 09/20] Responsive table/flyout actions --- .../discover_grid_flyout_actions.tsx | 31 +++++++++++++++++-- .../components/doc_viewer_table/table.tsx | 12 +++++-- 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx index a9b168ef7ae8e..643c4223fac2e 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx @@ -17,13 +17,13 @@ import { EuiContextMenuPanel, EuiContextMenuItem, EuiContextMenuItemIcon, - useIsWithinBreakpoints, EuiText, EuiButtonEmpty, EuiButtonIcon, EuiPopoverProps, EuiToolTip, useEuiTheme, + useResizeObserver, } from '@elastic/eui'; import type { FlyoutActionItem } from '../../customizations'; @@ -34,11 +34,36 @@ export interface DiscoverGridFlyoutActionsProps { } export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutActionsProps) { + const { euiTheme } = useEuiTheme(); + const [ref, setRef] = useState(null); + const dimensions = useResizeObserver(ref); + const isMobileScreen = dimensions?.width ? dimensions.width < euiTheme.breakpoint.xs : false; + const isLargeScreen = dimensions?.width ? dimensions.width > euiTheme.breakpoint.m : false; + return ( + + + + + + ); +} + +function FlyoutActions({ + flyoutActions, + isMobileScreen, + isLargeScreen, +}: { + flyoutActions: DiscoverGridFlyoutActionsProps['flyoutActions']; + isMobileScreen: boolean; + isLargeScreen: boolean; +}) { const { euiTheme } = useEuiTheme(); const [isMoreFlyoutActionsPopoverOpen, setIsMoreFlyoutActionsPopoverOpen] = useState(false); - const isMobileScreen = useIsWithinBreakpoints(['xs', 's']); - const isLargeScreen = useIsWithinBreakpoints(['xl']); if (isMobileScreen) { return ( diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx b/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx index ad957053b7dd8..e7c7f55df2398 100644 --- a/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx +++ b/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx @@ -23,7 +23,8 @@ import { EuiTablePagination, EuiSelectableMessage, EuiI18n, - useIsWithinBreakpoints, + useEuiTheme, + useResizeObserver, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -118,7 +119,12 @@ export const DocViewerTable = ({ onAddColumn, onRemoveColumn, }: DocViewRenderProps) => { - const showActionsInsideTableCell = useIsWithinBreakpoints(['xl'], true); + const { euiTheme } = useEuiTheme(); + const [ref, setRef] = useState(null); + const dimensions = useResizeObserver(ref); + const showActionsInsideTableCell = dimensions?.width + ? dimensions.width > euiTheme.breakpoint.m + : false; const { fieldFormats, storage, uiSettings } = getUnifiedDocViewerServices(); const showMultiFields = uiSettings.get(SHOW_MULTIFIELDS); @@ -407,7 +413,7 @@ export const DocViewerTable = ({ ]; return ( - + From 8b3d9f86297c722e9a3b62b2585a904577e9871c Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Mon, 8 Apr 2024 15:24:07 -0700 Subject: [PATCH 10/20] Use breakpoints for mobile screen detection --- .../discover_grid_flyout/discover_grid_flyout_actions.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx index 643c4223fac2e..6206f163d2c63 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx @@ -24,6 +24,7 @@ import { EuiToolTip, useEuiTheme, useResizeObserver, + useIsWithinBreakpoints, } from '@elastic/eui'; import type { FlyoutActionItem } from '../../customizations'; @@ -37,8 +38,8 @@ export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutA const { euiTheme } = useEuiTheme(); const [ref, setRef] = useState(null); const dimensions = useResizeObserver(ref); - const isMobileScreen = dimensions?.width ? dimensions.width < euiTheme.breakpoint.xs : false; - const isLargeScreen = dimensions?.width ? dimensions.width > euiTheme.breakpoint.m : false; + const isMobileScreen = useIsWithinBreakpoints(['xs', 's']); + const isLargeScreen = dimensions?.width ? dimensions.width > euiTheme.base * 30 : false; return ( From 1de9a94f17c05a1542498f883093c8e317822327 Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Tue, 9 Apr 2024 21:13:01 -0300 Subject: [PATCH 11/20] Add some minor touchups around the Unified Doc Viewer push flyout --- .../discover_grid_flyout.tsx | 20 +++++++++---------- .../discover_grid_flyout_actions.tsx | 16 +++++++-------- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx index d6bacc5fcfb55..d665d126cc886 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx @@ -25,6 +25,7 @@ import { keys, EuiButtonEmpty, useEuiTheme, + useIsWithinMinBreakpoint, } from '@elastic/eui'; import type { Filter, Query, AggregateQuery } from '@kbn/es-query'; import type { DataTableRecord } from '@kbn/discover-utils/types'; @@ -82,7 +83,7 @@ export function DiscoverGridFlyout({ const services = useDiscoverServices(); const flyoutCustomization = useDiscoverCustomization('flyout'); const { euiTheme } = useEuiTheme(); - + const isXlScreen = useIsWithinMinBreakpoint('xl'); const defaultWidth = flyoutCustomization?.size ?? 540; // Give enough room to search bar to not wrap const [flyoutWidth, setFlyoutWidth] = useLocalStorage(FLYOUT_WIDTH_KEY, defaultWidth); const minWidth = euiTheme.base * 24; @@ -230,6 +231,9 @@ export function DiscoverGridFlyout({ minWidth={minWidth} maxWidth={maxWidth} onResize={setFlyoutWidth} + css={{ + maxWidth: `${isXlScreen ? `calc(100vw - ${defaultWidth}px)` : '90vw'} !important`, + }} > {bodyContent} - - - - {i18n.translate('discover.grid.flyout.close', { - defaultMessage: 'Close', - })} - - - + + {i18n.translate('discover.grid.flyout.close', { + defaultMessage: 'Close', + })} + diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx index 6206f163d2c63..debb4ecf93e5a 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx @@ -41,15 +41,13 @@ export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutA const isMobileScreen = useIsWithinBreakpoints(['xs', 's']); const isLargeScreen = dimensions?.width ? dimensions.width > euiTheme.base * 30 : false; return ( - - - - - +
+ +
); } From 0156206730441fe5d60339ef0a919929a63d4b56 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Wed, 10 Apr 2024 11:16:06 -0700 Subject: [PATCH 12/20] Review feedback --- .../discover_grid_flyout/discover_grid_flyout.tsx | 2 +- .../discover_grid_flyout_actions.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx index d665d126cc886..270c3e33de845 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx @@ -84,7 +84,7 @@ export function DiscoverGridFlyout({ const flyoutCustomization = useDiscoverCustomization('flyout'); const { euiTheme } = useEuiTheme(); const isXlScreen = useIsWithinMinBreakpoint('xl'); - const defaultWidth = flyoutCustomization?.size ?? 540; // Give enough room to search bar to not wrap + const defaultWidth = flyoutCustomization?.size ?? euiTheme.base * 34; // Give enough room to search bar to not wrap const [flyoutWidth, setFlyoutWidth] = useLocalStorage(FLYOUT_WIDTH_KEY, defaultWidth); const minWidth = euiTheme.base * 24; const maxWidth = euiTheme.breakpoint.xl; diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx index debb4ecf93e5a..5d3b402b359fb 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx @@ -39,13 +39,13 @@ export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutA const [ref, setRef] = useState(null); const dimensions = useResizeObserver(ref); const isMobileScreen = useIsWithinBreakpoints(['xs', 's']); - const isLargeScreen = dimensions?.width ? dimensions.width > euiTheme.base * 30 : false; + const isLargeFlyout = dimensions?.width ? dimensions.width > euiTheme.base * 30 : false; return (
); @@ -54,11 +54,11 @@ export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutA function FlyoutActions({ flyoutActions, isMobileScreen, - isLargeScreen, + isLargeFlyout, }: { flyoutActions: DiscoverGridFlyoutActionsProps['flyoutActions']; isMobileScreen: boolean; - isLargeScreen: boolean; + isLargeFlyout: boolean; }) { const { euiTheme } = useEuiTheme(); const [isMoreFlyoutActionsPopoverOpen, setIsMoreFlyoutActionsPopoverOpen] = @@ -96,7 +96,7 @@ function FlyoutActions({ flyoutActions.length ); const showFlyoutIconsOnly = - remainingFlyoutActions.length > 0 || (!isLargeScreen && visibleFlyoutActions.length > 1); + remainingFlyoutActions.length > 0 || (!isLargeFlyout && visibleFlyoutActions.length > 1); return ( Date: Thu, 11 Apr 2024 15:34:59 -0700 Subject: [PATCH 13/20] Design updates --- .../discover_grid_flyout/_discover_grid_flyout.scss | 5 +++++ .../discover_grid_flyout/discover_grid_flyout.tsx | 4 +++- .../discover_grid_flyout_actions.tsx | 10 ++++------ 3 files changed, 12 insertions(+), 7 deletions(-) create mode 100644 src/plugins/discover/public/components/discover_grid_flyout/_discover_grid_flyout.scss diff --git a/src/plugins/discover/public/components/discover_grid_flyout/_discover_grid_flyout.scss b/src/plugins/discover/public/components/discover_grid_flyout/_discover_grid_flyout.scss new file mode 100644 index 0000000000000..0981804b957b1 --- /dev/null +++ b/src/plugins/discover/public/components/discover_grid_flyout/_discover_grid_flyout.scss @@ -0,0 +1,5 @@ +.dscGridFlyout { + .euiFlyoutBody__overflowContent { + padding: $euiSize; + } +} diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx index ee7d92f377e04..3cdd57bea6544 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx @@ -38,6 +38,7 @@ import { isTextBasedQuery } from '../../application/main/utils/is_text_based_que import { useFlyoutActions } from './use_flyout_actions'; import { useDiscoverCustomization } from '../../customizations'; import { DiscoverGridFlyoutActions } from './discover_grid_flyout_actions'; +import './_discover_grid_flyout.scss'; export interface DiscoverGridFlyoutProps { savedSearchId?: string; @@ -234,6 +235,7 @@ export function DiscoverGridFlyout({ css={{ maxWidth: `${isXlScreen ? `calc(100vw - ${defaultWidth}px)` : '90vw'} !important`, }} + className="dscGridFlyout" > - - {i18n.translate('discover.grid.tableRow.actionsLabel', { - defaultMessage: 'Actions', - })} - : - + {i18n.translate('discover.grid.tableRow.actionsLabel', { + defaultMessage: 'Actions', + })} + : {visibleFlyoutActions.map((action) => ( From ec72196305185290977b1dc949a980f90d018c8e Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Mon, 15 Apr 2024 10:49:04 -0700 Subject: [PATCH 14/20] Update tests --- .../discover_grid_flyout/discover_grid_flyout.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx index 6097543c8aeb1..668f4090b3bdd 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx @@ -49,6 +49,7 @@ jest.mock('@elastic/eui', () => { return original.useIsWithinBreakpoints(breakpoints); }), + useResizeObserver: jest.fn(() => ({ width: 1000, height: 1000 })), }; }); From 8e362f3cf0b1da81bcbdc3bf20d9d8b7dc54bf28 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Mon, 15 Apr 2024 15:00:42 -0700 Subject: [PATCH 15/20] Fix functional test --- test/accessibility/apps/discover.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/test/accessibility/apps/discover.ts b/test/accessibility/apps/discover.ts index 4a20261d5bf64..6f2e3e50d6b0f 100644 --- a/test/accessibility/apps/discover.ts +++ b/test/accessibility/apps/discover.ts @@ -27,7 +27,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const browser = getService('browser'); const retry = getService('retry'); - describe('Discover a11y tests', () => { + describe.only('Discover a11y tests', () => { before(async () => { await PageObjects.common.navigateToApp('discover'); await PageObjects.timePicker.setCommonlyUsedTime('Last_7 days'); @@ -133,7 +133,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { it('a11y test for actions on a field', async () => { await PageObjects.discover.clickDocViewerTab('doc_view_table'); if (await testSubjects.exists('openFieldActionsButton-Cancelled')) { - await testSubjects.click('openFieldActionsButton-Cancelled'); + await testSubjects.click('openFieldActionsButton-Cancelled'); // Open the actions + await testSubjects.click('openFieldActionsButton-Cancelled'); // Close the actions } else { await testSubjects.existOrFail('fieldActionsGroup-Cancelled'); } From 42d66127aeffe9ff1cd6cb5334da428c61a22111 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Mon, 15 Apr 2024 15:58:49 -0700 Subject: [PATCH 16/20] Remove .only --- test/accessibility/apps/discover.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/accessibility/apps/discover.ts b/test/accessibility/apps/discover.ts index 6f2e3e50d6b0f..d040e600acff1 100644 --- a/test/accessibility/apps/discover.ts +++ b/test/accessibility/apps/discover.ts @@ -27,7 +27,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const browser = getService('browser'); const retry = getService('retry'); - describe.only('Discover a11y tests', () => { + describe('Discover a11y tests', () => { before(async () => { await PageObjects.common.navigateToApp('discover'); await PageObjects.timePicker.setCommonlyUsedTime('Last_7 days'); From 8cfa359401e904559b363a435cbc3e7539e5b110 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Tue, 16 Apr 2024 16:21:36 -0700 Subject: [PATCH 17/20] Break tests into separate cases --- .../functional/apps/observability_logs_explorer/flyout.ts | 4 ++++ .../observability/observability_logs_explorer/flyout.ts | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/x-pack/test/functional/apps/observability_logs_explorer/flyout.ts b/x-pack/test/functional/apps/observability_logs_explorer/flyout.ts index c3ef409546b31..0e019a6cea04e 100644 --- a/x-pack/test/functional/apps/observability_logs_explorer/flyout.ts +++ b/x-pack/test/functional/apps/observability_logs_explorer/flyout.ts @@ -79,7 +79,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await dataGrid.clickRowToggle({ columnIndex: 4 }); await testSubjects.existOrFail('logsExplorerFlyoutLogLevel'); await dataGrid.closeFlyout(); + }); + it('should not display a log level badge when not available', async () => { await dataGrid.clickRowToggle({ rowIndex: 1, columnIndex: 4 }); await testSubjects.missingOrFail('logsExplorerFlyoutLogLevel'); }); @@ -88,7 +90,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await dataGrid.clickRowToggle({ columnIndex: 4 }); await testSubjects.existOrFail('logsExplorerFlyoutLogMessage'); await dataGrid.closeFlyout(); + }); + it('should not display a message code block when not available', async () => { await dataGrid.clickRowToggle({ rowIndex: 1, columnIndex: 4 }); await testSubjects.missingOrFail('logsExplorerFlyoutLogMessage'); }); diff --git a/x-pack/test_serverless/functional/test_suites/observability/observability_logs_explorer/flyout.ts b/x-pack/test_serverless/functional/test_suites/observability/observability_logs_explorer/flyout.ts index e952294c2cda1..d66d1626cb6de 100644 --- a/x-pack/test_serverless/functional/test_suites/observability/observability_logs_explorer/flyout.ts +++ b/x-pack/test_serverless/functional/test_suites/observability/observability_logs_explorer/flyout.ts @@ -81,7 +81,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await dataGrid.clickRowToggle({ columnIndex: 4 }); await testSubjects.existOrFail('logsExplorerFlyoutLogLevel'); await dataGrid.closeFlyout(); + }); + it('should not display a log level badge when not available', async () => { await dataGrid.clickRowToggle({ rowIndex: 1, columnIndex: 4 }); await testSubjects.missingOrFail('logsExplorerFlyoutLogLevel'); }); @@ -90,7 +92,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await dataGrid.clickRowToggle({ columnIndex: 4 }); await testSubjects.existOrFail('logsExplorerFlyoutLogMessage'); await dataGrid.closeFlyout(); + }); + it('should not display a message code block when not available', async () => { await dataGrid.clickRowToggle({ rowIndex: 1, columnIndex: 4 }); await testSubjects.missingOrFail('logsExplorerFlyoutLogMessage'); }); From f86a39dd364f542aa69892d56c21e0d91cc95aea Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Mon, 22 Apr 2024 14:23:51 -0700 Subject: [PATCH 18/20] Remove closing flyout --- .../observability/observability_logs_explorer/flyout.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/x-pack/test_serverless/functional/test_suites/observability/observability_logs_explorer/flyout.ts b/x-pack/test_serverless/functional/test_suites/observability/observability_logs_explorer/flyout.ts index d66d1626cb6de..918d710f8b3c0 100644 --- a/x-pack/test_serverless/functional/test_suites/observability/observability_logs_explorer/flyout.ts +++ b/x-pack/test_serverless/functional/test_suites/observability/observability_logs_explorer/flyout.ts @@ -80,7 +80,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { it('should display a log level badge when available', async () => { await dataGrid.clickRowToggle({ columnIndex: 4 }); await testSubjects.existOrFail('logsExplorerFlyoutLogLevel'); - await dataGrid.closeFlyout(); }); it('should not display a log level badge when not available', async () => { @@ -91,7 +90,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { it('should display a message code block when available', async () => { await dataGrid.clickRowToggle({ columnIndex: 4 }); await testSubjects.existOrFail('logsExplorerFlyoutLogMessage'); - await dataGrid.closeFlyout(); }); it('should not display a message code block when not available', async () => { From 8d69a436834e8fea19237d7807940dd4a7b00a4a Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Tue, 23 Apr 2024 10:21:30 -0700 Subject: [PATCH 19/20] Remove close flyout --- .../test/functional/apps/observability_logs_explorer/flyout.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/x-pack/test/functional/apps/observability_logs_explorer/flyout.ts b/x-pack/test/functional/apps/observability_logs_explorer/flyout.ts index 0e019a6cea04e..d991626b18a5e 100644 --- a/x-pack/test/functional/apps/observability_logs_explorer/flyout.ts +++ b/x-pack/test/functional/apps/observability_logs_explorer/flyout.ts @@ -78,7 +78,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { it('should display a log level badge when available', async () => { await dataGrid.clickRowToggle({ columnIndex: 4 }); await testSubjects.existOrFail('logsExplorerFlyoutLogLevel'); - await dataGrid.closeFlyout(); }); it('should not display a log level badge when not available', async () => { @@ -89,7 +88,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { it('should display a message code block when available', async () => { await dataGrid.clickRowToggle({ columnIndex: 4 }); await testSubjects.existOrFail('logsExplorerFlyoutLogMessage'); - await dataGrid.closeFlyout(); }); it('should not display a message code block when not available', async () => { From f48a84029bcb7446e943337dc4dce7c78997b303 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Wed, 24 Apr 2024 15:43:59 -0700 Subject: [PATCH 20/20] Review feedback --- .../discover_grid_flyout/_discover_grid_flyout.scss | 5 ----- .../discover_grid_flyout/discover_grid_flyout.tsx | 8 ++++---- test/accessibility/apps/discover.ts | 4 +++- 3 files changed, 7 insertions(+), 10 deletions(-) delete mode 100644 src/plugins/discover/public/components/discover_grid_flyout/_discover_grid_flyout.scss diff --git a/src/plugins/discover/public/components/discover_grid_flyout/_discover_grid_flyout.scss b/src/plugins/discover/public/components/discover_grid_flyout/_discover_grid_flyout.scss deleted file mode 100644 index 0981804b957b1..0000000000000 --- a/src/plugins/discover/public/components/discover_grid_flyout/_discover_grid_flyout.scss +++ /dev/null @@ -1,5 +0,0 @@ -.dscGridFlyout { - .euiFlyoutBody__overflowContent { - padding: $euiSize; - } -} diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx index 3cdd57bea6544..4e86f7493f3ba 100644 --- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx @@ -38,7 +38,6 @@ import { isTextBasedQuery } from '../../application/main/utils/is_text_based_que import { useFlyoutActions } from './use_flyout_actions'; import { useDiscoverCustomization } from '../../customizations'; import { DiscoverGridFlyoutActions } from './discover_grid_flyout_actions'; -import './_discover_grid_flyout.scss'; export interface DiscoverGridFlyoutProps { savedSearchId?: string; @@ -85,7 +84,8 @@ export function DiscoverGridFlyout({ const flyoutCustomization = useDiscoverCustomization('flyout'); const { euiTheme } = useEuiTheme(); const isXlScreen = useIsWithinMinBreakpoint('xl'); - const defaultWidth = flyoutCustomization?.size ?? euiTheme.base * 34; // Give enough room to search bar to not wrap + const DEFAULT_WIDTH = euiTheme.base * 34; + const defaultWidth = flyoutCustomization?.size ?? DEFAULT_WIDTH; // Give enough room to search bar to not wrap const [flyoutWidth, setFlyoutWidth] = useLocalStorage(FLYOUT_WIDTH_KEY, defaultWidth); const minWidth = euiTheme.base * 24; const maxWidth = euiTheme.breakpoint.xl; @@ -233,9 +233,9 @@ export function DiscoverGridFlyout({ maxWidth={maxWidth} onResize={setFlyoutWidth} css={{ - maxWidth: `${isXlScreen ? `calc(100vw - ${defaultWidth}px)` : '90vw'} !important`, + maxWidth: `${isXlScreen ? `calc(100vw - ${DEFAULT_WIDTH}px)` : '90vw'} !important`, }} - className="dscGridFlyout" + paddingSize="m" > {