[dagit] Add missing React keys to prevent new warning toasts (#12210)

### Summary & Motivation This is a follow-up from https://elementl-workspace.slack.com/archives/C03CA4TVCAW/p1675907176353719. The new dev-mode error banners we added to Dagit caught a React key error. ### How I Tested These Changes I went through all occurrences of `.map` in tsx files and I think these are the only places a key was missing! Co-authored-by: bengotow <bgotow@elementl.com>
dagster-io · Feb 22, 2023 · 2aba792 · 2aba792
1 parent 98bc51c
commit 2aba792
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/js_modules/dagit/packages/core/src/instigation/TickHistory.tsx b/js_modules/dagit/packages/core/src/instigation/TickHistory.tsx
@@ -240,9 +240,9 @@ export const TicksTable = ({
                 <td>
                   {tick.runIds.length ? (
                     tick.runs.map((run) => (
-                      <>
-                        <RunStatusLink key={run.id} run={run} />
-                      </>
+                      <React.Fragment key={run.id}>
+                        <RunStatusLink run={run} />
+                      </React.Fragment>
                     ))
                   ) : (
                     <>&mdash;</>

diff --git a/js_modules/dagit/packages/core/src/launchpad/RunPreview.tsx b/js_modules/dagit/packages/core/src/launchpad/RunPreview.tsx
@@ -98,7 +98,7 @@ const RemoveExtraConfigButton = ({
           </p>
           {Object.entries(knownKeyExtraPaths).length > 0 &&
             Object.entries(knownKeyExtraPaths).map(([key, value]) => (
-              <>
+              <React.Fragment key={key}>
                 <p>Extra {key}:</p>
                 <ul>
                   {value.map((v) => (
@@ -107,7 +107,7 @@ const RemoveExtraConfigButton = ({
                     </li>
                   ))}
                 </ul>
-              </>
+              </React.Fragment>
             ))}
           {otherPaths.length > 0 && (
             <>

diff --git a/js_modules/dagit/packages/core/src/runs/LogsRowStructuredContent.tsx b/js_modules/dagit/packages/core/src/runs/LogsRowStructuredContent.tsx
@@ -325,16 +325,16 @@ const FailureContent: React.FC<{
     }
 
     if (error.errorChain.length) {
-      errorCause = error.errorChain.map((chainLink) => (
-        <>
+      errorCause = error.errorChain.map((chainLink, index) => (
+        <React.Fragment key={index}>
           {chainLink.isExplicitLink
             ? `The above exception was caused by the following exception:\n`
             : `The above exception occurred during handling of the following exception:\n`}
           <span style={{color: Colors.Red500}}>{`${chainLink.error.message}`}</span>
           {chainLink.error.stack.length ? (
             <span style={{color: Colors.Red500}}>{`\nStack Trace:\n${chainLink.error.stack}`}</span>
           ) : null}
-        </>
+        </React.Fragment>
       ));
     }
   }
@@ -385,15 +385,15 @@ const StepUpForRetryContent: React.FC<{
       errorCause = (
         <>
           {error.errorChain.map((chainLink, index) => (
-            <>
+            <React.Fragment key={index}>
               {index === 0
                 ? `The retry request was caused by the following exception:\n`
                 : `The above exception was caused by the following exception:\n`}
               <span style={{color: Colors.Red500}}>{`${chainLink.error.message}`}</span>
               <span
                 style={{color: Colors.Red500}}
               >{`\nStack Trace:\n${chainLink.error.stack}`}</span>
-            </>
+            </React.Fragment>
           ))}
         </>
       );