[SecuritySolution] Fix styling issue for data views (#119972) (#120096)

* styling

* rm styled component

Co-authored-by: Angela Chuang <6295984+angorayc@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2021-12-01 09:48:28 -05:00 committed by GitHub
parent 4975c1c444
commit 7d3331fb2a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -5,15 +5,16 @@
* 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,
EuiBadgeGroup,
EuiButtonEmpty,
EuiInMemoryTable,
EuiPageHeader,
EuiSpacer,
EuiFlexItem,
EuiFlexGroup,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { RouteComponentProps, withRouter, useLocation } from 'react-router-dom';
@ -59,6 +60,10 @@ const securityDataView = i18n.translate(
const securitySolution = 'security-solution';
const flexItemStyles = css`
justify-content: center;
`;
interface Props extends RouteComponentProps {
canSave: boolean;
showCreateDialog?: boolean;
@ -120,19 +125,24 @@ export const IndexPatternTable = ({
}
) => (
<>
<EuiButtonEmpty size="s" {...reactRouterNavigate(history, `patterns/${index.id}`)}>
{name}
</EuiButtonEmpty>
&emsp;
<EuiBadgeGroup gutterSize="s">
<EuiFlexGroup gutterSize="s" wrap>
<EuiFlexItem grow={false} css={flexItemStyles}>
<EuiButtonEmpty size="s" {...reactRouterNavigate(history, `patterns/${index.id}`)}>
{name}
</EuiButtonEmpty>
</EuiFlexItem>
{index.id && index.id.indexOf(securitySolution) === 0 && (
<EuiBadge>{securityDataView}</EuiBadge>
<EuiFlexItem grow={false} css={flexItemStyles}>
<EuiBadge>{securityDataView}</EuiBadge>
</EuiFlexItem>
)}
{index.tags &&
index.tags.map(({ key: tagKey, name: tagName }) => (
<EuiBadge key={tagKey}>{tagName}</EuiBadge>
<EuiFlexItem grow={false} css={flexItemStyles} key={tagKey}>
<EuiBadge>{tagName}</EuiBadge>
</EuiFlexItem>
))}
</EuiBadgeGroup>
</EuiFlexGroup>
</>
),
dataType: 'string' as const,