Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00
Code Issues Projects Releases Wiki Activity

refactor: avoid relative positioning for tbody (#1085)

Browse Source 
* 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
This commit is contained in:
olav 2022-06-13 09:25:36 +02:00 committed by GitHub
parent d7bc30871f
commit e338319afa
6 changed files with 35 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts
View File

@ -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,

2
frontend/src/component/common/Table/Table/Table.styles.ts
View File

@ -4,6 +4,8 @@ export const useStyles = makeStyles<{
rowHeight: 'auto' | 'standard' | 'dense' | 'compact' | number;
}>()((theme, { rowHeight }) => ({
table: {
position: 'relative',
'& tbody tr': {
height:
{

26
frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
View File

@ -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

26
frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

@ -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

4
frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
View File

@ -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

1
frontend/vite.config.ts
View File

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