github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Cases] Fix bulk actions alignment (#142830)

Browse source 
* Fix alignment

* Remove utility bar

* Fix tests

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Christos Nasikas 2022-10-06 17:47:18 +03:00 • committed by GitHub
parent 022e59f241
commit f880edc50c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 86 additions and 780 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/cases/public/components/all_cases/table.tsx
View file

@ -82,7 +82,7 @@ export const CasesTable: FunctionComponent<CasesTableProps> = ({
<EuiLoadingContent data-test-subj="initialLoadingPanelAllCases" lines={10} />
</Div>
) : (
<Div data-test-subj={isCasesLoading ? 'cases-table-loading' : null}>
<>
<CasesTableUtilityBar
isSelectorView={isSelectorView}
totalCases={data.total ?? 0}
@ -127,7 +127,7 @@ export const CasesTable: FunctionComponent<CasesTableProps> = ({
sorting={sorting}
hasActions={false}
/>
</Div>
</>
);
};
CasesTable.displayName = 'CasesTable';

126
x-pack/plugins/cases/public/components/all_cases/utility_bar.tsx
View file

@ -6,18 +6,18 @@
*/
import React, { FunctionComponent, useCallback, useState } from 'react';
import { EuiContextMenu } from '@elastic/eui';
import {
UtilityBar,
UtilityBarAction,
UtilityBarGroup,
UtilityBarSection,
UtilityBarText,
} from '../utility_bar';
EuiButtonEmpty,
EuiContextMenu,
EuiFlexGroup,
EuiFlexItem,
EuiPopover,
EuiText,
useEuiTheme,
} from '@elastic/eui';
import * as i18n from './translations';
import { Case } from '../../../common/ui/types';
import { useRefreshCases } from './use_on_refresh_cases';
import { UtilityBarBulkActions } from '../utility_bar/utility_bar_bulk_actions';
import { useBulkActions } from './use_bulk_actions';
import { useCasesContext } from '../cases_context/use_cases_context';
@ -30,6 +30,7 @@ interface Props {
export const CasesTableUtilityBar: FunctionComponent<Props> = React.memo(
({ isSelectorView, totalCases, selectedCases, deselectCases }) => {
const { euiTheme } = useEuiTheme();
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const togglePopover = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [isPopoverOpen]);
const closePopover = useCallback(() => setIsPopoverOpen(false), []);
@ -56,47 +57,82 @@ export const CasesTableUtilityBar: FunctionComponent<Props> = React.memo(
return (
<>
<UtilityBar border>
<UtilityBarSection>
<UtilityBarGroup>
<UtilityBarText data-test-subj="case-table-case-count">
{i18n.SHOWING_CASES(totalCases)}
</UtilityBarText>
</UtilityBarGroup>
<UtilityBarGroup data-test-subj="case-table-utility-bar-actions">
<EuiFlexGroup
alignItems="center"
justifyContent="flexStart"
gutterSize="s"
css={{
borderBottom: euiTheme.border.thin,
marginTop: 0,
marginBottom: 0,
paddingTop: euiTheme.size.s,
paddingBottom: euiTheme.size.s,
}}
>
<EuiFlexItem
data-test-subj="case-table-case-count"
grow={false}
css={{
borderRight: euiTheme.border.thin,
paddingRight: euiTheme.size.s,
}}
>
<EuiText size="xs" color="subdued">
{i18n.SHOWING_CASES(totalCases)}
</EuiText>
</EuiFlexItem>
<EuiFlexItem data-test-subj="case-table-utility-bar-actions" grow={false}>
<EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="s">
{!isSelectorView && showBulkActions && (
<>
<UtilityBarText data-test-subj="case-table-selected-case-count">
{i18n.SHOWING_SELECTED_CASES(selectedCases.length)}
</UtilityBarText>
<UtilityBarBulkActions
dataTestSubj="case-table-bulk-actions"
iconSide="right"
iconType="arrowDown"
buttonTitle={i18n.BULK_ACTIONS}
isPopoverOpen={isPopoverOpen}
closePopover={closePopover}
onButtonClick={togglePopover}
>
<EuiContextMenu
panels={panels}
initialPanelId={0}
data-test-subj="case-table-bulk-actions-context-menu"
/>
</UtilityBarBulkActions>
<EuiFlexItem data-test-subj="case-table-selected-case-count" grow={false}>
<EuiText size="xs" color="subdued">
{i18n.SHOWING_SELECTED_CASES(selectedCases.length)}
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiPopover
isOpen={isPopoverOpen}
closePopover={closePopover}
panelPaddingSize="none"
data-test-subj="case-table-bulk-actions-popover"
button={
<EuiButtonEmpty
onClick={togglePopover}
size="xs"
iconSide="right"
iconType="arrowDown"
flush="left"
data-test-subj="case-table-bulk-actions-link-icon"
>
{i18n.BULK_ACTIONS}
</EuiButtonEmpty>
}
>
<EuiContextMenu
panels={panels}
initialPanelId={0}
data-test-subj="case-table-bulk-actions-context-menu"
/>
</EuiPopover>
</EuiFlexItem>
</>
)}
<UtilityBarAction
iconSide="left"
iconType="refresh"
onClick={onRefresh}
dataTestSubj="all-cases-refresh"
>
{i18n.REFRESH}
</UtilityBarAction>
</UtilityBarGroup>
</UtilityBarSection>
</UtilityBar>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
onClick={onRefresh}
size="xs"
iconSide="left"
iconType="refresh"
flush="left"
data-test-subj="all-cases-refresh-link-icon"
>
{i18n.REFRESH}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
{modals}
</>
);

29
x-pack/plugins/cases/public/components/utility_bar/__snapshots__/utility_bar.test.tsx.snap generated
View file

@ -1,29 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`UtilityBar it renders 1`] = `
<UtilityBar>
<UtilityBarSection>
<UtilityBarGroup>
<UtilityBarText>
Test text
</UtilityBarText>
</UtilityBarGroup>
<UtilityBarGroup>
<UtilityBarAction
iconType=""
>
Test action
</UtilityBarAction>
</UtilityBarGroup>
</UtilityBarSection>
<UtilityBarSection>
<UtilityBarGroup>
<UtilityBarAction
iconType="cross"
>
Test action
</UtilityBarAction>
</UtilityBarGroup>
</UtilityBarSection>
</UtilityBar>
`;

9
x-pack/plugins/cases/public/components/utility_bar/__snapshots__/utility_bar_group.test.tsx.snap generated
View file

@ -1,9 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`UtilityBarGroup it renders 1`] = `
<UtilityBarGroup>
<UtilityBarText>
Test text
</UtilityBarText>
</UtilityBarGroup>
`;

11
x-pack/plugins/cases/public/components/utility_bar/__snapshots__/utility_bar_section.test.tsx.snap generated
View file

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`UtilityBarSection it renders 1`] = `
<UtilityBarSection>
<UtilityBarGroup>
<UtilityBarText>
Test text
</UtilityBarText>
</UtilityBarGroup>
</UtilityBarSection>
`;

7
x-pack/plugins/cases/public/components/utility_bar/__snapshots__/utility_bar_text.test.tsx.snap generated
View file

@ -1,7 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`UtilityBarText it renders 1`] = `
<UtilityBarText>
Test text
</UtilityBarText>
`;

13
x-pack/plugins/cases/public/components/utility_bar/index.ts
View file

@ -1,13 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
export { UtilityBar } from './utility_bar';
export { UtilityBarAction } from './utility_bar_action';
export { UtilityBarGroup } from './utility_bar_group';
export { UtilityBarSection } from './utility_bar_section';
export { UtilityBarSpacer } from './utility_bar_spacer';
export { UtilityBarText } from './utility_bar_text';

144
x-pack/plugins/cases/public/components/utility_bar/styles.tsx
View file

@ -1,144 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import styled, { css } from 'styled-components';
/**
* UTILITY BAR
*/
export interface BarProps {
border?: boolean;
}
export interface BarSectionProps {
grow?: boolean;
}
export interface BarGroupProps {
grow?: boolean;
}
export const Bar = styled.aside.attrs({
className: 'casesUtilityBar',
})<BarProps>`
${({ border, theme }) => css`
${border &&
css`
border-bottom: ${theme.eui.euiBorderThin};
padding-bottom: ${theme.eui.euiSizeS};
`}
@media only screen and (min-width: ${theme.eui.euiBreakpoints.l}) {
display: flex;
justify-content: space-between;
}
`}
`;
Bar.displayName = 'Bar';
export const BarSection = styled.div.attrs({
className: 'casesUtilityBar__section',
})<BarSectionProps>`
${({ grow, theme }) => css`
& + & {
margin-top: ${theme.eui.euiSizeS};
}
@media only screen and (min-width: ${theme.eui.euiBreakpoints.m}) {
display: flex;
flex-wrap: wrap;
}
@media only screen and (min-width: ${theme.eui.euiBreakpoints.l}) {
& + & {
margin-top: 0;
margin-left: ${theme.eui.euiSize};
}
}
${grow &&
css`
flex: 1;
`}
`}
`;
BarSection.displayName = 'BarSection';
export const BarGroup = styled.div.attrs({
className: 'casesUtilityBar__group',
})<BarGroupProps>`
${({ grow, theme }) => css`
align-items: flex-start;
display: flex;
flex-wrap: wrap;
& + & {
margin-top: ${theme.eui.euiSizeS};
}
@media only screen and (min-width: ${theme.eui.euiBreakpoints.m}) {
border-right: ${theme.eui.euiBorderThin};
flex-wrap: nowrap;
margin-right: ${theme.eui.euiSizeM};
padding-right: ${theme.eui.euiSizeM};
& + & {
margin-top: 0;
}
&:last-child {
border-right: none;
margin-right: 0;
padding-right: 0;
}
}
& > * {
margin-right: ${theme.eui.euiSize};
&:last-child {
margin-right: 0;
}
}
${grow &&
css`
flex: 1;
`}
`}
`;
BarGroup.displayName = 'BarGroup';
export const BarText = styled.p.attrs({
className: 'casesUtilityBar__text',
})`
${({ theme }) => css`
color: ${theme.eui.euiTextSubduedColor};
font-size: ${theme.eui.euiFontSizeXS};
line-height: ${theme.eui.euiLineHeight};
white-space: nowrap;
`}
`;
BarText.displayName = 'BarText';
export const BarAction = styled.div.attrs({
className: 'casesUtilityBar__action',
})`
${({ theme }) => css`
font-size: ${theme.eui.euiFontSizeXS};
line-height: ${theme.eui.euiLineHeight};
`}
`;
BarAction.displayName = 'BarAction';
export const BarSpacer = styled.div.attrs({
className: 'casesUtilityBar__spacer',
})`
${() => css`
flex: 1;
`}
`;
BarSpacer.displayName = 'BarSpacer';

103
x-pack/plugins/cases/public/components/utility_bar/utility_bar.test.tsx
View file

@ -1,103 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { euiDarkVars } from '@kbn/ui-theme';
import { mount, shallow } from 'enzyme';
import React from 'react';
import { TestProviders } from '../../common/mock';
import {
UtilityBar,
UtilityBarAction,
UtilityBarGroup,
UtilityBarSection,
UtilityBarText,
} from '.';
describe('UtilityBar', () => {
test('it renders', () => {
const wrapper = shallow(
<TestProviders>
<UtilityBar>
<UtilityBarSection>
<UtilityBarGroup>
<UtilityBarText>{'Test text'}</UtilityBarText>
</UtilityBarGroup>
<UtilityBarGroup>
<UtilityBarAction iconType="">{'Test action'}</UtilityBarAction>
</UtilityBarGroup>
</UtilityBarSection>
<UtilityBarSection>
<UtilityBarGroup>
<UtilityBarAction iconType="cross">{'Test action'}</UtilityBarAction>
</UtilityBarGroup>
</UtilityBarSection>
</UtilityBar>
</TestProviders>
);
expect(wrapper.find('UtilityBar')).toMatchSnapshot();
});
test('it applies border styles when border is true', () => {
const wrapper = mount(
<TestProviders>
<UtilityBar border>
<UtilityBarSection>
<UtilityBarGroup>
<UtilityBarText>{'Test text'}</UtilityBarText>
</UtilityBarGroup>
<UtilityBarGroup>
<UtilityBarAction iconType="">{'Test action'}</UtilityBarAction>
</UtilityBarGroup>
</UtilityBarSection>
<UtilityBarSection>
<UtilityBarGroup>
<UtilityBarAction iconType="cross">{'Test action'}</UtilityBarAction>
</UtilityBarGroup>
</UtilityBarSection>
</UtilityBar>
</TestProviders>
);
const casesUtilityBar = wrapper.find('.casesUtilityBar').first();
expect(casesUtilityBar).toHaveStyleRule('border-bottom', euiDarkVars.euiBorderThin);
expect(casesUtilityBar).toHaveStyleRule('padding-bottom', euiDarkVars.euiSizeS);
});
test('it DOES NOT apply border styles when border is false', () => {
const wrapper = mount(
<TestProviders>
<UtilityBar>
<UtilityBarSection>
<UtilityBarGroup>
<UtilityBarText>{'Test text'}</UtilityBarText>
</UtilityBarGroup>
<UtilityBarGroup>
<UtilityBarAction iconType="">{'Test action'}</UtilityBarAction>
</UtilityBarGroup>
</UtilityBarSection>
<UtilityBarSection>
<UtilityBarGroup>
<UtilityBarAction iconType="cross">{'Test action'}</UtilityBarAction>
</UtilityBarGroup>
</UtilityBarSection>
</UtilityBar>
</TestProviders>
);
const casesUtilityBar = wrapper.find('.casesUtilityBar').first();
expect(casesUtilityBar).not.toHaveStyleRule('border-bottom', euiDarkVars.euiBorderThin);
expect(casesUtilityBar).not.toHaveStyleRule('padding-bottom', euiDarkVars.euiSizeS);
});
});

20
x-pack/plugins/cases/public/components/utility_bar/utility_bar.tsx
View file

@ -1,20 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { Bar, BarProps } from './styles';
interface UtilityBarProps extends BarProps {
children: React.ReactNode;
}
export const UtilityBar = React.memo<UtilityBarProps>(({ border, children }) => (
<Bar border={border}>{children}</Bar>
));
UtilityBar.displayName = 'UtilityBar';

42
x-pack/plugins/cases/public/components/utility_bar/utility_bar_action.test.tsx
View file

@ -1,42 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { AppMockRenderer, createAppMockRenderer } from '../../common/mock';
import { UtilityBarAction } from '.';
describe('UtilityBarAction', () => {
let appMockRenderer: AppMockRenderer;
const dataTestSubj = 'test-bar-action';
beforeEach(() => {
jest.clearAllMocks();
appMockRenderer = createAppMockRenderer();
});
test('it renders', () => {
const res = appMockRenderer.render(
<UtilityBarAction iconType="alert" dataTestSubj={dataTestSubj}>
{'Test action'}
</UtilityBarAction>
);
expect(res.getByTestId(dataTestSubj)).toBeInTheDocument();
expect(res.getByText('Test action')).toBeInTheDocument();
});
test('it renders a popover', () => {
const res = appMockRenderer.render(
<UtilityBarAction iconType="alert" dataTestSubj={dataTestSubj}>
{'Test action'}
</UtilityBarAction>
);
expect(res.getByTestId(`${dataTestSubj}-link-icon`)).toBeInTheDocument();
});
});

38
x-pack/plugins/cases/public/components/utility_bar/utility_bar_action.tsx
View file

@ -1,38 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { LinkIcon, LinkIconProps } from '../link_icon';
import { BarAction } from './styles';
export interface UtilityBarActionProps extends LinkIconProps {
dataTestSubj?: string;
}
export const UtilityBarAction = React.memo<UtilityBarActionProps>(
({ dataTestSubj, children, color, disabled, href, iconSide, iconSize, iconType, onClick }) => {
return (
<BarAction data-test-subj={dataTestSubj}>
<LinkIcon
color={color}
disabled={disabled}
href={href}
iconSide={iconSide}
iconSize={iconSize}
iconType={iconType}
onClick={onClick}
dataTestSubj={dataTestSubj ? `${dataTestSubj}-link-icon` : 'utility-bar-action-link-icon'}
>
{children}
</LinkIcon>
</BarAction>
);
}
);
UtilityBarAction.displayName = 'UtilityBarAction';

89
x-pack/plugins/cases/public/components/utility_bar/utility_bar_bulk_actions.test.tsx
View file

@ -1,89 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import userEvent from '@testing-library/user-event';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { AppMockRenderer, createAppMockRenderer, TestProviders } from '../../common/mock';
import { UtilityBarBulkActions } from './utility_bar_bulk_actions';
describe('UtilityBarBulkActions', () => {
let appMockRenderer: AppMockRenderer;
const closePopover = jest.fn();
const onButtonClick = jest.fn();
const dataTestSubj = 'test-bar-action';
beforeEach(() => {
jest.clearAllMocks();
appMockRenderer = createAppMockRenderer();
});
it('renders', () => {
const res = appMockRenderer.render(
<TestProviders>
<UtilityBarBulkActions
iconType="alert"
isPopoverOpen={false}
buttonTitle="button title"
closePopover={closePopover}
onButtonClick={onButtonClick}
dataTestSubj={dataTestSubj}
>
{'Test bulk actions'}
</UtilityBarBulkActions>
</TestProviders>
);
expect(res.getByTestId(dataTestSubj)).toBeInTheDocument();
expect(res.getByText('button title')).toBeInTheDocument();
});
it('renders a popover', async () => {
const res = appMockRenderer.render(
<TestProviders>
<UtilityBarBulkActions
iconType="alert"
isPopoverOpen={true}
buttonTitle="button title"
closePopover={closePopover}
onButtonClick={onButtonClick}
dataTestSubj={dataTestSubj}
>
{'Test bulk actions'}
</UtilityBarBulkActions>
</TestProviders>
);
expect(res.getByText('Test bulk actions')).toBeInTheDocument();
});
it('calls onButtonClick', async () => {
const res = appMockRenderer.render(
<TestProviders>
<UtilityBarBulkActions
iconType="alert"
isPopoverOpen={true}
buttonTitle="button title"
closePopover={closePopover}
onButtonClick={onButtonClick}
dataTestSubj={dataTestSubj}
>
{'Test bulk actions'}
</UtilityBarBulkActions>
</TestProviders>
);
expect(res.getByText('Test bulk actions')).toBeInTheDocument();
act(() => {
userEvent.click(res.getByText('button title'));
});
expect(onButtonClick).toHaveBeenCalled();
});
});

67
x-pack/plugins/cases/public/components/utility_bar/utility_bar_bulk_actions.tsx
View file

@ -1,67 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { EuiPopover } from '@elastic/eui';
import React from 'react';
import { LinkIcon, LinkIconProps } from '../link_icon';
import { BarAction } from './styles';
export interface UtilityBarActionProps extends Omit<LinkIconProps, 'onClick'> {
isPopoverOpen: boolean;
buttonTitle: string;
closePopover: () => void;
onButtonClick: () => void;
dataTestSubj?: string;
}
export const UtilityBarBulkActions = React.memo<UtilityBarActionProps>(
({
dataTestSubj,
children,
color,
disabled,
href,
iconSide,
iconSize,
iconType,
isPopoverOpen,
onButtonClick,
buttonTitle,
closePopover,
}) => {
return (
<BarAction data-test-subj={dataTestSubj}>
<EuiPopover
isOpen={isPopoverOpen}
closePopover={closePopover}
panelPaddingSize="none"
button={
<LinkIcon
color={color}
disabled={disabled}
href={href}
iconSide={iconSide}
iconSize={iconSize}
iconType={iconType}
onClick={onButtonClick}
dataTestSubj={
dataTestSubj ? `${dataTestSubj}-link-icon` : 'utility-bar-bulk-actions-link-icon'
}
>
{buttonTitle}
</LinkIcon>
}
>
{children}
</EuiPopover>
</BarAction>
);
}
);
UtilityBarBulkActions.displayName = 'UtilityBarBulkActions';

26
x-pack/plugins/cases/public/components/utility_bar/utility_bar_group.test.tsx
View file

@ -1,26 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { shallow } from 'enzyme';
import React from 'react';
import { TestProviders } from '../../common/mock';
import { UtilityBarGroup, UtilityBarText } from '.';
describe('UtilityBarGroup', () => {
test('it renders', () => {
const wrapper = shallow(
<TestProviders>
<UtilityBarGroup>
<UtilityBarText>{'Test text'}</UtilityBarText>
</UtilityBarGroup>
</TestProviders>
);
expect(wrapper.find('UtilityBarGroup')).toMatchSnapshot();
});
});

20
x-pack/plugins/cases/public/components/utility_bar/utility_bar_group.tsx
View file

@ -1,20 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { BarGroup, BarGroupProps } from './styles';
export interface UtilityBarGroupProps extends BarGroupProps {
children: React.ReactNode;
}
export const UtilityBarGroup = React.memo<UtilityBarGroupProps>(({ grow, children }) => (
<BarGroup grow={grow}>{children}</BarGroup>
));
UtilityBarGroup.displayName = 'UtilityBarGroup';

28
x-pack/plugins/cases/public/components/utility_bar/utility_bar_section.test.tsx
View file

@ -1,28 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { shallow } from 'enzyme';
import React from 'react';
import { TestProviders } from '../../common/mock';
import { UtilityBarGroup, UtilityBarSection, UtilityBarText } from '.';
describe('UtilityBarSection', () => {
test('it renders', () => {
const wrapper = shallow(
<TestProviders>
<UtilityBarSection>
<UtilityBarGroup>
<UtilityBarText>{'Test text'}</UtilityBarText>
</UtilityBarGroup>
</UtilityBarSection>
</TestProviders>
);
expect(wrapper.find('UtilityBarSection')).toMatchSnapshot();
});
});

20
x-pack/plugins/cases/public/components/utility_bar/utility_bar_section.tsx
View file

@ -1,20 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { BarSection, BarSectionProps } from './styles';
export interface UtilityBarSectionProps extends BarSectionProps {
children: React.ReactNode;
}
export const UtilityBarSection = React.memo<UtilityBarSectionProps>(({ grow, children }) => (
<BarSection grow={grow}>{children}</BarSection>
));
UtilityBarSection.displayName = 'UtilityBarSection';

20
x-pack/plugins/cases/public/components/utility_bar/utility_bar_spacer.tsx
View file

@ -1,20 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { BarSpacer } from './styles';
export interface UtilityBarSpacerProps {
dataTestSubj?: string;
}
export const UtilityBarSpacer = React.memo<UtilityBarSpacerProps>(({ dataTestSubj }) => (
<BarSpacer data-test-subj={dataTestSubj} />
));
UtilityBarSpacer.displayName = 'UtilityBarSpacer';

24
x-pack/plugins/cases/public/components/utility_bar/utility_bar_text.test.tsx
View file

@ -1,24 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { shallow } from 'enzyme';
import React from 'react';
import { TestProviders } from '../../common/mock';
import { UtilityBarText } from '.';
describe('UtilityBarText', () => {
test('it renders', () => {
const wrapper = shallow(
<TestProviders>
<UtilityBarText>{'Test text'}</UtilityBarText>
</TestProviders>
);
expect(wrapper.find('UtilityBarText')).toMatchSnapshot();
});
});

21
x-pack/plugins/cases/public/components/utility_bar/utility_bar_text.tsx
View file

@ -1,21 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { BarText } from './styles';
export interface UtilityBarTextProps {
children: string | JSX.Element;
dataTestSubj?: string;
}
export const UtilityBarText = React.memo<UtilityBarTextProps>(({ children, dataTestSubj }) => (
<BarText data-test-subj={dataTestSubj}>{children}</BarText>
));
UtilityBarText.displayName = 'UtilityBarText';

5
x-pack/test/functional/services/cases/list.ts
View file

@ -159,7 +159,7 @@ export function CasesTableServiceProvider(
},
async refreshTable() {
await testSubjects.click('all-cases-refresh');
await testSubjects.click('all-cases-refresh-link-icon');
},
async openRowActions(index: number) {
@ -177,7 +177,8 @@ export function CasesTableServiceProvider(
async selectAllCasesAndOpenBulkActions() {
await testSubjects.setCheckbox('checkboxSelectAll', 'check');
const button = await find.byCssSelector('[aria-label="Bulk actions"]');
await testSubjects.existOrFail('case-table-bulk-actions-link-icon');
const button = await testSubjects.find('case-table-bulk-actions-link-icon');
await button.click();
},