Display tooltips for long tags, even if there are less than 3 total t…

…ags (#132528)

Co-authored-by: Kibana Machine <[email protected]>

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>
  )}
  </>
  );