From e338319afa8d24a14024024346b3a0dc47a8e367 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Mon, 13 Jun 2022 09:25:36 +0200
Subject: [PATCH] refactor: avoid relative positioning for tbody (#1085)

* refactor: expose vite dev server on local IP

* refactor: avoid relative positioning for tbody

* refactor: avoid height on tbody as well

* refactor: use row height from theme
---
 .../SortableTableHeader.styles.ts             |  2 ++
 .../common/Table/Table/Table.styles.ts        |  2 ++
 .../FeatureToggleListTable.tsx                | 26 ++++++++++---------
 .../ProjectFeatureToggles.tsx                 | 26 ++++++++++---------
 .../__snapshots__/TagTypeList.test.tsx.snap   |  4 +--
 frontend/vite.config.ts                       |  1 +
 6 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts
index 32f9ed3452..fb11a9dd4b 100644
--- a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts
+++ b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts
@@ -3,7 +3,9 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
     tableHeader: {
         '& > th': {
+            height: theme.shape.tableRowHeightCompact,
             border: 0,
+
             '&:first-of-type': {
                 borderTopLeftRadius: theme.shape.borderRadiusMedium,
                 borderBottomLeftRadius: theme.shape.borderRadiusMedium,
diff --git a/frontend/src/component/common/Table/Table/Table.styles.ts b/frontend/src/component/common/Table/Table/Table.styles.ts
index 1897370c27..b006579729 100644
--- a/frontend/src/component/common/Table/Table/Table.styles.ts
+++ b/frontend/src/component/common/Table/Table/Table.styles.ts
@@ -4,6 +4,8 @@ export const useStyles = makeStyles<{
     rowHeight: 'auto' | 'standard' | 'dense' | 'compact' | number;
 }>()((theme, { rowHeight }) => ({
     table: {
+        position: 'relative',
+
         '& tbody tr': {
             height:
                 {
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index cb156e04be..9a3b0e76ac 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -192,6 +192,9 @@ export const FeatureToggleListTable: VFC = () => {
     const [firstRenderedIndex, lastRenderedIndex] =
         useVirtualizedRange(rowHeight);
 
+    const tableHeight =
+        rowHeight * rows.length + theme.shape.tableRowHeightCompact;
+
     return (
         <PageContent
             isLoading={loading}
@@ -248,16 +251,18 @@ export const FeatureToggleListTable: VFC = () => {
             }
         >
             <SearchHighlightProvider value={getSearchText(searchValue)}>
-                <Table {...getTableProps()} rowHeight={rowHeight}>
+                <Table
+                    {...getTableProps()}
+                    rowHeight={rowHeight}
+                    style={{ height: tableHeight }}
+                >
                     <SortableTableHeader headerGroups={headerGroups} flex />
-                    <TableBody
-                        {...getTableBodyProps()}
-                        style={{
-                            height: `${rowHeight * rows.length}px`,
-                            position: 'relative',
-                        }}
-                    >
+                    <TableBody {...getTableBodyProps()}>
                         {rows.map((row, index) => {
+                            const top =
+                                index * rowHeight +
+                                theme.shape.tableRowHeightCompact;
+
                             const isVirtual =
                                 index < firstRenderedIndex ||
                                 index > lastRenderedIndex;
@@ -273,10 +278,7 @@ export const FeatureToggleListTable: VFC = () => {
                                     {...row.getRowProps()}
                                     key={row.id}
                                     className={classes.row}
-                                    style={{
-                                        top: `${index * rowHeight}px`,
-                                        display: 'flex',
-                                    }}
+                                    style={{ display: 'flex', top }}
                                 >
                                     {row.cells.map(cell => (
                                         <TableCell
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
index 687e25b391..2283f794d1 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -398,6 +398,9 @@ export const ProjectFeatureToggles = ({
     const [firstRenderedIndex, lastRenderedIndex] =
         useVirtualizedRange(rowHeight);
 
+    const tableHeight =
+        rowHeight * rows.length + theme.shape.tableRowHeightCompact;
+
     return (
         <PageContent
             isLoading={loading}
@@ -464,21 +467,23 @@ export const ProjectFeatureToggles = ({
             }
         >
             <SearchHighlightProvider value={getSearchText(searchValue)}>
-                <Table {...getTableProps()} rowHeight={rowHeight}>
+                <Table
+                    {...getTableProps()}
+                    rowHeight={rowHeight}
+                    style={{ height: tableHeight }}
+                >
                     <SortableTableHeader
                         // @ts-expect-error -- verify after `react-table` v8
                         headerGroups={headerGroups}
                         className={styles.headerClass}
                         flex
                     />
-                    <TableBody
-                        {...getTableBodyProps()}
-                        style={{
-                            height: `${rowHeight * rows.length}px`,
-                            position: 'relative',
-                        }}
-                    >
+                    <TableBody {...getTableBodyProps()}>
                         {rows.map((row, index) => {
+                            const top =
+                                index * rowHeight +
+                                theme.shape.tableRowHeightCompact;
+
                             const isVirtual =
                                 index < firstRenderedIndex ||
                                 index > lastRenderedIndex;
@@ -493,10 +498,7 @@ export const ProjectFeatureToggles = ({
                                     hover
                                     {...row.getRowProps()}
                                     className={styles.row}
-                                    style={{
-                                        top: `${index * rowHeight}px`,
-                                        display: 'flex',
-                                    }}
+                                    style={{ display: 'flex', top }}
                                 >
                                     {row.cells.map(cell => (
                                         <TableCell
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
index c078905686..110b246b70 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
+++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
@@ -112,7 +112,7 @@ exports[`renders an empty list correctly 1`] = `
         className="tss-54jt3w-bodyContainer"
       >
         <table
-          className="MuiTable-root tss-z7cn64-table mui-133vm37-MuiTable-root"
+          className="MuiTable-root tss-rjdss1-table mui-133vm37-MuiTable-root"
           role="table"
         >
           <thead
@@ -120,7 +120,7 @@ exports[`renders an empty list correctly 1`] = `
             role={null}
           >
             <tr
-              className="MuiTableRow-root MuiTableRow-head tss-1an32mz-tableHeader mui-cn4v9y-MuiTableRow-root"
+              className="MuiTableRow-root MuiTableRow-head tss-1sk7xq7-tableHeader mui-cn4v9y-MuiTableRow-root"
               role="row"
             >
               <th
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index c017f34be9..e5dabd1996 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -26,6 +26,7 @@ export default defineConfig({
     },
     server: {
         open: true,
+        host: true,
         proxy: {
             [`${UNLEASH_BASE_PATH}api`]: {
                 target: UNLEASH_API,