From a5949bf3da40734284b06a2680d36d34d796196f Mon Sep 17 00:00:00 2001 From: "Joey F. Poon" Date: Fri, 4 Jun 2021 15:29:38 -0500 Subject: [PATCH] [Security Solution] Truncate long policy name in admin tab (#101105) --- .../__snapshots__/index.test.tsx.snap | 1 + .../__snapshots__/title.test.tsx.snap | 6 +++++- .../common/components/header_page/index.tsx | 10 +++++++-- .../common/components/header_page/title.tsx | 3 ++- .../__snapshots__/index.test.tsx.snap | 14 ++++++++----- .../truncatable_text/index.test.tsx | 11 ++++++++-- .../components/truncatable_text/index.ts | 8 +++++++ .../{index.tsx => truncatable_text.tsx} | 21 +++++++++++++++++-- 8 files changed, 61 insertions(+), 13 deletions(-) create mode 100644 x-pack/plugins/security_solution/public/common/components/truncatable_text/index.ts rename x-pack/plugins/security_solution/public/common/components/truncatable_text/{index.tsx => truncatable_text.tsx} (54%) diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap index a2a36b3fe1d3..84c8971e3d35 100644 --- a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap @@ -6,6 +6,7 @@ exports[`HeaderPage it renders 1`] = ` > - Test title + + Test title + 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 = ({ ); return (
- + {backOptions && ( diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/title.tsx b/x-pack/plugins/security_solution/public/common/components/header_page/title.tsx index 5ec05273d16f..471d539ea03f 100644 --- a/x-pack/plugins/security_solution/public/common/components/header_page/title.tsx +++ b/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 = ({ draggableArguments, title, badgeOptio

{!draggableArguments ? ( - title + {title} ) : ( - Hiding in plain sight - + + + + Hiding in plain sight + + + `; diff --git a/x-pack/plugins/security_solution/public/common/components/truncatable_text/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/truncatable_text/index.test.tsx index f54d9e4ed0b8..3bf9cf60afea 100644 --- a/x-pack/plugins/security_solution/public/common/components/truncatable_text/index.test.tsx +++ b/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({'Hiding in plain sight'}); + const wrapper = mount({'Hiding in plain sight'}); 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({testText}); + + expect(wrapper.find('EuiToolTip').text()).toEqual(testText); + }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/truncatable_text/index.ts b/x-pack/plugins/security_solution/public/common/components/truncatable_text/index.ts new file mode 100644 index 000000000000..49ab0ac4defc --- /dev/null +++ b/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'; diff --git a/x-pack/plugins/security_solution/public/common/components/truncatable_text/index.tsx b/x-pack/plugins/security_solution/public/common/components/truncatable_text/truncatable_text.tsx similarity index 54% rename from x-pack/plugins/security_solution/public/common/components/truncatable_text/index.tsx rename to x-pack/plugins/security_solution/public/common/components/truncatable_text/truncatable_text.tsx index 2dd3c35f731e..4c068675aa5a 100644 --- a/x-pack/plugins/security_solution/public/common/components/truncatable_text/index.tsx +++ b/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 {children}; + + return ( + + {children} + + ); +}