[8.10] [Fleet][Kafka] Headers and topics changes trigger hasChanged (#…

…166062) (#166471)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Fleet][Kafka] Headers and topics changes trigger hasChanged
(#166062)](#166062)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Konrad
Szwarc","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-09-14T14:32:02Z","message":"[Fleet][Kafka]
Headers and topics changes trigger hasChanged
(#166062)\n\nhttps://github.com//issues/165976\r\n\r\nProper
onChange function for headers and topics fields that now\r\ncorrectly
triggers `hasChanged` property resulting in activating `Save`\r\nbutton
as soon as any change is
made.\r\n\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/29123534/935aee94-d4c3-424e-9481-32103eeb5b04","sha":"9578950404608b8ffec8c0d856f91f2d6ac0186f","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Fleet","v8.11.0","v8.10.1"],"number":166062,"url":"https://github.com/elastic/kibana/pull/166062","mergeCommit":{"message":"[Fleet][Kafka]
Headers and topics changes trigger hasChanged
(#166062)\n\nhttps://github.com//issues/165976\r\n\r\nProper
onChange function for headers and topics fields that now\r\ncorrectly
triggers `hasChanged` property resulting in activating `Save`\r\nbutton
as soon as any change is
made.\r\n\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/29123534/935aee94-d4c3-424e-9481-32103eeb5b04","sha":"9578950404608b8ffec8c0d856f91f2d6ac0186f"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/166062","number":166062,"mergeCommit":{"message":"[Fleet][Kafka]
Headers and topics changes trigger hasChanged
(#166062)\n\nhttps://github.com//issues/165976\r\n\r\nProper
onChange function for headers and topics fields that now\r\ncorrectly
triggers `hasChanged` property resulting in activating `Save`\r\nbutton
as soon as any change is
made.\r\n\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/29123534/935aee94-d4c3-424e-9481-32103eeb5b04","sha":"9578950404608b8ffec8c0d856f91f2d6ac0186f"}},{"branch":"8.10","label":"v8.10.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Konrad Szwarc <[email protected]>

x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/output_form_kafka_headers.tsx

@@ -38,8 +38,15 @@ export const OutputFormKafkaHeaders: React.FunctionComponent<{ inputs: OutputFor
 
   const handleKeyValuePairChange = useCallback(
     (index: number, field: 'key' | 'value', value: string) => {
-      const updatedPairs = [...keyValuePairs];
-      updatedPairs[index][field] = value;
+      const updatedPairs = keyValuePairs.map((pair, i) => {
+        if (i === index) {
+          return {
+            ...pair,
+            [field]: value,
+          };
+        }
+        return pair;
+      });
       onChange(updatedPairs);
     },
     [keyValuePairs, onChange]

x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/output_form_kafka_topics.tsx

@@ -94,17 +94,29 @@ export const OutputFormKafkaTopics: React.FunctionComponent<{ inputs: OutputForm
 
   const handleTopicProcessorChange = useCallback(
     (index: number, field: 'topic' | 'condition' | 'type', value: string) => {
-      const updatedPairs = [...topics];
-      if (field === 'topic') {
-        updatedPairs[index].topic = value;
-      } else {
-        updatedPairs[index].when = {
-          ...(updatedPairs[index].when || {}),
-          ...((field === 'condition' ? { condition: value } : {}) as { condition?: string }),
-          ...((field === 'type' ? { type: value } : {}) as { type?: ValueOf<KafkaTopicWhenType> }),
-        };
-      }
-      onChange(updatedPairs);
+      const updatedTopics = topics.map((topic, i) => {
+        if (i === index) {
+          if (field === 'topic') {
+            return {
+              ...topic,
+              topic: value,
+            };
+          } else {
+            return {
+              ...topic,
+              when: {
+                ...(topic.when || {}),
+                ...((field === 'condition' ? { condition: value } : {}) as { condition?: string }),
+                ...((field === 'type' ? { type: value } : {}) as {
+                  type?: ValueOf<KafkaTopicWhenType>;
+                }),
+              },
+            };
+          }
+        }
+        return topic;
+      });
+      onChange(updatedTopics);
     },
     [topics, onChange]
   );