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

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}

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

frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx

@@ -111,7 +111,11 @@ export const FeatureEnvironmentSeen = ({
                     sx={sx}
                     tooltip='No usage reported from connected applications'
                 >
+                    <Box data-loading>
+                        <Box>
                             <UsageLine />
+                        </Box>
+                    </Box>
                 </TooltipContainer>
             )}
         </>

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}

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

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>
+    <StyledBoxCell data-testid={BATCH_SELECT}>
-        <Checkbox onChange={onChange} title={title} checked={checked} />
+        <Checkbox
+            onChange={onChange}
+            title={title}
+            checked={checked}
+            data-loading
+        />
     </StyledBoxCell>
 );
 

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;