[Backport 2.x] [Table Visualization] Replace div containers with OuiFlex components

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;
-}

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();
   });
 

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>
   );

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>
   );
 };

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>
         ))}
       </>
     );