diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a9eb35ce529..c7ce9ac619ea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -83,6 +83,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - Fix EUI/OUI type errors ([#3798](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3798)) - 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)) +- [Table Visualization] Replace div containers with OuiFlex components ([#4272](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4272)) - Migrate from legacy elasticsearch client to opensearch-js client in `osd-opensearch-archiver` package([#4142](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4142)) - Replace the use of `bluebird` in `saved_objects` plugin ([#4026](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4026)) - [Maps Legacy] Removed KUI usage in `maps_legacy` plugin([#3998](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3998)) 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.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(); }); 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.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 = ({ ), }} /> - +
); }; 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 }) => ( -
+ -
+ ))} );