[Fleet] Fix displaying agent status bar with no agents (#156541)

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.test.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { createFleetTestRendererMock } from '../../../../../../mock';
+
+import { AgentStatusBar } from './status_bar';
+
+describe('AgentStatusBar', () => {
+  it('should render the status bar if there is some agent displayed', () => {
+    const renderer = createFleetTestRendererMock();
+    const res = renderer.render(
+      <AgentStatusBar
+        agentStatus={
+          {
+            healthy: 10,
+            inactive: 0,
+            offline: 0,
+          } as any
+        }
+      />
+    );
+    expect(res.queryByTestId('agentStatusBar')).not.toBeNull();
+  });
+
+  it('should not render the status bar if there is no agent displayed', () => {
+    const renderer = createFleetTestRendererMock();
+    const res = renderer.render(
+      <AgentStatusBar
+        agentStatus={
+          {
+            healthy: 0,
+            inactive: 0,
+            offline: 0,
+          } as any
+        }
+      />
+    );
+    expect(res.queryByTestId('agentStatusBar')).toBeNull();
+  });
+});

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { EuiColorPaletteDisplay } from '@elastic/eui';
+import { EuiColorPaletteDisplay, EuiSpacer } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
 import { AGENT_STATUSES, getColorForAgentStatus } from '../../services/agent_status';
@@ -35,13 +35,19 @@ export const AgentStatusBar: React.FC<{
       return acc;
     }, [] as Array<{ stop: number; color: string }>);
   }, [agentStatus]);
+
+  const hasNoAgent = palette[palette.length - 1].stop === 0;
+
+  if (hasNoAgent) {
+    return <EuiSpacer size="s" />;
+  }
+
   return (
-    <>
-      <StyledEuiColorPaletteDisplay
-        className="ingest-agent-status-bar"
-        size="s"
-        palette={palette}
-      />
-    </>
+    <StyledEuiColorPaletteDisplay
+      data-test-subj="agentStatusBar"
+      className="ingest-agent-status-bar"
+      size="s"
+      palette={palette}
+    />
   );
 };