[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
|
<EuiFlexGroup
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
|
justifyContent="spaceBetween"
|
||||||
>
|
>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Memo(TitleComponent)
|
<Memo(TitleComponent)
|
||||||
|
|
|
@ -7,7 +7,11 @@ exports[`Title it renders 1`] = `
|
||||||
<h1
|
<h1
|
||||||
data-test-subj="header-page-title"
|
data-test-subj="header-page-title"
|
||||||
>
|
>
|
||||||
Test title
|
<TruncatableText
|
||||||
|
tooltipContent="Test title"
|
||||||
|
>
|
||||||
|
Test title
|
||||||
|
</TruncatableText>
|
||||||
|
|
||||||
<StyledEuiBetaBadge
|
<StyledEuiBetaBadge
|
||||||
label="Beta"
|
label="Beta"
|
||||||
|
|
|
@ -43,7 +43,13 @@ const Header = styled.header.attrs({
|
||||||
Header.displayName = 'Header';
|
Header.displayName = 'Header';
|
||||||
|
|
||||||
const FlexItem = styled(EuiFlexItem)`
|
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';
|
FlexItem.displayName = 'FlexItem';
|
||||||
|
|
||||||
|
@ -112,7 +118,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<Header border={border} {...rest}>
|
<Header border={border} {...rest}>
|
||||||
<EuiFlexGroup alignItems="center">
|
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
{backOptions && (
|
{backOptions && (
|
||||||
<LinkBack>
|
<LinkBack>
|
||||||
|
|
|
@ -11,6 +11,7 @@ import styled from 'styled-components';
|
||||||
|
|
||||||
import { DraggableArguments, BadgeOptions, TitleProp } from './types';
|
import { DraggableArguments, BadgeOptions, TitleProp } from './types';
|
||||||
import { DefaultDraggable } from '../draggables';
|
import { DefaultDraggable } from '../draggables';
|
||||||
|
import { TruncatableText } from '../truncatable_text';
|
||||||
|
|
||||||
const StyledEuiBetaBadge = styled(EuiBetaBadge)`
|
const StyledEuiBetaBadge = styled(EuiBetaBadge)`
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
@ -33,7 +34,7 @@ const TitleComponent: React.FC<Props> = ({ draggableArguments, title, badgeOptio
|
||||||
<EuiTitle size="l">
|
<EuiTitle size="l">
|
||||||
<h1 data-test-subj="header-page-title">
|
<h1 data-test-subj="header-page-title">
|
||||||
{!draggableArguments ? (
|
{!draggableArguments ? (
|
||||||
title
|
<TruncatableText tooltipContent={title}>{title}</TruncatableText>
|
||||||
) : (
|
) : (
|
||||||
<DefaultDraggable
|
<DefaultDraggable
|
||||||
data-test-subj="header-page-draggable"
|
data-test-subj="header-page-draggable"
|
||||||
|
|
|
@ -11,9 +11,13 @@ exports[`TruncatableText renders correctly against snapshot 1`] = `
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
<span
|
<TruncatableText>
|
||||||
className="c0"
|
<EllipsisText>
|
||||||
>
|
<span
|
||||||
Hiding in plain sight
|
className="c0"
|
||||||
</span>
|
>
|
||||||
|
Hiding in plain sight
|
||||||
|
</span>
|
||||||
|
</EllipsisText>
|
||||||
|
</TruncatableText>
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -5,14 +5,14 @@
|
||||||
* 2.0.
|
* 2.0.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { mount, shallow } from 'enzyme';
|
import { mount } from 'enzyme';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { TruncatableText } from '.';
|
import { TruncatableText } from '.';
|
||||||
|
|
||||||
describe('TruncatableText', () => {
|
describe('TruncatableText', () => {
|
||||||
test('renders correctly against snapshot', () => {
|
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();
|
expect(wrapper).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -33,4 +33,11 @@ describe('TruncatableText', () => {
|
||||||
|
|
||||||
expect(wrapper).toHaveStyleRule('white-space', 'nowrap');
|
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.
|
* 2.0.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
import { EuiToolTip } from '@elastic/eui';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Applies CSS styling to enable text to be truncated with an ellipsis.
|
* 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.
|
* Note: Requires a parent container with a defined width or max-width.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const TruncatableText = styled.span`
|
const EllipsisText = styled.span`
|
||||||
&,
|
&,
|
||||||
& * {
|
& * {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -25,4 +27,19 @@ export const TruncatableText = styled.span`
|
||||||
white-space: nowrap;
|
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