From ccb25d048ced7c067d0bad1a3d77eadac7b0c7b5 Mon Sep 17 00:00:00 2001
From: Kyle Pollich <kyle.pollich@elastic.co>
Date: Thu, 19 May 2022 13:42:10 -0400
Subject: [PATCH] Display tooltips for long tags, even if there are less than 3
 total tags (#132528)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../agents/agent_list_page/components/tags.tsx  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/tags.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/tags.tsx
index 9e084b07e64d17..f93646eb120abe 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/tags.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/tags.tsx
@@ -9,7 +9,7 @@ import { EuiToolTip } from '@elastic/eui';
 import { take } from 'lodash';
 import React from 'react';
 
-import { truncateTag } from '../utils';
+import { truncateTag, MAX_TAG_DISPLAY_LENGTH } from '../utils';
 
 interface Props {
   tags: string[];
@@ -30,7 +30,20 @@ export const Tags: React.FunctionComponent<Props> = ({ tags }) => {
           </EuiToolTip>
         </>
       ) : (
-        <span data-test-subj="agentTags">{tags.map(truncateTag).join(', ')}</span>
+        <span data-test-subj="agentTags">
+          {tags.map((tag, index) => (
+            <>
+              {index > 0 && ', '}
+              {tag.length > MAX_TAG_DISPLAY_LENGTH ? (
+                <EuiToolTip content={<span>{tag}</span>} key={tag}>
+                  <span>{truncateTag(tag)}</span>
+                </EuiToolTip>
+              ) : (
+                <span key={tag}>{tag}</span>
+              )}
+            </>
+          ))}
+        </span>
       )}
     </>
   );