[Table Visualization] Replace div containers with OuiFlex components (#…

…4272) * replace div containers with OuiFlex Signed-off-by: Sirazh Gabdullin <[email protected]> * Update test to not include removed class Signed-off-by: Sirazh Gabdullin <[email protected]> * Update Changelog Signed-off-by: Sirazh Gabdullin <[email protected]> * wrap table in FlexItem Signed-off-by: Sirazh Gabdullin <[email protected]> --------- Signed-off-by: Sirazh Gabdullin <[email protected]> Signed-off-by: Josh Romero <[email protected]> Co-authored-by: Josh Romero <[email protected]>
opensearch-project · Jul 26, 2023 · c3ea363 · c3ea363
1 parent 5c2b22b
commit c3ea363
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -84,6 +84,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
@@ -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
@@ -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
@@ -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 (
     <I18nProvider>
       <OpenSearchDashboardsContextProvider services={services}>
-        <div className={className} data-test-subj="visTable">
+        <EuiFlexGroup
+          className="visTable"
+          data-test-subj="visTable"
+          direction={direction === 'column' ? 'row' : 'column'}
+          alignItems={direction === 'column' ? 'flexStart' : 'stretch'}
+        >
           {table ? (
             <TableVisComponent
               table={table}
@@ -61,7 +61,7 @@ export const TableVisApp = ({
               uiState={tableUiState}
             />
           )}
-        </div>
+        </EuiFlexGroup>
       </OpenSearchDashboardsContextProvider>
     </I18nProvider>
   );

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
@@ -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 (
-    <>
+    <EuiFlexItem>
       {title && (
         <EuiTitle size="xs" className="eui-textCenter">
           <h3>{title}</h3>
@@ -140,6 +146,6 @@ export const TableVisComponent = ({
           ),
         }}
       />
-    </>
+    </EuiFlexItem>
   );
 };
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
@@ -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,15 +23,15 @@ export const TableVisComponentGroup = memo(
     return (
       <>
         {tableGroups.map(({ table, title }) => (
-          <div key={title} className="visTable__group">
+          <EuiFlexItem key={title} className="visTable__group">
             <TableVisComponent
               title={title}
               table={table}
               visConfig={visConfig}
               event={event}
               uiState={uiState}
             />
-          </div>
+          </EuiFlexItem>
         ))}
       </>
     );