[Security Solution] Truncate long policy name in admin tab (#101105)
This commit is contained in:
parent
598e63b532
commit
a5949bf3da
|
@ -6,6 +6,7 @@ exports[`HeaderPage it renders 1`] = `
|
|||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
justifyContent="spaceBetween"
|
||||
>
|
||||
<FlexItem>
|
||||
<Memo(TitleComponent)
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -11,9 +11,13 @@ exports[`TruncatableText renders correctly against snapshot 1`] = `
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
<span
|
||||
className="c0"
|
||||
>
|
||||
Hiding in plain sight
|
||||
</span>
|
||||
<TruncatableText>
|
||||
<EllipsisText>
|
||||
<span
|
||||
className="c0"
|
||||
>
|
||||
Hiding in plain sight
|
||||
</span>
|
||||
</EllipsisText>
|
||||
</TruncatableText>
|
||||
`;
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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';
|
|
@ -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>
|
||||
);
|
||||
}
|
Loading…
Reference in a new issue