From afa2c6322abbab7d05475db97ab24f3ed2521cee Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 2 Mar 2021 01:15:27 -0800
Subject: [PATCH] make lint error on missing keys

Summary: When exploratory testing Flipper, I generally see quite some React key warnings. So it seems that plugin devs often miss them. This diff will configure linting more aggressively to address that (it's not fool proof, but will find the most common cases).

Reviewed By: nikoant

Differential Revision: D26722707

fbshipit-source-id: e0d2b56de2422e1147f52c8e9150d00c7ee64bd2
---
 desktop/.eslintrc.js                               | 1 +
 desktop/app/src/chrome/ShareSheetErrorList.tsx     | 6 ++++--
 desktop/plugins/hermesdebuggerrn/SelectScreen.tsx  | 2 +-
 desktop/plugins/leak_canary/index.tsx              | 1 +
 desktop/plugins/navigation/components/Timeline.tsx | 3 +--
 desktop/plugins/network/RequestDetails.tsx         | 2 +-
 desktop/plugins/sandbox/index.tsx                  | 3 +--
 7 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/desktop/.eslintrc.js b/desktop/.eslintrc.js
index f4cebb4ed..efc6b734f 100644
--- a/desktop/.eslintrc.js
+++ b/desktop/.eslintrc.js
@@ -51,6 +51,7 @@ module.exports = {
     'react/react-in-jsx-scope': 0, // not needed with our metro implementation
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
+    'react/jsx-key': 'error',
     'no-new': 0, // new keyword needed e.g. new Notification
     'no-catch-shadow': 0, // only relevant for IE8 and below
     'no-bitwise': 0, // bitwise operations needed in some places
diff --git a/desktop/app/src/chrome/ShareSheetErrorList.tsx b/desktop/app/src/chrome/ShareSheetErrorList.tsx
index 067499847..c1534e188 100644
--- a/desktop/app/src/chrome/ShareSheetErrorList.tsx
+++ b/desktop/app/src/chrome/ShareSheetErrorList.tsx
@@ -51,8 +51,10 @@ export default class Popover extends PureComponent<Props> {
       <VBox scrollable={true} maxHeight={300}>
         <Info type={this.props.type}>
           <Title bold>{this.props.title}</Title>
-          {this.props.errors.map((e: Error) => (
-            <ErrorMessage code>{formatError(e)}</ErrorMessage>
+          {this.props.errors.map((e: Error, index) => (
+            <ErrorMessage code key={index}>
+              {formatError(e)}
+            </ErrorMessage>
           ))}
         </Info>
       </VBox>
diff --git a/desktop/plugins/hermesdebuggerrn/SelectScreen.tsx b/desktop/plugins/hermesdebuggerrn/SelectScreen.tsx
index 102411d16..28d4cb64b 100644
--- a/desktop/plugins/hermesdebuggerrn/SelectScreen.tsx
+++ b/desktop/plugins/hermesdebuggerrn/SelectScreen.tsx
@@ -71,7 +71,7 @@ export default function SelectScreen(props: Props) {
         </Item>
         {props.targets.map((target) => {
           return (
-            <Item onClick={() => props.onSelect(target)}>
+            <Item onClick={() => props.onSelect(target)} key={target.id}>
               <Icon size={20} name="code" color={colors.info} />
               <FlexColumn>
                 <ItemTitle>{target.title}</ItemTitle>
diff --git a/desktop/plugins/leak_canary/index.tsx b/desktop/plugins/leak_canary/index.tsx
index e968a6081..0d97ab5f5 100644
--- a/desktop/plugins/leak_canary/index.tsx
+++ b/desktop/plugins/leak_canary/index.tsx
@@ -230,6 +230,7 @@ export default class LeakCanary<PersistedState> extends FlipperPlugin<
               const selected = selectedIdx == idx ? selectedEid : null;
               return (
                 <Panel
+                  key={idx}
                   collapsable={false}
                   padded={false}
                   heading={leak.title}
diff --git a/desktop/plugins/navigation/components/Timeline.tsx b/desktop/plugins/navigation/components/Timeline.tsx
index 592ed5b05..520f70254 100644
--- a/desktop/plugins/navigation/components/Timeline.tsx
+++ b/desktop/plugins/navigation/components/Timeline.tsx
@@ -68,9 +68,8 @@ export default (props: Props) => {
         <TimelineLine />
         {events.map((event: NavigationEvent, idx: number) => {
           return (
-            <NavigationEventContainer>
+            <NavigationEventContainer key={idx}>
               <NavigationInfoBox
-                key={idx}
                 isBookmarked={
                   event.uri != null ? bookmarks.has(event.uri) : false
                 }
diff --git a/desktop/plugins/network/RequestDetails.tsx b/desktop/plugins/network/RequestDetails.tsx
index 601e0af08..d43113869 100644
--- a/desktop/plugins/network/RequestDetails.tsx
+++ b/desktop/plugins/network/RequestDetails.tsx
@@ -578,7 +578,7 @@ class JSONTextFormatter {
         return body
           .split('\n')
           .map((json) => JSON.parse(json))
-          .map((data) => <JSONText>{data}</JSONText>);
+          .map((data, idx) => <JSONText key={idx}>{data}</JSONText>);
       }
     }
   };
diff --git a/desktop/plugins/sandbox/index.tsx b/desktop/plugins/sandbox/index.tsx
index 137bab25a..8670d96ae 100644
--- a/desktop/plugins/sandbox/index.tsx
+++ b/desktop/plugins/sandbox/index.tsx
@@ -128,9 +128,8 @@ export default class SandboxView extends FlipperPlugin<
           </SandboxView.FeedbackMessage>
         </SandboxView.TextInputLayout>
         {this.state.sandboxes.map((sandbox) => (
-          <ButtonContainer>
+          <ButtonContainer key={sandbox.value}>
             <BigButton
-              key={sandbox.value}
               onClick={() => this.onSendSandboxEnvironment(sandbox.value)}>
               {sandbox.name}
             </BigButton>