[Fleet] fix unhandled error in agent details when components are miss…

…ing (elastic#174152)

## Summary

Closes elastic#174012

Added a null check when `agent.components` is undefined, to prevent
unhandled error in Agent Details UI.

To reproduce:
1. start kibana locally/cloud version 8.12+
2. create agent policy with endpoint 1.3.0 integration (can be latest
too)
3. enroll an agent version 7.17.16, can be in container
4. navigate to agent details page, open the inputs arrows on the right
5. expect that there is no error banner coming up, but an empty content

<img width="1197" alt="image"
src="https://github.com/elastic/kibana/assets/90178898/dabcca72-4e08-4185-a166-a91136615904">


### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

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