Merge remote-tracking branch 'origin/main' into archive_table

frontend/package.json

@@ -88,17 +88,17 @@
     "react-router-dom": "6.3.0",
     "react-table": "7.8.0",
     "react-test-renderer": "17.0.2",
-    "react-timeago": "6.2.1",
+    "react-timeago": "7.1.0",
     "sass": "1.52.3",
     "semver": "7.3.7",
     "swr": "1.3.0",
     "tss-react": "3.7.0",
     "typescript": "4.7.3",
-    "vite": "2.9.10",
+    "vite": "2.9.12",
     "vite-plugin-env-compatible": "^1.1.1",
     "vite-plugin-svgr": "2.1.0",
     "vite-tsconfig-paths": "3.5.0",
-    "vitest": "0.14.1",
+    "vitest": "0.14.2",
     "whatwg-fetch": "^3.6.2"
   },
   "jest": {

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,

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:
                 {

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx

@@ -194,6 +194,9 @@ export const FeatureToggleListTable: VFC = () => {
     const [firstRenderedIndex, lastRenderedIndex] =
         useVirtualizedRange(rowHeight);
 
+    const tableHeight =
+        rowHeight * rows.length + theme.shape.tableRowHeightCompact;
+
     return (
         <PageContent
             isLoading={loading}
@@ -250,16 +253,18 @@ export const FeatureToggleListTable: VFC = () => {
             }
         >
             <SearchHighlightProvider value={getSearchText(searchValue)}>
-                <Table {...getTableProps()} rowHeight={rowHeight}>
+                <Table
-                    <SortableTableHeader headerGroups={headerGroups} flex />
+                    {...getTableProps()}
-                    <TableBody
+                    rowHeight={rowHeight}
-                        {...getTableBodyProps()}
+                    style={{ height: tableHeight }}
-                        style={{
-                            height: `${rowHeight * rows.length}px`,
-                            position: 'relative',
-                        }}
                 >
+                    <SortableTableHeader headerGroups={headerGroups} flex />
+                    <TableBody {...getTableBodyProps()}>
                         {rows.map((row, index) => {
+                            const top =
+                                index * rowHeight +
+                                theme.shape.tableRowHeightCompact;
+
                             const isVirtual =
                                 index < firstRenderedIndex ||
                                 index > lastRenderedIndex;
@@ -275,10 +280,7 @@ export const FeatureToggleListTable: VFC = () => {
                                     {...row.getRowProps()}
                                     key={row.id}
                                     className={classes.row}
-                                    style={{
+                                    style={{ display: 'flex', top }}
-                                        top: `${index * rowHeight}px`,
-                                        display: 'flex',
-                                    }}
                                 >
                                     {row.cells.map(cell => (
                                         <TableCell

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
+                    <TableBody {...getTableBodyProps()}>
-                        {...getTableBodyProps()}
-                        style={{
-                            height: `${rowHeight * rows.length}px`,
-                            position: 'relative',
-                        }}
-                    >
                         {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={{
+                                    style={{ display: 'flex', top }}
-                                        top: `${index * rowHeight}px`,
-                                        display: 'flex',
-                                    }}
                                 >
                                     {row.cells.map(cell => (
                                         <TableCell

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

frontend/vite.config.ts

@@ -26,6 +26,7 @@ export default defineConfig({
     },
     server: {
         open: true,
+        host: true,
         proxy: {
             [`${UNLEASH_BASE_PATH}api`]: {
                 target: UNLEASH_API,

frontend/yarn.lock

@@ -5210,10 +5210,10 @@ react-test-renderer@17.0.2:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.2"
 
-react-timeago@6.2.1:
+react-timeago@7.1.0:
-  version "6.2.1"
+  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-6.2.1.tgz#f19716811156617ceb9c9f9a44315d85197c7fba"
+  resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-7.1.0.tgz#248bc6aa40a561249e756b2df402c94f1a296a85"
-  integrity sha512-b9EObWO8wy4qwfOzj+g/RQZRrPvtMv1Pz12FCdAWKWCXbDGt0rZLyiyTGEr0Lh1O8w5xa48CtRpl3LI+CtGCyw==
+  integrity sha512-rouF7MiEm55fH791Y8cg+VobIJgx8gtNJ+gjr86R4ZqO1WKPkXiXjdT/lRzrvEkUzsxT1exHqV2V+Zdi114H3A==
 
 react-transition-group@^4.4.2:
   version "4.4.2"
@@ -6028,10 +6028,10 @@ vite-tsconfig-paths@3.5.0:
     recrawl-sync "^2.0.3"
     tsconfig-paths "^4.0.0"
 
-vite@2.9.10:
+vite@2.9.12:
-  version "2.9.10"
+  version "2.9.12"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.10.tgz#f574d96655622c2e0fbc662edd0ed199c60fe91a"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.12.tgz#b1d636b0a8ac636afe9d83e3792d4895509a941b"
-  integrity sha512-TwZRuSMYjpTurLqXspct+HZE7ONiW9d+wSWgvADGxhDPPyoIcNywY+RX4ng+QpK30DCa1l/oZgi2PLZDibhzbQ==
+  integrity sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==
   dependencies:
     esbuild "^0.14.27"
     postcss "^8.4.13"
@@ -6052,10 +6052,10 @@ vite@^2.9.9:
   optionalDependencies:
     fsevents "~2.3.2"
 
-vitest@0.14.1:
+vitest@0.14.2:
-  version "0.14.1"
+  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/vitest/-/vitest-0.14.1.tgz#f2fd8b31abdbbadb9ee895f8fde35a068ea2a5f5"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-0.14.2.tgz#ac07b46d3cd3b5667d2bb803962f759a1b8f3f89"
-  integrity sha512-2UUm6jYgkwh7Y3VKSRR8OuaNCm+iA5LPDnal7jyITN39maZK9L+JVxqjtQ39PSFo5Fl3/BgaJvER6GGHX9JLxg==
+  integrity sha512-vXQUl8OUCqHmxKWscMGL+6Xl1pBJmYHZ8N85iNpLGrirAC2vhspu7b73ShRcLonmZT44BYZW+LBAVvn0L4jyVA==
   dependencies:
     "@types/chai" "^4.3.1"
     "@types/chai-subset" "^1.3.3"