From 436849edf368498c31d1344ce14b7cde0322f07e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 25 Jan 2023 14:23:45 +0000
Subject: [PATCH] fix: revert table virtualization in variants per env (#2990)

Fixes a bug where some variant tables did not render properly if
scrolled all the way down.

Since we are not expecting to need virtualisation in these tables
anyways (each table should hopefully have a relatively low amount of
variants), reverting the `VirtualizedTable` usage to a normal one seemed
like the most straightforward solution at this stage, fixing the issue
without any noticeable side effects.


![image](https://user-images.githubusercontent.com/14320932/214568043-038ca72e-7f23-4114-8415-fb4eb287154e.png)
---
 .../EnvironmentVariantsTable.tsx              | 53 ++++++++++++++-----
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx
index f229817357..c431d5cc33 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx
@@ -1,6 +1,17 @@
-import { styled, useMediaQuery, useTheme } from '@mui/material';
+import {
+    styled,
+    TableBody,
+    TableRow,
+    useMediaQuery,
+    useTheme,
+} from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
+import {
+    SortableTableHeader,
+    Table,
+    TableCell,
+    TablePlaceholder,
+} from 'component/common/Table';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
@@ -14,7 +25,7 @@ import {
     IPayload,
 } from 'interfaces/featureToggle';
 import { useMemo } from 'react';
-import { useFlexLayout, useSortBy, useTable } from 'react-table';
+import { useSortBy, useTable } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { PayloadCell } from './PayloadCell/PayloadCell';
 import { OverridesCell } from './OverridesCell/OverridesCell';
@@ -54,7 +65,7 @@ export const EnvironmentVariantsTable = ({
                 accessor: 'name',
                 Cell: HighlightCell,
                 sortType: 'alphanumeric',
-                minWidth: 100,
+                minWidth: 350,
                 searchable: true,
             },
             {
@@ -151,7 +162,14 @@ export const EnvironmentVariantsTable = ({
 
     const { data, getSearchText } = useSearch(columns, searchValue, variants);
 
-    const { headerGroups, rows, prepareRow, setHiddenColumns } = useTable(
+    const {
+        getTableProps,
+        getTableBodyProps,
+        headerGroups,
+        rows,
+        prepareRow,
+        setHiddenColumns,
+    } = useTable(
         {
             columns: columns as any[],
             data,
@@ -162,8 +180,7 @@ export const EnvironmentVariantsTable = ({
             disableSortRemove: true,
             disableMultiSort: true,
         },
-        useSortBy,
-        useFlexLayout
+        useSortBy
     );
 
     useConditionallyHiddenColumns(
@@ -184,11 +201,23 @@ export const EnvironmentVariantsTable = ({
     return (
         <StyledTableContainer>
             <SearchHighlightProvider value={getSearchText(searchValue)}>
-                <VirtualizedTable
-                    rows={rows}
-                    headerGroups={headerGroups}
-                    prepareRow={prepareRow}
-                />
+                <Table {...getTableProps()}>
+                    <SortableTableHeader headerGroups={headerGroups as any} />
+                    <TableBody {...getTableBodyProps()}>
+                        {rows.map(row => {
+                            prepareRow(row);
+                            return (
+                                <TableRow hover {...row.getRowProps()}>
+                                    {row.cells.map(cell => (
+                                        <TableCell {...cell.getCellProps()}>
+                                            {cell.render('Cell')}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            );
+                        })}
+                    </TableBody>
+                </Table>
             </SearchHighlightProvider>
             <ConditionallyRender
                 condition={rows.length === 0}