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

* use EuiLink instead of EuiButton

* better tag positions

* fix rendering and text

* lint fixes

(cherry picked from commit c7734bc945)
This commit is contained in:
Matthew Kime 2022-03-10 01:12:23 -06:00 committed by GitHub
parent 07b9f37693
commit a94043b55e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 29 deletions

View file

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

View file

@ -315,7 +315,7 @@ export class SettingsPageObject extends FtrService {
} }
async clickIndexPatternByName(name: string) { 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(); await indexLink.click();
} }