[SECURITY_SOLUTION][ENDPOINT] Fix Policy Details Name to ensure it truncates the value when its too long (#71526)
* Fix title not truncated on policy details
This commit is contained in:
parent
b217cb3f96
commit
9e99f739a8
|
@ -25,6 +25,10 @@ exports[`PageView component should display body header custom element 1`] = `
|
|||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.c0 .endpoint-header-leftSection {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
<PageView
|
||||
bodyHeader={
|
||||
<p>
|
||||
|
@ -120,6 +124,10 @@ exports[`PageView component should display body header wrapped in EuiTitle 1`] =
|
|||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.c0 .endpoint-header-leftSection {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
<PageView
|
||||
bodyHeader="body header"
|
||||
viewType="list"
|
||||
|
@ -218,6 +226,10 @@ exports[`PageView component should display header left and right 1`] = `
|
|||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.c0 .endpoint-header-leftSection {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
<PageView
|
||||
headerLeft="page title"
|
||||
headerRight="right side actions"
|
||||
|
@ -243,10 +255,11 @@ exports[`PageView component should display header left and right 1`] = `
|
|||
className="euiPageHeader euiPageHeader--responsive endpoint-header"
|
||||
>
|
||||
<EuiPageHeaderSection
|
||||
className="endpoint-header-leftSection"
|
||||
data-test-subj="pageViewHeaderLeft"
|
||||
>
|
||||
<div
|
||||
className="euiPageHeaderSection"
|
||||
className="euiPageHeaderSection endpoint-header-leftSection"
|
||||
data-test-subj="pageViewHeaderLeft"
|
||||
>
|
||||
<PageViewHeaderTitle>
|
||||
|
@ -331,6 +344,10 @@ exports[`PageView component should display only body if not header props used 1`
|
|||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.c0 .endpoint-header-leftSection {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
<PageView
|
||||
viewType="list"
|
||||
>
|
||||
|
@ -403,6 +420,10 @@ exports[`PageView component should display only header left 1`] = `
|
|||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.c0 .endpoint-header-leftSection {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
<PageView
|
||||
headerLeft="page title"
|
||||
viewType="list"
|
||||
|
@ -427,10 +448,11 @@ exports[`PageView component should display only header left 1`] = `
|
|||
className="euiPageHeader euiPageHeader--responsive endpoint-header"
|
||||
>
|
||||
<EuiPageHeaderSection
|
||||
className="endpoint-header-leftSection"
|
||||
data-test-subj="pageViewHeaderLeft"
|
||||
>
|
||||
<div
|
||||
className="euiPageHeaderSection"
|
||||
className="euiPageHeaderSection endpoint-header-leftSection"
|
||||
data-test-subj="pageViewHeaderLeft"
|
||||
>
|
||||
<PageViewHeaderTitle>
|
||||
|
@ -505,6 +527,10 @@ exports[`PageView component should display only header right but include an empt
|
|||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.c0 .endpoint-header-leftSection {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
<PageView
|
||||
headerRight="right side actions"
|
||||
viewType="list"
|
||||
|
@ -529,10 +555,11 @@ exports[`PageView component should display only header right but include an empt
|
|||
className="euiPageHeader euiPageHeader--responsive endpoint-header"
|
||||
>
|
||||
<EuiPageHeaderSection
|
||||
className="endpoint-header-leftSection"
|
||||
data-test-subj="pageViewHeaderLeft"
|
||||
>
|
||||
<div
|
||||
className="euiPageHeaderSection"
|
||||
className="euiPageHeaderSection endpoint-header-leftSection"
|
||||
data-test-subj="pageViewHeaderLeft"
|
||||
/>
|
||||
</EuiPageHeaderSection>
|
||||
|
@ -604,6 +631,10 @@ exports[`PageView component should pass through EuiPage props 1`] = `
|
|||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.c0 .endpoint-header-leftSection {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
<PageView
|
||||
aria-label="test-aria-label-here"
|
||||
className="test-class-name-here"
|
||||
|
@ -693,6 +724,10 @@ exports[`PageView component should use custom element for header left and not wr
|
|||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.c0 .endpoint-header-leftSection {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
<PageView
|
||||
headerLeft={
|
||||
<p>
|
||||
|
@ -721,10 +756,11 @@ exports[`PageView component should use custom element for header left and not wr
|
|||
className="euiPageHeader euiPageHeader--responsive endpoint-header"
|
||||
>
|
||||
<EuiPageHeaderSection
|
||||
className="endpoint-header-leftSection"
|
||||
data-test-subj="pageViewHeaderLeft"
|
||||
>
|
||||
<div
|
||||
className="euiPageHeaderSection"
|
||||
className="euiPageHeaderSection endpoint-header-leftSection"
|
||||
data-test-subj="pageViewHeaderLeft"
|
||||
>
|
||||
<p>
|
||||
|
|
|
@ -17,6 +17,7 @@ import {
|
|||
EuiTab,
|
||||
EuiTabs,
|
||||
EuiTitle,
|
||||
EuiTitleProps,
|
||||
} from '@elastic/eui';
|
||||
import React, { memo, MouseEventHandler, ReactNode, useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
@ -45,6 +46,9 @@ const StyledEuiPage = styled(EuiPage)`
|
|||
.endpoint-navTabs {
|
||||
margin-left: ${(props) => props.theme.eui.euiSizeM};
|
||||
}
|
||||
.endpoint-header-leftSection {
|
||||
overflow: hidden;
|
||||
}
|
||||
`;
|
||||
|
||||
const isStringOrNumber = /(string|number)/;
|
||||
|
@ -54,13 +58,15 @@ const isStringOrNumber = /(string|number)/;
|
|||
* Can be used when wanting to customize the `headerLeft` value but still use the standard
|
||||
* title component
|
||||
*/
|
||||
export const PageViewHeaderTitle = memo<{ children: ReactNode }>(({ children }) => {
|
||||
return (
|
||||
<EuiTitle size="l">
|
||||
<h1 data-test-subj="pageViewHeaderLeftTitle">{children}</h1>
|
||||
</EuiTitle>
|
||||
);
|
||||
});
|
||||
export const PageViewHeaderTitle = memo<Omit<EuiTitleProps, 'children'> & { children: ReactNode }>(
|
||||
({ children, size = 'l', ...otherProps }) => {
|
||||
return (
|
||||
<EuiTitle {...otherProps} size={size}>
|
||||
<h1 data-test-subj="pageViewHeaderLeftTitle">{children}</h1>
|
||||
</EuiTitle>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
PageViewHeaderTitle.displayName = 'PageViewHeaderTitle';
|
||||
|
||||
|
@ -135,7 +141,10 @@ export const PageView = memo<PageViewProps>(
|
|||
<EuiPageBody>
|
||||
{(headerLeft || headerRight) && (
|
||||
<EuiPageHeader className="endpoint-header">
|
||||
<EuiPageHeaderSection data-test-subj="pageViewHeaderLeft">
|
||||
<EuiPageHeaderSection
|
||||
className="endpoint-header-leftSection"
|
||||
data-test-subj="pageViewHeaderLeft"
|
||||
>
|
||||
{isStringOrNumber.test(typeof headerLeft) ? (
|
||||
<PageViewHeaderTitle>{headerLeft}</PageViewHeaderTitle>
|
||||
) : (
|
||||
|
|
|
@ -168,7 +168,7 @@ export const PolicyDetails = React.memo(() => {
|
|||
defaultMessage="Back to policy list"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
<PageViewHeaderTitle>{policyItem.name}</PageViewHeaderTitle>
|
||||
<PageViewHeaderTitle className="eui-textTruncate">{policyItem.name}</PageViewHeaderTitle>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
Loading…
Reference in a new issue