Fix react/jsx-key ESLint rule (#4046)
This commit is contained in:
Krzysztof Żuraw
GitHub
parent
8fb3b43295
commit
a8794d41a8
16 changed files with 43 additions and 16 deletions
5
.changeset/warm-garlics-provide.md
Normal file
5
.changeset/warm-garlics-provide.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
"saleor-dashboard": patch
|
||||
---
|
||||
|
||||
Fix `react/jsx-key` eslint rule
|
||||
|
|
@ -110,8 +110,7 @@
|
|||
"no-useless-catch": "off",
|
||||
"no-useless-escape": "off",
|
||||
"prefer-promise-reject-errors": "off",
|
||||
"react/display-name": "off",
|
||||
"react/jsx-key": "warn"
|
||||
"react/display-name": "warn"
|
||||
},
|
||||
"ignorePatterns": ["node_modules/", "**/types/**/*", "type-policies.ts"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@ export const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
|
|||
boxShadow="overlay"
|
||||
backgroundColor="surfaceNeutralPlain"
|
||||
>
|
||||
{options.map(item => (
|
||||
<Dropdown.Item>
|
||||
{options.map((item, idx) => (
|
||||
<Dropdown.Item key={`dropdown-item-${idx}`}>
|
||||
<List.Item
|
||||
borderRadius={4}
|
||||
paddingX={1.5}
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export interface MenuItemsActions {
|
|||
}
|
||||
|
||||
export interface DatagridProps {
|
||||
fillHandle?: boolean,
|
||||
fillHandle?: boolean;
|
||||
addButtonLabel?: string;
|
||||
availableColumns: readonly AvailableColumn[];
|
||||
emptyText: string;
|
||||
|
|
@ -574,6 +574,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
|
|||
.fill(0)
|
||||
.map((_, index) => (
|
||||
<RowActions
|
||||
key={`row-actions-${index}`}
|
||||
menuItems={menuItems(index)}
|
||||
disabled={index >= rowsTotal - added.length}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,10 @@ export const FilterKeyValueField = <K extends string = string>({
|
|||
<div className={classes.formWrapper}>
|
||||
<div className={classes.fieldsWrapper}>
|
||||
{values.map((innerField, index) => (
|
||||
<div className={classes.metadataField}>
|
||||
<div
|
||||
className={classes.metadataField}
|
||||
key={`${innerField.key}-${index}`}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
name={filter.name}
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ export const TimelineEventHeader: React.FC<
|
|||
marginRight: 0.5,
|
||||
})}
|
||||
onClick={() => navigate(link)}
|
||||
key={`timeline-event-${link}`}
|
||||
>
|
||||
{text}
|
||||
</Link>
|
||||
|
|
@ -61,7 +62,12 @@ export const TimelineEventHeader: React.FC<
|
|||
}
|
||||
|
||||
return (
|
||||
<Text variant="caption" size="large" marginRight={0.5}>
|
||||
<Text
|
||||
variant="caption"
|
||||
size="large"
|
||||
marginRight={0.5}
|
||||
key={`timeline-event-${text}`}
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -65,10 +65,10 @@ const NoteMessage: React.FC<NoteMessageProps> = ({ message }) => (
|
|||
<>
|
||||
{message.split("\n").map(string => {
|
||||
if (string === "") {
|
||||
return <br />;
|
||||
return <br key={`break-${string}`} />;
|
||||
}
|
||||
|
||||
return <Typography>{string}</Typography>;
|
||||
return <Typography key={`note-${string}`}>{string}</Typography>;
|
||||
})}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -118,7 +118,11 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
|
|||
hasUserMenuItemPermissions(menuItem, user),
|
||||
)
|
||||
.map((item, itemIndex) => (
|
||||
<Link className={classes.link} to={item.url}>
|
||||
<Link
|
||||
className={classes.link}
|
||||
to={item.url}
|
||||
key={`${item.title}-${itemIndex}`}
|
||||
>
|
||||
<NavigationCard
|
||||
className={classes.navigationCard}
|
||||
key={itemIndex}
|
||||
|
|
|
|||
|
|
@ -123,6 +123,7 @@ const OrderGrantRefundPage: React.FC<OrderGrantRefundPageProps> = ({
|
|||
/>
|
||||
{order?.fulfillments?.map?.(fulfillment => (
|
||||
<ProductsCard
|
||||
key={fulfillment.id}
|
||||
title={intl.formatMessage(
|
||||
getOrderTitleMessage(fulfillment.status),
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@ const OrderHistory: React.FC<OrderHistoryProps> = props => {
|
|||
if (isTimelineEventOfType("extendable", type)) {
|
||||
return (
|
||||
<ExtendedTimelineEvent
|
||||
key={event.id}
|
||||
event={event}
|
||||
orderCurrency={orderCurrency}
|
||||
hasPlainDate={true}
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
|
|||
<CardContent className={classes.payments}>
|
||||
<div className={classes.root}>
|
||||
{order?.discounts?.map(discount => (
|
||||
<div>
|
||||
<div key={discount.id}>
|
||||
<FormattedMessage {...orderPaymentMessages.discount} />
|
||||
<HorizontalSpacer spacing={4} />
|
||||
<span className={classes.supportText}>
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ const OrderSendRefundPage: React.FC<OrderSendRefundPageProps> = ({
|
|||
{loading && <Skeleton />}
|
||||
<ul className={classes.dataList}>
|
||||
{order?.transactions.map(transaction => (
|
||||
<DataLine label={transaction.name}>
|
||||
<DataLine label={transaction.name} key={transaction.id}>
|
||||
<DataLineMoney money={transaction.refundedAmount} />
|
||||
</DataLine>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@ const OrderSummaryCard: React.FC<OrderPaymentProps> = ({ order }) => {
|
|||
/>
|
||||
{order?.discounts?.map(discount => (
|
||||
<SummaryLine
|
||||
key={discount.id}
|
||||
text={<FormattedMessage {...orderSummaryMessages.discount} />}
|
||||
subText={
|
||||
discount.type === OrderDiscountType.MANUAL
|
||||
|
|
|
|||
|
|
@ -45,10 +45,10 @@ export const CardTitle: React.FC<CardTitleProps> = ({
|
|||
chargePendingAmount,
|
||||
canceledAmount,
|
||||
chargedAmount,
|
||||
authorizedAmount
|
||||
authorizedAmount,
|
||||
} = transaction;
|
||||
|
||||
const title = capitalize(transaction.name || "Transaction")
|
||||
const title = capitalize(transaction.name || "Transaction");
|
||||
return (
|
||||
<DefaultCardTitle
|
||||
className={className}
|
||||
|
|
@ -127,7 +127,7 @@ export const CardTitle: React.FC<CardTitleProps> = ({
|
|||
transaction.actions
|
||||
.filter(action => action !== TransactionActionEnum.REFUND)
|
||||
.map(action => (
|
||||
<div>
|
||||
<div key={`translation-action-${action}`}>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
onClick={() =>
|
||||
|
|
|
|||
|
|
@ -492,6 +492,7 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
|
|||
<div className={classes.quickPeekContainer}>
|
||||
{selectedInventoryFields.slice(0, maxChips).map(field => (
|
||||
<Chip
|
||||
key={field}
|
||||
className={classes.chip}
|
||||
label={getFieldLabel(field)}
|
||||
onClose={() =>
|
||||
|
|
@ -508,6 +509,7 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
|
|||
.slice(0, maxChips - selectedInventoryFields.length)
|
||||
.map(warehouseId => (
|
||||
<Chip
|
||||
key={warehouseId}
|
||||
className={classes.chip}
|
||||
label={
|
||||
warehouses.find(
|
||||
|
|
|
|||
|
|
@ -38,7 +38,11 @@ export const AvailabilityCard: React.FC<AvailabilityCardProps> = ({
|
|||
<CardContainer cardTitle={children}>
|
||||
<ChannelsList summary={channelListSummary}>
|
||||
{items.map(channel => (
|
||||
<ChannelsListItem {...channel} listings={productChannelListings} />
|
||||
<ChannelsListItem
|
||||
{...channel}
|
||||
listings={productChannelListings}
|
||||
key={channel.id}
|
||||
/>
|
||||
))}
|
||||
</ChannelsList>
|
||||
</CardContainer>
|
||||
|
|
|
|||
Loading…
Reference in a new issue