From eacde544f31a3a0b697cb79b1deb469737a44ed6 Mon Sep 17 00:00:00 2001
From: Quinn Slack <quinn@slack.org>
Date: Wed, 26 Jun 2024 02:06:54 -0700
Subject: [PATCH] add React key to fragments in code monitoring logs (#63479)

Fixes the "missing key" React warning.


## Test plan

Ensure no console warning
---
 .../code-monitoring/CodeMonitoringLogs.tsx    |  3 +++
 .../components/logs/TriggerEvent.tsx          |  4 ++--
 .../code-monitoring/testing/util.ts           | 20 +++++++++++++++----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/client/web/src/enterprise/code-monitoring/CodeMonitoringLogs.tsx b/client/web/src/enterprise/code-monitoring/CodeMonitoringLogs.tsx
index 4bfdbadf2b0..a1be11afcfe 100644
--- a/client/web/src/enterprise/code-monitoring/CodeMonitoringLogs.tsx
+++ b/client/web/src/enterprise/code-monitoring/CodeMonitoringLogs.tsx
@@ -65,18 +65,21 @@ export const CODE_MONITOR_EVENTS = gql`
         actions {
             nodes {
                 ... on MonitorWebhook {
+                    id
                     __typename
                     events {
                         ...MonitorActionEvents
                     }
                 }
                 ... on MonitorEmail {
+                    id
                     __typename
                     events {
                         ...MonitorActionEvents
                     }
                 }
                 ... on MonitorSlackWebhook {
+                    id
                     __typename
                     events {
                         ...MonitorActionEvents
diff --git a/client/web/src/enterprise/code-monitoring/components/logs/TriggerEvent.tsx b/client/web/src/enterprise/code-monitoring/components/logs/TriggerEvent.tsx
index b9aedf78241..e482eace142 100644
--- a/client/web/src/enterprise/code-monitoring/components/logs/TriggerEvent.tsx
+++ b/client/web/src/enterprise/code-monitoring/components/logs/TriggerEvent.tsx
@@ -106,7 +106,7 @@ export const TriggerEvent: React.FunctionComponent<
                     />
 
                     {triggerEvent.actions.nodes.map(action => (
-                        <>
+                        <React.Fragment key={action.id}>
                             {action.events.nodes.map(actionEvent => (
                                 <CollapsibleDetailsWithStatus
                                     key={actionEvent.id}
@@ -125,7 +125,7 @@ export const TriggerEvent: React.FunctionComponent<
                                     startOpen={startOpen}
                                 />
                             )}
-                        </>
+                        </React.Fragment>
                     ))}
                 </ConnectionList>
             )}
diff --git a/client/web/src/enterprise/code-monitoring/testing/util.ts b/client/web/src/enterprise/code-monitoring/testing/util.ts
index 9bb525f6d76..8978bdecc7d 100644
--- a/client/web/src/enterprise/code-monitoring/testing/util.ts
+++ b/client/web/src/enterprise/code-monitoring/testing/util.ts
@@ -1,7 +1,7 @@
 import type { AuthenticatedUser } from '../../../auth'
 import {
-    type CodeMonitorFields,
     EventStatus,
+    type CodeMonitorFields,
     type ListCodeMonitors,
     type MonitorTriggerEventsResult,
 } from '../../../graphql-operations'
@@ -53,13 +53,13 @@ export const mockCodeMonitorFields: CodeMonitorFields = {
     },
 }
 
-export const mockCodeMonitor = {
+export const mockCodeMonitor: { node: CodeMonitorFields } = {
     node: {
         __typename: 'Monitor',
         id: 'foo0',
         description: 'Test code monitor',
         enabled: true,
-        owner: { id: 'test-id', namespaceName: 'test-user' },
+        owner: { id: 'test-id', namespaceName: 'test-user', url: '/user/test-user' },
         actions: {
             nodes: [
                 {
@@ -67,7 +67,7 @@ export const mockCodeMonitor = {
                     id: 'test-action-0',
                     enabled: true,
                     includeResults: false,
-                    recipients: { nodes: [{ id: 'baz-0', url: '/user/test' }] },
+                    recipients: { nodes: [{ id: 'baz-0' }] },
                 },
                 {
                     __typename: 'MonitorSlackWebhook',
@@ -400,6 +400,7 @@ export const mockLogs: MonitorTriggerEventsResult = {
                                         nodes: [
                                             {
                                                 __typename: 'MonitorEmail',
+                                                id: 'm1',
                                                 events: {
                                                     __typename: 'MonitorActionEventConnection',
                                                     nodes: [],
@@ -407,6 +408,7 @@ export const mockLogs: MonitorTriggerEventsResult = {
                                             },
                                             {
                                                 __typename: 'MonitorSlackWebhook',
+                                                id: 'm2',
                                                 events: {
                                                     __typename: 'MonitorActionEventConnection',
                                                     nodes: [
@@ -436,6 +438,7 @@ export const mockLogs: MonitorTriggerEventsResult = {
                                         nodes: [
                                             {
                                                 __typename: 'MonitorEmail',
+                                                id: 'm3',
                                                 events: {
                                                     __typename: 'MonitorActionEventConnection',
                                                     nodes: [],
@@ -443,6 +446,7 @@ export const mockLogs: MonitorTriggerEventsResult = {
                                             },
                                             {
                                                 __typename: 'MonitorSlackWebhook',
+                                                id: 'm4',
                                                 events: {
                                                     __typename: 'MonitorActionEventConnection',
                                                     nodes: [
@@ -472,6 +476,7 @@ export const mockLogs: MonitorTriggerEventsResult = {
                                         nodes: [
                                             {
                                                 __typename: 'MonitorEmail',
+                                                id: 'm5',
                                                 events: {
                                                     __typename: 'MonitorActionEventConnection',
                                                     nodes: [],
@@ -479,6 +484,7 @@ export const mockLogs: MonitorTriggerEventsResult = {
                                             },
                                             {
                                                 __typename: 'MonitorSlackWebhook',
+                                                id: 'm6',
                                                 events: {
                                                     __typename: 'MonitorActionEventConnection',
                                                     nodes: [
@@ -543,6 +549,7 @@ export const mockLogs: MonitorTriggerEventsResult = {
                                         nodes: [
                                             {
                                                 __typename: 'MonitorSlackWebhook',
+                                                id: 'm7',
                                                 events: {
                                                     __typename: 'MonitorActionEventConnection',
                                                     nodes: [
@@ -588,6 +595,7 @@ export const mockLogs: MonitorTriggerEventsResult = {
                                         nodes: [
                                             {
                                                 __typename: 'MonitorEmail',
+                                                id: 'm8',
                                                 events: {
                                                     __typename: 'MonitorActionEventConnection',
                                                     nodes: [],
@@ -595,6 +603,7 @@ export const mockLogs: MonitorTriggerEventsResult = {
                                             },
                                             {
                                                 __typename: 'MonitorSlackWebhook',
+                                                id: 'm9',
                                                 events: {
                                                     __typename: 'MonitorActionEventConnection',
                                                     nodes: [
@@ -610,6 +619,7 @@ export const mockLogs: MonitorTriggerEventsResult = {
                                             },
                                             {
                                                 __typename: 'MonitorWebhook',
+                                                id: 'm10',
                                                 events: {
                                                     __typename: 'MonitorActionEventConnection',
                                                     nodes: [],
@@ -647,6 +657,7 @@ export const mockLogs: MonitorTriggerEventsResult = {
                                         nodes: [
                                             {
                                                 __typename: 'MonitorEmail',
+                                                id: 'm11',
                                                 events: {
                                                     __typename: 'MonitorActionEventConnection',
                                                     nodes: [],
@@ -654,6 +665,7 @@ export const mockLogs: MonitorTriggerEventsResult = {
                                             },
                                             {
                                                 __typename: 'MonitorSlackWebhook',
+                                                id: 'm12',
                                                 events: {
                                                     __typename: 'MonitorActionEventConnection',
                                                     nodes: [