From dd9c8af19aec6e3fa0013d73f52ec3c655ad698b Mon Sep 17 00:00:00 2001
From: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz>
Date: Fri, 9 Jun 2023 20:24:02 +0600
Subject: [PATCH 1/4] replace div containers with OuiFlex

Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz>
---
 .../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 (
     <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_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 }) => (
-          <div key={title} className="visTable__group">
+          <EuiFlexItem key={title} className="visTable__group">
             <TableVisComponent
               title={title}
               table={table}
@@ -31,7 +31,7 @@ export const TableVisComponentGroup = memo(
               event={event}
               uiState={uiState}
             />
-          </div>
+          </EuiFlexItem>
         ))}
       </>
     );

From 167c35a670dd95ac08f14961d8439f7619130367 Mon Sep 17 00:00:00 2001
From: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz>
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 <sirazh.gabdullin@nu.edu.kz>
---
 .../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 <sirazh.gabdullin@nu.edu.kz>
Date: Fri, 9 Jun 2023 22:23:14 +0600
Subject: [PATCH 3/4] Update Changelog

Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz>
---
 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 <sirazh.gabdullin@nu.edu.kz>
Date: Mon, 12 Jun 2023 10:17:26 +0600
Subject: [PATCH 4/4] wrap table in FlexItem

Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz>
---
 .../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 (
-    <>
+    <EuiFlexItem>
       {title && (
         <EuiTitle size="xs" className="eui-textCenter">
           <h3>{title}</h3>
@@ -140,6 +146,6 @@ export const TableVisComponent = ({
           ),
         }}
       />
-    </>
+    </EuiFlexItem>
   );
 };