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

fix: invalid spreading of keys into table rows everywhere (#8551)

Browse Source 
This commit fixes invalid prop spreading warnings in all the table rows
I could find through a quick search in the code base.

The issue is that you can't spread the "key" prop into a component. It
*must* be an explicit prop.

The process is the same everywhere:
1. Instead of spreading `row.getRowProps()` into the component, we
extract and split it: `const {key, ...rowProps} = row.getRowProps()`.
2. Do the same thing for cellProps.
This commit is contained in:
Thomas Heartman 2024-10-28 13:47:22 +01:00 committed by GitHub
parent 0ff0b2dbd0
commit 622998c62e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 176 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/component/admin/billing/BillingHistory/BillingHistory.tsx
View File

@ -104,13 +104,19 @@ export const BillingHistory: VFC<IBillingHistoryProps> = ({
<TableBody {...getTableBodyProps()}> <TableBody {...getTableBodyProps()}>
{rows.map((row) => { {rows.map((row) => {
prepareRow(row); prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return ( return (
<TableRow hover {...row.getRowProps()}> <TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => ( {row.cells.map((cell) => {
<TableCell {...cell.getCellProps()}> const { key, ...cellProps } =
{cell.render('Cell')} cell.getCellProps();
</TableCell>
))} return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}

21
frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
View File

@ -323,16 +323,19 @@ export const ChangeRequestsTabs = ({
<TableBody {...getTableBodyProps()}> <TableBody {...getTableBodyProps()}>
{rows.map((row) => { {rows.map((row) => {
prepareRow(row); prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return ( return (
<TableRow hover {...row.getRowProps()}> <TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => ( {row.cells.map((cell) => {
<TableCell const { key, ...cellProps } =
{...cell.getCellProps()} cell.getCellProps();
padding='none'
> return (
{cell.render('Cell')} <TableCell key={key} {...cellProps}>
</TableCell> {cell.render('Cell')}
))} </TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}

18
frontend/src/component/environments/EnvironmentTable/EnvironmentTableSingle.tsx
View File

@ -97,13 +97,19 @@ export const EnvironmentTableSingle = ({
<TableBody {...getTableBodyProps()}> <TableBody {...getTableBodyProps()}>
{rows.map((row) => { {rows.map((row) => {
prepareRow(row); prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return ( return (
<TableRow hover {...row.getRowProps()}> <TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => ( {row.cells.map((cell) => {
<TableCell {...cell.getCellProps()}> const { key, ...cellProps } =
{cell.render('Cell')} cell.getCellProps();
</TableCell>
))} return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}

18
frontend/src/component/featureTypes/FeatureTypesList.tsx
View File

@ -157,13 +157,19 @@ export const FeatureTypesList = () => {
<TableBody {...getTableBodyProps()}> <TableBody {...getTableBodyProps()}>
{rows.map((row) => { {rows.map((row) => {
prepareRow(row); prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return ( return (
<TableRow hover {...row.getRowProps()}> <TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => ( {row.cells.map((cell) => {
<TableCell {...cell.getCellProps()}> const { key, ...cellProps } =
{cell.render('Cell')} cell.getCellProps();
</TableCell>
))} return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}

25
frontend/src/component/playground/Playground/PlaygroundResultsTable/VariantCell/VariantInformation/VariantInformation.tsx
View File

@ -95,16 +95,23 @@ export const VariantInformation: VFC<IVariantInformationProps> = ({
} }
prepareRow(row); prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return ( return (
<TableRow hover {...row.getRowProps()}> <TableRow hover key={key} {...rowProps}>
{row.cells.map((cell: any) => ( {row.cells.map((cell: any) => {
<TableCell const { key, ...cellProps } =
{...cell.getCellProps()} cell.getCellProps();
style={styles}
> return (
{cell.render('Cell')} <TableCell
</TableCell> key={key}
))} {...cellProps}
style={styles}
>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}

18
frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTable.tsx
View File

@ -191,13 +191,19 @@ export const ChangeRequestTable = (props: TableProps) => {
<TableBody {...getTableBodyProps()}> <TableBody {...getTableBodyProps()}>
{rows.map((row) => { {rows.map((row) => {
prepareRow(row); prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return ( return (
<TableRow hover {...row.getRowProps()}> <TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => ( {row.cells.map((cell) => {
<TableCell {...cell.getCellProps()}> const { key, ...cellProps } =
{cell.render('Cell')} cell.getCellProps();
</TableCell>
))} return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}

18
frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraMetrics.tsx
View File

@ -213,13 +213,19 @@ export const ProjectDoraMetrics = () => {
<TableBody {...getTableBodyProps()}> <TableBody {...getTableBodyProps()}>
{rows.map((row) => { {rows.map((row) => {
prepareRow(row); prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return ( return (
<TableRow hover {...row.getRowProps()}> <TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => ( {row.cells.map((cell) => {
<TableCell {...cell.getCellProps()}> const { key, ...cellProps } =
{cell.render('Cell')} cell.getCellProps();
</TableCell>
))} return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}

17
frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestTable.tsx
View File

@ -251,13 +251,18 @@ export const ChangeRequestTable: VFC = () => {
<TableBody {...getTableBodyProps()}> <TableBody {...getTableBodyProps()}>
{rows.map((row) => { {rows.map((row) => {
prepareRow(row); prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return ( return (
<TableRow hover {...row.getRowProps()}> <TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => ( {row.cells.map((cell) => {
<TableCell {...cell.getCellProps()}> const { key, ...cellProps } =
{cell.render('Cell')} cell.getCellProps();
</TableCell> return (
))} <TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}

18
frontend/src/component/project/ProjectEnvironment/EnvironmentHideDialog/ProjectEnvironmentTableSingle/ProjectEnvironmentTableSingle.tsx
View File

@ -76,13 +76,19 @@ export const ProjectEnvironmentTableSingle = ({
<TableBody {...getTableBodyProps()}> <TableBody {...getTableBodyProps()}>
{rows.map((row) => { {rows.map((row) => {
prepareRow(row); prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return ( return (
<TableRow hover {...row.getRowProps()}> <TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => ( {row.cells.map((cell) => {
<TableCell {...cell.getCellProps()}> const { key, ...cellProps } =
{cell.render('Cell')} cell.getCellProps();
</TableCell>
))} return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}

21
frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
View File

@ -274,13 +274,22 @@ const ProjectEnvironmentList = () => {
<TableBody {...getTableBodyProps()}> <TableBody {...getTableBodyProps()}>
{rows.map((row) => { {rows.map((row) => {
prepareRow(row); prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return ( return (
<TableRow hover {...row.getRowProps()}> <TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => ( {row.cells.map((cell) => {
<TableCell {...cell.getCellProps()}> const { key, ...cellProps } =
{cell.render('Cell')} cell.getCellProps();
</TableCell>
))} return (
<TableCell
key={key}
{...cellProps}
>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}

28
frontend/src/component/segments/SegmentTable/SegmentTable.tsx
View File

@ -136,18 +136,30 @@ export const SegmentTable = () => {
<TableBody {...getTableBodyProps()}> <TableBody {...getTableBodyProps()}>
{rows.map((row) => { {rows.map((row) => {
prepareRow(row); prepareRow(row);
const { key, ...rowProps } =
row.getRowProps();
return ( return (
<TableRow <TableRow
hover hover
{...row.getRowProps()} key={key}
{...rowProps}
> >
{row.cells.map((cell) => ( {row.cells.map((cell) => {
<TableCell const {
{...cell.getCellProps()} key,
> ...cellProps
{cell.render('Cell')} } = cell.getCellProps();
</TableCell> return (
))} <TableCell
key={key}
{...cellProps}
>
{cell.render(
'Cell',
)}
</TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}

42
frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
View File

@ -409,13 +409,22 @@ export const StrategiesList = () => {
<TableBody {...getTableBodyProps()}> <TableBody {...getTableBodyProps()}>
{rows.map((row) => { {rows.map((row) => {
prepareRow(row); prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return ( return (
<TableRow hover {...row.getRowProps()}> <TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => ( {row.cells.map((cell) => {
<TableCell {...cell.getCellProps()}> const { key, ...cellProps } =
{cell.render('Cell')} cell.getCellProps();
</TableCell>
))} return (
<TableCell
key={key}
{...cellProps}
>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}
@ -460,13 +469,22 @@ export const StrategiesList = () => {
<TableBody {...customGetTableBodyProps()}> <TableBody {...customGetTableBodyProps()}>
{customRows.map((row) => { {customRows.map((row) => {
customPrepareRow(row); customPrepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return ( return (
<TableRow hover {...row.getRowProps()}> <TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => ( {row.cells.map((cell) => {
<TableCell {...cell.getCellProps()}> const { key, ...cellProps } =
{cell.render('Cell')} cell.getCellProps();
</TableCell>
))} return (
<TableCell
key={key}
{...cellProps}
>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow> </TableRow>
); );
})} })}