From d6d08ca240f88fb386af1682afa44ff4b2a1d936 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Tue, 19 Sep 2023 16:38:52 +0200 Subject: [PATCH 01/30] [Discover] Tmp custom toolbar --- .../src/components/data_table.scss | 15 +++++++++ .../src/components/data_table.tsx | 31 +++++++++++++++++++ 2 files changed, 46 insertions(+) diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss index 048a641cf7562..f2d12fb716aad 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -161,3 +161,18 @@ display: none; } } + +.unifiedDataTable__toolbarControlGroup { + border: $euiBorderThin; + border-radius: $euiBorderRadius; + padding: $euiSizeXS; + display: flex; + align-items: stretch; + flex-direction: row; +} + +.unifiedDataTable__toolbarControl { + & + & { + border-left: $euiBorderThin; + } +} diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index e5f5e5dbbba39..f4c150980555d 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -28,6 +28,7 @@ import { EuiDataGridCustomBodyProps, EuiDataGridCellValueElementProps, } from '@elastic/eui'; +import { EuiDataGridProps } from '@elastic/eui/src/components/datagrid/data_grid_types'; import type { DataView } from '@kbn/data-views-plugin/public'; import { useDataGridColumnsCellActions, @@ -684,6 +685,8 @@ export const UnifiedDataTable = ({ ? { allowDensity: false, allowRowHeight: true, + allowResetButton: false, + additionalDisplaySettings:
Example extra content
, } : undefined, [onUpdateRowHeight] @@ -760,6 +763,33 @@ export const UnifiedDataTable = ({ ); } + const renderCustomToolbar: EuiDataGridProps['renderCustomToolbar'] = ({ + columnControl, + columnSortingControl, + fullScreenControl, + keyboardShortcutsControl, + displayControl, + }) => { + return { + left: `${totalHits} documents`, // TODO: change to a correct hits count here (also for ES|QL) + right: ( + <> +
+
{columnControl}
+
+
+
{columnSortingControl}
+
+
+
{keyboardShortcutsControl}
+
{displayControl}
+
{fullScreenControl}
+
+ + ), + }; + }; + return ( @@ -791,6 +821,7 @@ export const UnifiedDataTable = ({ inMemory={inMemory} gridStyle={GRID_STYLE} renderCustomGridBody={renderCustomGridBody} + renderCustomToolbar={renderCustomToolbar} trailingControlColumns={trailingControlColumns} /> From d72aaf564cabfdefd189f96482526e7f0ba614fb Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 20 Sep 2023 14:41:24 +0200 Subject: [PATCH 02/30] [Discover] Update layout --- .../src/components/data_table.tsx | 53 ++++++++++++------- 1 file changed, 34 insertions(+), 19 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index f4c150980555d..e73d5b6e97b12 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -16,6 +16,9 @@ import type { Storage } from '@kbn/kibana-utils-plugin/public'; import { EuiDataGridSorting, EuiDataGrid, + EuiDataGridProps, + EuiFlexGroup, + EuiFlexItem, EuiScreenReaderOnly, EuiSpacer, EuiText, @@ -28,7 +31,6 @@ import { EuiDataGridCustomBodyProps, EuiDataGridCellValueElementProps, } from '@elastic/eui'; -import { EuiDataGridProps } from '@elastic/eui/src/components/datagrid/data_grid_types'; import type { DataView } from '@kbn/data-views-plugin/public'; import { useDataGridColumnsCellActions, @@ -770,24 +772,37 @@ export const UnifiedDataTable = ({ keyboardShortcutsControl, displayControl, }) => { - return { - left: `${totalHits} documents`, // TODO: change to a correct hits count here (also for ES|QL) - right: ( - <> -
-
{columnControl}
-
-
-
{columnSortingControl}
-
-
-
{keyboardShortcutsControl}
-
{displayControl}
-
{fullScreenControl}
-
- - ), - }; + return ( + + {`${totalHits} documents`} + + + +
+
{columnControl}
+
+ + +
+
{columnSortingControl}
+
+ + +
+
{keyboardShortcutsControl}
+
{displayControl}
+
{fullScreenControl}
+
+ + + + + ); }; return ( From 3119499eb51f82033a3ae3d99ccef8b47d01a9a4 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Thu, 28 Sep 2023 12:32:33 +0200 Subject: [PATCH 03/30] [Discover] Customize the toolbar for discover --- .../src/components/data_table.scss | 15 ---- .../src/components/data_table.tsx | 69 +++++---------- .../context/context_app_content.tsx | 5 +- .../components/layout/discover_documents.tsx | 7 +- .../discover_grid/discover_grid.tsx | 15 ++++ .../public/components/discover_grid/index.ts | 9 ++ .../discover_grid/render_custom_toolbar.scss | 23 +++++ .../discover_grid/render_custom_toolbar.tsx | 83 +++++++++++++++++++ .../public/embeddable/saved_search_grid.tsx | 14 ++-- 9 files changed, 167 insertions(+), 73 deletions(-) create mode 100644 src/plugins/discover/public/components/discover_grid/discover_grid.tsx create mode 100644 src/plugins/discover/public/components/discover_grid/index.ts create mode 100644 src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss create mode 100644 src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss index f2d12fb716aad..048a641cf7562 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -161,18 +161,3 @@ display: none; } } - -.unifiedDataTable__toolbarControlGroup { - border: $euiBorderThin; - border-radius: $euiBorderRadius; - padding: $euiSizeXS; - display: flex; - align-items: stretch; - flex-direction: row; -} - -.unifiedDataTable__toolbarControl { - & + & { - border-left: $euiBorderThin; - } -} diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index 3acf40be9647b..bd26664c9be16 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -16,9 +16,6 @@ import type { Storage } from '@kbn/kibana-utils-plugin/public'; import { EuiDataGridSorting, EuiDataGrid, - EuiDataGridProps, - EuiFlexGroup, - EuiFlexItem, EuiScreenReaderOnly, EuiSpacer, EuiText, @@ -30,7 +27,9 @@ import { EuiDataGridControlColumn, EuiDataGridCustomBodyProps, EuiDataGridCellValueElementProps, + EuiDataGridCustomToolbarProps, EuiDataGridStyle, + EuiDataGridProps, } from '@elastic/eui'; import type { DataView } from '@kbn/data-views-plugin/public'; import { @@ -263,6 +262,15 @@ export interface UnifiedDataTableProps { * It receives #EuiDataGridCustomBodyProps as its only argument. */ renderCustomGridBody?: (args: EuiDataGridCustomBodyProps) => React.ReactNode; + /** + * Optional render for the grid toolbar + * @param toolbarProps + * @param gridProps + */ + renderCustomToolbar?: ( + toolbarProps: EuiDataGridCustomToolbarProps, + gridProps: { totalHits?: number } + ) => React.ReactElement; /** * An optional list of the EuiDataGridControlColumn type for setting trailing control columns standard for EuiDataGrid. */ @@ -327,6 +335,7 @@ export const UnifiedDataTable = ({ onFieldEdited, services, renderCustomGridBody, + renderCustomToolbar, trailingControlColumns, totalHits, onFetchMoreRecords, @@ -528,6 +537,16 @@ export const UnifiedDataTable = ({ ] ); + const renderCustomToolbarFn: EuiDataGridProps['renderCustomToolbar'] | undefined = useMemo( + () => + renderCustomToolbar + ? (toolbarProps) => + renderCustomToolbar(toolbarProps, { + totalHits, + }) + : undefined, + [renderCustomToolbar, totalHits] + ); /** * Render variables */ @@ -693,8 +712,6 @@ export const UnifiedDataTable = ({ ? { allowDensity: false, allowRowHeight: true, - allowResetButton: false, - additionalDisplaySettings:
Example extra content
, } : undefined, [onUpdateRowHeight] @@ -771,46 +788,6 @@ export const UnifiedDataTable = ({ ); } - const renderCustomToolbar: EuiDataGridProps['renderCustomToolbar'] = ({ - columnControl, - columnSortingControl, - fullScreenControl, - keyboardShortcutsControl, - displayControl, - }) => { - return ( - - {`${totalHits} documents`} - - - -
-
{columnControl}
-
- - -
-
{columnSortingControl}
-
- - -
-
{keyboardShortcutsControl}
-
{displayControl}
-
{fullScreenControl}
-
- - - - - ); - }; - return ( @@ -842,7 +819,7 @@ export const UnifiedDataTable = ({ inMemory={inMemory} gridStyle={gridStyleOverride ?? GRID_STYLE} renderCustomGridBody={renderCustomGridBody} - renderCustomToolbar={renderCustomToolbar} + renderCustomToolbar={renderCustomToolbarFn} trailingControlColumns={trailingControlColumns} /> diff --git a/src/plugins/discover/public/application/context/context_app_content.tsx b/src/plugins/discover/public/application/context/context_app_content.tsx index 6c566758c9d07..57ce7629abc4a 100644 --- a/src/plugins/discover/public/application/context/context_app_content.tsx +++ b/src/plugins/discover/public/application/context/context_app_content.tsx @@ -26,8 +26,9 @@ import { ROW_HEIGHT_OPTION, SHOW_MULTIFIELDS, } from '@kbn/discover-utils'; -import { DataLoadingState, UnifiedDataTable } from '@kbn/unified-data-table'; +import { DataLoadingState } from '@kbn/unified-data-table'; import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types'; +import { DiscoverGrid } from '../../components/discover_grid'; import { getDefaultRowsPerPage } from '../../../common/constants'; import { LoadingStatus } from './services/context_query_state'; import { ActionBar } from './components/action_bar/action_bar'; @@ -66,7 +67,7 @@ export function clamp(value: number) { return Math.max(Math.min(MAX_CONTEXT_SIZE, value), MIN_CONTEXT_SIZE); } -const DiscoverGridMemoized = React.memo(UnifiedDataTable); +const DiscoverGridMemoized = React.memo(DiscoverGrid); const DocTableContextMemoized = React.memo(DocTableContext); const ActionBarMemoized = React.memo(ActionBar); diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx index ec809e2c2f760..bb0215a1c27e1 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx @@ -21,7 +21,7 @@ import { SortOrder } from '@kbn/saved-search-plugin/public'; import { CellActionsProvider } from '@kbn/cell-actions'; import type { DataTableRecord } from '@kbn/discover-utils/types'; import { SearchResponseWarnings } from '@kbn/search-response-warnings'; -import { DataLoadingState, UnifiedDataTable, useColumns } from '@kbn/unified-data-table'; +import { DataLoadingState, useColumns } from '@kbn/unified-data-table'; import { DOC_HIDE_TIME_COLUMN_SETTING, DOC_TABLE_LEGACY, @@ -34,6 +34,7 @@ import { SORT_DEFAULT_ORDER_SETTING, } from '@kbn/discover-utils'; import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types'; +import { DiscoverGrid } from '../../../../components/discover_grid'; import { getDefaultRowsPerPage } from '../../../../../common/constants'; import { useInternalStateSelector } from '../../services/discover_internal_state_container'; import { useAppStateSelector } from '../../services/discover_app_state_container'; @@ -63,7 +64,7 @@ const progressStyle = css` `; const DocTableInfiniteMemoized = React.memo(DocTableInfinite); -const DataGridMemoized = React.memo(UnifiedDataTable); +const DiscoverGridMemoized = React.memo(DiscoverGrid); // export needs for testing export const onResize = ( @@ -277,7 +278,7 @@ function DiscoverDocumentsComponent({ - = (props) => { + return ; +}; diff --git a/src/plugins/discover/public/components/discover_grid/index.ts b/src/plugins/discover/public/components/discover_grid/index.ts new file mode 100644 index 0000000000000..b9057e101ee9e --- /dev/null +++ b/src/plugins/discover/public/components/discover_grid/index.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export { DiscoverGrid } from './discover_grid'; diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss new file mode 100644 index 0000000000000..3af788635095e --- /dev/null +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss @@ -0,0 +1,23 @@ +.dscGridToolbar { + padding: $euiSizeXS $euiSizeS; +} + +.dscGridToolbarControlGroup { + border: $euiBorderThin; + border-radius: $euiBorderRadiusSmall; + padding: 0 $euiSizeXS; + display: flex; + align-items: stretch; + flex-direction: row; +} + +.dscGridToolbarControl { + padding-top: $euiSizeXS; + padding-bottom: $euiSizeXS; + + & + & { + border-left: $euiBorderThin; + margin-left: $euiSizeXS; + padding-left: $euiSizeXS; + } +} diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx new file mode 100644 index 0000000000000..5e8b8b80426d9 --- /dev/null +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx @@ -0,0 +1,83 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; +import type { UnifiedDataTableProps } from '@kbn/unified-data-table'; +import { FormattedMessage, FormattedNumber } from '@kbn/i18n-react'; +import './render_custom_toolbar.scss'; + +export const renderCustomToolbar: UnifiedDataTableProps['renderCustomToolbar'] = ( + { + columnControl, + columnSortingControl, + fullScreenControl, + keyboardShortcutsControl, + displayControl, + }, + { totalHits } +) => { + return ( + + + {typeof totalHits === 'number' && ( + + + + ), + }} + /> + + + )} + + + + {columnControl && ( + +
+
{columnControl}
+
+ + )} + {columnSortingControl && ( + +
+
{columnSortingControl}
+
+ + )} + {(keyboardShortcutsControl || displayControl || fullScreenControl) && ( + +
+ {keyboardShortcutsControl && ( +
{keyboardShortcutsControl}
+ )} + {displayControl &&
{displayControl}
} + {fullScreenControl && ( +
{fullScreenControl}
+ )} +
+ + )} + + + + ); +}; diff --git a/src/plugins/discover/public/embeddable/saved_search_grid.tsx b/src/plugins/discover/public/embeddable/saved_search_grid.tsx index 580a55534b573..4ede0c1dcdb29 100644 --- a/src/plugins/discover/public/embeddable/saved_search_grid.tsx +++ b/src/plugins/discover/public/embeddable/saved_search_grid.tsx @@ -5,17 +5,17 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import React, { memo, useCallback, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import type { DataTableRecord } from '@kbn/discover-utils/types'; import { AggregateQuery, Query } from '@kbn/es-query'; import type { SearchResponseInterceptedWarning } from '@kbn/search-response-warnings'; +import { MAX_DOC_FIELDS_DISPLAYED, ROW_HEIGHT_OPTION, SHOW_MULTIFIELDS } from '@kbn/discover-utils'; import { + type UnifiedDataTableProps, DataLoadingState as DiscoverGridLoadingState, - UnifiedDataTable, } from '@kbn/unified-data-table'; -import type { UnifiedDataTableProps } from '@kbn/unified-data-table'; +import { DiscoverGrid } from '../components/discover_grid'; import './saved_search_grid.scss'; -import { MAX_DOC_FIELDS_DISPLAYED, ROW_HEIGHT_OPTION, SHOW_MULTIFIELDS } from '@kbn/discover-utils'; import { DiscoverGridFlyout } from '../components/discover_grid_flyout'; import { SavedSearchEmbeddableBase } from './saved_search_embeddable_base'; import { DISCOVER_TOUR_STEP_ANCHOR_IDS } from '../components/discover_tour'; @@ -29,7 +29,7 @@ export interface DiscoverGridEmbeddableProps extends UnifiedDataTableProps { savedSearchId?: string; } -export const DataGridMemoized = memo(UnifiedDataTable); +export const DiscoverGridMemoized = React.memo(DiscoverGrid); export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) { const { interceptedWarnings, ...gridProps } = props; @@ -64,12 +64,12 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) { return ( - Date: Tue, 26 Sep 2023 14:53:29 +0200 Subject: [PATCH 04/30] [Discover] Fix grid top border --- .../application/main/components/layout/discover_layout.scss | 4 ++++ .../public/components/view_mode_toggle/view_mode_toggle.tsx | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.scss b/src/plugins/discover/public/application/main/components/layout/discover_layout.scss index 88da97d6f5333..d3978fe1c1d82 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_layout.scss +++ b/src/plugins/discover/public/application/main/components/layout/discover_layout.scss @@ -53,6 +53,10 @@ discover-app { position: relative; overflow: hidden; height: 100%; + + .euiDataGrid__controls { + border-top: none; + } } .dscPageContent--centered { diff --git a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx index b5674b6833ada..f1e53e43d81f8 100644 --- a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx +++ b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx @@ -26,7 +26,7 @@ export const DocumentViewModeToggle = ({ const tabsCss = css` padding: 0 ${useEuiPaddingSize('s')}; - border-bottom: ${viewMode === VIEW_MODE.AGGREGATED_LEVEL ? euiTheme.border.thin : 'none'}; + border-bottom: ${euiTheme.border.thin}; `; const showViewModeToggle = uiSettings.get(SHOW_FIELD_STATISTICS) ?? false; From e657cca711b9450b28c83188a4c43470b81c697d Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Thu, 28 Sep 2023 12:34:45 +0200 Subject: [PATCH 05/30] [Discover] Update styles --- .../public/components/discover_grid/render_custom_toolbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss index 3af788635095e..d0a476be7fa78 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss @@ -1,5 +1,5 @@ .dscGridToolbar { - padding: $euiSizeXS $euiSizeS; + padding: $euiSizeS; } .dscGridToolbarControlGroup { From 492775e3131e4cc1e06fab117de52597e2ff493c Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Thu, 28 Sep 2023 20:32:49 +0200 Subject: [PATCH 06/30] [Discover] Don't render total hits for now inside the custom toolbar --- .../src/components/data_table.tsx | 37 ++++---- .../discover_grid/render_custom_toolbar.scss | 12 +-- .../discover_grid/render_custom_toolbar.tsx | 85 +++++++++---------- .../public/embeddable/saved_search_grid.tsx | 2 +- 4 files changed, 67 insertions(+), 69 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index bd26664c9be16..7e027ee113a7a 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -28,6 +28,7 @@ import { EuiDataGridCustomBodyProps, EuiDataGridCellValueElementProps, EuiDataGridCustomToolbarProps, + EuiDataGridToolBarVisibilityOptions, EuiDataGridStyle, EuiDataGridProps, } from '@elastic/eui'; @@ -269,7 +270,9 @@ export interface UnifiedDataTableProps { */ renderCustomToolbar?: ( toolbarProps: EuiDataGridCustomToolbarProps, - gridProps: { totalHits?: number } + gridProps: { + additionalControls?: EuiDataGridToolBarVisibilityOptions['additionalControls']; + } ) => React.ReactElement; /** * An optional list of the EuiDataGridControlColumn type for setting trailing control columns standard for EuiDataGrid. @@ -537,16 +540,6 @@ export const UnifiedDataTable = ({ ] ); - const renderCustomToolbarFn: EuiDataGridProps['renderCustomToolbar'] | undefined = useMemo( - () => - renderCustomToolbar - ? (toolbarProps) => - renderCustomToolbar(toolbarProps, { - totalHits, - }) - : undefined, - [renderCustomToolbar, totalHits] - ); /** * Render variables */ @@ -688,8 +681,12 @@ export const UnifiedDataTable = ({ : internalControlColumns; }, [canSetExpandedDoc, externalControlColumns, controlColumnIds]); - const additionalControls = useMemo( - () => ( + const additionalControls = useMemo(() => { + if (!externalAdditionalControls && !usedSelectedDocs.length) { + return null; + } + + return ( <> {usedSelectedDocs.length ? ( - ), - [usedSelectedDocs, isFilterActive, rows, externalAdditionalControls] + ); + }, [usedSelectedDocs, isFilterActive, rows, externalAdditionalControls]); + + const renderCustomToolbarFn: EuiDataGridProps['renderCustomToolbar'] | undefined = useMemo( + () => + renderCustomToolbar + ? (toolbarProps) => + renderCustomToolbar(toolbarProps, { + additionalControls, + }) + : undefined, + [renderCustomToolbar, additionalControls] ); const showDisplaySelector = useMemo( diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss index d0a476be7fa78..db09bfeedd5cc 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss @@ -6,18 +6,18 @@ border: $euiBorderThin; border-radius: $euiBorderRadiusSmall; padding: 0 $euiSizeXS; - display: flex; + display: inline-flex; align-items: stretch; flex-direction: row; } .dscGridToolbarControl { - padding-top: $euiSizeXS; - padding-bottom: $euiSizeXS; + padding-block-start: $euiSizeXS - $euiBorderWidthThin; + padding-block-end: $euiSizeXS - $euiBorderWidthThin; & + & { - border-left: $euiBorderThin; - margin-left: $euiSizeXS; - padding-left: $euiSizeXS; + border-inline-start: $euiBorderThin; + margin-inline-start: $euiSizeXS; + padding-inline-start: $euiSizeXS; } } diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx index 5e8b8b80426d9..0a5bc24e9a882 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx @@ -7,76 +7,67 @@ */ import React from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import type { UnifiedDataTableProps } from '@kbn/unified-data-table'; -import { FormattedMessage, FormattedNumber } from '@kbn/i18n-react'; import './render_custom_toolbar.scss'; export const renderCustomToolbar: UnifiedDataTableProps['renderCustomToolbar'] = ( { + hasRoomForGridControls, columnControl, columnSortingControl, fullScreenControl, keyboardShortcutsControl, displayControl, }, - { totalHits } + { additionalControls } ) => { return ( - {typeof totalHits === 'number' && ( - - - - ), - }} - /> - - + {hasRoomForGridControls && ( + + {columnControl && ( + +
+
{columnControl}
+
+ + )} + {columnSortingControl && ( + +
+
{columnSortingControl}
+
+ + )} + {additionalControls && ( + +
+
{additionalControls}
+
+ + )} + )} - - {columnControl && ( - -
-
{columnControl}
-
- - )} - {columnSortingControl && ( - -
-
{columnSortingControl}
-
- - )} - {(keyboardShortcutsControl || displayControl || fullScreenControl) && ( - -
- {keyboardShortcutsControl && ( -
{keyboardShortcutsControl}
- )} - {displayControl &&
{displayControl}
} - {fullScreenControl && ( -
{fullScreenControl}
- )} -
- - )} - + {(keyboardShortcutsControl || displayControl || fullScreenControl) && ( +
+ {keyboardShortcutsControl && ( +
{keyboardShortcutsControl}
+ )} + {displayControl &&
{displayControl}
} + {fullScreenControl &&
{fullScreenControl}
} +
+ )} ); diff --git a/src/plugins/discover/public/embeddable/saved_search_grid.tsx b/src/plugins/discover/public/embeddable/saved_search_grid.tsx index 4ede0c1dcdb29..474fa90576718 100644 --- a/src/plugins/discover/public/embeddable/saved_search_grid.tsx +++ b/src/plugins/discover/public/embeddable/saved_search_grid.tsx @@ -64,7 +64,7 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) { return ( Date: Fri, 29 Sep 2023 15:03:10 +0200 Subject: [PATCH 07/30] [Discover] Update styles --- .../kbn-unified-data-table/src/components/data_table.scss | 4 ++++ packages/kbn-unified-data-table/src/components/data_table.tsx | 1 + .../public/components/view_mode_toggle/view_mode_toggle.tsx | 4 ++-- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss index 048a641cf7562..90157319a559f 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -54,6 +54,10 @@ .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions { background-color: tintOrShade($euiColorLightShade, 50%, 0); } + + .euiDataGrid__scrollOverlay .euiDataGrid__scrollBarOverlayRight { + background-color: transparent; // otherwise the grid scrollbar border visually conflicts with the grid toolbar controls + } } .unifiedDataTable__table { diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index 7e027ee113a7a..f6e66f1e73e67 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -831,6 +831,7 @@ export const UnifiedDataTable = ({ /> {loadingState !== DataLoadingState.loading && + !usedSelectedDocs.length && // hide footer when showing selected documents isPaginationEnabled && ( // we hide the footer for Surrounding Documents page Date: Fri, 29 Sep 2023 16:19:39 +0200 Subject: [PATCH 08/30] [Discover] Add a test --- .../src/components/data_table.test.tsx | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx index 6aa101cc558b4..0574cc4a38d60 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx @@ -433,6 +433,50 @@ describe('UnifiedDataTable', () => { }); }); + describe('renderCustomToolbar', () => { + it('should render a custom toolbar', async () => { + let toolbarParams: Record = {}; + let gridParams: Record = {}; + const renderCustomToolbarMock = jest.fn((tp, gp) => { + toolbarParams = tp; + gridParams = gp; + return
Custom layout
; + }); + const component = await getComponent({ + ...getProps(), + renderCustomToolbar: renderCustomToolbarMock, + }); + + // custom toolbar should be rendered + expect(findTestSubject(component, 'custom-toolbar').exists()).toBe(true); + + expect(renderCustomToolbarMock).toHaveBeenLastCalledWith( + expect.objectContaining({ + hasRoomForGridControls: true, + }), + expect.objectContaining({ + additionalControls: null, + }) + ); + + // the default eui controls should be available for custom rendering + expect(toolbarParams?.columnSortingControl).toBeTruthy(); + expect(toolbarParams?.keyboardShortcutsControl).toBeTruthy(); + expect(gridParams?.additionalControls).toBe(null); + + // additional controls become available after selecting a document + act(() => { + component + .find('[data-gridcell-column-id="select"] .euiCheckbox__input') + .first() + .simulate('change'); + }); + + expect(toolbarParams?.keyboardShortcutsControl).toBeTruthy(); + expect(gridParams?.additionalControls).toBeTruthy(); + }); + }); + describe('gridStyleOverride', () => { it('should render the grid with the default style if no gridStyleOverride is provided', async () => { const component = await getComponent({ From a213378f13e6edd45a9315aa2870946e9cb316d4 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Fri, 29 Sep 2023 17:19:20 +0200 Subject: [PATCH 09/30] [Discover] Add more tests --- .../context/context_app_content.test.tsx | 1 + .../layout/discover_documents.test.tsx | 2 + .../render_custom_toolbar.test.tsx.snap | 125 ++++++++++++++++++ .../render_custom_toolbar.test.tsx | 43 ++++++ .../discover_grid/render_custom_toolbar.tsx | 1 + .../embeddable/_saved_search_embeddable.ts | 5 + .../apps/discover/group2/_data_grid.ts | 4 + .../discover/group2/_data_grid_context.ts | 4 + 8 files changed, 185 insertions(+) create mode 100644 src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap create mode 100644 src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx diff --git a/src/plugins/discover/public/application/context/context_app_content.test.tsx b/src/plugins/discover/public/application/context/context_app_content.test.tsx index f6809d63c035d..f6c87772ec913 100644 --- a/src/plugins/discover/public/application/context/context_app_content.test.tsx +++ b/src/plugins/discover/public/application/context/context_app_content.test.tsx @@ -104,5 +104,6 @@ describe('ContextAppContent test', () => { it('should render discover grid correctly', async () => { const component = await mountComponent({ isLegacy: false }); expect(component.find(UnifiedDataTable).length).toBe(1); + expect(findTestSubject(component, 'dscGridToolbar').exists()).toBe(true); }); }); diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx index fdbd153122cd1..9809367aa6c5c 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx @@ -9,6 +9,7 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { BehaviorSubject } from 'rxjs'; +import { findTestSubject } from '@elastic/eui/lib/test'; import { mountWithIntl } from '@kbn/test-jest-helpers'; import { setHeaderActionMenuMounter } from '../../../../kibana_services'; import { DataDocuments$ } from '../../services/discover_data_state_container'; @@ -76,6 +77,7 @@ describe('Discover documents layout', () => { const component = await mountComponent(FetchStatus.COMPLETE, esHitsMock); expect(component.find('.dscDocuments__loading').exists()).toBeFalsy(); expect(component.find('.dscTable').exists()).toBeTruthy(); + expect(findTestSubject(component, 'dscGridToolbar').exists()).toBe(true); }); test('should set rounded width to state on resize column', () => { diff --git a/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap b/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap new file mode 100644 index 0000000000000..3a786b4d22999 --- /dev/null +++ b/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap @@ -0,0 +1,125 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renderCustomToolbar should render correctly for smaller screens 1`] = ` + + + +
+
+ keyboard +
+
+ display +
+
+ fullScreen +
+
+ + +`; + +exports[`renderCustomToolbar should render successfully 1`] = ` + + + + +
+
+ column +
+
+ + +
+
+ columnSorting +
+
+ + +
+
+ additional +
+
+ + + + +
+
+ keyboard +
+
+ display +
+
+ fullScreen +
+
+ + +`; diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx new file mode 100644 index 0000000000000..c90fbcb61295e --- /dev/null +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx @@ -0,0 +1,43 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { renderCustomToolbar } from './render_custom_toolbar'; + +describe('renderCustomToolbar', () => { + it('should render successfully', () => { + expect( + renderCustomToolbar( + { + hasRoomForGridControls: true, + columnControl: 'column', + columnSortingControl: 'columnSorting', + displayControl: 'display', + fullScreenControl: 'fullScreen', + keyboardShortcutsControl: 'keyboard', + }, + { additionalControls: 'additional' } + ) + ).toMatchSnapshot(); + }); + + it('should render correctly for smaller screens', () => { + expect( + renderCustomToolbar( + { + hasRoomForGridControls: false, + columnControl: 'column', + columnSortingControl: 'columnSorting', + displayControl: 'display', + fullScreenControl: 'fullScreen', + keyboardShortcutsControl: 'keyboard', + }, + { additionalControls: 'additional' } + ) + ).toMatchSnapshot(); + }); +}); diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx index 0a5bc24e9a882..7fe8924423f30 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx @@ -29,6 +29,7 @@ export const renderCustomToolbar: UnifiedDataTableProps['renderCustomToolbar'] = justifyContent="spaceBetween" alignItems="center" className="dscGridToolbar" + data-test-subj="dscGridToolbar" wrap > diff --git a/test/functional/apps/discover/embeddable/_saved_search_embeddable.ts b/test/functional/apps/discover/embeddable/_saved_search_embeddable.ts index 2fb99d9ebb43f..03f40c5b6ebcf 100644 --- a/test/functional/apps/discover/embeddable/_saved_search_embeddable.ts +++ b/test/functional/apps/discover/embeddable/_saved_search_embeddable.ts @@ -145,5 +145,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await addSearchEmbeddableToDashboard(); await testSubjects.missingOrFail('dataGridFullScreenButton'); }); + + it('should show the the grid toolbar', async () => { + await addSearchEmbeddableToDashboard(); + await testSubjects.existOrFail('dscGridToolbar'); + }); }); } diff --git a/test/functional/apps/discover/group2/_data_grid.ts b/test/functional/apps/discover/group2/_data_grid.ts index 58052ce6665ca..d869044613873 100644 --- a/test/functional/apps/discover/group2/_data_grid.ts +++ b/test/functional/apps/discover/group2/_data_grid.ts @@ -46,5 +46,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.unifiedFieldList.clickFieldListItemRemove('agent'); expect(await getTitles()).to.be('@timestamp Document'); }); + + it('should show the the grid toolbar', async () => { + await testSubjects.existOrFail('dscGridToolbar'); + }); }); } diff --git a/test/functional/apps/discover/group2/_data_grid_context.ts b/test/functional/apps/discover/group2/_data_grid_context.ts index ae5030f226b82..e8e218625687b 100644 --- a/test/functional/apps/discover/group2/_data_grid_context.ts +++ b/test/functional/apps/discover/group2/_data_grid_context.ts @@ -97,6 +97,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(disabledFilterCounter).to.be(TEST_FILTER_COLUMN_NAMES.length); }); + it('should show the the grid toolbar', async () => { + await testSubjects.existOrFail('dscGridToolbar'); + }); + it('navigates to context view from embeddable', async () => { await PageObjects.common.navigateToApp('discover'); await PageObjects.discover.saveSearch('my search'); From 8bc3083a1897f3d774550ca3989dc577d472b143 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Fri, 29 Sep 2023 17:57:50 +0200 Subject: [PATCH 10/30] [Discover] Fix types --- packages/kbn-unified-data-table/index.ts | 5 ++++- .../src/components/data_table.tsx | 14 ++++++++------ .../discover_grid/render_custom_toolbar.tsx | 4 ++-- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/kbn-unified-data-table/index.ts b/packages/kbn-unified-data-table/index.ts index cc692420cd209..0f3e311afd0f5 100644 --- a/packages/kbn-unified-data-table/index.ts +++ b/packages/kbn-unified-data-table/index.ts @@ -7,7 +7,10 @@ */ export { UnifiedDataTable, DataLoadingState } from './src/components/data_table'; -export type { UnifiedDataTableProps } from './src/components/data_table'; +export type { + UnifiedDataTableProps, + UnifiedDataTableRenderCustomToolbar, +} from './src/components/data_table'; export { getDisplayedColumns } from './src/utils/columns'; export { ROWS_HEIGHT_OPTIONS } from './src/constants'; diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index f6e66f1e73e67..3c7ec3db1f486 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -63,6 +63,13 @@ import { } from '../constants'; import { UnifiedDataTableFooter } from './data_table_footer'; +export type UnifiedDataTableRenderCustomToolbar = ( + toolbarProps: EuiDataGridCustomToolbarProps, + gridProps: { + additionalControls?: EuiDataGridToolBarVisibilityOptions['additionalControls']; + } +) => React.ReactElement; + export type SortOrder = [string, string]; export enum DataLoadingState { @@ -268,12 +275,7 @@ export interface UnifiedDataTableProps { * @param toolbarProps * @param gridProps */ - renderCustomToolbar?: ( - toolbarProps: EuiDataGridCustomToolbarProps, - gridProps: { - additionalControls?: EuiDataGridToolBarVisibilityOptions['additionalControls']; - } - ) => React.ReactElement; + renderCustomToolbar?: UnifiedDataTableRenderCustomToolbar; /** * An optional list of the EuiDataGridControlColumn type for setting trailing control columns standard for EuiDataGrid. */ diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx index 7fe8924423f30..c7b64cdbe88f1 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx @@ -8,10 +8,10 @@ import React from 'react'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import type { UnifiedDataTableProps } from '@kbn/unified-data-table'; +import type { UnifiedDataTableRenderCustomToolbar } from '@kbn/unified-data-table'; import './render_custom_toolbar.scss'; -export const renderCustomToolbar: UnifiedDataTableProps['renderCustomToolbar'] = ( +export const renderCustomToolbar: UnifiedDataTableRenderCustomToolbar = ( { hasRoomForGridControls, columnControl, From e8a7094044e6fc64796e06ee2d5cfa00b4ca4c10 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 4 Oct 2023 11:54:36 +0200 Subject: [PATCH 11/30] [Discover] Update selected documents button --- .../data_table_document_selection.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx index bb0a0dc2b775a..708250a724779 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx @@ -14,6 +14,7 @@ import { EuiContextMenuPanel, EuiCopy, EuiDataGridCellValueElementProps, + EuiNotificationBadge, EuiPopover, EuiFlexGroup, EuiFlexItem, @@ -196,11 +197,18 @@ export function DataTableDocumentToolbarBtn({ 'euiDataGrid__controlBtn--active': isFilterActive, })} > - + + + + + + {selectedDocs.length} + + } > From fd0f7fa098aeecfd4568fcb7545a9656ac794bf3 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 4 Oct 2023 12:04:39 +0200 Subject: [PATCH 12/30] [Discover] Remove redundant param --- .../src/components/data_table_document_selection.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx index 708250a724779..3166871711599 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx @@ -202,7 +202,6 @@ export function DataTableDocumentToolbarBtn({ From aa5b6baadea4ff3ecdd84a2cf3fe102ec02da5b1 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Thu, 5 Oct 2023 11:59:02 +0200 Subject: [PATCH 13/30] [Discover] Update button styles --- .../discover_grid/render_custom_toolbar.scss | 33 +++++++++++++++++++ .../discover_grid/render_custom_toolbar.tsx | 12 +++---- 2 files changed, 39 insertions(+), 6 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss index db09bfeedd5cc..997d3fb9a8700 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss @@ -15,9 +15,42 @@ padding-block-start: $euiSizeXS - $euiBorderWidthThin; padding-block-end: $euiSizeXS - $euiBorderWidthThin; + &--single { + border: $euiBorderThin; + border-radius: $euiBorderRadiusSmall; + padding-inline: $euiSizeXS; + transition: transform $euiAnimSpeedNormal ease-in-out; + + &:hover { + transform: translateY(-1px); + } + + &:active { + transform: translateY(0); + } + } + & + & { border-inline-start: $euiBorderThin; margin-inline-start: $euiSizeXS; padding-inline-start: $euiSizeXS; } + + & svg { + inline-size: $euiSize; + block-size: $euiSize; + } + + & .euiDataGrid__controlBtn--active { + font-weight: $euiFontWeightMedium; + } + + & .euiButtonIcon:hover { + background: transparent; + transform: none; + } + + & .euiButtonEmpty:active { + background: transparent; + } } diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx index c7b64cdbe88f1..86d5bc9c16bb2 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx @@ -37,22 +37,22 @@ export const renderCustomToolbar: UnifiedDataTableRenderCustomToolbar = ( {columnControl && ( -
-
{columnControl}
+
+ {columnControl}
)} {columnSortingControl && ( -
-
{columnSortingControl}
+
+ {columnSortingControl}
)} {additionalControls && ( -
-
{additionalControls}
+
+ {additionalControls}
)} From 026c6eed0ce73d955c85b87c0ef13a60171b02d5 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Thu, 5 Oct 2023 13:18:48 +0200 Subject: [PATCH 14/30] [Discover] Update jest snapshots --- .../render_custom_toolbar.test.tsx.snap | 24 +++++-------------- 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap b/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap index 3a786b4d22999..b320015b226ba 100644 --- a/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap +++ b/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap @@ -61,39 +61,27 @@ exports[`renderCustomToolbar should render successfully 1`] = ` grow={false} >
-
- column -
+ column
-
- columnSorting -
+ columnSorting
-
- additional -
+ additional
From 63daf007a69f6cfa4fcaf80af3a9cdd727ab66a0 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Thu, 5 Oct 2023 14:16:59 +0200 Subject: [PATCH 15/30] [Discover] Move common props to discover_grid --- .../public/application/context/context_app_content.tsx | 3 --- .../main/components/layout/discover_documents.tsx | 1 - .../public/components/discover_grid/discover_grid.tsx | 7 ++++++- .../embeddable/saved_search_embeddable_component.tsx | 1 - .../discover/public/embeddable/saved_search_grid.tsx | 2 -- 5 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/plugins/discover/public/application/context/context_app_content.tsx b/src/plugins/discover/public/application/context/context_app_content.tsx index 168e0291030e3..5a1afd6bd95f1 100644 --- a/src/plugins/discover/public/application/context/context_app_content.tsx +++ b/src/plugins/discover/public/application/context/context_app_content.tsx @@ -38,7 +38,6 @@ import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from './services/constants'; import { DocTableContext } from '../../components/doc_table/doc_table_context'; import { useDiscoverServices } from '../../hooks/use_discover_services'; import { DiscoverGridFlyout } from '../../components/discover_grid_flyout'; -import { DISCOVER_TOUR_STEP_ANCHOR_IDS } from '../../components/discover_tour'; export interface ContextAppContentProps { columns: string[]; @@ -192,7 +191,6 @@ export function ContextAppContent({
diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx index ea17dc468f810..43c662333de64 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx @@ -301,7 +301,6 @@ function DiscoverDocumentsComponent({ > = (props) => { - return ; + return ; }; diff --git a/src/plugins/discover/public/embeddable/saved_search_embeddable_component.tsx b/src/plugins/discover/public/embeddable/saved_search_embeddable_component.tsx index 6c499a09d4152..f8c7aa39c1a7c 100644 --- a/src/plugins/discover/public/embeddable/saved_search_embeddable_component.tsx +++ b/src/plugins/discover/public/embeddable/saved_search_embeddable_component.tsx @@ -43,7 +43,6 @@ export function SavedSearchEmbeddableComponent({ {...(searchProps as DiscoverGridEmbeddableProps)} // TODO later: remove the type casting to prevent unexpected errors due to missing props! loadingState={searchProps.isLoading ? DataLoadingState.loading : DataLoadingState.loaded} showFullScreenButton={false} - showColumnTokens query={query} className="unifiedDataTable" /> diff --git a/src/plugins/discover/public/embeddable/saved_search_grid.tsx b/src/plugins/discover/public/embeddable/saved_search_grid.tsx index 8b4f6f5dcfcf4..55102d93a3d6b 100644 --- a/src/plugins/discover/public/embeddable/saved_search_grid.tsx +++ b/src/plugins/discover/public/embeddable/saved_search_grid.tsx @@ -19,7 +19,6 @@ import { DiscoverGrid } from '../components/discover_grid'; import './saved_search_grid.scss'; import { DiscoverGridFlyout } from '../components/discover_grid_flyout'; import { SavedSearchEmbeddableBase } from './saved_search_embeddable_base'; -import { DISCOVER_TOUR_STEP_ANCHOR_IDS } from '../components/discover_tour'; export interface DiscoverGridEmbeddableProps extends UnifiedDataTableProps { totalHitCount?: number; @@ -85,7 +84,6 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) { showMultiFields={props.services.uiSettings.get(SHOW_MULTIFIELDS)} maxDocFieldsDisplayed={props.services.uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)} renderDocumentView={renderDocumentView} - componentsTourSteps={{ expandButton: DISCOVER_TOUR_STEP_ANCHOR_IDS.expandDocument }} /> ); From 88c7217a46743af340c0c7bb0daab3062b6b84bc Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 16 Oct 2023 14:30:36 +0200 Subject: [PATCH 16/30] [Discover] Refactor params --- .../src/components/data_table.test.tsx | 16 +++++++------ .../src/components/data_table.tsx | 15 +++++++----- .../render_custom_toolbar.test.tsx | 16 ++++++------- .../discover_grid/render_custom_toolbar.tsx | 23 ++++++++++--------- 4 files changed, 38 insertions(+), 32 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx index d8022af81d572..4d83da9b0ae75 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx @@ -446,9 +446,9 @@ describe('UnifiedDataTable', () => { it('should render a custom toolbar', async () => { let toolbarParams: Record = {}; let gridParams: Record = {}; - const renderCustomToolbarMock = jest.fn((tp, gp) => { - toolbarParams = tp; - gridParams = gp; + const renderCustomToolbarMock = jest.fn((props) => { + toolbarParams = props.toolbarProps; + gridParams = props.gridProps; return
Custom layout
; }); const component = await getComponent({ @@ -461,10 +461,12 @@ describe('UnifiedDataTable', () => { expect(renderCustomToolbarMock).toHaveBeenLastCalledWith( expect.objectContaining({ - hasRoomForGridControls: true, - }), - expect.objectContaining({ - additionalControls: null, + toolbarProps: expect.objectContaining({ + hasRoomForGridControls: true, + }), + gridProps: expect.objectContaining({ + additionalControls: null, + }), }) ); diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index 64b3b56c447a8..6df30ff214b3e 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -67,12 +67,12 @@ import { } from '../constants'; import { UnifiedDataTableFooter } from './data_table_footer'; -export type UnifiedDataTableRenderCustomToolbar = ( - toolbarProps: EuiDataGridCustomToolbarProps, +export type UnifiedDataTableRenderCustomToolbar = (props: { + toolbarProps: EuiDataGridCustomToolbarProps; gridProps: { additionalControls?: EuiDataGridToolBarVisibilityOptions['additionalControls']; - } -) => React.ReactElement; + }; +}) => React.ReactElement; export type SortOrder = [string, string]; @@ -739,8 +739,11 @@ export const UnifiedDataTable = ({ () => renderCustomToolbar ? (toolbarProps) => - renderCustomToolbar(toolbarProps, { - additionalControls, + renderCustomToolbar({ + toolbarProps, + gridProps: { + additionalControls, + }, }) : undefined, [renderCustomToolbar, additionalControls] diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx index c90fbcb61295e..3f7ed504250b0 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx @@ -11,8 +11,8 @@ import { renderCustomToolbar } from './render_custom_toolbar'; describe('renderCustomToolbar', () => { it('should render successfully', () => { expect( - renderCustomToolbar( - { + renderCustomToolbar({ + toolbarProps: { hasRoomForGridControls: true, columnControl: 'column', columnSortingControl: 'columnSorting', @@ -20,15 +20,15 @@ describe('renderCustomToolbar', () => { fullScreenControl: 'fullScreen', keyboardShortcutsControl: 'keyboard', }, - { additionalControls: 'additional' } - ) + gridProps: { additionalControls: 'additional' }, + }) ).toMatchSnapshot(); }); it('should render correctly for smaller screens', () => { expect( - renderCustomToolbar( - { + renderCustomToolbar({ + toolbarProps: { hasRoomForGridControls: false, columnControl: 'column', columnSortingControl: 'columnSorting', @@ -36,8 +36,8 @@ describe('renderCustomToolbar', () => { fullScreenControl: 'fullScreen', keyboardShortcutsControl: 'keyboard', }, - { additionalControls: 'additional' } - ) + gridProps: { additionalControls: 'additional' }, + }) ).toMatchSnapshot(); }); }); diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx index 86d5bc9c16bb2..6d954df22573f 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx @@ -11,17 +11,18 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import type { UnifiedDataTableRenderCustomToolbar } from '@kbn/unified-data-table'; import './render_custom_toolbar.scss'; -export const renderCustomToolbar: UnifiedDataTableRenderCustomToolbar = ( - { - hasRoomForGridControls, - columnControl, - columnSortingControl, - fullScreenControl, - keyboardShortcutsControl, - displayControl, - }, - { additionalControls } -) => { +export const renderCustomToolbar: UnifiedDataTableRenderCustomToolbar = (props) => { + const { + toolbarProps: { + hasRoomForGridControls, + columnControl, + columnSortingControl, + fullScreenControl, + keyboardShortcutsControl, + displayControl, + }, + gridProps: { additionalControls }, + } = props; return ( Date: Mon, 16 Oct 2023 15:17:29 +0200 Subject: [PATCH 17/30] [Discover] Refactor styles --- .../discover_grid/render_custom_toolbar.scss | 73 ++++++++++--------- .../discover_grid/render_custom_toolbar.tsx | 22 +++--- 2 files changed, 47 insertions(+), 48 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss index 997d3fb9a8700..8b85380abf5e7 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss @@ -2,55 +2,56 @@ padding: $euiSizeS; } -.dscGridToolbarControlGroup { +.dscGridToolbarControlButton .euiDataGrid__controlBtn { + block-size: $euiSizeXL; border: $euiBorderThin; border-radius: $euiBorderRadiusSmall; - padding: 0 $euiSizeXS; - display: inline-flex; - align-items: stretch; - flex-direction: row; -} - -.dscGridToolbarControl { - padding-block-start: $euiSizeXS - $euiBorderWidthThin; - padding-block-end: $euiSizeXS - $euiBorderWidthThin; - - &--single { - border: $euiBorderThin; - border-radius: $euiBorderRadiusSmall; - padding-inline: $euiSizeXS; - transition: transform $euiAnimSpeedNormal ease-in-out; - - &:hover { - transform: translateY(-1px); - } - - &:active { - transform: translateY(0); - } - } - - & + & { - border-inline-start: $euiBorderThin; - margin-inline-start: $euiSizeXS; - padding-inline-start: $euiSizeXS; - } + // making the icons larger than the default size & svg { inline-size: $euiSize; block-size: $euiSize; } - & .euiDataGrid__controlBtn--active { + // cancel default background and font changes + &.euiDataGrid__controlBtn--active { font-weight: $euiFontWeightMedium; } - - & .euiButtonIcon:hover { + &:active, &:focus { background: transparent; - transform: none; } - & .euiButtonEmpty:active { + // add toolbar control animation + transition: transform $euiAnimSpeedNormal ease-in-out; + &:hover { + transform: translateY(-1px); + } + &:active { + transform: translateY(0); + } +} + +.dscGridToolbarControlGroup { + border: $euiBorderThin; + border-radius: $euiBorderRadiusSmall; + display: inline-flex; + align-items: stretch; + flex-direction: row; +} + +.dscGridToolbarControlIconButton .euiButtonIcon { + inline-size: $euiSizeXL; + block-size: $euiSizeXL; + + // cancel default behaviour + &:hover, &:active, &:focus { background: transparent; + animation: none !important; + transform: none !important; + } + + .dscGridToolbarControlIconButton + & { + border-inline-start: $euiBorderThin; + border-radius: 0; } } diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx index 6d954df22573f..f5ed8cba8884a 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx @@ -38,23 +38,17 @@ export const renderCustomToolbar: UnifiedDataTableRenderCustomToolbar = (props) {columnControl && ( -
- {columnControl} -
+
{columnControl}
 )} {columnSortingControl && ( -
- {columnSortingControl} -
+
{columnSortingControl}
 )} {additionalControls && ( -
- {additionalControls} -
+
{additionalControls}
 )} @@ -64,10 +58,14 @@ export const renderCustomToolbar: UnifiedDataTableRenderCustomToolbar = (props) {(keyboardShortcutsControl || displayControl || fullScreenControl) && (
{keyboardShortcutsControl && ( -
{keyboardShortcutsControl}
+
{keyboardShortcutsControl}
+ )} + {displayControl && ( +
{displayControl}
+ )} + {fullScreenControl && ( +
{fullScreenControl}
)} - {displayControl &&
{displayControl}
} - {fullScreenControl &&
{fullScreenControl}
}
)} From 5582e1771d3086fcb106b0722fd574008f9ec4c4 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 16 Oct 2023 16:06:07 +0200 Subject: [PATCH 18/30] [Discover] Compact embeddable view (total hits on the left side) --- packages/kbn-unified-data-table/index.ts | 1 + .../src/components/data_table.tsx | 8 +- .../render_custom_toolbar.test.tsx.snap | 176 ++++++++++++++---- .../discover_grid/discover_grid.tsx | 2 +- .../render_custom_toolbar.test.tsx | 18 +- .../discover_grid/render_custom_toolbar.tsx | 105 ++++++++--- .../public/embeddable/saved_search_grid.tsx | 11 +- 7 files changed, 243 insertions(+), 78 deletions(-) diff --git a/packages/kbn-unified-data-table/index.ts b/packages/kbn-unified-data-table/index.ts index ccd544d77d6bc..823520884f63e 100644 --- a/packages/kbn-unified-data-table/index.ts +++ b/packages/kbn-unified-data-table/index.ts @@ -10,6 +10,7 @@ export { UnifiedDataTable, DataLoadingState } from './src/components/data_table' export type { UnifiedDataTableProps, UnifiedDataTableRenderCustomToolbar, + UnifiedDataTableRenderCustomToolbarProps, } from './src/components/data_table'; export { getDisplayedColumns } from './src/utils/columns'; export { getTextBasedColumnTypes } from './src/utils/get_column_types'; diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index 6df30ff214b3e..fa8c6ae51dbd2 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -67,12 +67,16 @@ import { } from '../constants'; import { UnifiedDataTableFooter } from './data_table_footer'; -export type UnifiedDataTableRenderCustomToolbar = (props: { +export interface UnifiedDataTableRenderCustomToolbarProps { toolbarProps: EuiDataGridCustomToolbarProps; gridProps: { additionalControls?: EuiDataGridToolBarVisibilityOptions['additionalControls']; }; -}) => React.ReactElement; +} + +export type UnifiedDataTableRenderCustomToolbar = ( + props: UnifiedDataTableRenderCustomToolbarProps +) => React.ReactElement; export type SortOrder = [string, string]; diff --git a/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap b/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap index b320015b226ba..f1dccdf1221bb 100644 --- a/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap +++ b/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap @@ -1,5 +1,87 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`renderCustomToolbar should render correctly for embeddable 1`] = ` + + + + + + + + +
+ additional +
+ + +
+ column +
+ + +
+ columnSorting +
+ + + +
+
+ keyboard +
+
+ display +
+
+ fullScreen +
+
+ + + + +`; + exports[`renderCustomToolbar should render correctly for smaller screens 1`] = ` - -
+ - column -
- - -
+ column +
+ + - columnSorting -
- - -
+ columnSorting +
+ + - additional -
- +
+ additional +
+ + -
-
- keyboard -
-
- display -
-
- fullScreen -
-
+
+
+ keyboard +
+
+ display +
+
+ fullScreen +
+
+ + `; diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx index 70286043eb97e..fe2586e32f895 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx @@ -16,5 +16,5 @@ import { renderCustomToolbar } from './render_custom_toolbar'; * @constructor */ export const DiscoverGrid: React.FC = (props) => { - return ; + return ; }; diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx index 3f7ed504250b0..249743fb8b708 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { renderCustomToolbar } from './render_custom_toolbar'; +import { renderCustomToolbar, getRenderCustomToolbarInEmbeddable } from './render_custom_toolbar'; describe('renderCustomToolbar', () => { it('should render successfully', () => { @@ -40,4 +40,20 @@ describe('renderCustomToolbar', () => { }) ).toMatchSnapshot(); }); + + it('should render correctly for embeddable', () => { + expect( + getRenderCustomToolbarInEmbeddable(500)({ + toolbarProps: { + hasRoomForGridControls: true, + columnControl: 'column', + columnSortingControl: 'columnSorting', + displayControl: 'display', + fullScreenControl: 'fullScreen', + keyboardShortcutsControl: 'keyboard', + }, + gridProps: { additionalControls: 'additional' }, + }) + ).toMatchSnapshot(); + }); }); diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx index f5ed8cba8884a..dbef8cb56a91f 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx @@ -8,11 +8,20 @@ import React from 'react'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import type { UnifiedDataTableRenderCustomToolbar } from '@kbn/unified-data-table'; +import type { + UnifiedDataTableRenderCustomToolbarProps, + UnifiedDataTableRenderCustomToolbar, +} from '@kbn/unified-data-table'; +import { TotalDocuments } from '../../application/main/components/total_documents/total_documents'; import './render_custom_toolbar.scss'; -export const renderCustomToolbar: UnifiedDataTableRenderCustomToolbar = (props) => { +interface RenderCustomToolbarProps extends UnifiedDataTableRenderCustomToolbarProps { + leftSide?: React.ReactElement; +} + +export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.ReactElement => { const { + leftSide, toolbarProps: { hasRoomForGridControls, columnControl, @@ -23,6 +32,32 @@ export const renderCustomToolbar: UnifiedDataTableRenderCustomToolbar = (props) }, gridProps: { additionalControls }, } = props; + + const buttons = hasRoomForGridControls ? ( + <> + {leftSide && additionalControls && ( + +
{additionalControls}
+ + )} + {columnControl && ( + +
{columnControl}
+ + )} + {columnSortingControl && ( + +
{columnSortingControl}
+ + )} + {!leftSide && additionalControls && ( + +
{additionalControls}
+ + )} + + ) : null; + return ( - {hasRoomForGridControls && ( + {leftSide || ( - {columnControl && ( - -
{columnControl}
- - )} - {columnSortingControl && ( - -
{columnSortingControl}
- - )} - {additionalControls && ( - -
{additionalControls}
- - )} + {buttons} )} - {(keyboardShortcutsControl || displayControl || fullScreenControl) && ( -
- {keyboardShortcutsControl && ( -
{keyboardShortcutsControl}
- )} - {displayControl && ( -
{displayControl}
- )} - {fullScreenControl && ( -
{fullScreenControl}
- )} -
- )} + + {Boolean(leftSide) && buttons} + {(keyboardShortcutsControl || displayControl || fullScreenControl) && ( + +
+ {keyboardShortcutsControl && ( +
{keyboardShortcutsControl}
+ )} + {displayControl && ( +
{displayControl}
+ )} + {fullScreenControl && ( +
{fullScreenControl}
+ )} +
+ + )} + ); }; + +/** + * Render total hits number on the left side and all controls to the right + * @param totalHitCount + */ +export const getRenderCustomToolbarInEmbeddable = ( + totalHitCount: number | undefined +): UnifiedDataTableRenderCustomToolbar => { + return (props) => + renderCustomToolbar({ + ...props, + leftSide: + typeof totalHitCount === 'number' ? ( + + ) : undefined, + }); +}; diff --git a/src/plugins/discover/public/embeddable/saved_search_grid.tsx b/src/plugins/discover/public/embeddable/saved_search_grid.tsx index 55102d93a3d6b..51ab04538d45b 100644 --- a/src/plugins/discover/public/embeddable/saved_search_grid.tsx +++ b/src/plugins/discover/public/embeddable/saved_search_grid.tsx @@ -5,7 +5,7 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import type { DataTableRecord } from '@kbn/discover-utils/types'; import { AggregateQuery, Query } from '@kbn/es-query'; import type { SearchResponseInterceptedWarning } from '@kbn/search-response-warnings'; @@ -19,6 +19,7 @@ import { DiscoverGrid } from '../components/discover_grid'; import './saved_search_grid.scss'; import { DiscoverGridFlyout } from '../components/discover_grid_flyout'; import { SavedSearchEmbeddableBase } from './saved_search_embeddable_base'; +import { getRenderCustomToolbarInEmbeddable } from '../components/discover_grid/render_custom_toolbar'; export interface DiscoverGridEmbeddableProps extends UnifiedDataTableProps { totalHitCount?: number; @@ -68,9 +69,14 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) { ] ); + const renderCustomToolbar = useMemo( + () => getRenderCustomToolbarInEmbeddable(props.totalHitCount), + [props.totalHitCount] + ); + return ( ); From 8c0cfdd2ffa230ff0a863eb82d9c31c7ebe81f43 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 16 Oct 2023 17:00:39 +0200 Subject: [PATCH 19/30] [Discover] Compact discover view (tabs on the left side) --- .../components/layout/discover_documents.tsx | 9 +++++++++ .../layout/discover_main_content.tsx | 16 ++++++++-------- .../discover_grid/render_custom_toolbar.scss | 8 ++++++++ .../discover_grid/render_custom_toolbar.tsx | 19 ++++++++++++++++++- .../view_mode_toggle/view_mode_toggle.tsx | 12 ++++++++++-- 5 files changed, 53 insertions(+), 11 deletions(-) diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx index 43c662333de64..d5cb0b14cf2b9 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx @@ -57,6 +57,7 @@ import { } from '../../../../components/discover_tour'; import { getRawRecordType } from '../../utils/get_raw_record_type'; import { DiscoverGridFlyout } from '../../../../components/discover_grid_flyout'; +import { getRenderCustomToolbarWithViewModeToggle } from '../../../../components/discover_grid/render_custom_toolbar'; import { useSavedSearchInitial } from '../../services/discover_state_provider'; import { useFetchMoreRecords } from './use_fetch_more_records'; @@ -89,11 +90,13 @@ export const onResize = ( }; function DiscoverDocumentsComponent({ + viewModeToggle, dataView, onAddFilter, stateContainer, onFieldEdited, }: { + viewModeToggle: React.ReactElement | undefined; dataView: DataView; onAddFilter?: DocViewFilterFn; stateContainer: DiscoverStateContainer; @@ -240,6 +243,11 @@ function DiscoverDocumentsComponent({ [dataView, onAddColumn, onAddFilter, onRemoveColumn, query, savedSearch.id, setExpandedDoc] ); + const renderCustomToolbar = useMemo( + () => getRenderCustomToolbarWithViewModeToggle(viewModeToggle), + [viewModeToggle] + ); + if (isDataViewLoading || (isEmptyDataResult && isDataLoading)) { return (
@@ -336,6 +344,7 @@ function DiscoverDocumentsComponent({ showMultiFields={uiSettings.get(SHOW_MULTIFIELDS)} maxDocFieldsDisplayed={uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)} renderDocumentView={renderDocumentView} + renderCustomToolbar={renderCustomToolbar} services={services} totalHits={totalHits} onFetchMoreRecords={onFetchMoreRecords} diff --git a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx index e241a52b1d259..be5ba9d7f7666 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx @@ -80,6 +80,10 @@ export const DiscoverMainContent = ({ const documents = useObservable(stateContainer.dataState.data$.documents$); const isDropAllowed = Boolean(onDropFieldToTable); + const viewModeToggle = !isPlainRecord ? ( + + ) : undefined; + return ( - - {!isPlainRecord && ( - - )} - + {viewMode === VIEW_MODE.AGGREGATED_LEVEL && ( + {viewModeToggle} + )} {dataState.error && ( { const { leftSide, + bottomBorder, toolbarProps: { hasRoomForGridControls, columnControl, @@ -64,7 +67,7 @@ export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.Reac gutterSize="s" justifyContent="spaceBetween" alignItems="center" - className="dscGridToolbar" + className={classnames('dscGridToolbar', { 'dscGridToolbar--bottomBorder': bottomBorder })} data-test-subj="dscGridToolbar" wrap > @@ -99,6 +102,20 @@ export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.Reac ); }; +/** + * Render custom element on the left side and all controls to the right + */ +export const getRenderCustomToolbarWithViewModeToggle = ( + viewModeToggle: React.ReactElement | undefined +): UnifiedDataTableRenderCustomToolbar => { + return (props) => + renderCustomToolbar({ + ...props, + leftSide: viewModeToggle, + bottomBorder: true, + }); +}; + /** * Render total hits number on the left side and all controls to the right * @param totalHitCount diff --git a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx index 63fcbcc40db37..ecc5bd63e8717 100644 --- a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx +++ b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx @@ -24,8 +24,11 @@ export const DocumentViewModeToggle = ({ const { euiTheme } = useEuiTheme(); const { uiSettings } = useDiscoverServices(); + const isFieldStatisticsActive = viewMode === VIEW_MODE.AGGREGATED_LEVEL; + const tabsCss = css` - padding: 0 ${euiTheme.size.s}; + padding: 0 ${isFieldStatisticsActive ? euiTheme.size.s : 0}; + margin-top: ${isFieldStatisticsActive ? '19px' : 0}; `; const showViewModeToggle = uiSettings.get(SHOW_FIELD_STATISTICS) ?? false; @@ -35,7 +38,12 @@ export const DocumentViewModeToggle = ({ } return ( - + setDiscoverViewMode(VIEW_MODE.DOCUMENT_LEVEL)} From bc95354dc98b97e8b85160a7cd607a0363444c6b Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 16 Oct 2023 18:07:14 +0200 Subject: [PATCH 20/30] [Discover] Fix types --- .../main/components/layout/discover_documents.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx index 9809367aa6c5c..9b7e9f1dead4f 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx @@ -41,6 +41,7 @@ async function mountComponent(fetchStatus: FetchStatus, hits: EsHitRecord[]) { stateContainer.dataState.data$.documents$ = documents$; const props = { + viewModeToggle: undefined, dataView: dataViewMock, onAddFilter: jest.fn(), stateContainer, From c6329f7f94f8793344b57f66663d2cbc2f980ac0 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 16 Oct 2023 18:23:51 +0200 Subject: [PATCH 21/30] [Discover] Update tests --- .../main/components/layout/discover_main_content.test.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/plugins/discover/public/application/main/components/layout/discover_main_content.test.tsx b/src/plugins/discover/public/application/main/components/layout/discover_main_content.test.tsx index 2901b49de1586..b2bd0e83ed352 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_main_content.test.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_main_content.test.tsx @@ -25,7 +25,6 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { buildDataTableRecord } from '@kbn/discover-utils'; import { DiscoverMainContent, DiscoverMainContentProps } from './discover_main_content'; import { SavedSearch, VIEW_MODE } from '@kbn/saved-search-plugin/public'; -import { DocumentViewModeToggle } from '../../../../components/view_mode_toggle'; import { searchSourceInstanceMock } from '@kbn/data-plugin/common/search/search_source/mocks'; import { DiscoverDocuments } from './discover_documents'; import { FieldStatisticsTab } from '../field_stats_table'; @@ -125,12 +124,12 @@ describe('Discover main content component', () => { describe('DocumentViewModeToggle', () => { it('should show DocumentViewModeToggle when isPlainRecord is false', async () => { const component = await mountComponent(); - expect(component.find(DocumentViewModeToggle).exists()).toBe(true); + expect(component.find(DiscoverDocuments).prop('viewModeToggle')).toBeDefined(); }); it('should not show DocumentViewModeToggle when isPlainRecord is true', async () => { const component = await mountComponent({ isPlainRecord: true }); - expect(component.find(DocumentViewModeToggle).exists()).toBe(false); + expect(component.find(DiscoverDocuments).prop('viewModeToggle')).toBeUndefined(); }); }); From 1c0cad1305910978711f8e4fcbde9d83e4bec7f8 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Tue, 17 Oct 2023 13:05:02 +0200 Subject: [PATCH 22/30] [Discover] Update tabs styles. Better placement for callouts. Fix for the legacy table. --- .../src/components/data_table.scss | 4 - .../data_table_document_selection.tsx | 5 +- .../components/layout/discover_documents.tsx | 167 +++++-- .../components/layout/discover_layout.scss | 8 +- .../layout/discover_main_content.tsx | 52 +-- .../render_custom_toolbar.test.tsx.snap | 440 +++++++++++------- .../discover_grid/render_custom_toolbar.scss | 11 +- .../render_custom_toolbar.test.tsx | 26 +- .../discover_grid/render_custom_toolbar.tsx | 92 ++-- .../view_mode_toggle/view_mode_toggle.tsx | 16 +- 10 files changed, 508 insertions(+), 313 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss index 90157319a559f..048a641cf7562 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -54,10 +54,6 @@ .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions { background-color: tintOrShade($euiColorLightShade, 50%, 0); } - - .euiDataGrid__scrollOverlay .euiDataGrid__scrollBarOverlayRight { - background-color: transparent; // otherwise the grid scrollbar border visually conflicts with the grid toolbar controls - } } .unifiedDataTable__table { diff --git a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx index 3166871711599..4f660009a232c 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx @@ -200,8 +200,9 @@ export function DataTableDocumentToolbarBtn({ diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx index d5cb0b14cf2b9..080250eb1a55a 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx @@ -13,6 +13,7 @@ import { EuiScreenReaderOnly, EuiSpacer, EuiText, + EuiHorizontalRule, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { css } from '@emotion/react'; @@ -38,6 +39,8 @@ import { SHOW_MULTIFIELDS, SORT_DEFAULT_ORDER_SETTING, } from '@kbn/discover-utils'; +import { i18n } from '@kbn/i18n'; +import useObservable from 'react-use/lib/useObservable'; import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types'; import { DiscoverGrid } from '../../../../components/discover_grid'; import { getDefaultRowsPerPage } from '../../../../../common/constants'; @@ -60,6 +63,8 @@ import { DiscoverGridFlyout } from '../../../../components/discover_grid_flyout' import { getRenderCustomToolbarWithViewModeToggle } from '../../../../components/discover_grid/render_custom_toolbar'; import { useSavedSearchInitial } from '../../services/discover_state_provider'; import { useFetchMoreRecords } from './use_fetch_more_records'; +import { ErrorCallout } from '../../../../components/common/error_callout'; +import { SelectedVSAvailableCallout } from './selected_vs_available_callout'; const containerStyles = css` position: relative; @@ -243,20 +248,96 @@ function DiscoverDocumentsComponent({ [dataView, onAddColumn, onAddFilter, onRemoveColumn, query, savedSearch.id, setExpandedDoc] ); + const dataState = useDataState(stateContainer.dataState.data$.main$); + const documents = useObservable(stateContainer.dataState.data$.documents$); + + const callouts = useMemo( + () => ( + <> + {dataState.error && ( + + )} + + {!!documentState.interceptedWarnings?.length && ( + + )} + + ), + [ + dataState.error, + isTextBasedQuery, + currentColumns, + documents?.textBasedQueryColumns, + documentState.interceptedWarnings, + ] + ); + + const gridAnnouncementCallout = useMemo(() => { + if (hideAnnouncements || isLegacy) { + return null; + } + + return !isTextBasedQuery ? ( + + + + ) : null; + }, [hideAnnouncements, isLegacy, isTextBasedQuery]); + + const loadingIndicator = useMemo( + () => + isDataLoading ? ( + + ) : null, + [isDataLoading] + ); + const renderCustomToolbar = useMemo( - () => getRenderCustomToolbarWithViewModeToggle(viewModeToggle), - [viewModeToggle] + () => + getRenderCustomToolbarWithViewModeToggle( + viewModeToggle, + <> + {callouts} + {gridAnnouncementCallout} + {loadingIndicator} + + ), + [viewModeToggle, callouts, gridAnnouncementCallout, loadingIndicator] ); if (isDataViewLoading || (isEmptyDataResult && isDataLoading)) { return ( -
- - - - - -
+ <> + +
+ + + + + +
+ ); } @@ -267,42 +348,39 @@ function DiscoverDocumentsComponent({ - {!!documentState.interceptedWarnings?.length && ( - - )} - {isLegacy && rows && rows.length > 0 && ( + {isLegacy && ( <> - {!hideAnnouncements && } - + {viewModeToggle} +
+ {callouts} + {rows && rows.length > 0 && ( + <> + {!hideAnnouncements && } + + + )} + {loadingIndicator} +
)} {!isLegacy && ( <> - {!hideAnnouncements && !isTextBasedQuery && ( - - - - )}
)} - {isDataLoading && ( - - )} ); } diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.scss b/src/plugins/discover/public/application/main/components/layout/discover_layout.scss index d3978fe1c1d82..cfa719d97e5ec 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_layout.scss +++ b/src/plugins/discover/public/application/main/components/layout/discover_layout.scss @@ -53,10 +53,6 @@ discover-app { position: relative; overflow: hidden; height: 100%; - - .euiDataGrid__controls { - border-top: none; - } } .dscPageContent--centered { @@ -73,6 +69,10 @@ discover-app { min-height: 0; } +.dscTable__legacyDocsTab { + position: relative; // for placing a loading indicator correctly +} + .dscDocuments__loading { display: flex; flex-direction: column; diff --git a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx index be5ba9d7f7666..f02de7e35c78f 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx @@ -8,8 +8,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { DragDrop, type DropType, DropOverlayWrapper } from '@kbn/dom-drag-drop'; -import useObservable from 'react-use/lib/useObservable'; -import React, { useCallback } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { DataView } from '@kbn/data-views-plugin/common'; import { METRIC_TYPE } from '@kbn/analytics'; import { i18n } from '@kbn/i18n'; @@ -21,9 +20,6 @@ import { DiscoverStateContainer } from '../../services/discover_state'; import { FieldStatisticsTab } from '../field_stats_table'; import { DiscoverDocuments } from './discover_documents'; import { DOCUMENTS_VIEW_CLICK, FIELD_STATISTICS_VIEW_CLICK } from '../field_stats_table/constants'; -import { ErrorCallout } from '../../../../components/common/error_callout'; -import { useDataState } from '../../hooks/use_data_state'; -import { SelectedVSAvailableCallout } from './selected_vs_available_callout'; const DROP_PROPS = { value: { @@ -76,13 +72,13 @@ export const DiscoverMainContent = ({ [trackUiMetric, stateContainer] ); - const dataState = useDataState(stateContainer.dataState.data$.main$); - const documents = useObservable(stateContainer.dataState.data$.documents$); const isDropAllowed = Boolean(onDropFieldToTable); - const viewModeToggle = !isPlainRecord ? ( - - ) : undefined; + const viewModeToggle = useMemo(() => { + return !isPlainRecord ? ( + + ) : undefined; + }, [viewMode, setDiscoverViewMode, isPlainRecord]); return ( - {viewMode === VIEW_MODE.AGGREGATED_LEVEL && ( - {viewModeToggle} - )} - {dataState.error && ( - - )} - - {viewMode === VIEW_MODE.DOCUMENT_LEVEL ? ( ) : ( - + <> + {viewModeToggle} + + )} diff --git a/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap b/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap index f1dccdf1221bb..c33f782ba5afd 100644 --- a/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap +++ b/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap @@ -1,207 +1,321 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renderCustomToolbar should render correctly for embeddable 1`] = ` - - + - - - - - - -
+ + + + + - additional -
- - -
+ additional +
+ + - column -
- +
+ column +
+ + +
+ columnSorting +
+ +
- columnSorting +
+ keyboard +
+
+ display +
+
+ fullScreen +
- - -
-
- keyboard -
-
- display -
-
- fullScreen -
-
- - - - + + + + `; exports[`renderCustomToolbar should render correctly for smaller screens 1`] = ` - - - + -
-
- keyboard -
-
- display -
-
- fullScreen -
-
- - -`; - -exports[`renderCustomToolbar should render successfully 1`] = ` - - - + + - +
- column +
+ keyboard +
+
+ display +
+
+ fullScreen +
- -
+ + + +`; + +exports[`renderCustomToolbar should render correctly with an element 1`] = ` + + + +
+ left +
+ + + + + - columnSorting -
- +
+ additional +
+ + +
+ column +
+ + +
+ columnSorting +
+ +
- additional +
+ keyboard +
+
+ display +
+
+ fullScreen +
- - - - + + +
- + bottom +
+
+ +`; + +exports[`renderCustomToolbar should render successfully 1`] = ` + + + - -
-
+ - keyboard -
-
+ column +
+ + - display -
+
+ columnSorting +
+ + +
+ additional +
+ + + + + + +
- fullScreen +
+ keyboard +
+
+ display +
+
+ fullScreen +
- - - - - + + + + + `; diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss index 2353b70454523..8926b223eda63 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss @@ -1,9 +1,6 @@ .dscGridToolbar { padding: $euiSizeS; - - &--bottomBorder { - border-bottom: $euiBorderThin; - } + border-bottom: $euiBorderThin; } .dscGridToolbarControlButton .euiDataGrid__controlBtn { @@ -61,5 +58,9 @@ } .dscGridToolbar .euiTabs { - transform: translateY(10px); + transform: translateY(9px); +} + +.dscGridToolbarBottom { + position: relative; // for placing a loading indicator correctly } diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx index 249743fb8b708..627fc1c9a881d 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx @@ -6,7 +6,12 @@ * Side Public License, v 1. */ -import { renderCustomToolbar, getRenderCustomToolbarInEmbeddable } from './render_custom_toolbar'; +import React from 'react'; +import { + renderCustomToolbar, + getRenderCustomToolbarWithViewModeToggle, + getRenderCustomToolbarInEmbeddable, +} from './render_custom_toolbar'; describe('renderCustomToolbar', () => { it('should render successfully', () => { @@ -41,6 +46,25 @@ describe('renderCustomToolbar', () => { ).toMatchSnapshot(); }); + it('should render correctly with an element', () => { + expect( + getRenderCustomToolbarWithViewModeToggle( +
left
, +
bottom
+ )({ + toolbarProps: { + hasRoomForGridControls: true, + columnControl: 'column', + columnSortingControl: 'columnSorting', + displayControl: 'display', + fullScreenControl: 'fullScreen', + keyboardShortcutsControl: 'keyboard', + }, + gridProps: { additionalControls: 'additional' }, + }) + ).toMatchSnapshot(); + }); + it('should render correctly for embeddable', () => { expect( getRenderCustomToolbarInEmbeddable(500)({ diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx index 467042d89a834..914236eaf8814 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx @@ -7,7 +7,6 @@ */ import React from 'react'; -import classnames from 'classnames'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import type { UnifiedDataTableRenderCustomToolbarProps, @@ -18,13 +17,13 @@ import './render_custom_toolbar.scss'; interface RenderCustomToolbarProps extends UnifiedDataTableRenderCustomToolbarProps { leftSide?: React.ReactElement; - bottomBorder?: boolean; + bottomSection?: React.ReactElement; } export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.ReactElement => { const { leftSide, - bottomBorder, + bottomSection, toolbarProps: { hasRoomForGridControls, columnControl, @@ -62,43 +61,52 @@ export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.Reac ) : null; return ( - - - {leftSide || ( + <> + + + {leftSide || ( + + {buttons} + + )} + + - {buttons} + {Boolean(leftSide) && buttons} + {(keyboardShortcutsControl || displayControl || fullScreenControl) && ( + +
+ {keyboardShortcutsControl && ( +
+ {keyboardShortcutsControl} +
+ )} + {displayControl && ( +
{displayControl}
+ )} + {fullScreenControl && ( +
{fullScreenControl}
+ )} +
+ + )} - )} - - - - {Boolean(leftSide) && buttons} - {(keyboardShortcutsControl || displayControl || fullScreenControl) && ( - -
- {keyboardShortcutsControl && ( -
{keyboardShortcutsControl}
- )} - {displayControl && ( -
{displayControl}
- )} - {fullScreenControl && ( -
{fullScreenControl}
- )} -
- - )} - - - + + + {bottomSection ? ( +
+ {bottomSection} +
+ ) : null} + ); }; @@ -106,13 +114,15 @@ export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.Reac * Render custom element on the left side and all controls to the right */ export const getRenderCustomToolbarWithViewModeToggle = ( - viewModeToggle: React.ReactElement | undefined + viewModeToggle: React.ReactElement | undefined, + callouts: React.ReactElement | undefined ): UnifiedDataTableRenderCustomToolbar => { + const reservedSpace = <>; return (props) => renderCustomToolbar({ ...props, - leftSide: viewModeToggle, - bottomBorder: true, + leftSide: viewModeToggle || reservedSpace, + bottomSection: callouts, }); }; diff --git a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx index ecc5bd63e8717..ea6fce02db5bc 100644 --- a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx +++ b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx @@ -6,11 +6,11 @@ * Side Public License, v 1. */ -import React from 'react'; +import React, { useMemo } from 'react'; import { EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { css } from '@emotion/react'; -import { SHOW_FIELD_STATISTICS } from '@kbn/discover-utils'; +import { DOC_TABLE_LEGACY, SHOW_FIELD_STATISTICS } from '@kbn/discover-utils'; import { VIEW_MODE } from '../../../common/constants'; import { useDiscoverServices } from '../../hooks/use_discover_services'; @@ -23,12 +23,12 @@ export const DocumentViewModeToggle = ({ }) => { const { euiTheme } = useEuiTheme(); const { uiSettings } = useDiscoverServices(); - - const isFieldStatisticsActive = viewMode === VIEW_MODE.AGGREGATED_LEVEL; + const isLegacy = useMemo(() => uiSettings.get(DOC_TABLE_LEGACY), [uiSettings]); + const includesNormalTabsStyle = viewMode === VIEW_MODE.AGGREGATED_LEVEL || isLegacy; const tabsCss = css` - padding: 0 ${isFieldStatisticsActive ? euiTheme.size.s : 0}; - margin-top: ${isFieldStatisticsActive ? '19px' : 0}; + padding: 0 ${includesNormalTabsStyle ? euiTheme.size.s : 0}; + margin-top: ${includesNormalTabsStyle ? '17px' : 0}; `; const showViewModeToggle = uiSettings.get(SHOW_FIELD_STATISTICS) ?? false; @@ -39,10 +39,10 @@ export const DocumentViewModeToggle = ({ return ( Date: Tue, 17 Oct 2023 14:52:52 +0200 Subject: [PATCH 23/30] [Discover] Fix legacy view. Update tests. --- .../layout/discover_documents.test.tsx | 4 +- .../components/layout/discover_documents.tsx | 134 +++++++++--------- .../components/layout/discover_layout.scss | 4 - .../layout/discover_main_content.test.tsx | 6 + 4 files changed, 78 insertions(+), 70 deletions(-) diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx index 9b7e9f1dead4f..187c2b4719249 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx @@ -41,7 +41,7 @@ async function mountComponent(fetchStatus: FetchStatus, hits: EsHitRecord[]) { stateContainer.dataState.data$.documents$ = documents$; const props = { - viewModeToggle: undefined, + viewModeToggle:
test
, dataView: dataViewMock, onAddFilter: jest.fn(), stateContainer, @@ -79,6 +79,8 @@ describe('Discover documents layout', () => { expect(component.find('.dscDocuments__loading').exists()).toBeFalsy(); expect(component.find('.dscTable').exists()).toBeTruthy(); expect(findTestSubject(component, 'dscGridToolbar').exists()).toBe(true); + expect(findTestSubject(component, 'dscGridToolbarBottom').exists()).toBe(true); + expect(findTestSubject(component, 'viewModeToggle').exists()).toBe(true); }); test('should set rounded width to state on resize column', () => { diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx index 080250eb1a55a..a0cb4097bdf46 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx @@ -342,17 +342,21 @@ function DiscoverDocumentsComponent({ } return ( - - -

- -

- + <> {isLegacy && ( <> {viewModeToggle} -
- {callouts} + {callouts} + + )} + + +

+ +

+ + {isLegacy && ( + <> {rows && rows.length > 0 && ( <> {!hideAnnouncements && } @@ -376,63 +380,63 @@ function DiscoverDocumentsComponent({ )} {loadingIndicator} -
- - )} - {!isLegacy && ( - <> -
- - - -
- - )} - + + )} + {!isLegacy && ( + <> +
+ + + +
+ + )} + + ); } diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.scss b/src/plugins/discover/public/application/main/components/layout/discover_layout.scss index cfa719d97e5ec..88da97d6f5333 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_layout.scss +++ b/src/plugins/discover/public/application/main/components/layout/discover_layout.scss @@ -69,10 +69,6 @@ discover-app { min-height: 0; } -.dscTable__legacyDocsTab { - position: relative; // for placing a loading indicator correctly -} - .dscDocuments__loading { display: flex; flex-direction: column; diff --git a/src/plugins/discover/public/application/main/components/layout/discover_main_content.test.tsx b/src/plugins/discover/public/application/main/components/layout/discover_main_content.test.tsx index b2bd0e83ed352..b12208cc76299 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_main_content.test.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_main_content.test.tsx @@ -25,6 +25,7 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { buildDataTableRecord } from '@kbn/discover-utils'; import { DiscoverMainContent, DiscoverMainContentProps } from './discover_main_content'; import { SavedSearch, VIEW_MODE } from '@kbn/saved-search-plugin/public'; +import { DocumentViewModeToggle } from '../../../../components/view_mode_toggle'; import { searchSourceInstanceMock } from '@kbn/data-plugin/common/search/search_source/mocks'; import { DiscoverDocuments } from './discover_documents'; import { FieldStatisticsTab } from '../field_stats_table'; @@ -131,6 +132,11 @@ describe('Discover main content component', () => { const component = await mountComponent({ isPlainRecord: true }); expect(component.find(DiscoverDocuments).prop('viewModeToggle')).toBeUndefined(); }); + + it('should show DocumentViewModeToggle for Field Statistics', async () => { + const component = await mountComponent({ viewMode: VIEW_MODE.AGGREGATED_LEVEL }); + expect(component.find(DocumentViewModeToggle).exists()).toBe(true); + }); }); describe('Document view', () => { From fd7d53b0cee8c9d97b828b60c9ad91194c2725fe Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Tue, 17 Oct 2023 15:36:14 +0200 Subject: [PATCH 24/30] [Discover] Add functional tests --- .../document_explorer_callout.tsx | 1 + .../document_explorer_update_callout.tsx | 1 + .../apps/discover/group3/_view_mode_toggle.ts | 130 ++++++++++++++++++ test/functional/apps/discover/group3/index.ts | 1 + 4 files changed, 133 insertions(+) create mode 100644 test/functional/apps/discover/group3/_view_mode_toggle.ts diff --git a/src/plugins/discover/public/application/main/components/document_explorer_callout/document_explorer_callout.tsx b/src/plugins/discover/public/application/main/components/document_explorer_callout/document_explorer_callout.tsx index a18389806f8f9..9822f0081fd30 100644 --- a/src/plugins/discover/public/application/main/components/document_explorer_callout/document_explorer_callout.tsx +++ b/src/plugins/discover/public/application/main/components/document_explorer_callout/document_explorer_callout.tsx @@ -60,6 +60,7 @@ export const DocumentExplorerCallout = () => { return ( } iconType="search" diff --git a/src/plugins/discover/public/application/main/components/document_explorer_callout/document_explorer_update_callout.tsx b/src/plugins/discover/public/application/main/components/document_explorer_callout/document_explorer_update_callout.tsx index 617790c28907b..82ed197d2977b 100644 --- a/src/plugins/discover/public/application/main/components/document_explorer_callout/document_explorer_update_callout.tsx +++ b/src/plugins/discover/public/application/main/components/document_explorer_callout/document_explorer_update_callout.tsx @@ -51,6 +51,7 @@ export const DocumentExplorerUpdateCallout = () => { return ( } iconType="tableDensityNormal" diff --git a/test/functional/apps/discover/group3/_view_mode_toggle.ts b/test/functional/apps/discover/group3/_view_mode_toggle.ts new file mode 100644 index 0000000000000..c47aad66c9a01 --- /dev/null +++ b/test/functional/apps/discover/group3/_view_mode_toggle.ts @@ -0,0 +1,130 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import expect from '@kbn/expect'; +import { FtrProviderContext } from '../ftr_provider_context'; + +export default function ({ getService, getPageObjects }: FtrProviderContext) { + const PageObjects = getPageObjects([ + 'common', + 'discover', + 'timePicker', + 'dashboard', + 'unifiedFieldList', + 'header', + ]); + const esArchiver = getService('esArchiver'); + const retry = getService('retry'); + const testSubjects = getService('testSubjects'); + const queryBar = getService('queryBar'); + const kibanaServer = getService('kibanaServer'); + const security = getService('security'); + const defaultSettings = { + defaultIndex: 'logstash-*', + }; + + describe('discover view mode toggle', function () { + before(async () => { + await security.testUser.setRoles(['kibana_admin', 'test_logstash_reader']); + await esArchiver.loadIfNeeded('test/functional/fixtures/es_archiver/logstash_functional'); + await kibanaServer.importExport.load('test/functional/fixtures/kbn_archiver/discover'); + }); + + after(async () => { + await kibanaServer.importExport.unload('test/functional/fixtures/kbn_archiver/discover'); + await esArchiver.unload('test/functional/fixtures/es_archiver/logstash_functional'); + await kibanaServer.savedObjects.cleanStandardList(); + }); + + [true, false].forEach((useLegacyTable) => { + describe(`isLegacy: ${useLegacyTable}`, function () { + before(async function () { + await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings(); + await kibanaServer.uiSettings.update({ + ...defaultSettings, + 'doc_table:legacy': useLegacyTable, + }); + await PageObjects.common.navigateToApp('discover'); + await PageObjects.discover.waitUntilSearchingHasFinished(); + }); + + after(async () => { + await kibanaServer.uiSettings.replace({}); + }); + + it('should show Documents tab', async () => { + await testSubjects.existOrFail('dscViewModeToggle'); + + if (!useLegacyTable) { + await testSubjects.existOrFail('dscGridToolbar'); + } + + const documentsTab = await testSubjects.find('dscViewModeDocumentButton'); + expect(await documentsTab.getAttribute('aria-selected')).to.be('true'); + }); + + it('should show Document Explorer info callout', async () => { + await testSubjects.existOrFail( + useLegacyTable ? 'dscDocumentExplorerLegacyCallout' : 'dscDocumentExplorerTourCallout' + ); + }); + + it('should show an error callout', async () => { + await queryBar.setQuery('@message::'); // invalid + await queryBar.submitQuery(); + await PageObjects.header.waitUntilLoadingHasFinished(); + + await testSubjects.existOrFail('discoverMainError'); + + await queryBar.clearQuery(); + await queryBar.submitQuery(); + await PageObjects.header.waitUntilLoadingHasFinished(); + + await testSubjects.missingOrFail('discoverMainError'); + }); + + it('should show Field Statistics tab', async () => { + await testSubjects.click('dscViewModeFieldStatsButton'); + + await retry.try(async () => { + const fieldStatsTab = await testSubjects.find('dscViewModeFieldStatsButton'); + expect(await fieldStatsTab.getAttribute('aria-selected')).to.be('true'); + }); + + await testSubjects.existOrFail('dscViewModeToggle'); + }); + + it('should not show view mode toggle for text-based searches', async () => { + await testSubjects.click('dscViewModeDocumentButton'); + + await retry.try(async () => { + const documentsTab = await testSubjects.find('dscViewModeDocumentButton'); + expect(await documentsTab.getAttribute('aria-selected')).to.be('true'); + }); + + await testSubjects.existOrFail('dscViewModeToggle'); + + await PageObjects.discover.selectTextBaseLang(); + + await testSubjects.missingOrFail('dscViewModeToggle'); + + if (!useLegacyTable) { + await testSubjects.existOrFail('dscGridToolbar'); + } + }); + + it('should show text-based columns callout', async () => { + await testSubjects.missingOrFail('dscSelectedColumnsCallout'); + await PageObjects.unifiedFieldList.clickFieldListItemAdd('extension'); + await PageObjects.header.waitUntilLoadingHasFinished(); + await testSubjects.existOrFail('dscSelectedColumnsCallout'); + }); + }); + }); + }); +} diff --git a/test/functional/apps/discover/group3/index.ts b/test/functional/apps/discover/group3/index.ts index 3a10a8ec6f768..7a2628406096c 100644 --- a/test/functional/apps/discover/group3/index.ts +++ b/test/functional/apps/discover/group3/index.ts @@ -23,5 +23,6 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) { loadTestFile(require.resolve('./_drag_drop')); loadTestFile(require.resolve('./_sidebar')); loadTestFile(require.resolve('./_request_counts')); + loadTestFile(require.resolve('./_view_mode_toggle')); }); } From 1651c8aa4236b0d3244bede747d03db62bcf4989 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Tue, 17 Oct 2023 16:09:09 +0200 Subject: [PATCH 25/30] [Discover] Update code style --- .../components/layout/discover_documents.tsx | 20 +++-- .../render_custom_toolbar.test.tsx.snap | 84 ------------------- .../render_custom_toolbar.test.tsx | 30 ++----- .../discover_grid/render_custom_toolbar.tsx | 33 ++------ .../public/embeddable/saved_search_grid.tsx | 11 ++- 5 files changed, 34 insertions(+), 144 deletions(-) diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx index a0cb4097bdf46..944198f815af1 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx @@ -60,7 +60,7 @@ import { } from '../../../../components/discover_tour'; import { getRawRecordType } from '../../utils/get_raw_record_type'; import { DiscoverGridFlyout } from '../../../../components/discover_grid_flyout'; -import { getRenderCustomToolbarWithViewModeToggle } from '../../../../components/discover_grid/render_custom_toolbar'; +import { getRenderCustomToolbarWithElements } from '../../../../components/discover_grid/render_custom_toolbar'; import { useSavedSearchInitial } from '../../services/discover_state_provider'; import { useFetchMoreRecords } from './use_fetch_more_records'; import { ErrorCallout } from '../../../../components/common/error_callout'; @@ -315,14 +315,16 @@ function DiscoverDocumentsComponent({ const renderCustomToolbar = useMemo( () => - getRenderCustomToolbarWithViewModeToggle( - viewModeToggle, - <> - {callouts} - {gridAnnouncementCallout} - {loadingIndicator} - - ), + getRenderCustomToolbarWithElements({ + leftSide: viewModeToggle, + bottomSection: ( + <> + {callouts} + {gridAnnouncementCallout} + {loadingIndicator} + + ), + }), [viewModeToggle, callouts, gridAnnouncementCallout, loadingIndicator] ); diff --git a/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap b/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap index c33f782ba5afd..9f2af58f1dccb 100644 --- a/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap +++ b/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap @@ -1,89 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renderCustomToolbar should render correctly for embeddable 1`] = ` - - - - - - - - - -
- additional -
- - -
- column -
- - -
- columnSorting -
- - - -
-
- keyboard -
-
- display -
-
- fullScreen -
-
- - - - - -`; - exports[`renderCustomToolbar should render correctly for smaller screens 1`] = ` { it('should render successfully', () => { @@ -48,26 +44,10 @@ describe('renderCustomToolbar', () => { it('should render correctly with an element', () => { expect( - getRenderCustomToolbarWithViewModeToggle( -
left
, -
bottom
- )({ - toolbarProps: { - hasRoomForGridControls: true, - columnControl: 'column', - columnSortingControl: 'columnSorting', - displayControl: 'display', - fullScreenControl: 'fullScreen', - keyboardShortcutsControl: 'keyboard', - }, - gridProps: { additionalControls: 'additional' }, - }) - ).toMatchSnapshot(); - }); - - it('should render correctly for embeddable', () => { - expect( - getRenderCustomToolbarInEmbeddable(500)({ + getRenderCustomToolbarWithElements({ + leftSide:
left
, + bottomSection:
bottom
, + })({ toolbarProps: { hasRoomForGridControls: true, columnControl: 'column', diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx index 914236eaf8814..2baeb4c287a16 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx @@ -12,7 +12,6 @@ import type { UnifiedDataTableRenderCustomToolbarProps, UnifiedDataTableRenderCustomToolbar, } from '@kbn/unified-data-table'; -import { TotalDocuments } from '../../application/main/components/total_documents/total_documents'; import './render_custom_toolbar.scss'; interface RenderCustomToolbarProps extends UnifiedDataTableRenderCustomToolbarProps { @@ -113,32 +112,18 @@ export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.Reac /** * Render custom element on the left side and all controls to the right */ -export const getRenderCustomToolbarWithViewModeToggle = ( - viewModeToggle: React.ReactElement | undefined, - callouts: React.ReactElement | undefined -): UnifiedDataTableRenderCustomToolbar => { +export const getRenderCustomToolbarWithElements = ({ + leftSide, + bottomSection, +}: { + leftSide?: React.ReactElement; + bottomSection?: React.ReactElement; +}): UnifiedDataTableRenderCustomToolbar => { const reservedSpace = <>; return (props) => renderCustomToolbar({ ...props, - leftSide: viewModeToggle || reservedSpace, - bottomSection: callouts, - }); -}; - -/** - * Render total hits number on the left side and all controls to the right - * @param totalHitCount - */ -export const getRenderCustomToolbarInEmbeddable = ( - totalHitCount: number | undefined -): UnifiedDataTableRenderCustomToolbar => { - return (props) => - renderCustomToolbar({ - ...props, - leftSide: - typeof totalHitCount === 'number' ? ( - - ) : undefined, + leftSide: leftSide || reservedSpace, + bottomSection, }); }; diff --git a/src/plugins/discover/public/embeddable/saved_search_grid.tsx b/src/plugins/discover/public/embeddable/saved_search_grid.tsx index 51ab04538d45b..2f821fb6c42f4 100644 --- a/src/plugins/discover/public/embeddable/saved_search_grid.tsx +++ b/src/plugins/discover/public/embeddable/saved_search_grid.tsx @@ -19,7 +19,8 @@ import { DiscoverGrid } from '../components/discover_grid'; import './saved_search_grid.scss'; import { DiscoverGridFlyout } from '../components/discover_grid_flyout'; import { SavedSearchEmbeddableBase } from './saved_search_embeddable_base'; -import { getRenderCustomToolbarInEmbeddable } from '../components/discover_grid/render_custom_toolbar'; +import { getRenderCustomToolbarWithElements } from '../components/discover_grid/render_custom_toolbar'; +import { TotalDocuments } from '../application/main/components/total_documents/total_documents'; export interface DiscoverGridEmbeddableProps extends UnifiedDataTableProps { totalHitCount?: number; @@ -70,7 +71,13 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) { ); const renderCustomToolbar = useMemo( - () => getRenderCustomToolbarInEmbeddable(props.totalHitCount), + () => + getRenderCustomToolbarWithElements({ + leftSide: + typeof props.totalHitCount === 'number' ? ( + + ) : undefined, + }), [props.totalHitCount] ); From da8e417dcce3f03531ae074dc5304a53e2fc9779 Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Tue, 17 Oct 2023 22:58:21 -0300 Subject: [PATCH 26/30] Get rid of border below tabs and replace resize handle with a border, as well as other touchups --- .../src/panels_resizable.tsx | 18 ++++++++-- .../src/components/data_table.scss | 4 +++ .../components/layout/discover_documents.tsx | 18 ++++------ .../components/layout/discover_layout.scss | 10 ------ .../layout/discover_main_content.tsx | 3 +- .../layout/discover_resizable_layout.tsx | 1 - .../discover_grid/render_custom_toolbar.scss | 9 ++--- .../components/doc_table/_doc_table.scss | 1 + .../view_mode_toggle/view_mode_toggle.tsx | 17 ++++----- .../saved_search_embeddable_base.tsx | 35 ++++++++++--------- 10 files changed, 57 insertions(+), 59 deletions(-) diff --git a/packages/kbn-resizable-layout/src/panels_resizable.tsx b/packages/kbn-resizable-layout/src/panels_resizable.tsx index 968e5203047fe..300c9130b8100 100644 --- a/packages/kbn-resizable-layout/src/panels_resizable.tsx +++ b/packages/kbn-resizable-layout/src/panels_resizable.tsx @@ -64,6 +64,17 @@ export const PanelsResizable = ({ () => setResizeWithPortalsHackIsResizing(false), [] ); + const baseButtonCss = css` + background-color: transparent !important; + gap: 0 !important; + + &:not(:hover):not(:focus) { + &:before, + &:after { + width: 0; + } + } + `; const defaultButtonCss = css` z-index: 3; `; @@ -207,9 +218,10 @@ export const PanelsResizable = ({ - -
- - - - - -
- +
+ + + + + +
); } diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.scss b/src/plugins/discover/public/application/main/components/layout/discover_layout.scss index 88da97d6f5333..55972b4f7f629 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_layout.scss +++ b/src/plugins/discover/public/application/main/components/layout/discover_layout.scss @@ -32,16 +32,6 @@ discover-app { height: 100%; } -.dscSidebarResizeButton { - background-color: transparent !important; - - &:not(:hover):not(:focus) { - &:before, &:after { - width: 0; - } - } -} - .dscPageContent__wrapper { overflow: hidden; // Ensures horizontal scroll of table display: flex; diff --git a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx index f02de7e35c78f..b828a51586498 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui'; import { DragDrop, type DropType, DropOverlayWrapper } from '@kbn/dom-drag-drop'; import React, { useCallback, useMemo } from 'react'; import { DataView } from '@kbn/data-views-plugin/common'; @@ -96,6 +96,7 @@ export const DiscoverMainContent = ({ responsive={false} data-test-subj="dscMainContent" > + {viewMode === VIEW_MODE.DOCUMENT_LEVEL ? ( } flexPanel={} - resizeButtonClassName="dscSidebarResizeButton" data-test-subj="discoverLayout" onFixedPanelSizeChange={setSidebarWidth} /> diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss index 8926b223eda63..fddb367e4a788 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss @@ -1,6 +1,5 @@ .dscGridToolbar { - padding: $euiSizeS; - border-bottom: $euiBorderThin; + padding: $euiSizeS $euiSizeS 0 $euiSizeS; } .dscGridToolbarControlButton .euiDataGrid__controlBtn { @@ -33,7 +32,7 @@ } .dscGridToolbarControlGroup { - border: $euiBorderThin; + box-shadow: inset 0 0 0 $euiBorderWidthThin $euiBorderColor; border-radius: $euiBorderRadiusSmall; display: inline-flex; align-items: stretch; @@ -57,10 +56,6 @@ } } -.dscGridToolbar .euiTabs { - transform: translateY(9px); -} - .dscGridToolbarBottom { position: relative; // for placing a loading indicator correctly } diff --git a/src/plugins/discover/public/components/doc_table/_doc_table.scss b/src/plugins/discover/public/components/doc_table/_doc_table.scss index 4553cdc05fdad..8a9b629a9694b 100644 --- a/src/plugins/discover/public/components/doc_table/_doc_table.scss +++ b/src/plugins/discover/public/components/doc_table/_doc_table.scss @@ -4,6 +4,7 @@ // stylelint-disable selector-no-qualifying-type .kbnDocTableWrapper { @include euiScrollBar; + @include euiOverflowShadow; overflow: auto; display: flex; flex: 1 1 100%; diff --git a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx index ea6fce02db5bc..79c9213e76395 100644 --- a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx +++ b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx @@ -26,9 +26,13 @@ export const DocumentViewModeToggle = ({ const isLegacy = useMemo(() => uiSettings.get(DOC_TABLE_LEGACY), [uiSettings]); const includesNormalTabsStyle = viewMode === VIEW_MODE.AGGREGATED_LEVEL || isLegacy; + const tabsPadding = includesNormalTabsStyle ? euiTheme.size.s : 0; const tabsCss = css` - padding: 0 ${includesNormalTabsStyle ? euiTheme.size.s : 0}; - margin-top: ${includesNormalTabsStyle ? '17px' : 0}; + padding: ${tabsPadding} ${tabsPadding} 0 ${tabsPadding}; + + .euiTab__content { + line-height: ${euiTheme.size.xl}; + } `; const showViewModeToggle = uiSettings.get(SHOW_FIELD_STATISTICS) ?? false; @@ -38,16 +42,10 @@ export const DocumentViewModeToggle = ({ } return ( - + setDiscoverViewMode(VIEW_MODE.DOCUMENT_LEVEL)} - className="dscViewModeToggle__tab" data-test-subj="dscViewModeDocumentButton" > @@ -55,7 +53,6 @@ export const DocumentViewModeToggle = ({ setDiscoverViewMode(VIEW_MODE.AGGREGATED_LEVEL)} - className="dscViewModeToggle__tab" data-test-subj="dscViewModeFieldStatsButton" > data-test-subj={dataTestSubj} > {isLoading && } - - - {Boolean(prepend) && {prepend}} - {!!totalHitCount && ( - - - - )} - - + {(prepend || totalHitCount) && ( + + + {Boolean(prepend) && {prepend}} + + {!!totalHitCount && ( + + + + )} + + + )} {children} From f636952bcd25a268c858586bc49397038eefde13 Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Wed, 18 Oct 2023 22:48:37 -0300 Subject: [PATCH 27/30] Hide divider when chart is hidden, and increase padding below toolbar --- .../main/components/layout/discover_main_content.tsx | 5 ++++- .../components/discover_grid/render_custom_toolbar.scss | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx index b828a51586498..8b6ff5880d3dc 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx @@ -20,6 +20,7 @@ import { DiscoverStateContainer } from '../../services/discover_state'; import { FieldStatisticsTab } from '../field_stats_table'; import { DiscoverDocuments } from './discover_documents'; import { DOCUMENTS_VIEW_CLICK, FIELD_STATISTICS_VIEW_CLICK } from '../field_stats_table/constants'; +import { useAppStateSelector } from '../../services/discover_app_state_container'; const DROP_PROPS = { value: { @@ -80,6 +81,8 @@ export const DiscoverMainContent = ({ ) : undefined; }, [viewMode, setDiscoverViewMode, isPlainRecord]); + const showChart = useAppStateSelector((state) => !state.hideChart); + return ( - + {showChart && } {viewMode === VIEW_MODE.DOCUMENT_LEVEL ? ( Date: Thu, 19 Oct 2023 09:22:46 +0200 Subject: [PATCH 28/30] [Discover] Clean up translations --- x-pack/plugins/translations/translations/fr-FR.json | 1 - x-pack/plugins/translations/translations/ja-JP.json | 1 - x-pack/plugins/translations/translations/zh-CN.json | 1 - 3 files changed, 3 deletions(-) diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index f591e4e4cd68a..402105443e6c5 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -2445,7 +2445,6 @@ "unifiedDataTable.tableHeader.timeFieldIconTooltipAriaLabel": "{timeFieldName} – Ce champ représente l'heure à laquelle les événements se sont produits.", "unifiedDataTable.searchGenerationWithDescription": "Tableau généré par la recherche {searchTitle}", "unifiedDataTable.searchGenerationWithDescriptionGrid": "Tableau généré par la recherche {searchTitle} ({searchDescription})", - "unifiedDataTable.selectedDocumentsNumber": "{nr} documents sélectionnés", "unifiedDataTable.clearSelection": "Effacer la sélection", "unifiedDataTable.controlColumnHeader": "Colonne de commande", "unifiedDataTable.copyToClipboardJSON": "Copier les documents dans le presse-papiers (JSON)", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index b995191642521..5fc1e62a5e04b 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -2460,7 +2460,6 @@ "unifiedDataTable.tableHeader.timeFieldIconTooltipAriaLabel": "{timeFieldName} - このフィールドはイベントの発生時刻を表します。", "unifiedDataTable.searchGenerationWithDescription": "検索{searchTitle}で生成されたテーブル", "unifiedDataTable.searchGenerationWithDescriptionGrid": "検索{searchTitle}で生成されたテーブル（{searchDescription}）", - "unifiedDataTable.selectedDocumentsNumber": "{nr}個のドキュメントが選択されました", "unifiedDataTable.clearSelection": "選択した項目をクリア", "unifiedDataTable.controlColumnHeader": "列の制御", "unifiedDataTable.copyToClipboardJSON": "ドキュメントをクリップボードにコピー（JSON）", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index fbef44d66792e..8bfe79706c43a 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -2460,7 +2460,6 @@ "unifiedDataTable.tableHeader.timeFieldIconTooltipAriaLabel": "{timeFieldName} - 此字段表示事件发生的时间。", "unifiedDataTable.searchGenerationWithDescription": "搜索 {searchTitle} 生成的表", "unifiedDataTable.searchGenerationWithDescriptionGrid": "搜索 {searchTitle} 生成的表（{searchDescription}）", - "unifiedDataTable.selectedDocumentsNumber": "{nr} 个文档已选择", "unifiedDataTable.clearSelection": "清除所选内容", "unifiedDataTable.controlColumnHeader": "控制列", "unifiedDataTable.copyToClipboardJSON": "将文档复制到剪贴板 (JSON)", From 6747f3efb0644ff593a8e6f3ae55c78e2524efce Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Thu, 19 Oct 2023 10:56:33 +0200 Subject: [PATCH 29/30] [Discover] Update tests --- .../src/components/data_table.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx index b4c0b5f393e9c..0d5f858bd3573 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx @@ -313,7 +313,7 @@ describe('UnifiedDataTable', () => { expect(component.find(EuiDataGrid).prop('toolbarVisibility')).toMatchInlineSnapshot(` Object { - "additionalControls": , + "additionalControls": null, "showColumnSelector": false, "showDisplaySelector": Object { "additionalDisplaySettings": { expect(component.find(EuiDataGrid).prop('toolbarVisibility')).toMatchInlineSnapshot(` Object { - "additionalControls": , + "additionalControls": null, "showColumnSelector": false, "showDisplaySelector": Object { "allowDensity": false, @@ -360,7 +360,7 @@ describe('UnifiedDataTable', () => { expect(component.find(EuiDataGrid).prop('toolbarVisibility')).toMatchInlineSnapshot(` Object { - "additionalControls": , + "additionalControls": null, "showColumnSelector": false, "showDisplaySelector": undefined, "showFullScreenSelector": true, From dac979a269b84b96cbbdaa267673af067899b614 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Thu, 19 Oct 2023 11:12:16 +0200 Subject: [PATCH 30/30] [Discover] Small updates --- .../public/components/discover_grid/render_custom_toolbar.scss | 2 +- .../discover/public/embeddable/saved_search_embeddable_base.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss index d54e7a6ba4fac..e24f7f8c6fcb1 100644 --- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss +++ b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss @@ -1,5 +1,5 @@ .dscGridToolbar { - padding: $euiSizeS; + padding: $euiSizeS $euiSizeS $euiSizeXS; } .dscGridToolbarControlButton .euiDataGrid__controlBtn { diff --git a/src/plugins/discover/public/embeddable/saved_search_embeddable_base.tsx b/src/plugins/discover/public/embeddable/saved_search_embeddable_base.tsx index f63be679c2de5..98e3de758c27e 100644 --- a/src/plugins/discover/public/embeddable/saved_search_embeddable_base.tsx +++ b/src/plugins/discover/public/embeddable/saved_search_embeddable_base.tsx @@ -46,7 +46,7 @@ export const SavedSearchEmbeddableBase: React.FC > {isLoading && } - {(prepend || totalHitCount) && ( + {Boolean(prepend || totalHitCount) && (