[8.12] [Fleet] fix unhandled error in agent details when components a…

…re missing (elastic#174152) (elastic#174156)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[Fleet] fix unhandled error in agent details when components are
missing (elastic#174152)](elastic#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":"[email protected]"},"sourceCommit":{"committedDate":"2024-01-03T11:49:09Z","message":"[Fleet]
fix unhandled error in agent details when components are missing
(elastic#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
(elastic#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
(elastic#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 <[email protected]>

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();
+  });
 });

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',
+                    },
+                  ]
+                : [],
             },
           ];
         }