From ddd718fd23cd0e99dcff80e5877ab9df776404d5 Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Tue, 14 Nov 2023 08:44:36 +0100
Subject: [PATCH] refactor/reshape table (#5328)

This PR fixes a couple of issues with the pagination bar:

* Fixes an issue where padding bottom would be broken due to disabling
padding on the parent container
* Remove padding on the entire table to create more space and remove
header bar border radius as per discussion with @nicolaesocaciu
---
 .../CellSortable/CellSortable.tsx               |  4 +++-
 .../SortableTableHeader/SortableTableHeader.tsx |  2 ++
 .../FeatureEnvironmentSeen.tsx                  |  6 +++++-
 .../ActionsCell/ActionsCell.tsx                 |  3 ++-
 .../PaginatedProjectFeatureToggles.tsx          | 17 +++++++++++++++--
 .../RowSelectCell/RowSelectCell.tsx             |  9 +++++++--
 frontend/src/themes/app.css                     |  7 -------
 7 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
index c753a3673a..aab789a71b 100644
--- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
+++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
@@ -31,6 +31,7 @@ interface ICellSortableProps {
     isFlex?: boolean;
     isFlexGrow?: boolean;
     onClick?: MouseEventHandler<HTMLButtonElement>;
+    styles: React.CSSProperties;
 }
 
 export const CellSortable: FC<ICellSortableProps> = ({
@@ -46,6 +47,7 @@ export const CellSortable: FC<ICellSortableProps> = ({
     isFlex,
     isFlexGrow,
     onClick = () => {},
+    styles,
 }) => {
     const { setAnnouncement } = useContext(AnnouncerContext);
     const [title, setTitle] = useState('');
@@ -109,7 +111,7 @@ export const CellSortable: FC<ICellSortableProps> = ({
         <StyledTableCell
             component='th'
             aria-sort={ariaSort}
-            style={{ width, minWidth, maxWidth }}
+            style={{ width, minWidth, maxWidth, ...styles }}
             isFlex={isFlex}
             isFlexGrow={isFlexGrow}
             isSortable={isSortable}
diff --git a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
index 10acba2d2b..bc648f3bc5 100644
--- a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
+++ b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
@@ -19,6 +19,8 @@ export const SortableTableHeader = <T extends object>({
 
                     return (
                         <CellSortable
+                            // @ts-expect-error -- check after `react-table` v8
+                            styles={column.styles || {}}
                             {...column.getHeaderProps(
                                 column.canSort
                                     ? column.getSortByToggleProps()
diff --git a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
index 9b62625dfd..b5982d0031 100644
--- a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
@@ -111,7 +111,11 @@ export const FeatureEnvironmentSeen = ({
                     sx={sx}
                     tooltip='No usage reported from connected applications'
                 >
-                    <UsageLine />
+                    <Box data-loading>
+                        <Box>
+                            <UsageLine />
+                        </Box>
+                    </Box>
                 </TooltipContainer>
             )}
         </>
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx
index cf76bc1d7d..5154110991 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx
@@ -87,10 +87,11 @@ export const ActionsCell: VFC<IActionsCellProps> = ({
     };
 
     return (
-        <StyledBoxCell data-loading>
+        <StyledBoxCell>
             <Tooltip title='Feature toggle actions' arrow describeChild>
                 <IconButton
                     id={id}
+                    data-loading
                     aria-controls={open ? menuId : undefined}
                     aria-haspopup='true'
                     aria-expanded={open ? 'true' : undefined}
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
index af2c37ad4c..c5f75c3e50 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
@@ -5,6 +5,7 @@ import {
     styled,
     Tooltip,
     useMediaQuery,
+    Box,
     useTheme,
 } from '@mui/material';
 import { Add } from '@mui/icons-material';
@@ -178,6 +179,9 @@ export const PaginatedProjectFeatureToggles = ({
                 maxWidth: 50,
                 disableSortBy: true,
                 hideInMenu: true,
+                styles: {
+                    borderRadius: 0,
+                },
             },
             {
                 id: 'favorite',
@@ -314,6 +318,9 @@ export const PaginatedProjectFeatureToggles = ({
                 ),
                 disableSortBy: true,
                 hideInMenu: true,
+                styles: {
+                    borderRadius: 0,
+                },
             },
         ],
         [projectId, environments, loading],
@@ -510,13 +517,19 @@ export const PaginatedProjectFeatureToggles = ({
         <>
             <PageContent
                 disableLoading
+                disablePadding
                 className={styles.container}
                 sx={style}
                 header={
-                    <div
+                    <Box
                         ref={headerLoadingRef}
                         aria-busy={initialLoad}
                         aria-live='polite'
+                        sx={(theme) => ({
+                            padding: `${theme.spacing(2.5)} ${theme.spacing(
+                                3.125,
+                            )}`,
+                        })}
                     >
                         <PageHeader
                             titleElement={
@@ -621,7 +634,7 @@ export const PaginatedProjectFeatureToggles = ({
                                 }
                             />
                         </PageHeader>
-                    </div>
+                    </Box>
                 }
             >
                 <div
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell.tsx
index a77672ba08..d9c9689c7f 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell.tsx
@@ -20,8 +20,13 @@ export const RowSelectCell: FC<IRowSelectCellProps> = ({
     checked,
     title,
 }) => (
-    <StyledBoxCell data-testid={BATCH_SELECT} data-loading>
-        <Checkbox onChange={onChange} title={title} checked={checked} />
+    <StyledBoxCell data-testid={BATCH_SELECT}>
+        <Checkbox
+            onChange={onChange}
+            title={title}
+            checked={checked}
+            data-loading
+        />
     </StyledBoxCell>
 );
 
diff --git a/frontend/src/themes/app.css b/frontend/src/themes/app.css
index 6bfe9b5a98..2928b6c012 100644
--- a/frontend/src/themes/app.css
+++ b/frontend/src/themes/app.css
@@ -60,13 +60,6 @@ button {
     bottom: 0;
     left: 0;
     transform: translateX(-100%);
-    /* background-image: linear-gradient(
-        90deg,
-        rgba(255, 255, 255, 0) 0,
-        rgba(255, 255, 255, 0.2) 100%,
-        rgba(255, 255, 255, 0.5) 100%,
-        rgba(255, 255, 255, 0)
-    ); */
     animation: shimmer 3s infinite;
     content: '';
     z-index: 5001;