Fix long agent policy name accessibility in add/edit integration (#113828)

This commit is contained in:
Jack 2021-10-06 10:58:04 -04:00 committed by GitHub
parent 1eceef4fc8
commit e16495792f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -7,6 +7,7 @@
import React, { memo, useMemo } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import styled from 'styled-components';
import {
EuiFlexGroup,
EuiFlexItem,
@ -23,6 +24,14 @@ import type { AgentPolicy, PackageInfo, RegistryPolicyTemplate } from '../../../
import { PackageIcon } from '../../../../components';
import type { EditPackagePolicyFrom } from '../types';
const AgentPolicyName = styled(EuiDescriptionListDescription)`
margin-left: auto;
max-width: 250px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
`;
export const CreatePackagePolicyPageLayout: React.FunctionComponent<{
from: EditPackagePolicyFrom;
cancelUrl: string;
@ -209,9 +218,9 @@ export const CreatePackagePolicyPageLayout: React.FunctionComponent<{
defaultMessage="Agent policy"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription className="eui-textBreakWord">
<AgentPolicyName className="eui-textBreakWord" title={agentPolicy?.name || '-'}>
{agentPolicy?.name || '-'}
</EuiDescriptionListDescription>
</AgentPolicyName>
</EuiDescriptionList>
) : undefined;