From e6b552f8b1c4fec7700cf73b01c3de54c8a614a8 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 3 Jan 2024 08:01:43 -0500
Subject: [PATCH] [8.12] [Fleet] fix unhandled error in agent details when
 components are missing (#174152) (#174156)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[Fleet] fix unhandled error in agent details when components are
missing (#174152)](https://github.com/elastic/kibana/pull/174152)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Julia
Bardi","email":"90178898+juliaElastic@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-01-03T11:49:09Z","message":"[Fleet]
fix unhandled error in agent details when components are missing
(#174152)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/174012\r\n\r\nAdded a null
check when `agent.components` is undefined, to prevent\r\nunhandled
error in Agent Details UI.\r\n\r\nTo reproduce:\r\n1. start kibana
locally/cloud version 8.12+\r\n2. create agent policy with endpoint
1.3.0 integration (can be latest\r\ntoo)\r\n3. enroll an agent version
7.17.16, can be in container\r\n4. navigate to agent details page, open
the inputs arrows on the right\r\n5. expect that there is no error
banner coming up, but an empty content\r\n\r\n<img width=\"1197\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/90178898/dabcca72-4e08-4185-a166-a91136615904\">\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9da2776d6d89b9e62638d47f8fb5e6101c9bf8e9","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Fleet","v8.12.0","v8.13.0"],"title":"[Fleet]
fix unhandled error in agent details when components are
missing","number":174152,"url":"https://github.com/elastic/kibana/pull/174152","mergeCommit":{"message":"[Fleet]
fix unhandled error in agent details when components are missing
(#174152)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/174012\r\n\r\nAdded a null
check when `agent.components` is undefined, to prevent\r\nunhandled
error in Agent Details UI.\r\n\r\nTo reproduce:\r\n1. start kibana
locally/cloud version 8.12+\r\n2. create agent policy with endpoint
1.3.0 integration (can be latest\r\ntoo)\r\n3. enroll an agent version
7.17.16, can be in container\r\n4. navigate to agent details page, open
the inputs arrows on the right\r\n5. expect that there is no error
banner coming up, but an empty content\r\n\r\n<img width=\"1197\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/90178898/dabcca72-4e08-4185-a166-a91136615904\">\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9da2776d6d89b9e62638d47f8fb5e6101c9bf8e9"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","branchLabelMappingKey":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/174152","number":174152,"mergeCommit":{"message":"[Fleet]
fix unhandled error in agent details when components are missing
(#174152)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/174012\r\n\r\nAdded a null
check when `agent.components` is undefined, to prevent\r\nunhandled
error in Agent Details UI.\r\n\r\nTo reproduce:\r\n1. start kibana
locally/cloud version 8.12+\r\n2. create agent policy with endpoint
1.3.0 integration (can be latest\r\ntoo)\r\n3. enroll an agent version
7.17.16, can be in container\r\n4. navigate to agent details page, open
the inputs arrows on the right\r\n5. expect that there is no error
banner coming up, but an empty content\r\n\r\n<img width=\"1197\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/90178898/dabcca72-4e08-4185-a166-a91136615904\">\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9da2776d6d89b9e62638d47f8fb5e6101c9bf8e9"}}]}]
BACKPORT-->

Co-authored-by: Julia Bardi <90178898+juliaElastic@users.noreply.github.com>
---
 .../agent_details_integration_inputs.test.tsx |  9 +++++++
 .../agent_details_integration_inputs.tsx      | 27 ++++++++++---------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integration_inputs.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integration_inputs.test.tsx
index 59139a09a792f..22d571932c459 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integration_inputs.test.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integration_inputs.test.tsx
@@ -123,4 +123,13 @@ describe('AgentDetailsIntegrationInputs', () => {
       component.queryByTestId('agentDetailsIntegrationsInputStatusHealthSuccess')
     ).not.toBeInTheDocument();
   });
+
+  it('should not throw error when there is no components', () => {
+    agent.components = undefined;
+
+    const component = renderComponent();
+    userEvent.click(component.container.querySelector('#agentIntegrationsInputs')!);
+    userEvent.click(component.container.querySelector('#endpoint')!);
+    expect(component.getByText('Endpoint')).toBeInTheDocument();
+  });
 });
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integration_inputs.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integration_inputs.tsx
index bb3b6ee5ef701..71b1a1ad6fe3e 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integration_inputs.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integration_inputs.tsx
@@ -128,6 +128,7 @@ export const AgentDetailsIntegrationInputs: React.FunctionComponent<{
         current
       ) => {
         if (current.enabled) {
+          const inputStatusFormatter = inputStatusMap.get(current.type);
           return [
             ...acc,
             {
@@ -156,18 +157,20 @@ export const AgentDetailsIntegrationInputs: React.FunctionComponent<{
               ),
               id: current.type,
               icon: getInputStatusIcon(current.type),
-              children: [
-                {
-                  label: (
-                    <AgentDetailsIntegrationInputStatus
-                      inputStatusFormatter={inputStatusMap.get(current.type)!}
-                    />
-                  ),
-                  id: `input-status-${current.type}`,
-                  isExpanded: true,
-                  className: 'input-action-item-expanded',
-                },
-              ],
+              children: !!inputStatusFormatter
+                ? [
+                    {
+                      label: (
+                        <AgentDetailsIntegrationInputStatus
+                          inputStatusFormatter={inputStatusFormatter}
+                        />
+                      ),
+                      id: `input-status-${current.type}`,
+                      isExpanded: true,
+                      className: 'input-action-item-expanded',
+                    },
+                  ]
+                : [],
             },
           ];
         }