[Security Solution] Truncate long policy name in admin tab (#101105)

x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`HeaderPage it renders 1`] = `
 >
   <EuiFlexGroup
     alignItems="center"
+    justifyContent="spaceBetween"
   >
     <FlexItem>
       <Memo(TitleComponent)

x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/title.test.tsx.snap

@@ -7,7 +7,11 @@ exports[`Title it renders 1`] = `
   <h1
     data-test-subj="header-page-title"
   >
-    Test title
+    <TruncatableText
+      tooltipContent="Test title"
+    >
+      Test title
+    </TruncatableText>
      
     <StyledEuiBetaBadge
       label="Beta"

x-pack/plugins/security_solution/public/common/components/header_page/index.tsx

@@ -43,7 +43,13 @@ const Header = styled.header.attrs({
 Header.displayName = 'Header';
 
 const FlexItem = styled(EuiFlexItem)`
-  display: block;
+  ${({ theme }) => css`
+    display: block;
+
+    @media only screen and (min-width: ${theme.eui.euiBreakpoints.m}) {
+      max-width: 50%;
+    }
+  `}
 `;
 FlexItem.displayName = 'FlexItem';
 
@@ -112,7 +118,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
   );
   return (
     <Header border={border} {...rest}>
-      <EuiFlexGroup alignItems="center">
+      <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
         <FlexItem>
           {backOptions && (
             <LinkBack>

x-pack/plugins/security_solution/public/common/components/header_page/title.tsx

@@ -11,6 +11,7 @@ import styled from 'styled-components';
 
 import { DraggableArguments, BadgeOptions, TitleProp } from './types';
 import { DefaultDraggable } from '../draggables';
+import { TruncatableText } from '../truncatable_text';
 
 const StyledEuiBetaBadge = styled(EuiBetaBadge)`
   vertical-align: middle;
@@ -33,7 +34,7 @@ const TitleComponent: React.FC<Props> = ({ draggableArguments, title, badgeOptio
   <EuiTitle size="l">
     <h1 data-test-subj="header-page-title">
       {!draggableArguments ? (
-        title
+        <TruncatableText tooltipContent={title}>{title}</TruncatableText>
       ) : (
         <DefaultDraggable
           data-test-subj="header-page-draggable"

x-pack/plugins/security_solution/public/common/components/truncatable_text/__snapshots__/index.test.tsx.snap

@@ -11,9 +11,13 @@ exports[`TruncatableText renders correctly against snapshot 1`] = `
   white-space: nowrap;
 }
 
-<span
+<TruncatableText>
-  className="c0"
+  <EllipsisText>
->
+    <span
-  Hiding in plain sight
+      className="c0"
-</span>
+    >
+      Hiding in plain sight
+    </span>
+  </EllipsisText>
+</TruncatableText>
 `;

x-pack/plugins/security_solution/public/common/components/truncatable_text/index.test.tsx

@@ -5,14 +5,14 @@
  * 2.0.
  */
 
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import React from 'react';
 
 import { TruncatableText } from '.';
 
 describe('TruncatableText', () => {
   test('renders correctly against snapshot', () => {
-    const wrapper = shallow(<TruncatableText>{'Hiding in plain sight'}</TruncatableText>);
+    const wrapper = mount(<TruncatableText>{'Hiding in plain sight'}</TruncatableText>);
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -33,4 +33,11 @@ describe('TruncatableText', () => {
 
     expect(wrapper).toHaveStyleRule('white-space', 'nowrap');
   });
+
+  test('it can add tooltip', () => {
+    const testText = 'Some really really really really really long text.';
+    const wrapper = mount(<TruncatableText tooltipContent={testText}>{testText}</TruncatableText>);
+
+    expect(wrapper.find('EuiToolTip').text()).toEqual(testText);
+  });
 });

x-pack/plugins/security_solution/public/common/components/truncatable_text/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export * from './truncatable_text';

x-pack/plugins/security_solution/public/common/components/truncatable_text/truncatable_text.tsx

@@ -5,7 +5,9 @@
  * 2.0.
  */
 
+import React from 'react';
 import styled from 'styled-components';
+import { EuiToolTip } from '@elastic/eui';
 
 /**
  * Applies CSS styling to enable text to be truncated with an ellipsis.
@@ -14,7 +16,7 @@ import styled from 'styled-components';
  * Note: Requires a parent container with a defined width or max-width.
  */
 
-export const TruncatableText = styled.span`
+const EllipsisText = styled.span`
   &,
   & * {
     display: inline-block;
@@ -25,4 +27,19 @@ export const TruncatableText = styled.span`
     white-space: nowrap;
   }
 `;
-TruncatableText.displayName = 'TruncatableText';
+EllipsisText.displayName = 'EllipsisText';
+
+interface Props {
+  tooltipContent?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function TruncatableText({ tooltipContent, children, ...props }: Props) {
+  if (!tooltipContent) return <EllipsisText {...props}>{children}</EllipsisText>;
+
+  return (
+    <EuiToolTip display="block" content={tooltipContent}>
+      <EllipsisText {...props}>{children}</EllipsisText>
+    </EuiToolTip>
+  );
+}