From dd9c8af19aec6e3fa0013d73f52ec3c655ad698b Mon Sep 17 00:00:00 2001 From: Sirazh Gabdullin Date: Fri, 9 Jun 2023 20:24:02 +0600 Subject: [PATCH 1/4] replace div containers with OuiFlex Signed-off-by: Sirazh Gabdullin --- .../public/components/table_vis_app.scss | 12 ------------ .../public/components/table_vis_app.tsx | 16 ++++++++-------- .../components/table_vis_component_group.tsx | 6 +++--- 3 files changed, 11 insertions(+), 23 deletions(-) diff --git a/src/plugins/vis_type_table/public/components/table_vis_app.scss b/src/plugins/vis_type_table/public/components/table_vis_app.scss index f0b82a1cd8d8..f6a5538a3ccf 100644 --- a/src/plugins/vis_type_table/public/components/table_vis_app.scss +++ b/src/plugins/vis_type_table/public/components/table_vis_app.scss @@ -1,7 +1,5 @@ // Container for the Table Visualization component .visTable { - display: flex; - flex-direction: column; flex: 1 0 0; overflow: auto; @@ -10,15 +8,5 @@ // Group container for table visualization components .visTable__group { - padding: $euiSizeS; - margin-bottom: $euiSizeL; - display: flex; - flex-direction: column; flex: 0 0 auto; } - -// Modifier for visTables__group when displayed in columns -.visTable__groupInColumns { - flex-direction: row; - align-items: flex-start; -} diff --git a/src/plugins/vis_type_table/public/components/table_vis_app.tsx b/src/plugins/vis_type_table/public/components/table_vis_app.tsx index 81f4d775f1e5..cbde913452d1 100644 --- a/src/plugins/vis_type_table/public/components/table_vis_app.tsx +++ b/src/plugins/vis_type_table/public/components/table_vis_app.tsx @@ -5,10 +5,10 @@ import './table_vis_app.scss'; import React, { useEffect } from 'react'; -import classNames from 'classnames'; import { CoreStart } from 'opensearch-dashboards/public'; import { I18nProvider } from '@osd/i18n/react'; import { IInterpreterRenderHandlers } from 'src/plugins/expressions'; +import { EuiFlexGroup } from '@elastic/eui'; import { PersistedState } from '../../../visualizations/public'; import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public'; import { TableVisData } from '../table_vis_response_handler'; @@ -35,17 +35,17 @@ export const TableVisApp = ({ handlers.done(); }, [handlers]); - const className = classNames('visTable', { - // eslint-disable-next-line @typescript-eslint/naming-convention - visTable__groupInColumns: direction === 'column', - }); - const tableUiState: TableUiState = getTableUIState(handlers.uiState as PersistedState); return ( -
+ {table ? ( )} -
+ ); diff --git a/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx b/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx index af8fd8048cbc..64c7ce91f4b7 100644 --- a/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx +++ b/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx @@ -4,8 +4,8 @@ */ import React, { memo } from 'react'; - import { IInterpreterRenderHandlers } from 'src/plugins/expressions'; +import { EuiFlexItem } from '@elastic/eui'; import { TableGroup } from '../table_vis_response_handler'; import { TableVisConfig } from '../types'; import { TableVisComponent } from './table_vis_component'; @@ -23,7 +23,7 @@ export const TableVisComponentGroup = memo( return ( <> {tableGroups.map(({ table, title }) => ( -
+ -
+ ))} ); From 167c35a670dd95ac08f14961d8439f7619130367 Mon Sep 17 00:00:00 2001 From: Sirazh Gabdullin Date: Fri, 9 Jun 2023 20:24:41 +0600 Subject: [PATCH 2/4] Update test to not include removed class Signed-off-by: Sirazh Gabdullin --- .../vis_type_table/public/components/table_vis_app.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/vis_type_table/public/components/table_vis_app.test.tsx b/src/plugins/vis_type_table/public/components/table_vis_app.test.tsx index 37cb753765f8..f2a347dcd0a2 100644 --- a/src/plugins/vis_type_table/public/components/table_vis_app.test.tsx +++ b/src/plugins/vis_type_table/public/components/table_vis_app.test.tsx @@ -75,7 +75,7 @@ describe('TableVisApp', () => { handlers={handlersMock} /> ); - expect(container.outerHTML.includes('visTable visTable__groupInColumns')).toBe(true); + expect(container.outerHTML.includes('visTable')).toBe(true); expect(getByTestId('TableVisComponentGroup')).toBeInTheDocument(); }); From c213dcaad360c5804ff1ade0c81d71b26f390847 Mon Sep 17 00:00:00 2001 From: Sirazh Gabdullin Date: Fri, 9 Jun 2023 22:23:14 +0600 Subject: [PATCH 3/4] Update Changelog Signed-off-by: Sirazh Gabdullin --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c2a7631d23a7..ffaaf8cc0ee6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -53,6 +53,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - Remove unused Sass in `tile_map` plugin ([#4110](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4110)) - [Table Visualization] Remove custom styling for text-align:center in favor of OUI utility class. ([#4164](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4164)) - Replace the use of `bluebird` in `saved_objects` plugin ([#4026](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4026)) +- [Table Visualization] Replace div containers with OuiFlex components ([#4272](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4272)) ### 🔩 Tests From a5e312e576d3b69efb2edc5b2852092d02700e82 Mon Sep 17 00:00:00 2001 From: Sirazh Gabdullin Date: Mon, 12 Jun 2023 10:17:26 +0600 Subject: [PATCH 4/4] wrap table in FlexItem Signed-off-by: Sirazh Gabdullin --- .../public/components/table_vis_component.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/plugins/vis_type_table/public/components/table_vis_component.tsx b/src/plugins/vis_type_table/public/components/table_vis_component.tsx index 79cf768f66e8..c0e4ab61ae8b 100644 --- a/src/plugins/vis_type_table/public/components/table_vis_component.tsx +++ b/src/plugins/vis_type_table/public/components/table_vis_component.tsx @@ -5,7 +5,13 @@ import React, { useCallback, useMemo } from 'react'; import { orderBy } from 'lodash'; -import { EuiDataGridProps, EuiDataGrid, EuiDataGridSorting, EuiTitle } from '@elastic/eui'; +import { + EuiDataGridProps, + EuiDataGrid, + EuiDataGridSorting, + EuiTitle, + EuiFlexItem, +} from '@elastic/eui'; import { IInterpreterRenderHandlers } from 'src/plugins/expressions'; import { FormattedTableContext } from '../table_vis_response_handler'; @@ -102,7 +108,7 @@ export const TableVisComponent = ({ : undefined; return ( - <> + {title && (

{title}

@@ -140,6 +146,6 @@ export const TableVisComponent = ({ ), }} /> - + ); };