[ML] Make layout of Edit Filter List consistent with other settings pages (#33421) (#33491)

This commit is contained in:
Pete Harverson 2019-03-19 11:42:30 +00:00 committed by GitHub
parent a4ed1c442c
commit f6843c79c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 111 additions and 91 deletions

View file

@ -223,7 +223,7 @@ CalendarForm.WrappedComponent.propTypes = {
calendarId: PropTypes.string.isRequired,
canCreateCalendar: PropTypes.bool.isRequired,
canDeleteCalendar: PropTypes.bool.isRequired,
description: PropTypes.string.isRequired,
description: PropTypes.string,
groupIds: PropTypes.array.isRequired,
isEdit: PropTypes.bool.isRequired,
isNewCalendarIdValid: PropTypes.bool.isRequired,

View file

@ -30,7 +30,9 @@ exports[`CalendarListsHeader renders header 1`] = `
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem
grow={false}
>
<EuiTextColor
color="subdued"
component="span"

View file

@ -45,7 +45,7 @@ export function CalendarsListHeader({ totalCount, refreshCalendars }) {
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiTextColor color="subdued">
<p>
<FormattedMessage

View file

@ -30,7 +30,9 @@ exports[`EditFilterListHeader renders the header when creating a new filter list
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem
grow={false}
>
<EuiTextColor
color="subdued"
component="span"
@ -142,7 +144,9 @@ exports[`EditFilterListHeader renders the header when creating a new filter list
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem
grow={false}
>
<EuiTextColor
color="subdued"
component="span"
@ -268,7 +272,9 @@ exports[`EditFilterListHeader renders the header when editing an existing unused
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem
grow={false}
>
<EuiTextColor
color="subdued"
component="span"
@ -380,7 +386,9 @@ exports[`EditFilterListHeader renders the header when editing an existing used f
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem
grow={false}
>
<EuiTextColor
color="subdued"
component="span"

View file

@ -2,43 +2,37 @@
exports[`EditFilterListToolbar renders the toolbar with no items selected 1`] = `
<Fragment>
<EuiFlexGroup
justifyContent="flexEnd"
>
<EuiFlexItem
grow={false}
>
<AddItemPopover
addItems={[MockFunction]}
canCreateFilter={true}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
alignItems="center"
gutterSize="xl"
>
<EuiFlexItem
grow={false}
>
<EuiButton
color="danger"
disabled={true}
fill={false}
iconSide="left"
onClick={[MockFunction]}
type="button"
>
<FormattedMessage
defaultMessage="Delete item"
id="xpack.ml.settings.filterLists.toolbar.deleteItemButtonLabel"
values={Object {}}
/>
</EuiButton>
</EuiFlexItem>
<EuiFlexItem>
<EuiSearchBar
filters={Array []}
onChange={[MockFunction]}
toolsRight={
Array [
<AddItemPopover
addItems={[MockFunction]}
canCreateFilter={true}
/>,
<EuiButton
color="danger"
disabled={true}
fill={false}
iconSide="left"
onClick={[MockFunction]}
size="s"
type="button"
>
<FormattedMessage
defaultMessage="Delete item"
id="xpack.ml.settings.filterLists.toolbar.deleteItemButtonLabel"
values={Object {}}
/>
</EuiButton>,
]
}
/>
</EuiFlexItem>
</EuiFlexGroup>
@ -47,43 +41,37 @@ exports[`EditFilterListToolbar renders the toolbar with no items selected 1`] =
exports[`EditFilterListToolbar renders the toolbar with one item selected 1`] = `
<Fragment>
<EuiFlexGroup
justifyContent="flexEnd"
>
<EuiFlexItem
grow={false}
>
<AddItemPopover
addItems={[MockFunction]}
canCreateFilter={true}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
alignItems="center"
gutterSize="xl"
>
<EuiFlexItem
grow={false}
>
<EuiButton
color="danger"
disabled={false}
fill={false}
iconSide="left"
onClick={[MockFunction]}
type="button"
>
<FormattedMessage
defaultMessage="Delete item"
id="xpack.ml.settings.filterLists.toolbar.deleteItemButtonLabel"
values={Object {}}
/>
</EuiButton>
</EuiFlexItem>
<EuiFlexItem>
<EuiSearchBar
filters={Array []}
onChange={[MockFunction]}
toolsRight={
Array [
<AddItemPopover
addItems={[MockFunction]}
canCreateFilter={true}
/>,
<EuiButton
color="danger"
disabled={false}
fill={false}
iconSide="left"
onClick={[MockFunction]}
size="s"
type="button"
>
<FormattedMessage
defaultMessage="Delete item"
id="xpack.ml.settings.filterLists.toolbar.deleteItemButtonLabel"
values={Object {}}
/>
</EuiButton>,
]
}
/>
</EuiFlexItem>
</EuiFlexGroup>

View file

@ -167,7 +167,7 @@ export const EditFilterListHeader = injectI18n(function ({
<h1>{title}</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiTextColor color="subdued">
<p>
<FormattedMessage

View file

@ -24,6 +24,37 @@ import {
import { AddItemPopover } from '../components/add_item_popover';
function renderToolsRight(
canCreateFilter,
canDeleteFilter,
addItems,
deleteSelectedItems,
selectedItemCount
) {
return [
(
<AddItemPopover
addItems={addItems}
canCreateFilter={canCreateFilter}
key="add_item_btn"
/>
),
(
<EuiButton
color="danger"
size="s"
disabled={(selectedItemCount === 0 || canDeleteFilter === false)}
onClick={deleteSelectedItems}
key="delete_item_btn"
>
<FormattedMessage
id="xpack.ml.settings.filterLists.toolbar.deleteItemButtonLabel"
defaultMessage="Delete item"
/>
</EuiButton>
)];
}
export function EditFilterListToolbar({
canCreateFilter,
canDeleteFilter,
@ -32,35 +63,24 @@ export function EditFilterListToolbar({
deleteSelectedItems,
selectedItemCount }) {
const toolsRight = renderToolsRight(
canCreateFilter,
canDeleteFilter,
addItems,
deleteSelectedItems,
selectedItemCount
);
return (
<React.Fragment>
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<AddItemPopover
addItems={addItems}
canCreateFilter={canCreateFilter}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexGroup alignItems="center" gutterSize="xl">
<EuiFlexItem grow={false}>
<EuiButton
color="danger"
disabled={(selectedItemCount === 0 || canDeleteFilter === false)}
onClick={deleteSelectedItems}
>
<FormattedMessage
id="xpack.ml.settings.filterLists.toolbar.deleteItemButtonLabel"
defaultMessage="Delete item"
/>
</EuiButton>
</EuiFlexItem>
<EuiFlexItem>
<EuiSearchBar
toolsRight={toolsRight}
onChange={onSearchChange}
filters={[]}
/>
</EuiFlexItem>
</EuiFlexGroup>
</React.Fragment>
);

View file

@ -30,7 +30,9 @@ exports[`Filter Lists Header renders header 1`] = `
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem
grow={false}
>
<EuiTextColor
color="subdued"
component="span"

View file

@ -45,7 +45,7 @@ export function FilterListsHeader({ totalCount, refreshFilterLists }) {
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiTextColor color="subdued">
<p>
<FormattedMessage