Fix react/jsx-key ESLint rule (#4046)

.changeset/warm-garlics-provide.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix `react/jsx-key` eslint rule

.eslintrc.json

@@ -110,8 +110,7 @@
     "no-useless-catch": "off",
     "no-useless-escape": "off",
     "prefer-promise-reject-errors": "off",
-    "react/display-name": "off",
+    "react/display-name": "warn"
-    "react/jsx-key": "warn"
   },
   "ignorePatterns": ["node_modules/", "**/types/**/*", "type-policies.ts"]
 }

src/components/ButtonWithDropdown/ButtonWithDropdown.tsx

@@ -37,8 +37,8 @@ export const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
           boxShadow="overlay"
           backgroundColor="surfaceNeutralPlain"
         >
-          {options.map(item => (
+          {options.map((item, idx) => (
-            <Dropdown.Item>
+            <Dropdown.Item key={`dropdown-item-${idx}`}>
               <List.Item
                 borderRadius={4}
                 paddingX={1.5}

src/components/Datagrid/Datagrid.tsx

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

src/components/Filter/FilterKeyValueField.tsx

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

src/components/Timeline/TimelineEventHeader.tsx

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

src/components/Timeline/TimelineNote.tsx

@@ -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>;
     })}
   </>
 );

src/configuration/ConfigurationPage.tsx

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

src/orders/components/OrderGrantRefundPage/OrderGrantRefundPage.tsx

@@ -123,6 +123,7 @@ const OrderGrantRefundPage: React.FC<OrderGrantRefundPageProps> = ({
               />
               {order?.fulfillments?.map?.(fulfillment => (
                 <ProductsCard
+                  key={fulfillment.id}
                   title={intl.formatMessage(
                     getOrderTitleMessage(fulfillment.status),
                   )}

src/orders/components/OrderHistory/OrderHistory.tsx

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

src/orders/components/OrderPayment/OrderPayment.tsx

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

src/orders/components/OrderSendRefundPage/OrderSendRefund.tsx

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

src/orders/components/OrderSummaryCard/OrderSummaryCard.tsx

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

src/orders/components/OrderTransaction/components/CardTitle/CardTitle.tsx

@@ -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={() =>

src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx

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

src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/AvailabilityCard.tsx

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