[data view mgmt] fix data view name wrap (#127319)

* use EuiLink instead of EuiButton

* better tag positions

* fix rendering and text

* lint fixes
This commit is contained in:
Matthew Kime 2022-03-09 22:56:30 -06:00 committed by GitHub
parent e378c0d890
commit c7734bc945
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 28 deletions

View file

@ -5,16 +5,14 @@
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import { css } from '@emotion/react';
import {
EuiBadge,
EuiButton,
EuiButtonEmpty,
EuiLink,
EuiInMemoryTable,
EuiPageHeader,
EuiSpacer,
EuiFlexItem,
EuiFlexGroup,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { RouteComponentProps, withRouter, useLocation } from 'react-router-dom';
@ -53,10 +51,6 @@ const securityDataView = i18n.translate(
const securitySolution = 'security-solution';
const flexItemStyles = css`
justify-content: center;
`;
interface Props extends RouteComponentProps {
canSave: boolean;
showCreateDialog?: boolean;
@ -140,25 +134,19 @@ export const IndexPatternTable = ({
defaultMessage: 'Name',
}),
render: (name: string, dataView: IndexPatternTableItem) => (
<>
<EuiFlexGroup gutterSize="s" wrap>
<EuiFlexItem grow={false} css={flexItemStyles}>
<EuiButtonEmpty size="s" {...reactRouterNavigate(history, `patterns/${dataView.id}`)}>
{name}
</EuiButtonEmpty>
</EuiFlexItem>
{dataView?.id?.indexOf(securitySolution) === 0 && (
<EuiFlexItem grow={false} css={flexItemStyles}>
<EuiBadge>{securityDataView}</EuiBadge>
</EuiFlexItem>
)}
{dataView?.tags?.map(({ key: tagKey, name: tagName }) => (
<EuiFlexItem grow={false} css={flexItemStyles} key={tagKey}>
<EuiBadge>{tagName}</EuiBadge>
</EuiFlexItem>
))}
</EuiFlexGroup>
</>
<div>
<EuiLink {...reactRouterNavigate(history, `patterns/${dataView.id}`)}>{name}</EuiLink>
{dataView?.id?.indexOf(securitySolution) === 0 && (
<>
&emsp;<EuiBadge>{securityDataView}</EuiBadge>
</>
)}
{dataView?.tags?.map(({ key: tagKey, name: tagName }) => (
<>
&emsp;<EuiBadge key={tagKey}>{tagName}</EuiBadge>
</>
))}
</div>
),
dataType: 'string' as const,
sortable: ({ sort }: { sort: string }) => sort,

View file

@ -357,7 +357,7 @@ export class SettingsPageObject extends FtrService {
}
async clickIndexPatternByName(name: string) {
const indexLink = await this.find.byXPath(`//a[descendant::*[text()='${name}']]`);
const indexLink = await this.find.byXPath(`//a[text()='${name}']`);
await indexLink.click();
}