Fix some EuiFlyout and EuiModal usages (#35829) (#35894)

* Fix maps layer flyout

* Fixing some flyout headers with border and size

* Using euiOverflowShadow to remove warnings

* Fixed up some regular modal usages

* Added danger colors to EuiConfirmModals where necessary
This commit is contained in:
Caroline Horn 2019-05-01 17:48:41 -04:00 committed by Nathan Reese
parent 8bc95ad93f
commit 6d97358edd
32 changed files with 317 additions and 238 deletions

View file

@ -11,7 +11,7 @@ exports[`renders DashboardCloneModal 1`] = `
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Clone Dashboard"
defaultMessage="Clone dashboard"
id="kbn.dashboard.topNav.cloneModal.cloneDashboardModalHeaderTitle"
values={Object {}}
/>
@ -40,13 +40,11 @@ exports[`renders DashboardCloneModal 1`] = `
/>
</EuiModalBody>
<EuiModalFooter>
<EuiButton
<EuiButtonEmpty
color="primary"
data-test-subj="cloneCancelButton"
fill={false}
iconSide="left"
onClick={[Function]}
size="m"
type="button"
>
<FormattedMessage
@ -54,7 +52,7 @@ exports[`renders DashboardCloneModal 1`] = `
id="kbn.dashboard.topNav.cloneModal.cancelButtonLabel"
values={Object {}}
/>
</EuiButton>
</EuiButtonEmpty>
<EuiButton
color="primary"
data-test-subj="cloneConfirmButton"

View file

@ -23,6 +23,7 @@ import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import {
EuiButton,
EuiButtonEmpty,
EuiFieldText,
EuiModal,
EuiModalBody,
@ -90,10 +91,12 @@ class DashboardCloneModalUi extends React.Component {
return (
<Fragment>
<EuiSpacer />
<EuiCallOut
size="s"
title={this.props.intl.formatMessage({
id: 'kbn.dashboard.topNav.cloneModal.dashboardExistsTitle',
defaultMessage: 'A Dashboard with the title {newDashboardName} already exists.',
defaultMessage: 'A dashboard with the title {newDashboardName} already exists.',
}, {
newDashboardName: `'${this.state.newDashboardName}'`,
})}
@ -117,7 +120,6 @@ class DashboardCloneModalUi extends React.Component {
/>
</p>
</EuiCallOut>
<EuiSpacer />
</Fragment>
);
}
@ -134,7 +136,7 @@ class DashboardCloneModalUi extends React.Component {
<EuiModalHeaderTitle>
<FormattedMessage
id="kbn.dashboard.topNav.cloneModal.cloneDashboardModalHeaderTitle"
defaultMessage="Clone Dashboard"
defaultMessage="Clone dashboard"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
@ -151,8 +153,6 @@ class DashboardCloneModalUi extends React.Component {
<EuiSpacer />
{this.renderDuplicateTitleCallout()}
<EuiFieldText
autoFocus
data-test-subj="clonedDashboardTitle"
@ -161,10 +161,12 @@ class DashboardCloneModalUi extends React.Component {
isInvalid={this.state.hasTitleDuplicate}
/>
{this.renderDuplicateTitleCallout()}
</EuiModalBody>
<EuiModalFooter>
<EuiButton
<EuiButtonEmpty
data-test-subj="cloneCancelButton"
onClick={this.props.onClose}
>
@ -172,7 +174,7 @@ class DashboardCloneModalUi extends React.Component {
id="kbn.dashboard.topNav.cloneModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButton>
</EuiButtonEmpty>
<EuiButton
fill

View file

@ -267,6 +267,7 @@ exports[`SourceFiltersTable should show a delete modal 1`] = `
/>
<eui-overlay-mask>
<eui-confirm-modal
buttonColor="danger"
cancelButtonText={
<FormattedMessage
defaultMessage="Cancel"

View file

@ -175,6 +175,7 @@ export class SourceFiltersTable extends Component {
id="kbn.management.editIndexPattern.source.deleteFilter.cancelButtonLabel"
defaultMessage="Cancel"
/>}
buttonColor="danger"
confirmButtonText={<FormattedMessage
id="kbn.management.editIndexPattern.source.deleteFilter.deleteButtonLabel"
defaultMessage="Delete"

View file

@ -2,7 +2,7 @@
exports[`ObjectsTable delete should show a confirm modal 1`] = `
<EuiConfirmModal
buttonColor="primary"
buttonColor="danger"
cancelButtonText={
<FormattedMessage
defaultMessage="Cancel"
@ -95,14 +95,19 @@ exports[`ObjectsTable export should allow the user to choose when exporting all
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText>
<p>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Select which types to export."
defaultMessage="Select which types to export"
id="kbn.management.objects.objectsTable.exportObjectsConfirmModalDescription"
values={Object {}}
/>
</p>
}
labelType="legend"
>
<EuiCheckboxGroup
idToSelectedMap={
Object {
@ -134,26 +139,24 @@ exports[`ObjectsTable export should allow the user to choose when exporting all
]
}
/>
</EuiText>
</EuiFormRow>
<EuiSwitch
checked={true}
label={
<FormattedMessage
defaultMessage="Include related objects"
id="kbn.management.objects.objectsTable.exportObjectsConfirmModal.includeReferencesDeepLabel"
values={Object {}}
/>
}
name="includeReferencesDeep"
onChange={[Function]}
/>
</EuiModalBody>
<EuiModalFooter>
<EuiFlexGroup
justifyContent="spaceBetween"
justifyContent="flexEnd"
>
<EuiFlexItem>
<EuiSwitch
checked={true}
label={
<FormattedMessage
defaultMessage="Include related objects"
id="kbn.management.objects.objectsTable.exportObjectsConfirmModal.includeReferencesDeepLabel"
values={Object {}}
/>
}
name="includeReferencesDeep"
onChange={[Function]}
/>
</EuiFlexItem>
<EuiFlexItem
grow={false}
>

View file

@ -9,8 +9,12 @@ exports[`Flyout conflicts should allow conflict resolution 1`] = `
ownFocus={false}
size="s"
>
<EuiFlyoutHeader>
<EuiTitle>
<EuiFlyoutHeader
hasBorder={true}
>
<EuiTitle
size="m"
>
<h2>
<FormattedMessage
defaultMessage="Import saved objects"
@ -19,6 +23,8 @@ exports[`Flyout conflicts should allow conflict resolution 1`] = `
/>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<span>
<EuiSpacer
size="s"
@ -58,8 +64,6 @@ exports[`Flyout conflicts should allow conflict resolution 1`] = `
</p>
</EuiCallOut>
</span>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiInMemoryTable
columns={
Array [
@ -278,8 +282,12 @@ exports[`Flyout legacy conflicts should allow conflict resolution 1`] = `
ownFocus={false}
size="s"
>
<EuiFlyoutHeader>
<EuiTitle>
<EuiFlyoutHeader
hasBorder={true}
>
<EuiTitle
size="m"
>
<h2>
<FormattedMessage
defaultMessage="Import saved objects"
@ -288,6 +296,8 @@ exports[`Flyout legacy conflicts should allow conflict resolution 1`] = `
/>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<span>
<EuiSpacer
size="s"
@ -352,8 +362,6 @@ exports[`Flyout legacy conflicts should allow conflict resolution 1`] = `
</p>
</EuiCallOut>
</span>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiInMemoryTable
columns={
Array [
@ -458,22 +466,77 @@ exports[`Flyout legacy conflicts should allow conflict resolution 1`] = `
`;
exports[`Flyout legacy conflicts should handle errors 1`] = `
<EuiCallOut
color="danger"
iconType="cross"
size="m"
title={
<FormattedMessage
defaultMessage="Sorry, there was an error"
id="kbn.management.objects.objectsTable.flyout.errorCalloutTitle"
values={Object {}}
/>
}
>
<p>
foobar
</p>
</EuiCallOut>
Array [
<EuiCallOut
color="warning"
iconType="help"
size="m"
title={
<FormattedMessage
defaultMessage="Support for JSON files is going away"
id="kbn.management.objects.objectsTable.flyout.legacyFileUsedTitle"
values={Object {}}
/>
}
>
<p>
<FormattedMessage
defaultMessage="Use our updated export to generate NDJSON files, and you'll be all set."
id="kbn.management.objects.objectsTable.flyout.legacyFileUsedBody"
values={Object {}}
/>
</p>
</EuiCallOut>,
<EuiCallOut
color="warning"
iconType="help"
size="m"
title={
<FormattedMessage
defaultMessage="Index Pattern Conflicts"
id="kbn.management.objects.objectsTable.flyout.indexPatternConflictsTitle"
values={Object {}}
/>
}
>
<p>
<FormattedMessage
defaultMessage="The following saved objects use index patterns that do not exist. Please select the index patterns you'd like re-associated with them. You can {indexPatternLink} if necessary."
id="kbn.management.objects.objectsTable.flyout.indexPatternConflictsDescription"
values={
Object {
"indexPatternLink": <EuiLink
color="primary"
href=""
type="button"
>
<FormattedMessage
defaultMessage="create a new index pattern"
id="kbn.management.objects.objectsTable.flyout.indexPatternConflictsCalloutLinkText"
values={Object {}}
/>
</EuiLink>,
}
}
/>
</p>
</EuiCallOut>,
<EuiCallOut
color="danger"
size="m"
title={
<FormattedMessage
defaultMessage="Sorry, there was an error"
id="kbn.management.objects.objectsTable.flyout.errorCalloutTitle"
values={Object {}}
/>
}
>
<p>
foobar
</p>
</EuiCallOut>,
]
`;
exports[`Flyout should render import step 1`] = `
@ -485,8 +548,12 @@ exports[`Flyout should render import step 1`] = `
ownFocus={false}
size="s"
>
<EuiFlyoutHeader>
<EuiTitle>
<EuiFlyoutHeader
hasBorder={true}
>
<EuiTitle
size="m"
>
<h2>
<FormattedMessage
defaultMessage="Import saved objects"

View file

@ -533,7 +533,6 @@ class FlyoutUI extends Component {
<FormattedMessage id="kbn.management.objects.objectsTable.flyout.errorCalloutTitle" defaultMessage="Sorry, there was an error"/>
)}
color="danger"
iconType="cross"
>
<p>{error}</p>
</EuiCallOut>
@ -879,6 +878,7 @@ class FlyoutUI extends Component {
defaultMessage: 'Overwrite',
},
)}
buttonColor="danger"
onCancel={this.overwriteSkipped.bind(this)}
onConfirm={this.overwriteConfirmed.bind(this)}
defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
@ -896,8 +896,8 @@ class FlyoutUI extends Component {
return (
<EuiFlyout onClose={close} size="s">
<EuiFlyoutHeader>
<EuiTitle>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>
<FormattedMessage
id="kbn.management.objects.objectsTable.flyout.importSavedObjectTitle"
@ -905,10 +905,10 @@ class FlyoutUI extends Component {
/>
</h2>
</EuiTitle>
{this.renderSubheader()}
</EuiFlyoutHeader>
<EuiFlyoutBody>
{this.renderSubheader()}
{this.renderError()}
{this.renderBody()}
</EuiFlyoutBody>

View file

@ -9,8 +9,12 @@ exports[`Relationships should render dashboards normally 1`] = `
ownFocus={false}
size="m"
>
<EuiFlyoutHeader>
<EuiTitle>
<EuiFlyoutHeader
hasBorder={true}
>
<EuiTitle
size="m"
>
<h2>
<EuiToolTip
content="dashboard"
@ -113,8 +117,12 @@ exports[`Relationships should render errors 1`] = `
ownFocus={false}
size="m"
>
<EuiFlyoutHeader>
<EuiTitle>
<EuiFlyoutHeader
hasBorder={true}
>
<EuiTitle
size="m"
>
<h2>
<EuiToolTip
content="dashboard"
@ -159,8 +167,12 @@ exports[`Relationships should render index patterns normally 1`] = `
ownFocus={false}
size="m"
>
<EuiFlyoutHeader>
<EuiTitle>
<EuiFlyoutHeader
hasBorder={true}
>
<EuiTitle
size="m"
>
<h2>
<EuiToolTip
content="index patterns"
@ -314,8 +326,12 @@ exports[`Relationships should render searches normally 1`] = `
ownFocus={false}
size="m"
>
<EuiFlyoutHeader>
<EuiTitle>
<EuiFlyoutHeader
hasBorder={true}
>
<EuiTitle
size="m"
>
<h2>
<EuiToolTip
content="search"
@ -481,8 +497,12 @@ exports[`Relationships should render visualizations normally 1`] = `
ownFocus={false}
size="m"
>
<EuiFlyoutHeader>
<EuiTitle>
<EuiFlyoutHeader
hasBorder={true}
>
<EuiTitle
size="m"
>
<h2>
<EuiToolTip
content="visualization"

View file

@ -290,8 +290,8 @@ class RelationshipsUI extends Component {
return (
<EuiFlyout onClose={close}>
<EuiFlyoutHeader>
<EuiTitle>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>
<EuiToolTip position="top" content={getSavedObjectLabel(type)}>
<EuiIcon

View file

@ -47,7 +47,7 @@ import {
EuiButtonEmpty,
EuiButton,
EuiModalHeaderTitle,
EuiText,
EuiFormRow,
EuiFlexGroup,
EuiFlexItem
} from '@elastic/eui';
@ -474,6 +474,7 @@ class ObjectsTableUI extends Component {
}
onCancel={onCancel}
onConfirm={onConfirm}
buttonColor="danger"
cancelButtonText={(
<FormattedMessage
id="kbn.management.objects.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
@ -585,13 +586,13 @@ class ObjectsTableUI extends Component {
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText>
<p>
<FormattedMessage
id="kbn.management.objects.objectsTable.exportObjectsConfirmModalDescription"
defaultMessage="Select which types to export."
/>
</p>
<EuiFormRow
label={<FormattedMessage
id="kbn.management.objects.objectsTable.exportObjectsConfirmModalDescription"
defaultMessage="Select which types to export"
/>}
labelType="legend"
>
<EuiCheckboxGroup
options={exportAllOptions}
idToSelectedMap={exportAllSelectedOptions}
@ -608,23 +609,21 @@ class ObjectsTableUI extends Component {
});
}}
/>
</EuiText>
</EuiFormRow>
<EuiSwitch
name="includeReferencesDeep"
label={(
<FormattedMessage
id="kbn.management.objects.objectsTable.exportObjectsConfirmModal.includeReferencesDeepLabel"
defaultMessage="Include related objects"
/>
)}
checked={isIncludeReferencesDeepChecked}
onChange={this.changeIncludeReferencesDeep}
/>
</EuiModalBody>
<EuiModalFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem>
<EuiSwitch
name="includeReferencesDeep"
label={(
<FormattedMessage
id="kbn.management.objects.objectsTable.exportObjectsConfirmModal.includeReferencesDeepLabel"
defaultMessage="Include related objects"
/>
)}
checked={isIncludeReferencesDeepChecked}
onChange={this.changeIncludeReferencesDeep}
/>
</EuiFlexItem>
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>

View file

@ -25,32 +25,11 @@
}
.visNewVisDialog__typesWrapper {
@include euiOverflowShadow;
max-width: $euiSizeXXL * 10;
min-height: 0;
padding-top: 2px; // Account for search field dropshadow
padding-bottom: $euiSize;
// Add overflow shadows via pseudo elements
position: relative;
&::before,
&::after {
content: "";
display: block;
position: absolute;
height: $euiSizeXXL;
left: 0;
right: 0;
pointer-events: none;
}
&::before {
top: -$euiSizeXXL + 2px; // Account for search field dropshadow
@include euiOverflowShadowBottom;
}
&::after {
bottom: -$euiSizeL;
@include euiOverflowShadowTop;
}
margin-top: 2px; // Account for search field dropshadow
overflow: hidden;
}
.visNewVisDialog__types {

View file

@ -100,7 +100,7 @@ export class ApplyFiltersPopover extends Component<Props, State> {
<EuiButton onClick={this.onSubmit} fill>
<FormattedMessage
id="common.ui.applyFiltersPopup.saveButtonLabel"
defaultMessage="Save"
defaultMessage="Apply"
/>
</EuiButton>
</EuiModalFooter>

View file

@ -242,21 +242,21 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
}
return (
<EuiFormRow
label={
<FormattedMessage
id="common.ui.savedObjects.saveModal.saveAsNewLabel"
defaultMessage="Save as a new {objectType}"
values={{ objectType: this.props.objectType }}
/>
}
>
<Fragment>
<EuiSwitch
data-test-subj="saveAsNewCheckbox"
checked={this.state.copyOnSave}
onChange={this.onCopyOnSaveChange}
label={
<FormattedMessage
id="common.ui.savedObjects.saveModal.saveAsNewLabel"
defaultMessage="Save as a new {objectType}"
values={{ objectType: this.props.objectType }}
/>
}
/>
</EuiFormRow>
<EuiSpacer />
</Fragment>
);
};
}

View file

@ -41,12 +41,12 @@ class SamplePanelAction extends ContextMenuAction {
getNewPlatform().start.core.overlays.openFlyout(
<React.Fragment>
<EuiFlyoutHeader>
<EuiTitle size="s" data-test-subj="samplePanelActionTitle">
<h1>{embeddable.metadata.title}</h1>
<EuiTitle size="m" data-test-subj="samplePanelActionTitle">
<h2>{embeddable.metadata.title}</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<h1 data-test-subj="samplePanelActionBody">This is a sample action</h1>
<h3 data-test-subj="samplePanelActionBody">This is a sample action</h3>
</EuiFlyoutBody>
</React.Fragment>,
{

View file

@ -72,7 +72,7 @@ class ConfigViewUi extends React.Component<ComponentProps, ComponentState> {
}
return (
<EuiFlyout onClose={this.props.onClose}>
<EuiFlyoutHeader>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>
{this.editMode

View file

@ -99,6 +99,7 @@ export class RemoveLifecyclePolicyConfirmModal extends Component {
defaultMessage="Cancel"
/>
}
buttonColor="danger"
confirmButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.removeLifecyclePolicyConfirmModal.removePolicyButtonText"

View file

@ -167,7 +167,7 @@ export class DetailPanel extends Component {
aria-labelledby="indexDetailsFlyoutTitle"
>
<EuiFlyoutHeader>
<EuiTitle size="l" id="indexDetailsFlyoutTitle">
<EuiTitle id="indexDetailsFlyoutTitle">
<h2>{indexName}{renderBadges(index)}</h2>
</EuiTitle>
{index ? <EuiTabs>{this.renderTabs()}</EuiTabs> : null }

View file

@ -102,7 +102,7 @@ export const SourceConfigurationFlyout: React.FunctionComponent<
hideCloseButton
onClose={noop}
>
<EuiFlyoutHeader>
<EuiFlyoutHeader hasBorder>
<EuiTitle>
<h2 id="sourceConfigurationTitle">
{shouldAllowEdit ? (

View file

@ -17,7 +17,6 @@ import {
EuiCard,
EuiIcon,
EuiFlyoutHeader,
EuiFlyoutBody,
EuiFlyoutFooter,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
@ -182,12 +181,11 @@ export class AddLayerPanel extends Component {
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody
className="mapLayerPanel__body"
data-test-subj="layerAddForm"
>
{this._renderAddLayerForm()}
</EuiFlyoutBody>
<div className="mapLayerPanel__body" data-test-subj="layerAddForm">
<div className="mapLayerPanel__bodyOverflow">
{this._renderAddLayerForm()}
</div>
</div>
<EuiFlyoutFooter className="mapLayerPanel__footer">
<EuiFlexGroup justifyContent="spaceBetween" responsive={false}>

View file

@ -77,35 +77,39 @@ exports[`LayerPanel is rendered 1`] = `
</EuiAccordion>
</div>
</EuiFlyoutHeader>
<EuiFlyoutBody
<div
className="mapLayerPanel__body"
>
<LayerErrors />
<LayerSettings />
<SourceSettings />
<EuiPanel
grow={true}
hasShadow={false}
paddingSize="m"
<div
className="mapLayerPanel__bodyOverflow"
>
<JoinEditor />
</EuiPanel>
<EuiSpacer
size="s"
/>
<StyleTabs
layer={
Object {
"getDisplayName": [Function],
"getId": [Function],
"getImmutableSourceProperties": [Function],
"getLayerTypeIconName": [Function],
"isJoinable": [Function],
"supportsElasticsearchFilters": [Function],
<LayerErrors />
<LayerSettings />
<SourceSettings />
<EuiPanel
grow={true}
hasShadow={false}
paddingSize="m"
>
<JoinEditor />
</EuiPanel>
<EuiSpacer
size="s"
/>
<StyleTabs
layer={
Object {
"getDisplayName": [Function],
"getId": [Function],
"getImmutableSourceProperties": [Function],
"getLayerTypeIconName": [Function],
"isJoinable": [Function],
"supportsElasticsearchFilters": [Function],
}
}
}
/>
</EuiFlyoutBody>
/>
</div>
</div>
<EuiFlyoutFooter
className="mapLayerPanel__footer"
>

View file

@ -5,24 +5,29 @@
*/
.mapLayerPanel__header,
.mapLayerPanel__body,
.mapLayerPanel__footer {
padding: $euiSize;
}
.mapLayerPanel__body {
flex-basis: 1px; /* Fixes scrolling for Firefox */
@include euiOverflowShadow($euiPageBackgroundColor);
padding-bottom: 0; /* 1 */
flex-grow: 1;
flex-basis: 1px; /* Fixes scrolling for Firefox */
overflow-y: hidden;
> *:last-child {
margin-bottom: $euiSize; /* 1 */
.mapLayerPanel__bodyOverflow {
@include euiScrollBar;
height: 100%;
overflow-y: auto;
padding: $euiSize;
> *:last-child {
margin-bottom: $euiSize; /* 1 */
}
}
}
.mapLayerPanel__header {
@include euiOverflowShadowBottom;
}
.mapLayerPanel__sourceDetails {
margin-left: $euiSizeXL;
}
@ -32,6 +37,5 @@
}
.mapLayerPanel__footer {
@include euiOverflowShadowTop;
border-top: $euiBorderThin;
}

View file

@ -20,7 +20,6 @@ import {
EuiPanel,
EuiFlexGroup,
EuiFlyoutHeader,
EuiFlyoutBody,
EuiFlyoutFooter,
EuiSpacer,
EuiAccordion,
@ -192,21 +191,23 @@ export class LayerPanel extends React.Component {
</div>
</EuiFlyoutHeader>
<EuiFlyoutBody className="mapLayerPanel__body">
<div className="mapLayerPanel__body">
<div className="mapLayerPanel__bodyOverflow">
<LayerErrors/>
<LayerErrors/>
<LayerSettings/>
<LayerSettings/>
<SourceSettings/>
<SourceSettings/>
{this._renderFilterSection()}
{this._renderFilterSection()}
{this._renderJoinSection()}
{this._renderJoinSection()}
<StyleTabs layer={selectedLayer}/>
<StyleTabs layer={selectedLayer}/>
</EuiFlyoutBody>
</div>
</div>
<EuiFlyoutFooter className="mapLayerPanel__footer">
<FlyoutFooter hasStateChanged={this.props.hasStateChanged}/>

View file

@ -20,7 +20,7 @@ exports[`RuleEditorFlyout renders the flyout after adding a condition to a rule
hasBorder={true}
>
<EuiTitle
size="l"
size="m"
>
<h1
id="flyoutTitle"
@ -280,7 +280,7 @@ exports[`RuleEditorFlyout renders the flyout after setting the rule to edit 1`]
hasBorder={true}
>
<EuiTitle
size="l"
size="m"
>
<h1
id="flyoutTitle"
@ -554,7 +554,7 @@ exports[`RuleEditorFlyout renders the flyout for creating a rule with conditions
hasBorder={true}
>
<EuiTitle
size="l"
size="m"
>
<h1
id="flyoutTitle"
@ -806,7 +806,7 @@ exports[`RuleEditorFlyout renders the select action component for a detector wit
hasBorder={true}
>
<EuiTitle
size="l"
size="m"
>
<h1
id="flyoutTitle"

View file

@ -475,7 +475,7 @@ export const RuleEditorFlyout = injectI18n(class RuleEditorFlyout extends Compon
aria-labelledby="flyoutTitle"
>
<EuiFlyoutHeader hasBorder={true}>
<EuiTitle size="l">
<EuiTitle size="m">
<h1 id="flyoutTitle">
<FormattedMessage
id="xpack.ml.ruleEditor.ruleEditorFlyout.editRulesTitle"
@ -534,7 +534,7 @@ export const RuleEditorFlyout = injectI18n(class RuleEditorFlyout extends Compon
aria-labelledby="flyoutTitle"
>
<EuiFlyoutHeader hasBorder={true}>
<EuiTitle size="l">
<EuiTitle size="m">
<h1 id="flyoutTitle">
{(isCreate === true) ? (
<FormattedMessage

View file

@ -47,7 +47,7 @@ exports[`DeleteRuleModal renders modal after clicking delete rule link 1`] = `
</EuiLink>
<EuiOverlayMask>
<EuiConfirmModal
buttonColor="primary"
buttonColor="danger"
cancelButtonText={
<FormattedMessage
defaultMessage="Cancel"

View file

@ -58,6 +58,7 @@ export class DeleteRuleModal extends Component {
/>}
onCancel={this.closeModal}
onConfirm={this.deleteRule}
buttonColor="danger"
cancelButtonText={<FormattedMessage
id="xpack.ml.ruleEditor.deleteRuleModal.cancelButtonLabel"
defaultMessage="Cancel"

View file

@ -52,6 +52,18 @@ exports[`ImportModal Renders import modal 1`] = `
</EuiFlexGroup>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
color="primary"
iconSide="left"
onClick={[MockFunction]}
type="button"
>
<FormattedMessage
defaultMessage="Cancel"
id="xpack.ml.calendarsEdit.eventsTable.cancelButtonLabel"
values={Object {}}
/>
</EuiButtonEmpty>
<EuiButton
color="primary"
disabled={true}
@ -67,18 +79,6 @@ exports[`ImportModal Renders import modal 1`] = `
values={Object {}}
/>
</EuiButton>
<EuiButtonEmpty
color="primary"
iconSide="left"
onClick={[MockFunction]}
type="button"
>
<FormattedMessage
defaultMessage="Cancel"
id="xpack.ml.calendarsEdit.eventsTable.cancelButtonLabel"
values={Object {}}
/>
</EuiButtonEmpty>
</EuiModalFooter>
</EuiModal>
</Fragment>

View file

@ -198,6 +198,14 @@ export const ImportModal = injectI18n(class ImportModal extends Component {
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
onClick={closeImportModal}
>
<FormattedMessage
id="xpack.ml.calendarsEdit.eventsTable.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
<EuiButton
onClick={this.handleEventsAdd}
fill
@ -208,14 +216,6 @@ export const ImportModal = injectI18n(class ImportModal extends Component {
defaultMessage="Import"
/>
</EuiButton>
<EuiButtonEmpty
onClick={closeImportModal}
>
<FormattedMessage
id="xpack.ml.calendarsEdit.eventsTable.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiModalFooter>
</EuiModal>
</Fragment>

View file

@ -297,6 +297,14 @@ export const NewEventModal = injectI18n(class NewEventModal extends Component {
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
onClick={closeModal}
>
<FormattedMessage
id="xpack.ml.calendarsEdit.newEventModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
<EuiButton
onClick={this.handleAddEvent}
fill
@ -307,14 +315,6 @@ export const NewEventModal = injectI18n(class NewEventModal extends Component {
defaultMessage="Add"
/>
</EuiButton>
<EuiButtonEmpty
onClick={closeModal}
>
<FormattedMessage
id="xpack.ml.calendarsEdit.newEventModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiModalFooter>
</EuiModal>
</Fragment>

View file

@ -37,7 +37,7 @@ export function Modal(props) {
<EuiOverlayMask>
<EuiModal
onClose={props.close}
maxWidth="860px"
maxWidth={860}
>
<EuiModalHeader>

View file

@ -178,7 +178,7 @@ Array [
class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<h2
class="euiTitle euiTitle--small"
class="euiTitle euiTitle--medium"
id="flyoutTitle"
>
Unable to fetch report info
@ -242,7 +242,7 @@ Array [
class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<h2
class="euiTitle euiTitle--small"
class="euiTitle euiTitle--medium"
id="flyoutTitle"
>
Unable to fetch report info
@ -334,10 +334,10 @@ Array [
className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<EuiTitle
size="s"
size="m"
>
<h2
className="euiTitle euiTitle--small"
className="euiTitle euiTitle--medium"
id="flyoutTitle"
>
Unable to fetch report info
@ -451,10 +451,10 @@ Array [
className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<EuiTitle
size="s"
size="m"
>
<h2
className="euiTitle euiTitle--small"
className="euiTitle euiTitle--medium"
id="flyoutTitle"
>
Unable to fetch report info
@ -617,7 +617,7 @@ Array [
class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<h2
class="euiTitle euiTitle--small"
class="euiTitle euiTitle--medium"
id="flyoutTitle"
>
Job Info
@ -679,7 +679,7 @@ Array [
class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<h2
class="euiTitle euiTitle--small"
class="euiTitle euiTitle--medium"
id="flyoutTitle"
>
Job Info
@ -769,10 +769,10 @@ Array [
className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<EuiTitle
size="s"
size="m"
>
<h2
className="euiTitle euiTitle--small"
className="euiTitle euiTitle--medium"
id="flyoutTitle"
>
Job Info
@ -884,10 +884,10 @@ Array [
className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<EuiTitle
size="s"
size="m"
>
<h2
className="euiTitle euiTitle--small"
className="euiTitle euiTitle--medium"
id="flyoutTitle"
>
Job Info

View file

@ -217,7 +217,7 @@ export class ReportInfoButton extends Component<Props, State> {
data-test-subj="reportInfoFlyout"
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s">
<EuiTitle size="m">
<h2 id="flyoutTitle">{this.state.calloutTitle}</h2>
</EuiTitle>
</EuiFlyoutHeader>