From a8794d41a821a017fc2fdc54defacba6839fd0e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Wed, 2 Aug 2023 10:05:24 +0200
Subject: [PATCH] Fix `react/jsx-key` ESLint rule (#4046)

---
 .changeset/warm-garlics-provide.md                        | 5 +++++
 .eslintrc.json                                            | 3 +--
 src/components/ButtonWithDropdown/ButtonWithDropdown.tsx  | 4 ++--
 src/components/Datagrid/Datagrid.tsx                      | 3 ++-
 src/components/Filter/FilterKeyValueField.tsx             | 5 ++++-
 src/components/Timeline/TimelineEventHeader.tsx           | 8 +++++++-
 src/components/Timeline/TimelineNote.tsx                  | 4 ++--
 src/configuration/ConfigurationPage.tsx                   | 6 +++++-
 .../OrderGrantRefundPage/OrderGrantRefundPage.tsx         | 1 +
 src/orders/components/OrderHistory/OrderHistory.tsx       | 1 +
 src/orders/components/OrderPayment/OrderPayment.tsx       | 2 +-
 .../components/OrderSendRefundPage/OrderSendRefund.tsx    | 2 +-
 .../components/OrderSummaryCard/OrderSummaryCard.tsx      | 1 +
 .../OrderTransaction/components/CardTitle/CardTitle.tsx   | 6 +++---
 .../ProductExportDialog/ProductExportDialogInfo.tsx       | 2 ++
 .../ChannelsAvailabilityCard/AvailabilityCard.tsx         | 6 +++++-
 16 files changed, 43 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/warm-garlics-provide.md

diff --git a/.changeset/warm-garlics-provide.md b/.changeset/warm-garlics-provide.md
new file mode 100644
index 000000000..9dbb1f9a2
--- /dev/null
+++ b/.changeset/warm-garlics-provide.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix `react/jsx-key` eslint rule
diff --git a/.eslintrc.json b/.eslintrc.json
index 3ea87a766..e8d0c30e4 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -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"]
 }
diff --git a/src/components/ButtonWithDropdown/ButtonWithDropdown.tsx b/src/components/ButtonWithDropdown/ButtonWithDropdown.tsx
index a58fb28f8..265946610 100644
--- a/src/components/ButtonWithDropdown/ButtonWithDropdown.tsx
+++ b/src/components/ButtonWithDropdown/ButtonWithDropdown.tsx
@@ -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}
diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx
index e25d0b1b2..9d43dd1e1 100644
--- a/src/components/Datagrid/Datagrid.tsx
+++ b/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}
                             />
diff --git a/src/components/Filter/FilterKeyValueField.tsx b/src/components/Filter/FilterKeyValueField.tsx
index 0e9fd4f6e..21fc64637 100644
--- a/src/components/Filter/FilterKeyValueField.tsx
+++ b/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}
diff --git a/src/components/Timeline/TimelineEventHeader.tsx b/src/components/Timeline/TimelineEventHeader.tsx
index 2e23059a0..9a2230197 100644
--- a/src/components/Timeline/TimelineEventHeader.tsx
+++ b/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>
             );
diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx
index ecc71546b..49e685a02 100644
--- a/src/components/Timeline/TimelineNote.tsx
+++ b/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>;
     })}
   </>
 );
diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx
index f46bb934f..115784a79 100644
--- a/src/configuration/ConfigurationPage.tsx
+++ b/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}
diff --git a/src/orders/components/OrderGrantRefundPage/OrderGrantRefundPage.tsx b/src/orders/components/OrderGrantRefundPage/OrderGrantRefundPage.tsx
index 171dea62e..191cd177f 100644
--- a/src/orders/components/OrderGrantRefundPage/OrderGrantRefundPage.tsx
+++ b/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),
                   )}
diff --git a/src/orders/components/OrderHistory/OrderHistory.tsx b/src/orders/components/OrderHistory/OrderHistory.tsx
index 0141d73f0..3a4fa4128 100644
--- a/src/orders/components/OrderHistory/OrderHistory.tsx
+++ b/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}
diff --git a/src/orders/components/OrderPayment/OrderPayment.tsx b/src/orders/components/OrderPayment/OrderPayment.tsx
index c9b0b772e..bc1d42b9a 100644
--- a/src/orders/components/OrderPayment/OrderPayment.tsx
+++ b/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}>
diff --git a/src/orders/components/OrderSendRefundPage/OrderSendRefund.tsx b/src/orders/components/OrderSendRefundPage/OrderSendRefund.tsx
index 0ddec868d..13815c7e7 100644
--- a/src/orders/components/OrderSendRefundPage/OrderSendRefund.tsx
+++ b/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>
               ))}
diff --git a/src/orders/components/OrderSummaryCard/OrderSummaryCard.tsx b/src/orders/components/OrderSummaryCard/OrderSummaryCard.tsx
index 3a3a99ce3..4451b95c3 100644
--- a/src/orders/components/OrderSummaryCard/OrderSummaryCard.tsx
+++ b/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
diff --git a/src/orders/components/OrderTransaction/components/CardTitle/CardTitle.tsx b/src/orders/components/OrderTransaction/components/CardTitle/CardTitle.tsx
index 5f266f514..4ad25f3d3 100644
--- a/src/orders/components/OrderTransaction/components/CardTitle/CardTitle.tsx
+++ b/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={() =>
diff --git a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
index 2635fafe4..b0f49f368 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
+++ b/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(
diff --git a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/AvailabilityCard.tsx b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/AvailabilityCard.tsx
index 0bdc5afaa..a51450666 100644
--- a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/AvailabilityCard.tsx
+++ b/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>