github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 01:13:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Upgrade EUI to v31.7.0 (#91210)

Browse source 
* eui to 31.6.0

* flyout, collapsible snapshot updates

* initial overlaymask removal

* undo jest

* overlaymask src snapshot updates

* more overlaymask removals

* overlaymask removal xpack test updates

* saved objects modal form

* eui to 31.7.0

* code, codeblock types

* snapshot update

* tooltip

* remove ownFocus from ConfirmModal

* remove fragments
This commit is contained in:
Greg Thompson 2021-02-16 14:06:25 -06:00 • committed by GitHub
parent 3a003d9b79
commit 8126488021
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
192 changed files with 7006 additions and 7520 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -98,7 +98,7 @@
"@elastic/datemath": "link:packages/elastic-datemath",
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary",
"@elastic/ems-client": "7.12.0",
"@elastic/eui": "31.4.0",
"@elastic/eui": "31.7.0",
"@elastic/filesaver": "1.1.2",
"@elastic/good": "^9.0.1-kibana3",
"@elastic/node-crypto": "1.2.1",

18
src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap generated
View file

@ -715,8 +715,11 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
</button>
</div>
<div
aria-labelledby="mockId"
className="euiAccordion__childWrapper"
id="mockId"
role="region"
tabIndex={-1}
>
<EuiResizeObserver
onResize={[Function]}
@ -986,8 +989,11 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
</button>
</div>
<div
aria-labelledby="mockId"
className="euiAccordion__childWrapper"
id="mockId"
role="region"
tabIndex={-1}
>
<EuiResizeObserver
onResize={[Function]}
@ -1276,8 +1282,11 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
</button>
</div>
<div
aria-labelledby="mockId"
className="euiAccordion__childWrapper"
id="mockId"
role="region"
tabIndex={-1}
>
<EuiResizeObserver
onResize={[Function]}
@ -1527,8 +1536,11 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
</button>
</div>
<div
aria-labelledby="mockId"
className="euiAccordion__childWrapper"
id="mockId"
role="region"
tabIndex={-1}
>
<EuiResizeObserver
onResize={[Function]}
@ -1739,8 +1751,11 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
</button>
</div>
<div
aria-labelledby="mockId"
className="euiAccordion__childWrapper"
id="mockId"
role="region"
tabIndex={-1}
>
<EuiResizeObserver
onResize={[Function]}
@ -2967,8 +2982,11 @@ exports[`CollapsibleNav renders the default nav 3`] = `
</button>
</div>
<div
aria-labelledby="mockId"
className="euiAccordion__childWrapper"
id="mockId"
role="region"
tabIndex={-1}
>
<EuiResizeObserver
onResize={[Function]}

3
src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap generated
View file

@ -5169,8 +5169,11 @@ exports[`Header renders 1`] = `
</button>
</div>
<div
aria-labelledby="mockId"
className="euiAccordion__childWrapper"
id="mockId"
role="region"
tabIndex={-1}
>
<EuiResizeObserver
onResize={[Function]}

4
src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap generated
View file

@ -26,7 +26,7 @@ Array [
]
`;
exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"<div data-eui=\\"EuiFocusTrap\\"><div role=\\"dialog\\" class=\\"euiFlyout euiFlyout--medium\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiFlyout__closeButton\\" type=\\"button\\" aria-label=\\"Close this dialog\\" data-test-subj=\\"euiFlyoutCloseButton\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content</span></div></div></div>"`;
exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"<div data-eui=\\"EuiFocusTrap\\"><div role=\\"dialog\\" class=\\"euiFlyout euiFlyout--medium euiFlyout--paddingLarge\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiFlyout__closeButton\\" type=\\"button\\" aria-label=\\"Close this dialog\\" data-test-subj=\\"euiFlyoutCloseButton\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content</span></div></div></div>"`;
exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 1`] = `
Array [
@ -59,4 +59,4 @@ Array [
]
`;
exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"<div data-eui=\\"EuiFocusTrap\\"><div role=\\"dialog\\" class=\\"euiFlyout euiFlyout--medium\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiFlyout__closeButton\\" type=\\"button\\" aria-label=\\"Close this dialog\\" data-test-subj=\\"euiFlyoutCloseButton\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content 2</span></div></div></div>"`;
exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"<div data-eui=\\"EuiFocusTrap\\"><div role=\\"dialog\\" class=\\"euiFlyout euiFlyout--medium euiFlyout--paddingLarge\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiFlyout__closeButton\\" type=\\"button\\" aria-label=\\"Close this dialog\\" data-test-subj=\\"euiFlyoutCloseButton\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content 2</span></div></div></div>"`;

248
src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap generated
View file

@ -11,21 +11,19 @@ Array [
exports[`ModalService openConfirm() renders a mountpoint confirm message 1`] = `
Array [
Array [
<EuiOverlayMask>
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
<MountWrapper
className="kbnOverlayMountWrapper"
mount={[Function]}
/>
</EuiConfirmModal>
</mockConstructor>
</EuiOverlayMask>,
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
<MountWrapper
className="kbnOverlayMountWrapper"
mount={[Function]}
/>
</EuiConfirmModal>
</mockConstructor>,
<div />,
],
]
@ -36,18 +34,16 @@ exports[`ModalService openConfirm() renders a mountpoint confirm message 2`] = `
exports[`ModalService openConfirm() renders a string confirm message 1`] = `
Array [
Array [
<EuiOverlayMask>
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
Some message
</EuiConfirmModal>
</mockConstructor>
</EuiOverlayMask>,
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
Some message
</EuiConfirmModal>
</mockConstructor>,
<div />,
],
]
@ -58,33 +54,29 @@ exports[`ModalService openConfirm() renders a string confirm message 2`] = `"<di
exports[`ModalService openConfirm() with a currently active confirm replaces the current confirm with the new one 1`] = `
Array [
Array [
<EuiOverlayMask>
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
confirm 1
</EuiConfirmModal>
</mockConstructor>
</EuiOverlayMask>,
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
confirm 1
</EuiConfirmModal>
</mockConstructor>,
<div />,
],
Array [
<EuiOverlayMask>
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
some confirm
</EuiConfirmModal>
</mockConstructor>
</EuiOverlayMask>,
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
some confirm
</EuiConfirmModal>
</mockConstructor>,
<div />,
],
]
@ -93,33 +85,29 @@ Array [
exports[`ModalService openConfirm() with a currently active modal replaces the current modal with the new confirm 1`] = `
Array [
Array [
<EuiOverlayMask>
<mockConstructor>
<EuiModal
onClose={[Function]}
>
<MountWrapper
className="kbnOverlayMountWrapper"
mount={[Function]}
/>
</EuiModal>
</mockConstructor>
</EuiOverlayMask>,
<mockConstructor>
<EuiModal
onClose={[Function]}
>
<MountWrapper
className="kbnOverlayMountWrapper"
mount={[Function]}
/>
</EuiModal>
</mockConstructor>,
<div />,
],
Array [
<EuiOverlayMask>
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
some confirm
</EuiConfirmModal>
</mockConstructor>
</EuiOverlayMask>,
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
some confirm
</EuiConfirmModal>
</mockConstructor>,
<div />,
],
]
@ -128,18 +116,16 @@ Array [
exports[`ModalService openModal() renders a modal to the DOM 1`] = `
Array [
Array [
<EuiOverlayMask>
<mockConstructor>
<EuiModal
onClose={[Function]}
>
<MountWrapper
className="kbnOverlayMountWrapper"
mount={[Function]}
/>
</EuiModal>
</mockConstructor>
</EuiOverlayMask>,
<mockConstructor>
<EuiModal
onClose={[Function]}
>
<MountWrapper
className="kbnOverlayMountWrapper"
mount={[Function]}
/>
</EuiModal>
</mockConstructor>,
<div />,
],
]
@ -150,33 +136,29 @@ exports[`ModalService openModal() renders a modal to the DOM 2`] = `"<div data-e
exports[`ModalService openModal() with a currently active confirm replaces the current confirm with the new one 1`] = `
Array [
Array [
<EuiOverlayMask>
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
confirm 1
</EuiConfirmModal>
</mockConstructor>
</EuiOverlayMask>,
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
confirm 1
</EuiConfirmModal>
</mockConstructor>,
<div />,
],
Array [
<EuiOverlayMask>
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
some confirm
</EuiConfirmModal>
</mockConstructor>
</EuiOverlayMask>,
<mockConstructor>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Confirm"
onCancel={[Function]}
onConfirm={[Function]}
>
some confirm
</EuiConfirmModal>
</mockConstructor>,
<div />,
],
]
@ -185,33 +167,29 @@ Array [
exports[`ModalService openModal() with a currently active modal replaces the current modal with a new one 1`] = `
Array [
Array [
<EuiOverlayMask>
<mockConstructor>
<EuiModal
onClose={[Function]}
>
<MountWrapper
className="kbnOverlayMountWrapper"
mount={[Function]}
/>
</EuiModal>
</mockConstructor>
</EuiOverlayMask>,
<mockConstructor>
<EuiModal
onClose={[Function]}
>
<MountWrapper
className="kbnOverlayMountWrapper"
mount={[Function]}
/>
</EuiModal>
</mockConstructor>,
<div />,
],
Array [
<EuiOverlayMask>
<mockConstructor>
<EuiModal
onClose={[Function]}
>
<MountWrapper
className="kbnOverlayMountWrapper"
mount={[Function]}
/>
</EuiModal>
</mockConstructor>
</EuiOverlayMask>,
<mockConstructor>
<EuiModal
onClose={[Function]}
>
<MountWrapper
className="kbnOverlayMountWrapper"
mount={[Function]}
/>
</EuiModal>
</mockConstructor>,
<div />,
],
]

22
src/core/public/overlays/modal/modal_service.tsx
View file

@ -9,7 +9,7 @@
/* eslint-disable max-classes-per-file */
import { i18n as t } from '@kbn/i18n';
import { EuiModal, EuiConfirmModal, EuiOverlayMask, EuiConfirmModalProps } from '@elastic/eui';
import { EuiModal, EuiConfirmModal, EuiConfirmModalProps } from '@elastic/eui';
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { Subject } from 'rxjs';
@ -137,13 +137,11 @@ export class ModalService {
this.activeModal = modal;
render(
<EuiOverlayMask>
<i18n.Context>
<EuiModal {...options} onClose={() => modal.close()}>
<MountWrapper mount={mount} className="kbnOverlayMountWrapper" />
</EuiModal>
</i18n.Context>
</EuiOverlayMask>,
<i18n.Context>
<EuiModal {...options} onClose={() => modal.close()}>
<MountWrapper mount={mount} className="kbnOverlayMountWrapper" />
</EuiModal>
</i18n.Context>,
targetDomElement
);
@ -199,11 +197,9 @@ export class ModalService {
};
render(
<EuiOverlayMask>
<i18n.Context>
<EuiConfirmModal {...props} />
</i18n.Context>
</EuiOverlayMask>,
<i18n.Context>
<EuiConfirmModal {...props} />
</i18n.Context>,
targetDomElement
);
});

193
src/plugins/console/public/application/components/settings_modal.tsx
View file

@ -22,7 +22,6 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
EuiSwitch,
} from '@elastic/eui';
@ -151,115 +150,107 @@ export function DevToolsSettingsModal(props: Props) {
) : undefined;
return (
<EuiOverlayMask>
<EuiModal
data-test-subj="devToolsSettingsModal"
className="conApp__settingsModal"
onClose={props.onClose}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<EuiModal
data-test-subj="devToolsSettingsModal"
className="conApp__settingsModal"
onClose={props.onClose}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage id="console.settingsPage.pageTitle" defaultMessage="Console Settings" />
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiFormRow
label={
<FormattedMessage id="console.settingsPage.fontSizeLabel" defaultMessage="Font Size" />
}
>
<EuiFieldNumber
autoFocus
data-test-subj="setting-font-size-input"
value={fontSize}
min={6}
max={50}
onChange={(e) => {
const val = parseInt(e.target.value, 10);
if (!val) return;
setFontSize(val);
}}
/>
</EuiFormRow>
<EuiFormRow>
<EuiSwitch
checked={wrapMode}
data-test-subj="settingsWrapLines"
id="wrapLines"
label={
<FormattedMessage
defaultMessage="Wrap long lines"
id="console.settingsPage.wrapLongLinesLabelText"
/>
}
onChange={(e) => setWrapMode(e.target.checked)}
/>
</EuiFormRow>
<EuiFormRow
label={
<FormattedMessage
id="console.settingsPage.pageTitle"
defaultMessage="Console Settings"
id="console.settingsPage.jsonSyntaxLabel"
defaultMessage="JSON syntax"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiFormRow
}
>
<EuiSwitch
checked={tripleQuotes}
data-test-subj="tripleQuotes"
id="tripleQuotes"
label={
<FormattedMessage
id="console.settingsPage.fontSizeLabel"
defaultMessage="Font Size"
defaultMessage="Use triple quotes in output pane"
id="console.settingsPage.tripleQuotesMessage"
/>
}
>
<EuiFieldNumber
autoFocus
data-test-subj="setting-font-size-input"
value={fontSize}
min={6}
max={50}
onChange={(e) => {
const val = parseInt(e.target.value, 10);
if (!val) return;
setFontSize(val);
}}
onChange={(e) => setTripleQuotes(e.target.checked)}
/>
</EuiFormRow>
<EuiFormRow
labelType="legend"
label={
<FormattedMessage
id="console.settingsPage.autocompleteLabel"
defaultMessage="Autocomplete"
/>
</EuiFormRow>
}
>
<EuiCheckboxGroup
options={autoCompleteCheckboxes.map((opts) => {
const { stateSetter, ...rest } = opts;
return rest;
})}
idToSelectedMap={checkboxIdToSelectedMap}
onChange={(e: any) => {
onAutocompleteChange(e as AutocompleteOptions);
}}
/>
</EuiFormRow>
<EuiFormRow>
<EuiSwitch
checked={wrapMode}
data-test-subj="settingsWrapLines"
id="wrapLines"
label={
<FormattedMessage
defaultMessage="Wrap long lines"
id="console.settingsPage.wrapLongLinesLabelText"
/>
}
onChange={(e) => setWrapMode(e.target.checked)}
/>
</EuiFormRow>
{pollingFields}
</EuiModalBody>
<EuiFormRow
label={
<FormattedMessage
id="console.settingsPage.jsonSyntaxLabel"
defaultMessage="JSON syntax"
/>
}
>
<EuiSwitch
checked={tripleQuotes}
data-test-subj="tripleQuotes"
id="tripleQuotes"
label={
<FormattedMessage
defaultMessage="Use triple quotes in output pane"
id="console.settingsPage.tripleQuotesMessage"
/>
}
onChange={(e) => setTripleQuotes(e.target.checked)}
/>
</EuiFormRow>
<EuiModalFooter>
<EuiButtonEmpty data-test-subj="settingsCancelButton" onClick={props.onClose}>
<FormattedMessage id="console.settingsPage.cancelButtonLabel" defaultMessage="Cancel" />
</EuiButtonEmpty>
<EuiFormRow
labelType="legend"
label={
<FormattedMessage
id="console.settingsPage.autocompleteLabel"
defaultMessage="Autocomplete"
/>
}
>
<EuiCheckboxGroup
options={autoCompleteCheckboxes.map((opts) => {
const { stateSetter, ...rest } = opts;
return rest;
})}
idToSelectedMap={checkboxIdToSelectedMap}
onChange={(e: any) => {
onAutocompleteChange(e as AutocompleteOptions);
}}
/>
</EuiFormRow>
{pollingFields}
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty data-test-subj="settingsCancelButton" onClick={props.onClose}>
<FormattedMessage id="console.settingsPage.cancelButtonLabel" defaultMessage="Cancel" />
</EuiButtonEmpty>
<EuiButton fill data-test-subj="settings-save-button" onClick={saveSettings}>
<FormattedMessage id="console.settingsPage.saveButtonLabel" defaultMessage="Save" />
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
<EuiButton fill data-test-subj="settings-save-button" onClick={saveSettings}>
<FormattedMessage id="console.settingsPage.saveButtonLabel" defaultMessage="Save" />
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
}

112
src/plugins/dashboard/public/application/top_nav/__snapshots__/clone_modal.test.js.snap generated
View file

@ -1,65 +1,63 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders DashboardCloneModal 1`] = `
<EuiOverlayMask>
<EuiModal
className="dshCloneModal"
data-test-subj="dashboardCloneModal"
onClose={[Function]}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Clone dashboard"
id="dashboard.topNav.cloneModal.cloneDashboardModalHeaderTitle"
values={Object {}}
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText>
<p>
<FormattedMessage
defaultMessage="Please enter a new name for your dashboard."
id="dashboard.topNav.cloneModal.enterNewNameForDashboardDescription"
values={Object {}}
/>
</p>
</EuiText>
<EuiSpacer />
<EuiFieldText
aria-label="Cloned Dashboard Title"
autoFocus={true}
data-test-subj="clonedDashboardTitle"
isInvalid={false}
onChange={[Function]}
value="dash title"
<EuiModal
className="dshCloneModal"
data-test-subj="dashboardCloneModal"
onClose={[Function]}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Clone dashboard"
id="dashboard.topNav.cloneModal.cloneDashboardModalHeaderTitle"
values={Object {}}
/>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
data-test-subj="cloneCancelButton"
onClick={[Function]}
>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText>
<p>
<FormattedMessage
defaultMessage="Cancel"
id="dashboard.topNav.cloneModal.cancelButtonLabel"
defaultMessage="Please enter a new name for your dashboard."
id="dashboard.topNav.cloneModal.enterNewNameForDashboardDescription"
values={Object {}}
/>
</EuiButtonEmpty>
<EuiButton
data-test-subj="cloneConfirmButton"
fill={true}
isLoading={false}
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Confirm Clone"
id="dashboard.topNav.cloneModal.confirmButtonLabel"
values={Object {}}
/>
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
</p>
</EuiText>
<EuiSpacer />
<EuiFieldText
aria-label="Cloned Dashboard Title"
autoFocus={true}
data-test-subj="clonedDashboardTitle"
isInvalid={false}
onChange={[Function]}
value="dash title"
/>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
data-test-subj="cloneCancelButton"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Cancel"
id="dashboard.topNav.cloneModal.cancelButtonLabel"
values={Object {}}
/>
</EuiButtonEmpty>
<EuiButton
data-test-subj="cloneConfirmButton"
fill={true}
isLoading={false}
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Confirm Clone"
id="dashboard.topNav.cloneModal.confirmButtonLabel"
values={Object {}}
/>
</EuiButton>
</EuiModalFooter>
</EuiModal>
`;

115
src/plugins/dashboard/public/application/top_nav/clone_modal.tsx
View file

@ -19,7 +19,6 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
EuiSpacer,
EuiText,
EuiCallOut,
@ -138,69 +137,67 @@ export class DashboardCloneModal extends React.Component<Props, State> {
render() {
return (
<EuiOverlayMask>
<EuiModal
data-test-subj="dashboardCloneModal"
className="dshCloneModal"
onClose={this.props.onClose}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="dashboard.topNav.cloneModal.cloneDashboardModalHeaderTitle"
defaultMessage="Clone dashboard"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText>
<p>
<FormattedMessage
id="dashboard.topNav.cloneModal.enterNewNameForDashboardDescription"
defaultMessage="Please enter a new name for your dashboard."
/>
</p>
</EuiText>
<EuiSpacer />
<EuiFieldText
autoFocus
aria-label={i18n.translate('dashboard.cloneModal.cloneDashboardTitleAriaLabel', {
defaultMessage: 'Cloned Dashboard Title',
})}
data-test-subj="clonedDashboardTitle"
value={this.state.newDashboardName}
onChange={this.onInputChange}
isInvalid={this.state.hasTitleDuplicate}
<EuiModal
data-test-subj="dashboardCloneModal"
className="dshCloneModal"
onClose={this.props.onClose}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="dashboard.topNav.cloneModal.cloneDashboardModalHeaderTitle"
defaultMessage="Clone dashboard"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
{this.renderDuplicateTitleCallout()}
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty data-test-subj="cloneCancelButton" onClick={this.props.onClose}>
<EuiModalBody>
<EuiText>
<p>
<FormattedMessage
id="dashboard.topNav.cloneModal.cancelButtonLabel"
defaultMessage="Cancel"
id="dashboard.topNav.cloneModal.enterNewNameForDashboardDescription"
defaultMessage="Please enter a new name for your dashboard."
/>
</EuiButtonEmpty>
</p>
</EuiText>
<EuiButton
fill
data-test-subj="cloneConfirmButton"
onClick={this.cloneDashboard}
isLoading={this.state.isLoading}
>
<FormattedMessage
id="dashboard.topNav.cloneModal.confirmButtonLabel"
defaultMessage="Confirm Clone"
/>
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
<EuiSpacer />
<EuiFieldText
autoFocus
aria-label={i18n.translate('dashboard.cloneModal.cloneDashboardTitleAriaLabel', {
defaultMessage: 'Cloned Dashboard Title',
})}
data-test-subj="clonedDashboardTitle"
value={this.state.newDashboardName}
onChange={this.onInputChange}
isInvalid={this.state.hasTitleDuplicate}
/>
{this.renderDuplicateTitleCallout()}
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty data-test-subj="cloneCancelButton" onClick={this.props.onClose}>
<FormattedMessage
id="dashboard.topNav.cloneModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
<EuiButton
fill
data-test-subj="cloneConfirmButton"
onClick={this.cloneDashboard}
isLoading={this.state.isLoading}
>
<FormattedMessage
id="dashboard.topNav.cloneModal.confirmButtonLabel"
defaultMessage="Confirm Clone"
/>
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
}
}

57
src/plugins/data/public/ui/saved_query_form/save_query_form.tsx
View file

@ -9,7 +9,6 @@
import React, { useEffect, useState, useCallback } from 'react';
import {
EuiButtonEmpty,
EuiOverlayMask,
EuiModal,
EuiButton,
EuiModalHeader,
@ -208,37 +207,35 @@ export function SaveQueryForm({
);
return (
<EuiOverlayMask>
<EuiModal onClose={onClose} initialFocus="[name=title]">
<EuiModalHeader>
<EuiModalHeaderTitle>
{i18n.translate('data.search.searchBar.savedQueryFormTitle', {
defaultMessage: 'Save query',
})}
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModal onClose={onClose} initialFocus="[name=title]">
<EuiModalHeader>
<EuiModalHeaderTitle>
{i18n.translate('data.search.searchBar.savedQueryFormTitle', {
defaultMessage: 'Save query',
})}
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>{saveQueryForm}</EuiModalBody>
<EuiModalBody>{saveQueryForm}</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={onClose} data-test-subj="savedQueryFormCancelButton">
{i18n.translate('data.search.searchBar.savedQueryFormCancelButtonText', {
defaultMessage: 'Cancel',
})}
</EuiButtonEmpty>
<EuiModalFooter>
<EuiButtonEmpty onClick={onClose} data-test-subj="savedQueryFormCancelButton">
{i18n.translate('data.search.searchBar.savedQueryFormCancelButtonText', {
defaultMessage: 'Cancel',
})}
</EuiButtonEmpty>
<EuiButton
onClick={onClickSave}
fill
data-test-subj="savedQueryFormSaveButton"
disabled={hasErrors || !enabledSaveButton}
>
{i18n.translate('data.search.searchBar.savedQueryFormSaveButtonText', {
defaultMessage: 'Save',
})}
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
<EuiButton
onClick={onClickSave}
fill
data-test-subj="savedQueryFormSaveButton"
disabled={hasErrors || !enabledSaveButton}
>
{i18n.translate('data.search.searchBar.savedQueryFormSaveButtonText', {
defaultMessage: 'Save',
})}
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
}

60
src/plugins/data/public/ui/saved_query_management/saved_query_list_item.tsx
View file

@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
import { EuiListGroupItem, EuiConfirmModal, EuiOverlayMask, EuiIconTip } from '@elastic/eui';
import { EuiListGroupItem, EuiConfirmModal, EuiIconTip } from '@elastic/eui';
import React, { Fragment, useState } from 'react';
import classNames from 'classnames';
@ -114,36 +114,34 @@ export const SavedQueryListItem = ({
/>
{showDeletionConfirmationModal && (
<EuiOverlayMask>
<EuiConfirmModal
title={i18n.translate('data.search.searchBar.savedQueryPopoverConfirmDeletionTitle', {
defaultMessage: 'Delete "{savedQueryName}"?',
values: {
savedQueryName: savedQuery.attributes.title,
},
})}
confirmButtonText={i18n.translate(
'data.search.searchBar.savedQueryPopoverConfirmDeletionConfirmButtonText',
{
defaultMessage: 'Delete',
}
)}
cancelButtonText={i18n.translate(
'data.search.searchBar.savedQueryPopoverConfirmDeletionCancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
onConfirm={() => {
onDelete(savedQuery);
setShowDeletionConfirmationModal(false);
}}
buttonColor="danger"
onCancel={() => {
setShowDeletionConfirmationModal(false);
}}
/>
</EuiOverlayMask>
<EuiConfirmModal
title={i18n.translate('data.search.searchBar.savedQueryPopoverConfirmDeletionTitle', {
defaultMessage: 'Delete "{savedQueryName}"?',
values: {
savedQueryName: savedQuery.attributes.title,
},
})}
confirmButtonText={i18n.translate(
'data.search.searchBar.savedQueryPopoverConfirmDeletionConfirmButtonText',
{
defaultMessage: 'Delete',
}
)}
cancelButtonText={i18n.translate(
'data.search.searchBar.savedQueryPopoverConfirmDeletionCancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
onConfirm={() => {
onDelete(savedQuery);
setShowDeletionConfirmationModal(false);
}}
buttonColor="danger"
onCancel={() => {
setShowDeletionConfirmationModal(false);
}}
/>
)}
</Fragment>
);

18
src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/confirmation_modal/__snapshots__/confirmation_modal.test.tsx.snap generated
View file

@ -1,14 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DeleteScritpedFieldConfirmationModal should render normally 1`] = `
<EuiOverlayMask>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Delete"
defaultFocusedButton="confirm"
onCancel={[Function]}
onConfirm={[Function]}
title="Delete scripted field ''?"
/>
</EuiOverlayMask>
<EuiConfirmModal
cancelButtonText="Cancel"
confirmButtonText="Delete"
defaultFocusedButton="confirm"
onCancel={[Function]}
onConfirm={[Function]}
title="Delete scripted field ''?"
/>
`;

20
src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/confirmation_modal/confirmation_modal.tsx
View file

@ -8,7 +8,7 @@
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EUI_MODAL_CONFIRM_BUTTON, EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EUI_MODAL_CONFIRM_BUTTON, EuiConfirmModal } from '@elastic/eui';
import { ScriptedFieldItem } from '../../types';
@ -42,15 +42,13 @@ export const DeleteScritpedFieldConfirmationModal = ({
);
return (
<EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={hideDeleteConfirmationModal}
onConfirm={deleteField}
cancelButtonText={cancelButtonText}
confirmButtonText={confirmButtonText}
defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
/>
</EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={hideDeleteConfirmationModal}
onConfirm={deleteField}
cancelButtonText={cancelButtonText}
confirmButtonText={confirmButtonText}
defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
/>
);
};

62
src/plugins/index_pattern_management/public/components/edit_index_pattern/source_filters_table/components/confirmation_modal/__snapshots__/confirmation_modal.test.tsx.snap generated
View file

@ -1,37 +1,35 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Header should render normally 1`] = `
<EuiOverlayMask>
<EuiConfirmModal
buttonColor="danger"
cancelButtonText={
<FormattedMessage
defaultMessage="Cancel"
id="indexPatternManagement.editIndexPattern.source.deleteFilter.cancelButtonLabel"
values={Object {}}
/>
}
confirmButtonText={
<FormattedMessage
defaultMessage="Delete"
id="indexPatternManagement.editIndexPattern.source.deleteFilter.deleteButtonLabel"
values={Object {}}
/>
}
defaultFocusedButton="confirm"
onCancel={[Function]}
onConfirm={[Function]}
title={
<FormattedMessage
defaultMessage="Delete field filter '{value}'?"
id="indexPatternManagement.editIndexPattern.source.deleteSourceFilterLabel"
values={
Object {
"value": "test",
}
<EuiConfirmModal
buttonColor="danger"
cancelButtonText={
<FormattedMessage
defaultMessage="Cancel"
id="indexPatternManagement.editIndexPattern.source.deleteFilter.cancelButtonLabel"
values={Object {}}
/>
}
confirmButtonText={
<FormattedMessage
defaultMessage="Delete"
id="indexPatternManagement.editIndexPattern.source.deleteFilter.deleteButtonLabel"
values={Object {}}
/>
}
defaultFocusedButton="confirm"
onCancel={[Function]}
onConfirm={[Function]}
title={
<FormattedMessage
defaultMessage="Delete field filter '{value}'?"
id="indexPatternManagement.editIndexPattern.source.deleteSourceFilterLabel"
values={
Object {
"value": "test",
}
/>
}
/>
</EuiOverlayMask>
}
/>
}
/>
`;

58
src/plugins/index_pattern_management/public/components/edit_index_pattern/source_filters_table/components/confirmation_modal/confirmation_modal.tsx
View file

@ -10,7 +10,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiOverlayMask, EuiConfirmModal, EUI_MODAL_CONFIRM_BUTTON } from '@elastic/eui';
import { EuiConfirmModal, EUI_MODAL_CONFIRM_BUTTON } from '@elastic/eui';
interface DeleteFilterConfirmationModalProps {
filterToDeleteValue: string;
@ -26,35 +26,33 @@ export const DeleteFilterConfirmationModal = ({
onDeleteFilter,
}: DeleteFilterConfirmationModalProps) => {
return (
<EuiOverlayMask>
<EuiConfirmModal
title={
<FormattedMessage
id="indexPatternManagement.editIndexPattern.source.deleteSourceFilterLabel"
defaultMessage="Delete field filter '{value}'?"
values={{
value: filterToDeleteValue,
}}
/>
}
onCancel={onCancelConfirmationModal}
onConfirm={onDeleteFilter}
cancelButtonText={
<FormattedMessage
id="indexPatternManagement.editIndexPattern.source.deleteFilter.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
buttonColor="danger"
confirmButtonText={
<FormattedMessage
id="indexPatternManagement.editIndexPattern.source.deleteFilter.deleteButtonLabel"
defaultMessage="Delete"
/>
}
defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
/>
</EuiOverlayMask>
<EuiConfirmModal
title={
<FormattedMessage
id="indexPatternManagement.editIndexPattern.source.deleteSourceFilterLabel"
defaultMessage="Delete field filter '{value}'?"
values={{
value: filterToDeleteValue,
}}
/>
}
onCancel={onCancelConfirmationModal}
onConfirm={onDeleteFilter}
cancelButtonText={
<FormattedMessage
id="indexPatternManagement.editIndexPattern.source.deleteFilter.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
buttonColor="danger"
confirmButtonText={
<FormattedMessage
id="indexPatternManagement.editIndexPattern.source.deleteFilter.deleteButtonLabel"
defaultMessage="Delete"
/>
}
defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
/>
);
};

71
src/plugins/index_pattern_management/public/components/field_editor/field_editor.tsx
View file

@ -25,7 +25,6 @@ import {
EuiFormRow,
EuiIcon,
EuiLink,
EuiOverlayMask,
EuiSelect,
EuiSpacer,
EuiText,
@ -643,42 +642,40 @@ export class FieldEditor extends PureComponent<FieldEdiorProps, FieldEditorState
const { spec } = this.state;
return this.state.showDeleteModal ? (
<EuiOverlayMask>
<EuiConfirmModal
title={i18n.translate('indexPatternManagement.deleteFieldHeader', {
defaultMessage: "Delete field '{fieldName}'",
values: { fieldName: spec.name },
})}
onCancel={this.hideDeleteModal}
onConfirm={() => {
this.hideDeleteModal();
this.deleteField();
}}
cancelButtonText={i18n.translate('indexPatternManagement.deleteField.cancelButton', {
defaultMessage: 'Cancel',
})}
confirmButtonText={i18n.translate('indexPatternManagement.deleteField.deleteButton', {
defaultMessage: 'Delete',
})}
buttonColor="danger"
defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
>
<p>
<FormattedMessage
id="indexPatternManagement.deleteFieldLabel"
defaultMessage="You can't recover a deleted field.{separator}Are you sure you want to do this?"
values={{
separator: (
<span>
<br />
<br />
</span>
),
}}
/>
</p>
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
title={i18n.translate('indexPatternManagement.deleteFieldHeader', {
defaultMessage: "Delete field '{fieldName}'",
values: { fieldName: spec.name },
})}
onCancel={this.hideDeleteModal}
onConfirm={() => {
this.hideDeleteModal();
this.deleteField();
}}
cancelButtonText={i18n.translate('indexPatternManagement.deleteField.cancelButton', {
defaultMessage: 'Cancel',
})}
confirmButtonText={i18n.translate('indexPatternManagement.deleteField.deleteButton', {
defaultMessage: 'Delete',
})}
buttonColor="danger"
defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
>
<p>
<FormattedMessage
id="indexPatternManagement.deleteFieldLabel"
defaultMessage="You can't recover a deleted field.{separator}Are you sure you want to do this?"
values={{
separator: (
<span>
<br />
<br />
</span>
),
}}
/>
</p>
</EuiConfirmModal>
) : null;
};

71
src/plugins/kibana_react/public/table_list_view/table_list_view.tsx
View file

@ -21,7 +21,6 @@ import {
EuiFlexItem,
EuiButton,
EuiSpacer,
EuiOverlayMask,
EuiConfirmModal,
EuiCallOut,
EuiBasicTableColumn,
@ -238,42 +237,40 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
}
return (
<EuiOverlayMask>
<EuiConfirmModal
title={
<FormattedMessage
id="kibana-react.tableListView.listing.deleteSelectedConfirmModal.title"
defaultMessage="Delete {itemCount} {entityName}?"
values={{
itemCount: this.state.selectedIds.length,
entityName:
this.state.selectedIds.length === 1
? this.props.entityName
: this.props.entityNamePlural,
}}
/>
}
buttonColor="danger"
onCancel={this.closeDeleteModal}
onConfirm={this.deleteSelectedItems}
cancelButtonText={
<FormattedMessage
id="kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={deleteButton}
defaultFocusedButton="cancel"
>
<p>
<FormattedMessage
id="kibana-react.tableListView.listing.deleteConfirmModalDescription"
defaultMessage="You can't recover deleted {entityNamePlural}."
values={{ entityNamePlural: this.props.entityNamePlural }}
/>
</p>
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
title={
<FormattedMessage
id="kibana-react.tableListView.listing.deleteSelectedConfirmModal.title"
defaultMessage="Delete {itemCount} {entityName}?"
values={{
itemCount: this.state.selectedIds.length,
entityName:
this.state.selectedIds.length === 1
? this.props.entityName
: this.props.entityNamePlural,
}}
/>
}
buttonColor="danger"
onCancel={this.closeDeleteModal}
onConfirm={this.deleteSelectedItems}
cancelButtonText={
<FormattedMessage
id="kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={deleteButton}
defaultFocusedButton="cancel"
>
<p>
<FormattedMessage
id="kibana-react.tableListView.listing.deleteConfirmModalDescription"
defaultMessage="You can't recover deleted {entityNamePlural}."
values={{ entityNamePlural: this.props.entityNamePlural }}
/>
</p>
</EuiConfirmModal>
);
}

714
src/plugins/saved_objects/public/save_modal/__snapshots__/saved_object_save_modal.test.tsx.snap generated
View file

@ -1,407 +1,399 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
<EuiOverlayMask>
<EuiModal
className="kbnSavedObjectSaveModal"
data-test-subj="savedObjectSaveModal"
onClose={[Function]}
>
<form
onSubmit={[Function]}
>
<EuiModal
className="kbnSavedObjectSaveModal"
data-test-subj="savedObjectSaveModal"
onClose={[Function]}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Save {objectType}"
id="savedObjects.saveModal.saveTitle"
values={
Object {
"objectType": "visualization",
}
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Save {objectType}"
id="savedObjects.saveModal.saveTitle"
values={
Object {
"objectType": "visualization",
}
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Title"
id="savedObjects.saveModal.titleLabel"
values={Object {}}
/>
}
labelType="label"
>
<EuiFieldText
autoFocus={true}
data-test-subj="savedObjectTitle"
fullWidth={true}
isInvalid={false}
onChange={[Function]}
value="Saved Object title"
}
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Title"
id="savedObjects.saveModal.titleLabel"
values={Object {}}
/>
</EuiFormRow>
<EuiFormRow
describedByIds={Array []}
display="row"
}
labelType="label"
>
<EuiFieldText
autoFocus={true}
data-test-subj="savedObjectTitle"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Description"
id="savedObjects.saveModal.descriptionLabel"
values={Object {}}
/>
}
labelType="label"
>
<EuiTextArea
data-test-subj="viewDescription"
onChange={[Function]}
value=""
/>
</EuiFormRow>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
data-test-subj="saveCancelButton"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Cancel"
id="savedObjects.saveModal.cancelButtonLabel"
values={Object {}}
isInvalid={false}
onChange={[Function]}
value="Saved Object title"
/>
</EuiButtonEmpty>
<EuiButton
data-test-subj="confirmSaveSavedObjectButton"
fill={true}
isDisabled={false}
isLoading={false}
type="submit"
</EuiFormRow>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Description"
id="savedObjects.saveModal.descriptionLabel"
values={Object {}}
/>
}
labelType="label"
>
Save
</EuiButton>
</EuiModalFooter>
</EuiModal>
<EuiTextArea
data-test-subj="viewDescription"
onChange={[Function]}
value=""
/>
</EuiFormRow>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
data-test-subj="saveCancelButton"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Cancel"
id="savedObjects.saveModal.cancelButtonLabel"
values={Object {}}
/>
</EuiButtonEmpty>
<EuiButton
data-test-subj="confirmSaveSavedObjectButton"
fill={true}
isDisabled={false}
isLoading={false}
type="submit"
>
Save
</EuiButton>
</EuiModalFooter>
</form>
</EuiOverlayMask>
</EuiModal>
`;
exports[`SavedObjectSaveModal should render matching snapshot when custom isValid is set 1`] = `
<EuiOverlayMask>
<EuiModal
className="kbnSavedObjectSaveModal"
data-test-subj="savedObjectSaveModal"
onClose={[Function]}
>
<form
onSubmit={[Function]}
>
<EuiModal
className="kbnSavedObjectSaveModal"
data-test-subj="savedObjectSaveModal"
onClose={[Function]}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Save {objectType}"
id="savedObjects.saveModal.saveTitle"
values={
Object {
"objectType": "visualization",
}
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Save {objectType}"
id="savedObjects.saveModal.saveTitle"
values={
Object {
"objectType": "visualization",
}
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Title"
id="savedObjects.saveModal.titleLabel"
values={Object {}}
/>
}
labelType="label"
>
<EuiFieldText
autoFocus={true}
data-test-subj="savedObjectTitle"
fullWidth={true}
isInvalid={false}
onChange={[Function]}
value="Saved Object title"
}
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Title"
id="savedObjects.saveModal.titleLabel"
values={Object {}}
/>
</EuiFormRow>
<EuiFormRow
describedByIds={Array []}
display="row"
}
labelType="label"
>
<EuiFieldText
autoFocus={true}
data-test-subj="savedObjectTitle"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Description"
id="savedObjects.saveModal.descriptionLabel"
values={Object {}}
/>
}
labelType="label"
>
<EuiTextArea
data-test-subj="viewDescription"
onChange={[Function]}
value=""
/>
</EuiFormRow>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
data-test-subj="saveCancelButton"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Cancel"
id="savedObjects.saveModal.cancelButtonLabel"
values={Object {}}
isInvalid={false}
onChange={[Function]}
value="Saved Object title"
/>
</EuiButtonEmpty>
<EuiButton
data-test-subj="confirmSaveSavedObjectButton"
fill={true}
isDisabled={true}
isLoading={false}
type="submit"
</EuiFormRow>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Description"
id="savedObjects.saveModal.descriptionLabel"
values={Object {}}
/>
}
labelType="label"
>
Save
</EuiButton>
</EuiModalFooter>
</EuiModal>
<EuiTextArea
data-test-subj="viewDescription"
onChange={[Function]}
value=""
/>
</EuiFormRow>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
data-test-subj="saveCancelButton"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Cancel"
id="savedObjects.saveModal.cancelButtonLabel"
values={Object {}}
/>
</EuiButtonEmpty>
<EuiButton
data-test-subj="confirmSaveSavedObjectButton"
fill={true}
isDisabled={true}
isLoading={false}
type="submit"
>
Save
</EuiButton>
</EuiModalFooter>
</form>
</EuiOverlayMask>
</EuiModal>
`;
exports[`SavedObjectSaveModal should render matching snapshot when custom isValid is set 2`] = `
<EuiOverlayMask>
<EuiModal
className="kbnSavedObjectSaveModal"
data-test-subj="savedObjectSaveModal"
onClose={[Function]}
>
<form
onSubmit={[Function]}
>
<EuiModal
className="kbnSavedObjectSaveModal"
data-test-subj="savedObjectSaveModal"
onClose={[Function]}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Save {objectType}"
id="savedObjects.saveModal.saveTitle"
values={
Object {
"objectType": "visualization",
}
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Save {objectType}"
id="savedObjects.saveModal.saveTitle"
values={
Object {
"objectType": "visualization",
}
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Title"
id="savedObjects.saveModal.titleLabel"
values={Object {}}
/>
}
labelType="label"
>
<EuiFieldText
autoFocus={true}
data-test-subj="savedObjectTitle"
fullWidth={true}
isInvalid={false}
onChange={[Function]}
value="Saved Object title"
}
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Title"
id="savedObjects.saveModal.titleLabel"
values={Object {}}
/>
</EuiFormRow>
<EuiFormRow
describedByIds={Array []}
display="row"
}
labelType="label"
>
<EuiFieldText
autoFocus={true}
data-test-subj="savedObjectTitle"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Description"
id="savedObjects.saveModal.descriptionLabel"
values={Object {}}
/>
}
labelType="label"
>
<EuiTextArea
data-test-subj="viewDescription"
onChange={[Function]}
value=""
/>
</EuiFormRow>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
data-test-subj="saveCancelButton"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Cancel"
id="savedObjects.saveModal.cancelButtonLabel"
values={Object {}}
isInvalid={false}
onChange={[Function]}
value="Saved Object title"
/>
</EuiButtonEmpty>
<EuiButton
data-test-subj="confirmSaveSavedObjectButton"
fill={true}
isDisabled={false}
isLoading={false}
type="submit"
</EuiFormRow>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Description"
id="savedObjects.saveModal.descriptionLabel"
values={Object {}}
/>
}
labelType="label"
>
Save
</EuiButton>
</EuiModalFooter>
</EuiModal>
<EuiTextArea
data-test-subj="viewDescription"
onChange={[Function]}
value=""
/>
</EuiFormRow>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
data-test-subj="saveCancelButton"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Cancel"
id="savedObjects.saveModal.cancelButtonLabel"
values={Object {}}
/>
</EuiButtonEmpty>
<EuiButton
data-test-subj="confirmSaveSavedObjectButton"
fill={true}
isDisabled={false}
isLoading={false}
type="submit"
>
Save
</EuiButton>
</EuiModalFooter>
</form>
</EuiOverlayMask>
</EuiModal>
`;
exports[`SavedObjectSaveModal should render matching snapshot when given options 1`] = `
<EuiOverlayMask>
<EuiModal
className="kbnSavedObjectSaveModal kbnSavedObjectsSaveModal--wide"
data-test-subj="savedObjectSaveModal"
onClose={[Function]}
>
<form
onSubmit={[Function]}
>
<EuiModal
className="kbnSavedObjectSaveModal kbnSavedObjectsSaveModal--wide"
data-test-subj="savedObjectSaveModal"
onClose={[Function]}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Save {objectType}"
id="savedObjects.saveModal.saveTitle"
values={
Object {
"objectType": "visualization",
}
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Save {objectType}"
id="savedObjects.saveModal.saveTitle"
values={
Object {
"objectType": "visualization",
}
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiFlexGroup
gutterSize="m"
>
<EuiFlexItem>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Title"
id="savedObjects.saveModal.titleLabel"
values={Object {}}
/>
}
labelType="label"
>
<EuiFieldText
autoFocus={true}
data-test-subj="savedObjectTitle"
fullWidth={true}
isInvalid={false}
onChange={[Function]}
value="Saved Object title"
/>
</EuiFormRow>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Description"
id="savedObjects.saveModal.descriptionLabel"
values={Object {}}
/>
}
labelType="label"
>
<EuiTextArea
data-test-subj="viewDescription"
onChange={[Function]}
value=""
/>
</EuiFormRow>
<div>
Hello! Main options
</div>
</EuiFlexItem>
<EuiFlexItem>
<div>
Hey there! Options on the right
</div>
</EuiFlexItem>
</EuiFlexGroup>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
data-test-subj="saveCancelButton"
onClick={[Function]}
}
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiFlexGroup
gutterSize="m"
>
<FormattedMessage
defaultMessage="Cancel"
id="savedObjects.saveModal.cancelButtonLabel"
values={Object {}}
/>
</EuiButtonEmpty>
<EuiButton
data-test-subj="confirmSaveSavedObjectButton"
fill={true}
isDisabled={false}
isLoading={false}
type="submit"
>
Save
</EuiButton>
</EuiModalFooter>
</EuiModal>
<EuiFlexItem>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Title"
id="savedObjects.saveModal.titleLabel"
values={Object {}}
/>
}
labelType="label"
>
<EuiFieldText
autoFocus={true}
data-test-subj="savedObjectTitle"
fullWidth={true}
isInvalid={false}
onChange={[Function]}
value="Saved Object title"
/>
</EuiFormRow>
<EuiFormRow
describedByIds={Array []}
display="row"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label={
<FormattedMessage
defaultMessage="Description"
id="savedObjects.saveModal.descriptionLabel"
values={Object {}}
/>
}
labelType="label"
>
<EuiTextArea
data-test-subj="viewDescription"
onChange={[Function]}
value=""
/>
</EuiFormRow>
<div>
Hello! Main options
</div>
</EuiFlexItem>
<EuiFlexItem>
<div>
Hey there! Options on the right
</div>
</EuiFlexItem>
</EuiFlexGroup>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
data-test-subj="saveCancelButton"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Cancel"
id="savedObjects.saveModal.cancelButtonLabel"
values={Object {}}
/>
</EuiButtonEmpty>
<EuiButton
data-test-subj="confirmSaveSavedObjectButton"
fill={true}
isDisabled={false}
isLoading={false}
type="submit"
>
Save
</EuiButton>
</EuiModalFooter>
</form>
</EuiOverlayMask>
</EuiModal>
`;

77
src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx
View file

@ -21,7 +21,6 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
EuiSpacer,
EuiSwitch,
EuiSwitchEvent,
@ -123,52 +122,48 @@ export class SavedObjectSaveModal extends React.Component<Props, SaveModalState>
);
return (
<EuiOverlayMask>
<EuiModal
data-test-subj="savedObjectSaveModal"
className={`kbnSavedObjectSaveModal${hasColumns ? ' kbnSavedObjectsSaveModal--wide' : ''}`}
onClose={this.props.onClose}
>
<form onSubmit={this.onFormSubmit}>
<EuiModal
data-test-subj="savedObjectSaveModal"
className={`kbnSavedObjectSaveModal${
hasColumns ? ' kbnSavedObjectsSaveModal--wide' : ''
}`}
onClose={this.props.onClose}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="savedObjects.saveModal.saveTitle"
defaultMessage="Save {objectType}"
values={{ objectType: this.props.objectType }}
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="savedObjects.saveModal.saveTitle"
defaultMessage="Save {objectType}"
values={{ objectType: this.props.objectType }}
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
{this.renderDuplicateTitleCallout(duplicateWarningId)}
<EuiModalBody>
{this.renderDuplicateTitleCallout(duplicateWarningId)}
<EuiForm>
{!this.props.showDescription && this.props.description && (
<EuiText size="s" color="subdued">
{this.props.description}
</EuiText>
)}
{formBody}
{this.renderCopyOnSave()}
</EuiForm>
</EuiModalBody>
<EuiForm>
{!this.props.showDescription && this.props.description && (
<EuiText size="s" color="subdued">
{this.props.description}
</EuiText>
)}
{formBody}
{this.renderCopyOnSave()}
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty data-test-subj="saveCancelButton" onClick={this.props.onClose}>
<FormattedMessage
id="savedObjects.saveModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
<EuiModalFooter>
<EuiButtonEmpty data-test-subj="saveCancelButton" onClick={this.props.onClose}>
<FormattedMessage
id="savedObjects.saveModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
{this.renderConfirmButton()}
</EuiModalFooter>
</EuiModal>
{this.renderConfirmButton()}
</EuiModalFooter>
</form>
</EuiOverlayMask>
</EuiModal>
);
}

166
src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx
View file

@ -53,90 +53,88 @@ export const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
// can't use `EuiConfirmModal` here as the confirm modal body is wrapped
// inside a `<p>` element, causing UI glitches with the table.
return (
<EuiOverlayMask>
<EuiModal initialFocus="soDeleteConfirmModalConfirmBtn" onClose={onCancel}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
defaultMessage="Delete saved objects"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<p>
<FormattedMessage
id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
defaultMessage="This action will delete the following saved objects:"
/>
</p>
<EuiSpacer size="m" />
<EuiInMemoryTable
items={selectedObjects}
columns={[
{
field: 'type',
name: i18n.translate(
'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.typeColumnName',
{ defaultMessage: 'Type' }
),
width: '50px',
render: (type, object) => (
<EuiToolTip position="top" content={getSavedObjectLabel(type)}>
<EuiIcon type={object.meta.icon || 'apps'} />
</EuiToolTip>
),
},
{
field: 'id',
name: i18n.translate(
'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.idColumnName',
{ defaultMessage: 'Id' }
),
},
{
field: 'meta.title',
name: i18n.translate(
'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.titleColumnName',
{ defaultMessage: 'Title' }
),
},
]}
pagination={true}
sorting={false}
<EuiModal initialFocus="soDeleteConfirmModalConfirmBtn" onClose={onCancel}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
defaultMessage="Delete saved objects"
/>
</EuiModalBody>
<EuiModalFooter>
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={onCancel} data-test-subj="confirmModalCancelButton">
<FormattedMessage
id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
id="soDeleteConfirmModalConfirmBtn"
fill
color="danger"
onClick={onConfirm}
data-test-subj="confirmModalConfirmButton"
>
<FormattedMessage
id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
defaultMessage="Delete"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<p>
<FormattedMessage
id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
defaultMessage="This action will delete the following saved objects:"
/>
</p>
<EuiSpacer size="m" />
<EuiInMemoryTable
items={selectedObjects}
columns={[
{
field: 'type',
name: i18n.translate(
'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.typeColumnName',
{ defaultMessage: 'Type' }
),
width: '50px',
render: (type, object) => (
<EuiToolTip position="top" content={getSavedObjectLabel(type)}>
<EuiIcon type={object.meta.icon || 'apps'} />
</EuiToolTip>
),
},
{
field: 'id',
name: i18n.translate(
'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.idColumnName',
{ defaultMessage: 'Id' }
),
},
{
field: 'meta.title',
name: i18n.translate(
'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.titleColumnName',
{ defaultMessage: 'Title' }
),
},
]}
pagination={true}
sorting={false}
/>
</EuiModalBody>
<EuiModalFooter>
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={onCancel} data-test-subj="confirmModalCancelButton">
<FormattedMessage
id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
id="soDeleteConfirmModalConfirmBtn"
fill
color="danger"
onClick={onConfirm}
data-test-subj="confirmModalConfirmButton"
>
<FormattedMessage
id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
defaultMessage="Delete"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiModalFooter>
</EuiModal>
);
};

147
src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.tsx
View file

@ -8,7 +8,6 @@
import React, { FC } from 'react';
import {
EuiOverlayMask,
EuiModal,
EuiModalHeader,
EuiModalHeaderTitle,
@ -47,80 +46,78 @@ export const ExportModal: FC<ExportModalProps> = ({
onIncludeReferenceChange,
}) => {
return (
<EuiOverlayMask>
<EuiModal onClose={onCancel}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="savedObjectsManagement.objectsTable.exportObjectsConfirmModalTitle"
defaultMessage="Export {filteredItemCount, plural, one{# object} other {# objects}}"
values={{
filteredItemCount,
}}
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiFormRow
label={
<FormattedMessage
id="savedObjectsManagement.objectsTable.exportObjectsConfirmModalDescription"
defaultMessage="Select which types to export"
/>
}
labelType="legend"
>
<EuiCheckboxGroup
options={options}
idToSelectedMap={selectedOptions}
onChange={(optionId) => {
onSelectedOptionsChange({
...selectedOptions,
...{
[optionId]: !selectedOptions[optionId],
},
});
}}
/>
</EuiFormRow>
<EuiSpacer size="m" />
<EuiSwitch
name="includeReferencesDeep"
label={
<FormattedMessage
id="savedObjectsManagement.objectsTable.exportObjectsConfirmModal.includeReferencesDeepLabel"
defaultMessage="Include related objects"
/>
}
checked={includeReferences}
onChange={() => onIncludeReferenceChange(!includeReferences)}
<EuiModal onClose={onCancel}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="savedObjectsManagement.objectsTable.exportObjectsConfirmModalTitle"
defaultMessage="Export {filteredItemCount, plural, one{# object} other {# objects}}"
values={{
filteredItemCount,
}}
/>
</EuiModalBody>
<EuiModalFooter>
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={onCancel}>
<FormattedMessage
id="savedObjectsManagement.objectsTable.exportObjectsConfirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton fill onClick={onExport}>
<FormattedMessage
id="savedObjectsManagement.objectsTable.exportObjectsConfirmModal.exportAllButtonLabel"
defaultMessage="Export all"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiFormRow
label={
<FormattedMessage
id="savedObjectsManagement.objectsTable.exportObjectsConfirmModalDescription"
defaultMessage="Select which types to export"
/>
}
labelType="legend"
>
<EuiCheckboxGroup
options={options}
idToSelectedMap={selectedOptions}
onChange={(optionId) => {
onSelectedOptionsChange({
...selectedOptions,
...{
[optionId]: !selectedOptions[optionId],
},
});
}}
/>
</EuiFormRow>
<EuiSpacer size="m" />
<EuiSwitch
name="includeReferencesDeep"
label={
<FormattedMessage
id="savedObjectsManagement.objectsTable.exportObjectsConfirmModal.includeReferencesDeepLabel"
defaultMessage="Include related objects"
/>
}
checked={includeReferences}
onChange={() => onIncludeReferenceChange(!includeReferences)}
/>
</EuiModalBody>
<EuiModalFooter>
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={onCancel}>
<FormattedMessage
id="savedObjectsManagement.objectsTable.exportObjectsConfirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton fill onClick={onExport}>
<FormattedMessage
id="savedObjectsManagement.objectsTable.exportObjectsConfirmModal.exportAllButtonLabel"
defaultMessage="Export all"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiModalFooter>
</EuiModal>
);
};

54
src/plugins/saved_objects_management/public/management_section/objects_table/components/overwrite_modal.tsx
View file

@ -7,13 +7,7 @@
*/
import React, { useState, Fragment, ReactNode } from 'react';
import {
EuiOverlayMask,
EuiConfirmModal,
EUI_MODAL_CONFIRM_BUTTON,
EuiText,
EuiSuperSelect,
} from '@elastic/eui';
import { EuiConfirmModal, EUI_MODAL_CONFIRM_BUTTON, EuiText, EuiSuperSelect } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import moment from 'moment';
import { FailedImportConflict } from '../../../lib/resolve_import_errors';
@ -98,29 +92,27 @@ export const OverwriteModal = ({ conflict, onFinish }: OverwriteModalProps) => {
}
);
return (
<EuiOverlayMask>
<EuiConfirmModal
title={i18n.translate('savedObjectsManagement.objectsTable.overwriteModal.title', {
defaultMessage: 'Overwrite {type}?',
values: { type },
})}
cancelButtonText={i18n.translate(
'savedObjectsManagement.objectsTable.overwriteModal.cancelButtonText',
{ defaultMessage: 'Skip' }
)}
confirmButtonText={i18n.translate(
'savedObjectsManagement.objectsTable.overwriteModal.overwriteButtonText',
{ defaultMessage: 'Overwrite' }
)}
buttonColor="danger"
onCancel={() => onFinish(false)}
onConfirm={() => onFinish(true, destinationId)}
defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
maxWidth="500px"
>
<p>{bodyText}</p>
{selectControl}
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
title={i18n.translate('savedObjectsManagement.objectsTable.overwriteModal.title', {
defaultMessage: 'Overwrite {type}?',
values: { type },
})}
cancelButtonText={i18n.translate(
'savedObjectsManagement.objectsTable.overwriteModal.cancelButtonText',
{ defaultMessage: 'Skip' }
)}
confirmButtonText={i18n.translate(
'savedObjectsManagement.objectsTable.overwriteModal.overwriteButtonText',
{ defaultMessage: 'Overwrite' }
)}
buttonColor="danger"
onCancel={() => onFinish(false)}
onConfirm={() => onFinish(true, destinationId)}
defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
maxWidth="500px"
>
<p>{bodyText}</p>
{selectControl}
</EuiConfirmModal>
);
};

4
src/plugins/visualizations/public/wizard/new_vis_modal.tsx
View file

@ -8,7 +8,7 @@
import React from 'react';
import { EuiModal, EuiOverlayMask } from '@elastic/eui';
import { EuiModal } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { METRIC_TYPE, UiCounterMetricType } from '@kbn/analytics';
@ -121,7 +121,7 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
</EuiModal>
);
return <EuiOverlayMask>{selectionModal}</EuiOverlayMask>;
return selectionModal;
}
private onCloseModal = () => {

68
x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/ConfirmDeleteModal.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useState } from 'react';
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { NotificationsStart } from 'kibana/public';
import { i18n } from '@kbn/i18n';
import { getOptionLabel } from '../../../../../../common/agent_configuration/all_option';
@ -29,41 +29,39 @@ export function ConfirmDeleteModal({ config, onCancel, onConfirm }: Props) {
const { toasts } = useApmPluginContext().core.notifications;
return (
<EuiOverlayMask>
<EuiConfirmModal
title={i18n.translate('xpack.apm.agentConfig.deleteModal.title', {
defaultMessage: `Delete configuration`,
<EuiConfirmModal
title={i18n.translate('xpack.apm.agentConfig.deleteModal.title', {
defaultMessage: `Delete configuration`,
})}
onCancel={onCancel}
onConfirm={async () => {
setIsDeleting(true);
await deleteConfig(config, toasts);
setIsDeleting(false);
onConfirm();
}}
cancelButtonText={i18n.translate(
'xpack.apm.agentConfig.deleteModal.cancel',
{ defaultMessage: `Cancel` }
)}
confirmButtonText={i18n.translate(
'xpack.apm.agentConfig.deleteModal.confirm',
{ defaultMessage: `Delete` }
)}
confirmButtonDisabled={isDeleting}
buttonColor="danger"
defaultFocusedButton="confirm"
>
<p>
{i18n.translate('xpack.apm.agentConfig.deleteModal.text', {
defaultMessage: `You are about to delete the configuration for service "{serviceName}" and environment "{environment}".`,
values: {
serviceName: getOptionLabel(config.service.name),
environment: getOptionLabel(config.service.environment),
},
})}
onCancel={onCancel}
onConfirm={async () => {
setIsDeleting(true);
await deleteConfig(config, toasts);
setIsDeleting(false);
onConfirm();
}}
cancelButtonText={i18n.translate(
'xpack.apm.agentConfig.deleteModal.cancel',
{ defaultMessage: `Cancel` }
)}
confirmButtonText={i18n.translate(
'xpack.apm.agentConfig.deleteModal.confirm',
{ defaultMessage: `Delete` }
)}
confirmButtonDisabled={isDeleting}
buttonColor="danger"
defaultFocusedButton="confirm"
>
<p>
{i18n.translate('xpack.apm.agentConfig.deleteModal.text', {
defaultMessage: `You are about to delete the configuration for service "{serviceName}" and environment "{environment}".`,
values: {
serviceName: getOptionLabel(config.service.name),
environment: getOptionLabel(config.service.environment),
},
})}
</p>
</EuiConfirmModal>
</EuiOverlayMask>
</p>
</EuiConfirmModal>
);
}

62
x-pack/plugins/beats_management/public/components/table/controls/action_control.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiButton, EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiButton, EuiConfirmModal } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import React from 'react';
import { AssignmentActionType } from '../table';
@ -58,40 +58,38 @@ export class ActionControl extends React.PureComponent<ActionControlProps, Actio
{name}
</EuiButton>
{this.state.showModal && (
<EuiOverlayMask>
<EuiConfirmModal
buttonColor={danger ? 'danger' : 'primary'}
cancelButtonText={
<EuiConfirmModal
buttonColor={danger ? 'danger' : 'primary'}
cancelButtonText={
<FormattedMessage
id="xpack.beatsManagement.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.beatsManagement.confirmModal.confirmButtonLabel"
defaultMessage="Confirm"
/>
}
onConfirm={() => {
actionHandler(action);
this.setState({ showModal: false });
}}
onCancel={() => this.setState({ showModal: false })}
title={
warningHeading ? (
warningHeading
) : (
<FormattedMessage
id="xpack.beatsManagement.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.beatsManagement.confirmModal.confirmButtonLabel"
id="xpack.beatsManagement.confirmModal.confirmWarningTitle"
defaultMessage="Confirm"
/>
}
onConfirm={() => {
actionHandler(action);
this.setState({ showModal: false });
}}
onCancel={() => this.setState({ showModal: false })}
title={
warningHeading ? (
warningHeading
) : (
<FormattedMessage
id="xpack.beatsManagement.confirmModal.confirmWarningTitle"
defaultMessage="Confirm"
/>
)
}
>
{warningMessage}
</EuiConfirmModal>
</EuiOverlayMask>
)
}
>
{warningMessage}
</EuiConfirmModal>
)}
</div>
);

101
x-pack/plugins/beats_management/public/pages/overview/enrolled_beats.tsx
View file

@ -13,7 +13,6 @@ import {
EuiModalBody,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
@ -104,58 +103,56 @@ class BeatsPageComponent extends React.PureComponent<PageProps, PageState> {
</EuiButton>
{this.props.location.pathname === '/overview/enrolled_beats/enroll' && (
<EuiOverlayMask>
<EuiModal
onClose={() => {
this.props.setUrlState({
enrollmentToken: '',
});
this.props.goTo(`/overview/enrolled_beats`);
}}
style={{ width: '640px' }}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="xpack.beatsManagement.beats.enrollNewBeatsTitle"
defaultMessage="Enroll a new Beat"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EnrollBeat
frameworkBasePath={this.props.libs.framework.info.basePath}
enrollmentToken={this.props.urlState.enrollmentToken}
getBeatWithToken={this.props.containers.beats.getBeatWithToken}
createEnrollmentToken={async () => {
const enrollmentTokens = await this.props.libs.tokens.createEnrollmentTokens();
this.props.setUrlState({
enrollmentToken: enrollmentTokens[0],
});
}}
onBeatEnrolled={() => {
this.props.setUrlState({
enrollmentToken: '',
});
}}
<EuiModal
onClose={() => {
this.props.setUrlState({
enrollmentToken: '',
});
this.props.goTo(`/overview/enrolled_beats`);
}}
style={{ width: '640px' }}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="xpack.beatsManagement.beats.enrollNewBeatsTitle"
defaultMessage="Enroll a new Beat"
/>
{!this.props.urlState.enrollmentToken && (
<React.Fragment>
<EuiButton
size="s"
color="primary"
style={{ marginLeft: 10 }}
onClick={async () => {
this.props.goTo('/overview/enrolled_beats');
}}
>
Done
</EuiButton>
</React.Fragment>
)}
</EuiModalBody>
</EuiModal>
</EuiOverlayMask>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EnrollBeat
frameworkBasePath={this.props.libs.framework.info.basePath}
enrollmentToken={this.props.urlState.enrollmentToken}
getBeatWithToken={this.props.containers.beats.getBeatWithToken}
createEnrollmentToken={async () => {
const enrollmentTokens = await this.props.libs.tokens.createEnrollmentTokens();
this.props.setUrlState({
enrollmentToken: enrollmentTokens[0],
});
}}
onBeatEnrolled={() => {
this.props.setUrlState({
enrollmentToken: '',
});
}}
/>
{!this.props.urlState.enrollmentToken && (
<React.Fragment>
<EuiButton
size="s"
color="primary"
style={{ marginLeft: 10 }}
onClick={async () => {
this.props.goTo('/overview/enrolled_beats');
}}
>
Done
</EuiButton>
</React.Fragment>
)}
</EuiModalBody>
</EuiModal>
)}
</React.Fragment>
);

127
x-pack/plugins/canvas/public/components/asset_manager/asset_manager.component.tsx
View file

@ -19,7 +19,6 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
EuiPanel,
EuiProgress,
EuiSpacer,
@ -75,71 +74,69 @@ export const AssetManager: FC<Props> = (props) => {
};
return (
<EuiOverlayMask>
<EuiModal
onClose={() => onClose()}
className="canvasAssetManager canvasModal--fixedSize"
maxWidth="1000px"
>
<EuiModalHeader className="canvasAssetManager__modalHeader">
<EuiModalHeaderTitle className="canvasAssetManager__modalHeaderTitle">
{strings.getModalTitle()}
</EuiModalHeaderTitle>
<EuiFlexGroup className="canvasAssetManager__fileUploadWrapper">
<EuiFlexItem grow={false}>
{isLoading ? (
<Loading animated text={strings.getLoadingText()} />
) : (
<EuiFilePicker
initialPromptText={strings.getFilePickerPromptText()}
compressed
display="default"
multiple
onChange={onFileUpload}
accept="image/*"
/>
)}
</EuiFlexItem>
</EuiFlexGroup>
</EuiModalHeader>
<EuiModalBody>
<EuiText size="s" color="subdued">
<p>{strings.getDescription()}</p>
</EuiText>
<EuiSpacer />
{assets.length ? (
<EuiFlexGrid columns={4}>
{assets.map((asset) => (
<Asset asset={asset} key={asset.id} />
))}
</EuiFlexGrid>
) : (
emptyAssets
)}
</EuiModalBody>
<EuiModalFooter className="canvasAssetManager__modalFooter">
<EuiFlexGroup className="canvasAssetManager__meterWrapper" responsive={false}>
<EuiFlexItem>
<EuiProgress
value={assetsTotal}
max={ASSET_MAX_SIZE}
color={percentageUsed < 90 ? 'secondary' : 'danger'}
size="s"
aria-labelledby="CanvasAssetManagerLabel"
<EuiModal
onClose={() => onClose()}
className="canvasAssetManager canvasModal--fixedSize"
maxWidth="1000px"
>
<EuiModalHeader className="canvasAssetManager__modalHeader">
<EuiModalHeaderTitle className="canvasAssetManager__modalHeaderTitle">
{strings.getModalTitle()}
</EuiModalHeaderTitle>
<EuiFlexGroup className="canvasAssetManager__fileUploadWrapper">
<EuiFlexItem grow={false}>
{isLoading ? (
<Loading animated text={strings.getLoadingText()} />
) : (
<EuiFilePicker
initialPromptText={strings.getFilePickerPromptText()}
compressed
display="default"
multiple
onChange={onFileUpload}
accept="image/*"
/>
</EuiFlexItem>
<EuiFlexItem grow={false} className="eui-textNoWrap">
<EuiText id="CanvasAssetManagerLabel">
{strings.getSpaceUsedText(percentageUsed)}
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiButton size="s" onClick={() => onClose()}>
{strings.getModalCloseButtonLabel()}
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
)}
</EuiFlexItem>
</EuiFlexGroup>
</EuiModalHeader>
<EuiModalBody>
<EuiText size="s" color="subdued">
<p>{strings.getDescription()}</p>
</EuiText>
<EuiSpacer />
{assets.length ? (
<EuiFlexGrid columns={4}>
{assets.map((asset) => (
<Asset asset={asset} key={asset.id} />
))}
</EuiFlexGrid>
) : (
emptyAssets
)}
</EuiModalBody>
<EuiModalFooter className="canvasAssetManager__modalFooter">
<EuiFlexGroup className="canvasAssetManager__meterWrapper" responsive={false}>
<EuiFlexItem>
<EuiProgress
value={assetsTotal}
max={ASSET_MAX_SIZE}
color={percentageUsed < 90 ? 'secondary' : 'danger'}
size="s"
aria-labelledby="CanvasAssetManagerLabel"
/>
</EuiFlexItem>
<EuiFlexItem grow={false} className="eui-textNoWrap">
<EuiText id="CanvasAssetManagerLabel">
{strings.getSpaceUsedText(percentageUsed)}
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiButton size="s" onClick={() => onClose()}>
{strings.getModalCloseButtonLabel()}
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
};

30
x-pack/plugins/canvas/public/components/confirm_modal/confirm_modal.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import PropTypes from 'prop-types';
import React, { FunctionComponent } from 'react';
@ -39,21 +39,19 @@ export const ConfirmModal: FunctionComponent<Props> = (props) => {
}
return (
<EuiOverlayMask>
<EuiConfirmModal
{...rest}
className={`canvasConfirmModal ${className || ''}`}
title={title}
onCancel={onCancel}
onConfirm={onConfirm}
confirmButtonText={confirmButtonText}
cancelButtonText={cancelButtonText}
defaultFocusedButton="confirm"
buttonColor="danger"
>
{message}
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
{...rest}
className={`canvasConfirmModal ${className || ''}`}
title={title}
onCancel={onCancel}
onConfirm={onConfirm}
confirmButtonText={confirmButtonText}
cancelButtonText={cancelButtonText}
defaultFocusedButton="confirm"
buttonColor="danger"
>
{message}
</EuiConfirmModal>
);
};

81
x-pack/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js
View file

@ -8,7 +8,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
EuiOverlayMask,
EuiModal,
EuiModalBody,
EuiModalHeader,
@ -27,48 +26,46 @@ const { DatasourceDatasourcePreview: strings } = ComponentStrings;
const { DatasourceDatasourceComponent: datasourceStrings } = ComponentStrings;
export const DatasourcePreview = ({ done, datatable }) => (
<EuiOverlayMask>
<EuiModal onClose={done} maxWidth="1000px" className="canvasModal--fixedSize">
<EuiModalHeader>
<EuiModalHeaderTitle>{strings.getModalTitle()}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody className="canvasDatasourcePreview">
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.canvas.datasourceDatasourcePreview.modalDescription"
defaultMessage="The following data will be available to the selected element upon clicking {saveLabel} in the sidebar."
values={{
saveLabel: <strong>{datasourceStrings.getSaveButtonLabel()}</strong>,
}}
<EuiModal onClose={done} maxWidth="1000px" className="canvasModal--fixedSize">
<EuiModalHeader>
<EuiModalHeaderTitle>{strings.getModalTitle()}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody className="canvasDatasourcePreview">
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.canvas.datasourceDatasourcePreview.modalDescription"
defaultMessage="The following data will be available to the selected element upon clicking {saveLabel} in the sidebar."
values={{
saveLabel: <strong>{datasourceStrings.getSaveButtonLabel()}</strong>,
}}
/>
</p>
</EuiText>
<EuiSpacer />
{datatable.type === 'error' ? (
<Error payload={datatable} />
) : (
<EuiPanel className="canvasDatasourcePreview__panel" paddingSize="none">
{datatable.rows.length > 0 ? (
<Datatable datatable={datatable} showHeader paginate />
) : (
<EuiEmptyPrompt
title={<h2>{strings.getEmptyTitle()}</h2>}
titleSize="s"
body={
<p>
{strings.getEmptyFirstLineDescription()}
<br />
{strings.getEmptySecondLineDescription()}
</p>
}
/>
</p>
</EuiText>
<EuiSpacer />
{datatable.type === 'error' ? (
<Error payload={datatable} />
) : (
<EuiPanel className="canvasDatasourcePreview__panel" paddingSize="none">
{datatable.rows.length > 0 ? (
<Datatable datatable={datatable} showHeader paginate />
) : (
<EuiEmptyPrompt
title={<h2>{strings.getEmptyTitle()}</h2>}
titleSize="s"
body={
<p>
{strings.getEmptyFirstLineDescription()}
<br />
{strings.getEmptySecondLineDescription()}
</p>
}
/>
)}
</EuiPanel>
)}
</EuiModalBody>
</EuiModal>
</EuiOverlayMask>
)}
</EuiPanel>
)}
</EuiModalBody>
</EuiModal>
);
DatasourcePreview.propTypes = {

2
x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot generated
View file

@ -5,7 +5,7 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
data-eui="EuiFocusTrap"
>
<div
className="euiFlyout euiFlyout--small"
className="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
role="dialog"
tabIndex={0}
>

79
x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.component.tsx
View file

@ -23,7 +23,6 @@ import {
EuiEmptyPrompt,
EuiFieldSearch,
EuiSpacer,
EuiOverlayMask,
EuiButton,
} from '@elastic/eui';
import { sortBy } from 'lodash';
@ -117,16 +116,14 @@ export const SavedElementsModal: FunctionComponent<Props> = ({
}
return (
<EuiOverlayMask>
<CustomElementModal
title={strings.getEditElementTitle()}
name={elementToEdit.displayName}
description={elementToEdit.help}
image={elementToEdit.image}
onSave={handleEdit}
onCancel={hideEditModal}
/>
</EuiOverlayMask>
<CustomElementModal
title={strings.getEditElementTitle()}
name={elementToEdit.displayName}
description={elementToEdit.help}
image={elementToEdit.image}
onSave={handleEdit}
onCancel={hideEditModal}
/>
);
};
@ -176,40 +173,34 @@ export const SavedElementsModal: FunctionComponent<Props> = ({
return (
<Fragment>
<EuiOverlayMask>
<EuiModal
onClose={onClose}
className="canvasModal--fixedSize"
maxWidth="1000px"
initialFocus=".canvasElements__filter input"
>
<EuiModalHeader className="canvasAssetManager__modalHeader">
<EuiModalHeaderTitle className="canvasAssetManager__modalHeaderTitle">
{strings.getModalTitle()}
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModal
onClose={onClose}
className="canvasModal--fixedSize"
maxWidth="1000px"
initialFocus=".canvasElements__filter input"
>
<EuiModalHeader className="canvasAssetManager__modalHeader">
<EuiModalHeaderTitle className="canvasAssetManager__modalHeaderTitle">
{strings.getModalTitle()}
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody style={{ paddingRight: '1px' }}>
<EuiFieldSearch
fullWidth
value={search}
placeholder={strings.getFindElementPlaceholder()}
onChange={onSearch}
/>
<EuiSpacer />
{customElementContent}
</EuiModalBody>
<EuiModalFooter>
<EuiButton
size="s"
onClick={onClose}
data-test-subj="saved-elements-modal-close-button"
>
{strings.getSavedElementsModalCloseButtonLabel()}
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
<EuiModalBody style={{ paddingRight: '1px' }}>
<EuiFieldSearch
fullWidth
value={search}
placeholder={strings.getFindElementPlaceholder()}
onChange={onSearch}
/>
<EuiSpacer />
{customElementContent}
</EuiModalBody>
<EuiModalFooter>
<EuiButton size="s" onClick={onClose} data-test-subj="saved-elements-modal-close-button">
{strings.getSavedElementsModalCloseButtonLabel()}
</EuiButton>
</EuiModalFooter>
</EuiModal>
{renderDeleteModal()}
{renderEditModal()}

19
x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx
View file

@ -12,7 +12,6 @@ import {
EuiButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiOverlayMask,
EuiModal,
EuiModalFooter,
EuiButton,
@ -93,16 +92,14 @@ export const Toolbar: FC<Props> = ({
const openWorkpadManager = () => setShowWorkpadManager(true);
const workpadManager = (
<EuiOverlayMask>
<EuiModal onClose={closeWorkpadManager} className="canvasModal--fixedSize" maxWidth="1000px">
<WorkpadManager onClose={closeWorkpadManager} />
<EuiModalFooter>
<EuiButton size="s" onClick={closeWorkpadManager}>
{strings.getWorkpadManagerCloseButtonLabel()}
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
<EuiModal onClose={closeWorkpadManager} className="canvasModal--fixedSize" maxWidth="1000px">
<WorkpadManager onClose={closeWorkpadManager} />
<EuiModalFooter>
<EuiButton size="s" onClick={closeWorkpadManager}>
{strings.getWorkpadManagerCloseButtonLabel()}
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
const trays = {

3
x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/var_config.stories.storyshot generated
View file

@ -77,8 +77,11 @@ exports[`Storyshots components/Variables/VarConfig default 1`] = `
</div>
</div>
<div
aria-labelledby="generated-id"
className="euiAccordion__childWrapper"
id="accordion-variables"
role="region"
tabIndex={-1}
/>
</div>
<div

14
x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.component.tsx
View file

@ -7,7 +7,7 @@
import React, { Fragment, FunctionComponent, useState } from 'react';
import PropTypes from 'prop-types';
import { EuiButtonEmpty, EuiContextMenu, EuiIcon, EuiOverlayMask } from '@elastic/eui';
import { EuiButtonEmpty, EuiContextMenu, EuiIcon } from '@elastic/eui';
import { ComponentStrings } from '../../../../i18n/components';
import { ShortcutStrings } from '../../../../i18n/shortcuts';
import { flattenPanelTree } from '../../../lib/flatten_panel_tree';
@ -412,13 +412,11 @@ export const EditMenu: FunctionComponent<Props> = ({
)}
</Popover>
{isModalVisible ? (
<EuiOverlayMask>
<CustomElementModal
title={strings.getCreateElementModalTitle()}
onSave={handleSave}
onCancel={hideModal}
/>
</EuiOverlayMask>
<CustomElementModal
title={strings.getCreateElementModalTitle()}
onSave={handleSave}
onCancel={hideModal}
/>
) : null}
</Fragment>
);

3
x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/pdf_panel.stories.storyshot generated
View file

@ -150,8 +150,11 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu/PDFPanel default 1`] = `
</button>
</div>
<div
aria-labelledby="generated-id"
className="euiAccordion__childWrapper"
id="advanced-options"
role="region"
tabIndex={-1}
/>
</div>
</div>

78
x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_delete_provider.js
View file

@ -9,7 +9,7 @@ import React, { PureComponent, Fragment } from 'react';
import { connect } from 'react-redux';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { deleteAutoFollowPattern } from '../store/actions';
import { arrify } from '../../../common/services/utils';
@ -61,45 +61,43 @@ class AutoFollowPatternDeleteProviderUi extends PureComponent {
);
return (
<EuiOverlayMask>
{/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
<EuiConfirmModal
title={title}
onCancel={this.closeConfirmModal}
onConfirm={this.onConfirm}
cancelButtonText={i18n.translate(
'xpack.crossClusterReplication.deleteAutoFollowPattern.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
buttonColor="danger"
confirmButtonText={i18n.translate(
'xpack.crossClusterReplication.deleteAutoFollowPattern.confirmModal.confirmButtonText',
{
defaultMessage: 'Remove',
}
)}
onMouseOver={this.onMouseOverModal}
data-test-subj="deleteAutoFollowPatternConfirmation"
>
{!isSingle && (
<Fragment>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.deleteAutoFollowPattern.confirmModal.multipleDeletionDescription"
defaultMessage="You are about to remove these auto-follow patterns:"
/>
</p>
<ul>
{ids.map((id) => (
<li key={id}>{id}</li>
))}
</ul>
</Fragment>
)}
</EuiConfirmModal>
</EuiOverlayMask>
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
<EuiConfirmModal
title={title}
onCancel={this.closeConfirmModal}
onConfirm={this.onConfirm}
cancelButtonText={i18n.translate(
'xpack.crossClusterReplication.deleteAutoFollowPattern.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
buttonColor="danger"
confirmButtonText={i18n.translate(
'xpack.crossClusterReplication.deleteAutoFollowPattern.confirmModal.confirmButtonText',
{
defaultMessage: 'Remove',
}
)}
onMouseOver={this.onMouseOverModal}
data-test-subj="deleteAutoFollowPatternConfirmation"
>
{!isSingle && (
<Fragment>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.deleteAutoFollowPattern.confirmModal.multipleDeletionDescription"
defaultMessage="You are about to remove these auto-follow patterns:"
/>
</p>
<ul>
{ids.map((id) => (
<li key={id}>{id}</li>
))}
</ul>
</Fragment>
)}
</EuiConfirmModal>
);
};

110
x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_actions_providers/follower_index_pause_provider.js
View file

@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { pauseFollowerIndex } from '../../store/actions';
import { arrify } from '../../../../common/services/utils';
@ -69,64 +69,62 @@ class FollowerIndexPauseProviderUi extends PureComponent {
const hasCustomSettings = indices.some((index) => !areAllSettingsDefault(index));
return (
<EuiOverlayMask>
{/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
<EuiConfirmModal
title={title}
onCancel={this.closeConfirmModal}
onConfirm={this.onConfirm}
cancelButtonText={i18n.translate(
'xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
buttonColor={hasCustomSettings ? 'danger' : 'primary'}
confirmButtonText={i18n.translate(
'xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.confirmButtonText',
{
defaultMessage: 'Pause replication',
}
)}
onMouseOver={this.onMouseOverModal}
data-test-subj="pauseReplicationConfirmation"
>
{hasCustomSettings && (
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
<EuiConfirmModal
title={title}
onCancel={this.closeConfirmModal}
onConfirm={this.onConfirm}
cancelButtonText={i18n.translate(
'xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
buttonColor={hasCustomSettings ? 'danger' : 'primary'}
confirmButtonText={i18n.translate(
'xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.confirmButtonText',
{
defaultMessage: 'Pause replication',
}
)}
onMouseOver={this.onMouseOverModal}
data-test-subj="pauseReplicationConfirmation"
>
{hasCustomSettings && (
<p>
{isSingle ? (
<FormattedMessage
id="xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.singlePauseDescriptionWithSettingWarning"
defaultMessage="Pausing replication to this follower index clears its custom
advanced settings."
/>
) : (
<FormattedMessage
id="xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.multiplePauseDescriptionWithSettingWarning"
defaultMessage="Pausing replication to a follower index clears its custom
advanced settings."
/>
)}
</p>
)}
{!isSingle && (
<Fragment>
<p>
{isSingle ? (
<FormattedMessage
id="xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.singlePauseDescriptionWithSettingWarning"
defaultMessage="Pausing replication to this follower index clears its custom
advanced settings."
/>
) : (
<FormattedMessage
id="xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.multiplePauseDescriptionWithSettingWarning"
defaultMessage="Pausing replication to a follower index clears its custom
advanced settings."
/>
)}
<FormattedMessage
id="xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.multiplePauseDescription"
defaultMessage="Replication will pause on these follower indices:"
/>
</p>
)}
{!isSingle && (
<Fragment>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.multiplePauseDescription"
defaultMessage="Replication will pause on these follower indices:"
/>
</p>
<ul>
{indices.map((index) => (
<li key={index.name}>{index.name}</li>
))}
</ul>
</Fragment>
)}
</EuiConfirmModal>
</EuiOverlayMask>
<ul>
{indices.map((index) => (
<li key={index.name}>{index.name}</li>
))}
</ul>
</Fragment>
)}
</EuiConfirmModal>
);
};

130
x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_actions_providers/follower_index_resume_provider.js
View file

@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiConfirmModal, EuiLink, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal, EuiLink } from '@elastic/eui';
import { reactRouterNavigate } from '../../../../../../../src/plugins/kibana_react/public';
import { routing } from '../../services/routing';
import { resumeFollowerIndex } from '../../store/actions';
@ -68,77 +68,75 @@ class FollowerIndexResumeProviderUi extends PureComponent {
);
return (
<EuiOverlayMask>
{/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
<EuiConfirmModal
title={title}
onCancel={this.closeConfirmModal}
onConfirm={this.onConfirm}
cancelButtonText={i18n.translate(
'xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
buttonColor="primary"
confirmButtonText={i18n.translate(
'xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.confirmButtonText',
{
defaultMessage: 'Resume replication',
}
)}
onMouseOver={this.onMouseOverModal}
data-test-subj="resumeReplicationConfirmation"
>
{isSingle ? (
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
<EuiConfirmModal
title={title}
onCancel={this.closeConfirmModal}
onConfirm={this.onConfirm}
cancelButtonText={i18n.translate(
'xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
buttonColor="primary"
confirmButtonText={i18n.translate(
'xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.confirmButtonText',
{
defaultMessage: 'Resume replication',
}
)}
onMouseOver={this.onMouseOverModal}
data-test-subj="resumeReplicationConfirmation"
>
{isSingle ? (
<p>
<FormattedMessage
id="xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.singleResumeDescription"
defaultMessage="Replication resumes using the default advanced settings. To use
custom advanced settings, {editLink}."
values={{
editLink: (
<EuiLink
{...reactRouterNavigate(
routing._reactRouter.history,
routing.getFollowerIndexPath(ids[0])
)}
data-test-subj="editLink"
>
<FormattedMessage
id="xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.singleResumeEditLink"
defaultMessage="edit the follower index"
/>
</EuiLink>
),
}}
/>
</p>
) : (
<Fragment>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.singleResumeDescription"
defaultMessage="Replication resumes using the default advanced settings. To use
custom advanced settings, {editLink}."
values={{
editLink: (
<EuiLink
{...reactRouterNavigate(
routing._reactRouter.history,
routing.getFollowerIndexPath(ids[0])
)}
data-test-subj="editLink"
>
<FormattedMessage
id="xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.singleResumeEditLink"
defaultMessage="edit the follower index"
/>
</EuiLink>
),
}}
id="xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.multipleResumeDescriptionWithSettingWarning"
defaultMessage="Replication resumes using the default advanced settings."
/>
</p>
) : (
<Fragment>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.multipleResumeDescriptionWithSettingWarning"
defaultMessage="Replication resumes using the default advanced settings."
/>
</p>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.multipleResumeDescription"
defaultMessage="Replication will resume on these follower indices:"
/>
</p>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.multipleResumeDescription"
defaultMessage="Replication will resume on these follower indices:"
/>
</p>
<ul>
{ids.map((id) => (
<li key={id}>{id}</li>
))}
</ul>
</Fragment>
)}
</EuiConfirmModal>
</EuiOverlayMask>
<ul>
{ids.map((id) => (
<li key={id}>{id}</li>
))}
</ul>
</Fragment>
)}
</EuiConfirmModal>
);
};

96
x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_actions_providers/follower_index_unfollow_provider.js
View file

@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { unfollowLeaderIndex } from '../../store/actions';
import { arrify } from '../../../../common/services/utils';
@ -67,58 +67,56 @@ class FollowerIndexUnfollowProviderUi extends PureComponent {
);
return (
<EuiOverlayMask>
{/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
<EuiConfirmModal
title={title}
onCancel={this.closeConfirmModal}
onConfirm={this.onConfirm}
cancelButtonText={i18n.translate(
'xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
buttonColor="danger"
confirmButtonText={i18n.translate(
'xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.confirmButtonText',
{
defaultMessage: 'Unfollow leader',
}
)}
onMouseOver={this.onMouseOverModal}
data-test-subj="unfollowLeaderConfirmation"
>
{isSingle ? (
<Fragment>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.singleUnfollowDescription"
defaultMessage="The follower index will be converted to a standard index. It will
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
<EuiConfirmModal
title={title}
onCancel={this.closeConfirmModal}
onConfirm={this.onConfirm}
cancelButtonText={i18n.translate(
'xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
buttonColor="danger"
confirmButtonText={i18n.translate(
'xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.confirmButtonText',
{
defaultMessage: 'Unfollow leader',
}
)}
onMouseOver={this.onMouseOverModal}
data-test-subj="unfollowLeaderConfirmation"
>
{isSingle ? (
<Fragment>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.singleUnfollowDescription"
defaultMessage="The follower index will be converted to a standard index. It will
no longer appear in Cross-Cluster Replication, but you can manage it in Index
Management. You can't undo this operation."
/>
</p>
</Fragment>
) : (
<Fragment>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.multipleUnfollowDescription"
defaultMessage="The follower indices will be converted to standard indices. They
/>
</p>
</Fragment>
) : (
<Fragment>
<p>
<FormattedMessage
id="xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.multipleUnfollowDescription"
defaultMessage="The follower indices will be converted to standard indices. They
will no longer appear in Cross-Cluster Replication, but you can manage them in
Index Management. You can't undo this operation."
/>
</p>
<ul>
{ids.map((id) => (
<li key={id}>{id}</li>
))}
</ul>
</Fragment>
)}
</EuiConfirmModal>
</EuiOverlayMask>
/>
</p>
<ul>
{ids.map((id) => (
<li key={id}>{id}</li>
))}
</ul>
</Fragment>
)}
</EuiConfirmModal>
);
};

77
x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_edit/follower_index_edit.js
View file

@ -15,7 +15,6 @@ import {
EuiConfirmModal,
EuiFlexGroup,
EuiFlexItem,
EuiOverlayMask,
EuiPageContent,
EuiSpacer,
} from '@elastic/eui';
@ -182,47 +181,45 @@ export class FollowerIndexEdit extends PureComponent {
);
return (
<EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={this.closeConfirmModal}
onConfirm={this.confirmSaveFollowerIhdex}
cancelButtonText={i18n.translate(
'xpack.crossClusterReplication.followerIndexEditForm.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
confirmButtonText={
isPaused ? (
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexEditForm.confirmModal.confirmAndResumeButtonText"
defaultMessage="Update and resume"
/>
) : (
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexEditForm.confirmModal.confirmButtonText"
defaultMessage="Update"
/>
)
<EuiConfirmModal
title={title}
onCancel={this.closeConfirmModal}
onConfirm={this.confirmSaveFollowerIhdex}
cancelButtonText={i18n.translate(
'xpack.crossClusterReplication.followerIndexEditForm.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
>
<p>
{isPaused ? (
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexEditForm.confirmModal.resumeDescription"
defaultMessage="Updating a follower index resumes replication of its leader index."
/>
) : (
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexEditForm.confirmModal.description"
defaultMessage="The follower index is paused, then resumed. If the update fails,
)}
confirmButtonText={
isPaused ? (
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexEditForm.confirmModal.confirmAndResumeButtonText"
defaultMessage="Update and resume"
/>
) : (
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexEditForm.confirmModal.confirmButtonText"
defaultMessage="Update"
/>
)
}
>
<p>
{isPaused ? (
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexEditForm.confirmModal.resumeDescription"
defaultMessage="Updating a follower index resumes replication of its leader index."
/>
) : (
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexEditForm.confirmModal.description"
defaultMessage="The follower index is paused, then resumed. If the update fails,
try manually resuming replication."
/>
)}
</p>
</EuiConfirmModal>
</EuiOverlayMask>
/>
)}
</p>
</EuiConfirmModal>
);
};

36
x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/delete_button.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React, { useState } from 'react';
@ -44,24 +44,22 @@ const DeleteConfirm = ({
});
return (
<EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={onConfirmCancel}
onConfirm={async () => {
setIsLoading(true);
await api.sendCancel(id);
onActionComplete();
}}
confirmButtonText={confirm}
confirmButtonDisabled={isLoading}
cancelButtonText={cancel}
defaultFocusedButton="confirm"
buttonColor="danger"
>
{message}
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={onConfirmCancel}
onConfirm={async () => {
setIsLoading(true);
await api.sendCancel(id);
onActionComplete();
}}
confirmButtonText={confirm}
confirmButtonDisabled={isLoading}
cancelButtonText={cancel}
defaultFocusedButton="confirm"
buttonColor="danger"
>
{message}
</EuiConfirmModal>
);
};

40
x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/extend_button.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React, { useState } from 'react';
@ -52,26 +52,24 @@ const ExtendConfirm = ({
});
return (
<EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={onConfirmDismiss}
onConfirm={async () => {
setIsLoading(true);
await api.sendExtend(id, `${newExpiration.toISOString()}`);
setIsLoading(false);
onConfirmDismiss();
onActionComplete();
}}
confirmButtonText={confirm}
confirmButtonDisabled={isLoading}
cancelButtonText={extend}
defaultFocusedButton="confirm"
buttonColor="primary"
>
{message}
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={onConfirmDismiss}
onConfirm={async () => {
setIsLoading(true);
await api.sendExtend(id, `${newExpiration.toISOString()}`);
setIsLoading(false);
onConfirmDismiss();
onActionComplete();
}}
confirmButtonText={confirm}
confirmButtonDisabled={isLoading}
cancelButtonText={extend}
defaultFocusedButton="confirm"
buttonColor="primary"
>
{message}
</EuiConfirmModal>
);
};

162
x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/customization_modal.tsx
View file

@ -20,7 +20,6 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -62,97 +61,94 @@ export const CustomizationModal: React.FC<Props> = ({
);
return (
<EuiOverlayMask>
<EuiModal onClose={onClose}>
<EuiModalHeader>
<EuiModalHeaderTitle>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.title',
<EuiModal onClose={onClose}>
<EuiModalHeader>
<EuiModalHeaderTitle>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.title',
{
defaultMessage: 'Customize document search',
}
)}
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiFormRow
label={i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.filterFieldsLabel',
{
defaultMessage: 'Customize document search',
defaultMessage: 'Filter fields',
}
)}
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiFormRow
label={i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.filterFieldsLabel',
{
defaultMessage: 'Filter fields',
}
)}
fullWidth
helpText={i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.filterFields',
{
defaultMessage:
'Faceted values rendered as filters and available as query refinement',
}
)}
>
<EuiComboBox
data-test-subj="filterFieldsDropdown"
fullWidth
options={selectableFilterFields}
selectedOptions={selectedFilterFields}
onChange={setSelectedFilterFields}
/>
</EuiFormRow>
<EuiFormRow
label={i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.sortFieldsLabel',
{
defaultMessage: 'Sort fields',
}
)}
fullWidth
helpText={i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.sortFields',
{
defaultMessage:
'Used to display result sorting options, ascending and descending',
}
)}
>
<EuiComboBox
data-test-subj="sortFieldsDropdown"
fullWidth
options={selectableSortFields}
selectedOptions={selectedSortFields}
onChange={setSelectedSortFields}
/>
</EuiFormRow>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={onClose}>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.cancel',
fullWidth
helpText={i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.filterFields',
{
defaultMessage: 'Cancel',
defaultMessage:
'Faceted values rendered as filters and available as query refinement',
}
)}
</EuiButtonEmpty>
<EuiButton
fill
onClick={() => {
onSave({
filterFields: selectedFilterFields.map(comboBoxOptionToFieldName),
sortFields: selectedSortFields.map(comboBoxOptionToFieldName),
});
}}
>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.save',
<EuiComboBox
data-test-subj="filterFieldsDropdown"
fullWidth
options={selectableFilterFields}
selectedOptions={selectedFilterFields}
onChange={setSelectedFilterFields}
/>
</EuiFormRow>
<EuiFormRow
label={i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.sortFieldsLabel',
{
defaultMessage: 'Save',
defaultMessage: 'Sort fields',
}
)}
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
fullWidth
helpText={i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.sortFields',
{
defaultMessage: 'Used to display result sorting options, ascending and descending',
}
)}
>
<EuiComboBox
data-test-subj="sortFieldsDropdown"
fullWidth
options={selectableSortFields}
selectedOptions={selectedSortFields}
onChange={setSelectedSortFields}
/>
</EuiFormRow>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={onClose}>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.cancel',
{
defaultMessage: 'Cancel',
}
)}
</EuiButtonEmpty>
<EuiButton
fill
onClick={() => {
onSave({
filterFields: selectedFilterFields.map(comboBoxOptionToFieldName),
sortFields: selectedSortFields.map(comboBoxOptionToFieldName),
});
}}
>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.save',
{
defaultMessage: 'Save',
}
)}
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
};

6
x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_confirmation_modal.tsx
View file

@ -9,7 +9,7 @@ import React from 'react';
import { useActions, useValues } from 'kea';
import { EuiTextColor, EuiOverlayMask } from '@elastic/eui';
import { EuiTextColor } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { LogRetentionLogic, LogRetentionOptions } from '../../log_retention';
@ -40,7 +40,7 @@ export const LogRetentionConfirmationModal: React.FC = () => {
}
return (
<EuiOverlayMask>
<>
{openedModal === LogRetentionOptions.Analytics && (
<GenericConfirmationModal
data-test-subj="AnalyticsLogRetentionConfirmationModal"
@ -133,6 +133,6 @@ export const LogRetentionConfirmationModal: React.FC = () => {
onSave={() => saveLogRetention(LogRetentionOptions.API, false)}
/>
)}
</EuiOverlayMask>
</>
);
};

123
x-pack/plugins/enterprise_search/public/applications/shared/schema/schema_add_field_modal.tsx
View file

@ -20,7 +20,6 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
EuiSelect,
EuiSpacer,
} from '@elastic/eui';
@ -79,71 +78,69 @@ export const SchemaAddFieldModal: React.FC<ISchemaAddFieldModalProps> = ({
);
return (
<EuiOverlayMask>
<EuiModal onClose={closeAddFieldModal} maxWidth={500}>
<form onSubmit={submitForm}>
<EuiModal onClose={closeAddFieldModal} maxWidth={500}>
<EuiModalHeader>
<EuiModalHeaderTitle>{FIELD_NAME_MODAL_TITLE}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<p>{FIELD_NAME_MODAL_DESCRIPTION}</p>
<EuiForm>
<EuiSpacer />
<EuiFlexGroup gutterSize="m">
<EuiFlexItem>
<EuiFormRow
label="Field name"
helpText={fieldNameNote}
<EuiModalHeader>
<EuiModalHeaderTitle>{FIELD_NAME_MODAL_TITLE}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<p>{FIELD_NAME_MODAL_DESCRIPTION}</p>
<EuiForm>
<EuiSpacer />
<EuiFlexGroup gutterSize="m">
<EuiFlexItem>
<EuiFormRow
label="Field name"
helpText={fieldNameNote}
fullWidth
data-test-subj="SchemaAddFieldNameRow"
error={addFieldFormErrors}
isInvalid={!!addFieldFormErrors}
>
<EuiFieldText
placeholder="name"
type="text"
onChange={handleChange}
required
value={rawFieldName}
fullWidth
data-test-subj="SchemaAddFieldNameRow"
error={addFieldFormErrors}
isInvalid={!!addFieldFormErrors}
>
<EuiFieldText
placeholder="name"
type="text"
onChange={handleChange}
required
value={rawFieldName}
fullWidth
autoFocus
isLoading={loading}
data-test-subj="SchemaAddFieldNameField"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow label="Field type" data-test-subj="SchemaAddFieldTypeRow">
<EuiSelect
name="select-add"
required
value={newFieldType}
options={fieldTypeSelectOptions}
disabled={disableForm}
onChange={(e) => updateNewFieldType(e.target.value)}
data-test-subj="SchemaSelect"
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={closeAddFieldModal}>{FIELD_NAME_MODAL_CANCEL}</EuiButtonEmpty>
<EuiButton
color="primary"
fill
disabled={disableForm}
type="submit"
isLoading={loading}
data-test-subj="SchemaAddFieldAddFieldButton"
>
{FIELD_NAME_MODAL_ADD_FIELD}
</EuiButton>
</EuiModalFooter>
</EuiModal>
autoFocus
isLoading={loading}
data-test-subj="SchemaAddFieldNameField"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow label="Field type" data-test-subj="SchemaAddFieldTypeRow">
<EuiSelect
name="select-add"
required
value={newFieldType}
options={fieldTypeSelectOptions}
disabled={disableForm}
onChange={(e) => updateNewFieldType(e.target.value)}
data-test-subj="SchemaSelect"
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={closeAddFieldModal}>{FIELD_NAME_MODAL_CANCEL}</EuiButtonEmpty>
<EuiButton
color="primary"
fill
disabled={disableForm}
type="submit"
isLoading={loading}
data-test-subj="SchemaAddFieldAddFieldButton"
>
{FIELD_NAME_MODAL_ADD_FIELD}
</EuiButton>
</EuiModalFooter>
</form>
</EuiOverlayMask>
</EuiModal>
);
};

81
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/field_editor_modal.tsx
View file

@ -20,7 +20,6 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
EuiSelect,
} from '@elastic/eui';
@ -59,48 +58,46 @@ export const FieldEditorModal: React.FC = () => {
const ACTION_LABEL = isEditing ? UPDATE_LABEL : ADD_LABEL;
return (
<EuiOverlayMask>
<EuiModal onClose={toggleFieldEditorModal} maxWidth={475}>
<form onSubmit={handleSubmit}>
<EuiModal onClose={toggleFieldEditorModal} maxWidth={475}>
<EuiModalHeader>
<EuiModalHeaderTitle>
{ACTION_LABEL} {FIELD_LABEL}
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiFormRow label="Field">
<EuiSelect
options={isEditing ? fieldOptions : availableFieldOptions}
name="field"
required
className="field-selector"
hasNoInitialSelection
data-test-subj="AvailableFieldOptions"
value={fieldName}
disabled={!!isEditing}
onChange={(e) => setName(e.target.value)}
/>
</EuiFormRow>
<EuiFormRow label="Label">
<EuiFieldText
name="label"
required
data-test-subj="VisibleFieldName"
value={label}
onChange={(e) => setLabel(e.target.value)}
/>
</EuiFormRow>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={toggleFieldEditorModal}>{CANCEL_BUTTON}</EuiButtonEmpty>
<EuiButton data-test-subj="FieldSubmitButton" color="primary" fill type="submit">
{ACTION_LABEL} {FIELD_LABEL}
</EuiButton>
</EuiModalFooter>
</EuiModal>
<EuiModalHeader>
<EuiModalHeaderTitle>
{ACTION_LABEL} {FIELD_LABEL}
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiFormRow label="Field">
<EuiSelect
options={isEditing ? fieldOptions : availableFieldOptions}
name="field"
required
className="field-selector"
hasNoInitialSelection
data-test-subj="AvailableFieldOptions"
value={fieldName}
disabled={!!isEditing}
onChange={(e) => setName(e.target.value)}
/>
</EuiFormRow>
<EuiFormRow label="Label">
<EuiFieldText
name="label"
required
data-test-subj="VisibleFieldName"
value={label}
onChange={(e) => setLabel(e.target.value)}
/>
</EuiFormRow>
</EuiForm>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={toggleFieldEditorModal}>{CANCEL_BUTTON}</EuiButtonEmpty>
<EuiButton data-test-subj="FieldSubmitButton" color="primary" fill type="submit">
{ACTION_LABEL} {FIELD_LABEL}
</EuiButton>
</EuiModalFooter>
</form>
</EuiOverlayMask>
</EuiModal>
);
};

39
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_settings.tsx
View file

@ -15,7 +15,6 @@ import {
EuiButton,
EuiButtonEmpty,
EuiConfirmModal,
EuiOverlayMask,
EuiFieldText,
EuiFlexGroup,
EuiFlexItem,
@ -101,26 +100,24 @@ export const SourceSettings: React.FC = () => {
};
const confirmModal = (
<EuiOverlayMask>
<EuiConfirmModal
title={CONFIRM_MODAL_TITLE}
onConfirm={handleSourceRemoval}
onCancel={hideConfirm}
buttonColor="danger"
cancelButtonText={CANCEL_BUTTON}
confirmButtonText={OK_BUTTON}
defaultFocusedButton="confirm"
>
<FormattedMessage
id="xpack.enterpriseSearch.workplaceSearch.sources.settingsModal.text"
defaultMessage="Your source documents will be deleted from Workplace Search.{lineBreak}Are you sure you want to remove {name}?"
values={{
name,
lineBreak: <br />,
}}
/>
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
title={CONFIRM_MODAL_TITLE}
onConfirm={handleSourceRemoval}
onCancel={hideConfirm}
buttonColor="danger"
cancelButtonText={CANCEL_BUTTON}
confirmButtonText={OK_BUTTON}
defaultFocusedButton="confirm"
>
<FormattedMessage
id="xpack.enterpriseSearch.workplaceSearch.sources.settingsModal.text"
defaultMessage="Your source documents will be deleted from Workplace Search.{lineBreak}Are you sure you want to remove {name}?"
values={{
name,
lineBreak: <br />,
}}
/>
</EuiConfirmModal>
);
return (

122
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/sources_view.tsx
View file

@ -19,7 +19,6 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
EuiText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -53,70 +52,65 @@ export const SourcesView: React.FC<SourcesViewProps> = ({ children }) => {
addedSourceName: string;
serviceType: string;
}) => (
<EuiOverlayMask>
<EuiModal onClose={resetPermissionsModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<EuiFlexGroup
justifyContent="flexStart"
alignItems="center"
responsive={false}
gutterSize="s"
>
<EuiFlexItem grow={false}>
<SourceIcon serviceType={serviceType} name={addedSourceName} />
</EuiFlexItem>
<EuiFlexItem>
{i18n.translate(
'xpack.enterpriseSearch.workplaceSearch.sourcesView.modal.heading',
{
defaultMessage: '{addedSourceName} requires additional configuration',
values: { addedSourceName },
}
)}
</EuiFlexItem>
</EuiFlexGroup>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText grow={false}>
<p>
<FormattedMessage
id="xpack.enterpriseSearch.workplaceSearch.sourcesView.modal.success"
defaultMessage="{addedSourceName} has been successfully connected and initial content synchronization is already underway. Since you have elected to synchronize document-level permission information, you must now provide user and group mappings using the {externalIdentitiesLink}."
values={{
addedSourceName,
externalIdentitiesLink: (
<EuiLink target="_blank" href={EXTERNAL_IDENTITIES_DOCS_URL}>
{EXTERNAL_IDENTITIES_LINK}
</EuiLink>
),
}}
/>
</p>
<EuiModal onClose={resetPermissionsModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<EuiFlexGroup
justifyContent="flexStart"
alignItems="center"
responsive={false}
gutterSize="s"
>
<EuiFlexItem grow={false}>
<SourceIcon serviceType={serviceType} name={addedSourceName} />
</EuiFlexItem>
<EuiFlexItem>
{i18n.translate('xpack.enterpriseSearch.workplaceSearch.sourcesView.modal.heading', {
defaultMessage: '{addedSourceName} requires additional configuration',
values: { addedSourceName },
})}
</EuiFlexItem>
</EuiFlexGroup>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText grow={false}>
<p>
<FormattedMessage
id="xpack.enterpriseSearch.workplaceSearch.sourcesView.modal.success"
defaultMessage="{addedSourceName} has been successfully connected and initial content synchronization is already underway. Since you have elected to synchronize document-level permission information, you must now provide user and group mappings using the {externalIdentitiesLink}."
values={{
addedSourceName,
externalIdentitiesLink: (
<EuiLink target="_blank" href={EXTERNAL_IDENTITIES_DOCS_URL}>
{EXTERNAL_IDENTITIES_LINK}
</EuiLink>
),
}}
/>
</p>
<p>
<FormattedMessage
id="xpack.enterpriseSearch.workplaceSearch.sourcesView.modal.docPermissions.description"
defaultMessage="Documents will not be searchable from Workplace Search until user and group mappings have been configured. {documentPermissionsLink}."
values={{
documentPermissionsLink: (
<EuiLink target="_blank" href={DOCUMENT_PERMISSIONS_DOCS_URL}>
{DOCUMENT_PERMISSIONS_LINK}
</EuiLink>
),
}}
/>
</p>
</EuiText>
</EuiModalBody>
<EuiModalFooter>
<EuiButton onClick={resetPermissionsModal} fill>
{UNDERSTAND_BUTTON}
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
<p>
<FormattedMessage
id="xpack.enterpriseSearch.workplaceSearch.sourcesView.modal.docPermissions.description"
defaultMessage="Documents will not be searchable from Workplace Search until user and group mappings have been configured. {documentPermissionsLink}."
values={{
documentPermissionsLink: (
<EuiLink target="_blank" href={DOCUMENT_PERMISSIONS_DOCS_URL}>
{DOCUMENT_PERMISSIONS_LINK}
</EuiLink>
),
}}
/>
</p>
</EuiText>
</EuiModalBody>
<EuiModalFooter>
<EuiButton onClick={resetPermissionsModal} fill>
{UNDERSTAND_BUTTON}
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
return (

3
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/add_group_modal.test.tsx
View file

@ -11,7 +11,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import { EuiModal, EuiOverlayMask } from '@elastic/eui';
import { EuiModal } from '@elastic/eui';
import { AddGroupModal } from './add_group_modal';
@ -36,7 +36,6 @@ describe('AddGroupModal', () => {
const wrapper = shallow(<AddGroupModal />);
expect(wrapper.find(EuiModal)).toHaveLength(1);
expect(wrapper.find(EuiOverlayMask)).toHaveLength(1);
});
it('updates the input value', () => {

59
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/add_group_modal.tsx
View file

@ -19,7 +19,6 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -49,37 +48,35 @@ export const AddGroupModal: React.FC<{}> = () => {
};
return (
<EuiOverlayMask>
<EuiModal onClose={closeNewGroupModal} initialFocus=".euiFieldText">
<form onSubmit={handleFormSumbit}>
<EuiModalHeader>
<EuiModalHeaderTitle>{ADD_GROUP_HEADER}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModal onClose={closeNewGroupModal} initialFocus=".euiFieldText">
<form onSubmit={handleFormSumbit}>
<EuiModalHeader>
<EuiModalHeaderTitle>{ADD_GROUP_HEADER}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiFormRow isInvalid={isInvalid} error={newGroupNameErrors} label="Group name">
<EuiFieldText
isInvalid={isInvalid}
value={newGroupName}
data-test-subj="AddGroupInput"
onChange={(e) => setNewGroupName(e.target.value)}
/>
</EuiFormRow>
</EuiModalBody>
<EuiModalBody>
<EuiFormRow isInvalid={isInvalid} error={newGroupNameErrors} label="Group name">
<EuiFieldText
isInvalid={isInvalid}
value={newGroupName}
data-test-subj="AddGroupInput"
onChange={(e) => setNewGroupName(e.target.value)}
/>
</EuiFormRow>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={closeNewGroupModal}>{CANCEL_BUTTON}</EuiButtonEmpty>
<EuiButton
disabled={!newGroupName}
onClick={saveNewGroup}
fill
data-test-subj="AddGroupSubmit"
>
{ADD_GROUP_SUBMIT}
</EuiButton>
</EuiModalFooter>
</form>
</EuiModal>
</EuiOverlayMask>
<EuiModalFooter>
<EuiButtonEmpty onClick={closeNewGroupModal}>{CANCEL_BUTTON}</EuiButtonEmpty>
<EuiButton
disabled={!newGroupName}
onClick={saveNewGroup}
fill
data-test-subj="AddGroupSubmit"
>
{ADD_GROUP_SUBMIT}
</EuiButton>
</EuiModalFooter>
</form>
</EuiModal>
);
};

3
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_manager_modal.test.tsx
View file

@ -13,7 +13,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import { EuiOverlayMask, EuiModal, EuiEmptyPrompt } from '@elastic/eui';
import { EuiModal, EuiEmptyPrompt } from '@elastic/eui';
import { GroupManagerModal } from './group_manager_modal';
@ -46,7 +46,6 @@ describe('GroupManagerModal', () => {
const wrapper = shallow(<GroupManagerModal {...props} />);
expect(wrapper.find(EuiModal)).toHaveLength(1);
expect(wrapper.find(EuiOverlayMask)).toHaveLength(1);
});
it('renders empty state', () => {

17
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_manager_modal.tsx
View file

@ -21,7 +21,6 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
EuiSpacer,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -161,14 +160,12 @@ export const GroupManagerModal: React.FC<GroupManagerModalProps> = ({
);
return (
<EuiOverlayMask>
<EuiModal
onClose={handleClose}
initialFocus=".euiFieldSearch"
data-test-subj="GroupManagerModal"
>
{showEmptyState ? emptyState : modalContent}
</EuiModal>
</EuiOverlayMask>
<EuiModal
onClose={handleClose}
initialFocus=".euiFieldSearch"
data-test-subj="GroupManagerModal"
>
{showEmptyState ? emptyState : modalContent}
</EuiModal>
);
};

23
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.tsx
View file

@ -12,7 +12,6 @@ import { useActions, useValues } from 'kea';
import {
EuiButton,
EuiConfirmModal,
EuiOverlayMask,
EuiFieldText,
EuiFlexGroup,
EuiFlexItem,
@ -226,18 +225,16 @@ export const GroupOverview: React.FC = () => {
<EuiSpacer size="xxl" />
<ContentSection title={REMOVE_SECTION_TITLE} description={REMOVE_SECTION_DESCRIPTION}>
{confirmDeleteModalVisible && (
<EuiOverlayMask>
<EuiConfirmModal
onCancel={hideConfirmDeleteModal}
onConfirm={deleteGroup}
confirmButtonText={CONFIRM_REMOVE_BUTTON_TEXT}
title={CONFIRM_TITLE_TEXT}
cancelButtonText={CANCEL_BUTTON}
defaultFocusedButton="confirm"
>
{CONFIRM_REMOVE_DESCRIPTION}
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
onCancel={hideConfirmDeleteModal}
onConfirm={deleteGroup}
confirmButtonText={CONFIRM_REMOVE_BUTTON_TEXT}
title={CONFIRM_TITLE_TEXT}
cancelButtonText={CANCEL_BUTTON}
defaultFocusedButton="confirm"
>
{CONFIRM_REMOVE_DESCRIPTION}
</EuiConfirmModal>
)}
<EuiButton
color="danger"

23
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/security/security.tsx
View file

@ -20,7 +20,6 @@ import {
EuiSpacer,
EuiPanel,
EuiConfirmModal,
EuiOverlayMask,
} from '@elastic/eui';
import { FlashMessages } from '../../../shared/flash_messages';
@ -169,18 +168,16 @@ export const Security: React.FC = () => {
);
const confirmModal = (
<EuiOverlayMask>
<EuiConfirmModal
title={CONFIRM_CHANGES_TEXT}
onConfirm={savePrivateSources}
onCancel={hideConfirmModal}
buttonColor="primary"
cancelButtonText={KEEP_EDITING_BUTTON}
confirmButtonText={SAVE_CHANGES_BUTTON}
>
{PRIVATE_SOURCES_UPDATE_CONFIRMATION_TEXT}
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
title={CONFIRM_CHANGES_TEXT}
onConfirm={savePrivateSources}
onCancel={hideConfirmModal}
buttonColor="primary"
cancelButtonText={KEEP_EDITING_BUTTON}
confirmButtonText={SAVE_CHANGES_BUTTON}
>
{PRIVATE_SOURCES_UPDATE_CONFIRMATION_TEXT}
</EuiConfirmModal>
);
return (

42
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.tsx
View file

@ -18,7 +18,6 @@ import {
EuiSwitch,
EuiCode,
EuiSpacer,
EuiOverlayMask,
EuiLink,
EuiModal,
EuiModalBody,
@ -93,25 +92,28 @@ export const OauthApplication: React.FC = () => {
};
const licenseModal = (
<EuiOverlayMask className="oauth-platinum-modal">
<EuiModal maxWidth={500} onClose={closeLicenseModal} data-test-subj="LicenseModal">
<EuiModalBody>
<EuiSpacer size="xl" />
<LicenseBadge />
<EuiSpacer />
<EuiTitle size="l">
<h1>{LICENSE_MODAL_TITLE}</h1>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText color="subdued">{LICENSE_MODAL_DESCRIPTION}</EuiText>
<EuiSpacer />
<EuiLink external target="_blank" href={ENT_SEARCH_LICENSE_MANAGEMENT}>
{LICENSE_MODAL_LINK}
</EuiLink>
<EuiSpacer />
</EuiModalBody>
</EuiModal>
</EuiOverlayMask>
<EuiModal
className="oauth-platinum-modal"
maxWidth={500}
onClose={closeLicenseModal}
data-test-subj="LicenseModal"
>
<EuiModalBody>
<EuiSpacer size="xl" />
<LicenseBadge />
<EuiSpacer />
<EuiTitle size="l">
<h1>{LICENSE_MODAL_TITLE}</h1>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText color="subdued">{LICENSE_MODAL_DESCRIPTION}</EuiText>
<EuiSpacer />
<EuiLink external target="_blank" href={ENT_SEARCH_LICENSE_MANAGEMENT}>
{LICENSE_MODAL_LINK}
</EuiLink>
<EuiSpacer />
</EuiModalBody>
</EuiModal>
);
return (

31
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/source_config.tsx
View file

@ -9,7 +9,7 @@ import React, { useEffect, useState } from 'react';
import { useActions, useValues } from 'kea';
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { Loading } from '../../../../shared/loading';
@ -56,22 +56,19 @@ export const SourceConfig: React.FC<SourceConfigProps> = ({ sourceIndex }) => {
header={header}
/>
{confirmModalVisible && (
<EuiOverlayMask>
<EuiConfirmModal
onConfirm={() => deleteSourceConfig(serviceType, name)}
onCancel={hideConfirmModal}
buttonColor="danger"
>
{i18n.translate(
'xpack.enterpriseSearch.workplaceSearch.settings.confirmRemoveConfig.message',
{
defaultMessage:
'Are you sure you want to remove the OAuth configuration for {name}?',
values: { name },
}
)}
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
onConfirm={() => deleteSourceConfig(serviceType, name)}
onCancel={hideConfirmModal}
buttonColor="danger"
>
{i18n.translate(
'xpack.enterpriseSearch.workplaceSearch.settings.confirmRemoveConfig.message',
{
defaultMessage: 'Are you sure you want to remove the OAuth configuration for {name}?',
values: { name },
}
)}
</EuiConfirmModal>
)}
</>
);

122
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_copy_provider.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { Fragment, useRef, useState } from 'react';
import { EuiConfirmModal, EuiOverlayMask, EuiFormRow, EuiFieldText } from '@elastic/eui';
import { EuiConfirmModal, EuiFormRow, EuiFieldText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { AgentPolicy } from '../../../types';
@ -92,75 +92,71 @@ export const AgentPolicyCopyProvider: React.FunctionComponent<Props> = ({ childr
}
return (
<EuiOverlayMask>
<EuiConfirmModal
title={
<span className="eui-textBreakWord">
<FormattedMessage
id="xpack.fleet.copyAgentPolicy.confirmModal.copyPolicyTitle"
defaultMessage="Copy '{name}' agent policy"
values={{
name: agentPolicy.name,
}}
/>
</span>
}
onCancel={closeModal}
onConfirm={copyAgentPolicy}
cancelButtonText={
<EuiConfirmModal
title={
<span className="eui-textBreakWord">
<FormattedMessage
id="xpack.fleet.copyAgentPolicy.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
id="xpack.fleet.copyAgentPolicy.confirmModal.copyPolicyTitle"
defaultMessage="Copy '{name}' agent policy"
values={{
name: agentPolicy.name,
}}
/>
</span>
}
onCancel={closeModal}
onConfirm={copyAgentPolicy}
cancelButtonText={
<FormattedMessage
id="xpack.fleet.copyAgentPolicy.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.fleet.copyAgentPolicy.confirmModal.confirmButtonLabel"
defaultMessage="Copy policy"
/>
}
confirmButtonDisabled={isLoading || !newAgentPolicy.name.trim()}
>
<p>
<FormattedMessage
id="xpack.fleet.copyAgentPolicy.confirmModal.copyPolicyPrompt"
defaultMessage="Choose a name and description for your new agent policy."
/>
</p>
<EuiFormRow
label={
<FormattedMessage
id="xpack.fleet.copyAgentPolicy.confirmModal.newNameLabel"
defaultMessage="New policy name"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.fleet.copyAgentPolicy.confirmModal.confirmButtonLabel"
defaultMessage="Copy policy"
/>
}
confirmButtonDisabled={isLoading || !newAgentPolicy.name.trim()}
fullWidth
>
<p>
<EuiFieldText
fullWidth
value={newAgentPolicy.name}
onChange={(e) => setNewAgentPolicy({ ...newAgentPolicy, name: e.target.value })}
/>
</EuiFormRow>
<EuiFormRow
label={
<FormattedMessage
id="xpack.fleet.copyAgentPolicy.confirmModal.copyPolicyPrompt"
defaultMessage="Choose a name and description for your new agent policy."
id="xpack.fleet.copyAgentPolicy.confirmModal.newDescriptionLabel"
defaultMessage="Description"
/>
</p>
<EuiFormRow
label={
<FormattedMessage
id="xpack.fleet.copyAgentPolicy.confirmModal.newNameLabel"
defaultMessage="New policy name"
/>
}
}
fullWidth
>
<EuiFieldText
fullWidth
>
<EuiFieldText
fullWidth
value={newAgentPolicy.name}
onChange={(e) => setNewAgentPolicy({ ...newAgentPolicy, name: e.target.value })}
/>
</EuiFormRow>
<EuiFormRow
label={
<FormattedMessage
id="xpack.fleet.copyAgentPolicy.confirmModal.newDescriptionLabel"
defaultMessage="Description"
/>
}
fullWidth
>
<EuiFieldText
fullWidth
value={newAgentPolicy.description}
onChange={(e) =>
setNewAgentPolicy({ ...newAgentPolicy, description: e.target.value })
}
/>
</EuiFormRow>
</EuiConfirmModal>
</EuiOverlayMask>
value={newAgentPolicy.description}
onChange={(e) => setNewAgentPolicy({ ...newAgentPolicy, description: e.target.value })}
/>
</EuiFormRow>
</EuiConfirmModal>
);
};

116
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_delete_provider.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { Fragment, useRef, useState } from 'react';
import { EuiConfirmModal, EuiOverlayMask, EuiCallOut } from '@elastic/eui';
import { EuiConfirmModal, EuiCallOut } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { AGENT_SAVED_OBJECT_TYPE } from '../../../constants';
@ -110,69 +110,67 @@ export const AgentPolicyDeleteProvider: React.FunctionComponent<Props> = ({ chil
}
return (
<EuiOverlayMask>
<EuiConfirmModal
title={
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.fleet.deleteAgentPolicy.confirmModal.deletePolicyTitle"
defaultMessage="Delete this agent policy?"
/>
}
onCancel={closeModal}
onConfirm={deleteAgentPolicy}
cancelButtonText={
<FormattedMessage
id="xpack.fleet.deleteAgentPolicy.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
isLoading || isLoadingAgentsCount ? (
<FormattedMessage
id="xpack.fleet.deleteAgentPolicy.confirmModal.deletePolicyTitle"
defaultMessage="Delete this agent policy?"
id="xpack.fleet.deleteAgentPolicy.confirmModal.loadingButtonLabel"
defaultMessage="Loading…"
/>
}
onCancel={closeModal}
onConfirm={deleteAgentPolicy}
cancelButtonText={
<FormattedMessage
id="xpack.fleet.deleteAgentPolicy.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
isLoading || isLoadingAgentsCount ? (
<FormattedMessage
id="xpack.fleet.deleteAgentPolicy.confirmModal.loadingButtonLabel"
defaultMessage="Loading…"
/>
) : (
<FormattedMessage
id="xpack.fleet.deleteAgentPolicy.confirmModal.confirmButtonLabel"
defaultMessage="Delete policy"
/>
)
}
buttonColor="danger"
confirmButtonDisabled={isLoading || isLoadingAgentsCount || !!agentsCount}
>
{isLoadingAgentsCount ? (
<FormattedMessage
id="xpack.fleet.deleteAgentPolicy.confirmModal.loadingAgentsCountMessage"
defaultMessage="Checking amount of affected agents…"
/>
) : agentsCount ? (
<EuiCallOut
color="danger"
title={i18n.translate(
'xpack.fleet.deleteAgentPolicy.confirmModal.affectedAgentsTitle',
{
defaultMessage: 'Policy in use',
}
)}
>
<FormattedMessage
id="xpack.fleet.deleteAgentPolicy.confirmModal.affectedAgentsMessage"
defaultMessage="{agentsCount, plural, one {# agent is} other {# agents are}} assigned to this agent policy. Unassign these agents before deleting this policy."
values={{
agentsCount,
}}
/>
</EuiCallOut>
) : (
<FormattedMessage
id="xpack.fleet.deleteAgentPolicy.confirmModal.irreversibleMessage"
defaultMessage="This action cannot be undone."
id="xpack.fleet.deleteAgentPolicy.confirmModal.confirmButtonLabel"
defaultMessage="Delete policy"
/>
)}
</EuiConfirmModal>
</EuiOverlayMask>
)
}
buttonColor="danger"
confirmButtonDisabled={isLoading || isLoadingAgentsCount || !!agentsCount}
>
{isLoadingAgentsCount ? (
<FormattedMessage
id="xpack.fleet.deleteAgentPolicy.confirmModal.loadingAgentsCountMessage"
defaultMessage="Checking amount of affected agents…"
/>
) : agentsCount ? (
<EuiCallOut
color="danger"
title={i18n.translate(
'xpack.fleet.deleteAgentPolicy.confirmModal.affectedAgentsTitle',
{
defaultMessage: 'Policy in use',
}
)}
>
<FormattedMessage
id="xpack.fleet.deleteAgentPolicy.confirmModal.affectedAgentsMessage"
defaultMessage="{agentsCount, plural, one {# agent is} other {# agents are}} assigned to this agent policy. Unassign these agents before deleting this policy."
values={{
agentsCount,
}}
/>
</EuiCallOut>
) : (
<FormattedMessage
id="xpack.fleet.deleteAgentPolicy.confirmModal.irreversibleMessage"
defaultMessage="This action cannot be undone."
/>
)}
</EuiConfirmModal>
);
};

2
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_yaml_flyout.tsx
View file

@ -52,8 +52,6 @@ export const AgentPolicyYamlFlyout = memo<{ policyId: string; onClose: () => voi
{error.message}
</EuiCallOut>
) : (
// Property 'whiteSpace' does not exist on type 'IntrinsicAttributes & CommonProps & OwnProps & HTMLAttributes<HTMLElement> & { children?: ReactNode; }'.
// @ts-expect-error linter complains whiteSpace isn't available but docs show it on EuiCodeBlockImpl
<EuiCodeBlock language="yaml" isCopyable fontSize="m" whiteSpace="pre">
{fullAgentPolicyToYaml(yamlData!.item)}
</EuiCodeBlock>

100
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/confirm_deploy_modal.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { EuiCallOut, EuiOverlayMask, EuiConfirmModal, EuiSpacer } from '@elastic/eui';
import { EuiCallOut, EuiConfirmModal, EuiSpacer } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { AgentPolicy } from '../../../types';
@ -18,58 +18,56 @@ export const ConfirmDeployAgentPolicyModal: React.FunctionComponent<{
agentPolicy: AgentPolicy;
}> = ({ onConfirm, onCancel, agentCount, agentPolicy }) => {
return (
<EuiOverlayMask>
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.fleet.agentPolicy.confirmModalTitle"
defaultMessage="Save and deploy changes"
/>
}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText={
<FormattedMessage
id="xpack.fleet.agentPolicy.confirmModalCancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.fleet.agentPolicy.confirmModalConfirmButtonLabel"
defaultMessage="Save and deploy changes"
/>
}
buttonColor="primary"
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.fleet.agentPolicy.confirmModalTitle"
defaultMessage="Save and deploy changes"
/>
}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText={
<FormattedMessage
id="xpack.fleet.agentPolicy.confirmModalCancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.fleet.agentPolicy.confirmModalConfirmButtonLabel"
defaultMessage="Save and deploy changes"
/>
}
buttonColor="primary"
>
<EuiCallOut
iconType="iInCircle"
title={i18n.translate('xpack.fleet.agentPolicy.confirmModalCalloutTitle', {
defaultMessage:
'This action will update {agentCount, plural, one {# agent} other {# agents}}',
values: {
agentCount,
},
})}
>
<EuiCallOut
iconType="iInCircle"
title={i18n.translate('xpack.fleet.agentPolicy.confirmModalCalloutTitle', {
defaultMessage:
'This action will update {agentCount, plural, one {# agent} other {# agents}}',
values: {
agentCount,
},
})}
>
<div className="eui-textBreakWord">
<FormattedMessage
id="xpack.fleet.agentPolicy.confirmModalCalloutDescription"
defaultMessage="Fleet has detected that the selected agent policy, {policyName}, is already in use by
<div className="eui-textBreakWord">
<FormattedMessage
id="xpack.fleet.agentPolicy.confirmModalCalloutDescription"
defaultMessage="Fleet has detected that the selected agent policy, {policyName}, is already in use by
some of your agents. As a result of this action, Fleet will deploy updates to all agents
that use this policy."
values={{
policyName: <b>{agentPolicy.name}</b>,
}}
/>
</div>
</EuiCallOut>
<EuiSpacer size="l" />
<FormattedMessage
id="xpack.fleet.agentPolicy.confirmModalDescription"
defaultMessage="This action can not be undone. Are you sure you wish to continue?"
/>
</EuiConfirmModal>
</EuiOverlayMask>
values={{
policyName: <b>{agentPolicy.name}</b>,
}}
/>
</div>
</EuiCallOut>
<EuiSpacer size="l" />
<FormattedMessage
id="xpack.fleet.agentPolicy.confirmModalDescription"
defaultMessage="This action can not be undone. Are you sure you wish to continue?"
/>
</EuiConfirmModal>
);
};

128
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/package_policy_delete_provider.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { Fragment, useMemo, useRef, useState } from 'react';
import { EuiCallOut, EuiConfirmModal, EuiOverlayMask, EuiSpacer } from '@elastic/eui';
import { EuiCallOut, EuiConfirmModal, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { useStartServices, sendRequest, sendDeletePackagePolicy, useConfig } from '../../../hooks';
@ -142,78 +142,76 @@ export const PackagePolicyDeleteProvider: React.FunctionComponent<Props> = ({
}
return (
<EuiOverlayMask>
<EuiConfirmModal
title={
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.deleteMultipleTitle"
defaultMessage="Delete {count, plural, one {integration} other {# integrations}}?"
values={{ count: packagePolicies.length }}
/>
}
onCancel={closeModal}
onConfirm={deletePackagePolicies}
cancelButtonText={
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
isLoading || isLoadingAgentsCount ? (
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.deleteMultipleTitle"
defaultMessage="Delete {count, plural, one {integration} other {# integrations}}?"
values={{ count: packagePolicies.length }}
id="xpack.fleet.deletePackagePolicy.confirmModal.loadingButtonLabel"
defaultMessage="Loading…"
/>
}
onCancel={closeModal}
onConfirm={deletePackagePolicies}
cancelButtonText={
) : (
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
id="xpack.fleet.deletePackagePolicy.confirmModal.confirmButtonLabel"
defaultMessage="Delete {agentPoliciesCount, plural, one {integration} other {integrations}}"
values={{
agentPoliciesCount: packagePolicies.length,
}}
/>
}
confirmButtonText={
isLoading || isLoadingAgentsCount ? (
)
}
buttonColor="danger"
confirmButtonDisabled={isLoading || isLoadingAgentsCount}
>
{isLoadingAgentsCount ? (
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.loadingAgentsCountMessage"
defaultMessage="Checking affected agents…"
/>
) : agentsCount ? (
<>
<EuiCallOut
color="danger"
title={
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.affectedAgentsTitle"
defaultMessage="This action will affect {agentsCount} {agentsCount, plural, one {agent} other {agents}}."
values={{ agentsCount }}
/>
}
>
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.loadingButtonLabel"
defaultMessage="Loading…"
/>
) : (
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.confirmButtonLabel"
defaultMessage="Delete {agentPoliciesCount, plural, one {integration} other {integrations}}"
id="xpack.fleet.deletePackagePolicy.confirmModal.affectedAgentsMessage"
defaultMessage="Fleet has detected that {agentPolicyName} is already in use by some of your agents."
values={{
agentPoliciesCount: packagePolicies.length,
agentPolicyName: <strong>{agentPolicy.name}</strong>,
}}
/>
)
}
buttonColor="danger"
confirmButtonDisabled={isLoading || isLoadingAgentsCount}
>
{isLoadingAgentsCount ? (
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.loadingAgentsCountMessage"
defaultMessage="Checking affected agents…"
/>
) : agentsCount ? (
<>
<EuiCallOut
color="danger"
title={
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.affectedAgentsTitle"
defaultMessage="This action will affect {agentsCount} {agentsCount, plural, one {agent} other {agents}}."
values={{ agentsCount }}
/>
}
>
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.affectedAgentsMessage"
defaultMessage="Fleet has detected that {agentPolicyName} is already in use by some of your agents."
values={{
agentPolicyName: <strong>{agentPolicy.name}</strong>,
}}
/>
</EuiCallOut>
<EuiSpacer size="l" />
</>
) : null}
{!isLoadingAgentsCount && (
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.generalMessage"
defaultMessage="This action can not be undone. Are you sure you wish to continue?"
/>
)}
</EuiConfirmModal>
</EuiOverlayMask>
</EuiCallOut>
<EuiSpacer size="l" />
</>
) : null}
{!isLoadingAgentsCount && (
<FormattedMessage
id="xpack.fleet.deletePackagePolicy.confirmModal.generalMessage"
defaultMessage="This action can not be undone. Are you sure you wish to continue?"
/>
)}
</EuiConfirmModal>
);
};

154
x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_unenroll_modal/index.tsx
View file

@ -7,7 +7,7 @@
import React, { useState } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiConfirmModal, EuiOverlayMask, EuiFormFieldset, EuiCheckbox } from '@elastic/eui';
import { EuiConfirmModal, EuiFormFieldset, EuiCheckbox } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { Agent } from '../../../../types';
import {
@ -81,90 +81,88 @@ export const AgentUnenrollAgentModal: React.FunctionComponent<Props> = ({
}
return (
<EuiOverlayMask>
<EuiConfirmModal
title={
isSingleAgent ? (
<FormattedMessage
id="xpack.fleet.unenrollAgents.deleteSingleTitle"
defaultMessage="Unenroll agent"
/>
) : (
<FormattedMessage
id="xpack.fleet.unenrollAgents.forceDeleteMultipleTitle"
defaultMessage="Unenroll {count} agents"
values={{ count: agentCount }}
/>
)
}
onCancel={onClose}
onConfirm={onSubmit}
cancelButtonText={
<EuiConfirmModal
title={
isSingleAgent ? (
<FormattedMessage
id="xpack.fleet.unenrollAgents.cancelButtonLabel"
defaultMessage="Cancel"
id="xpack.fleet.unenrollAgents.deleteSingleTitle"
defaultMessage="Unenroll agent"
/>
}
confirmButtonDisabled={isSubmitting}
confirmButtonText={
isSingleAgent ? (
) : (
<FormattedMessage
id="xpack.fleet.unenrollAgents.forceDeleteMultipleTitle"
defaultMessage="Unenroll {count} agents"
values={{ count: agentCount }}
/>
)
}
onCancel={onClose}
onConfirm={onSubmit}
cancelButtonText={
<FormattedMessage
id="xpack.fleet.unenrollAgents.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonDisabled={isSubmitting}
confirmButtonText={
isSingleAgent ? (
<FormattedMessage
id="xpack.fleet.unenrollAgents.confirmSingleButtonLabel"
defaultMessage="Unenroll agent"
/>
) : (
<FormattedMessage
id="xpack.fleet.unenrollAgents.confirmMultipleButtonLabel"
defaultMessage="Unenroll {count} agents"
values={{ count: agentCount }}
/>
)
}
buttonColor="danger"
>
<p>
{isSingleAgent ? (
<FormattedMessage
id="xpack.fleet.unenrollAgents.deleteSingleDescription"
defaultMessage='This action will remove the selected agent running on "{hostName}" from Fleet.
Any data that was already sent by the agent will not be deleted. This action cannot be undone.'
values={{ hostName: ((agents[0] as Agent).local_metadata.host as any).hostname }}
/>
) : (
<FormattedMessage
id="xpack.fleet.unenrollAgents.deleteMultipleDescription"
defaultMessage="This action will remove multiple agents from Fleet and prevent new data from being ingested.
Any data that was already sent by these agents will not be affected. This action cannot be undone."
/>
)}
</p>
<EuiFormFieldset
legend={{
children: (
<FormattedMessage
id="xpack.fleet.unenrollAgents.confirmSingleButtonLabel"
defaultMessage="Unenroll agent"
/>
) : (
<FormattedMessage
id="xpack.fleet.unenrollAgents.confirmMultipleButtonLabel"
defaultMessage="Unenroll {count} agents"
id="xpack.fleet.unenrollAgents.forceUnenrollLegendText"
defaultMessage="Force unenroll {count, plural, one {agent} other {agents}}"
values={{ count: agentCount }}
/>
)
}
buttonColor="danger"
),
}}
>
<p>
{isSingleAgent ? (
<EuiCheckbox
id="fleetForceUnenrollAgents"
label={
<FormattedMessage
id="xpack.fleet.unenrollAgents.deleteSingleDescription"
defaultMessage='This action will remove the selected agent running on "{hostName}" from Fleet.
Any data that was already sent by the agent will not be deleted. This action cannot be undone.'
values={{ hostName: ((agents[0] as Agent).local_metadata.host as any).hostname }}
/>
) : (
<FormattedMessage
id="xpack.fleet.unenrollAgents.deleteMultipleDescription"
defaultMessage="This action will remove multiple agents from Fleet and prevent new data from being ingested.
Any data that was already sent by these agents will not be affected. This action cannot be undone."
/>
)}
</p>
<EuiFormFieldset
legend={{
children: (
<FormattedMessage
id="xpack.fleet.unenrollAgents.forceUnenrollLegendText"
defaultMessage="Force unenroll {count, plural, one {agent} other {agents}}"
values={{ count: agentCount }}
/>
),
}}
>
<EuiCheckbox
id="fleetForceUnenrollAgents"
label={
<FormattedMessage
id="xpack.fleet.unenrollAgents.forceUnenrollCheckboxLabel"
defaultMessage="Remove {count, plural, one {agent} other {agents}} immediately.
id="xpack.fleet.unenrollAgents.forceUnenrollCheckboxLabel"
defaultMessage="Remove {count, plural, one {agent} other {agents}} immediately.
Do not wait for agent to send any last data."
values={{ count: agentCount }}
/>
}
checked={forceUnenroll}
onChange={(e) => setForceUnenroll(e.target.checked)}
disabled={useForceUnenroll}
/>
</EuiFormFieldset>
</EuiConfirmModal>
</EuiOverlayMask>
values={{ count: agentCount }}
/>
}
checked={forceUnenroll}
onChange={(e) => setForceUnenroll(e.target.checked)}
disabled={useForceUnenroll}
/>
</EuiFormFieldset>
</EuiConfirmModal>
);
};

160
x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_upgrade_modal/index.tsx
View file

@ -7,13 +7,7 @@
import React, { useState } from 'react';
import { i18n } from '@kbn/i18n';
import {
EuiConfirmModal,
EuiOverlayMask,
EuiBetaBadge,
EuiFlexGroup,
EuiFlexItem,
} from '@elastic/eui';
import { EuiConfirmModal, EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { Agent } from '../../../../types';
import {
@ -74,85 +68,83 @@ export const AgentUpgradeAgentModal: React.FunctionComponent<Props> = ({
}
return (
<EuiOverlayMask>
<EuiConfirmModal
title={
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
{isSingleAgent ? (
<FormattedMessage
id="xpack.fleet.upgradeAgents.deleteSingleTitle"
defaultMessage="Upgrade agent?"
/>
) : (
<FormattedMessage
id="xpack.fleet.upgradeAgents.deleteMultipleTitle"
defaultMessage="Upgrade {count} agents?"
values={{ count: agentCount }}
/>
)}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiBetaBadge
label={
<FormattedMessage
id="xpack.fleet.upgradeAgents.experimentalLabel"
defaultMessage="Experimental"
/>
}
tooltipContent={
<FormattedMessage
id="xpack.fleet.upgradeAgents.experimentalLabelTooltip"
defaultMessage="Upgrade agent might change or be removed in a future release and is not subject to the support SLA."
/>
}
<EuiConfirmModal
title={
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
{isSingleAgent ? (
<FormattedMessage
id="xpack.fleet.upgradeAgents.deleteSingleTitle"
defaultMessage="Upgrade agent?"
/>
</EuiFlexItem>
</EuiFlexGroup>
}
onCancel={onClose}
onConfirm={onSubmit}
cancelButtonText={
) : (
<FormattedMessage
id="xpack.fleet.upgradeAgents.deleteMultipleTitle"
defaultMessage="Upgrade {count} agents?"
values={{ count: agentCount }}
/>
)}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiBetaBadge
label={
<FormattedMessage
id="xpack.fleet.upgradeAgents.experimentalLabel"
defaultMessage="Experimental"
/>
}
tooltipContent={
<FormattedMessage
id="xpack.fleet.upgradeAgents.experimentalLabelTooltip"
defaultMessage="Upgrade agent might change or be removed in a future release and is not subject to the support SLA."
/>
}
/>
</EuiFlexItem>
</EuiFlexGroup>
}
onCancel={onClose}
onConfirm={onSubmit}
cancelButtonText={
<FormattedMessage
id="xpack.fleet.upgradeAgents.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonDisabled={isSubmitting}
confirmButtonText={
isSingleAgent ? (
<FormattedMessage
id="xpack.fleet.upgradeAgents.cancelButtonLabel"
defaultMessage="Cancel"
id="xpack.fleet.upgradeAgents.confirmSingleButtonLabel"
defaultMessage="Upgrade agent"
/>
}
confirmButtonDisabled={isSubmitting}
confirmButtonText={
isSingleAgent ? (
<FormattedMessage
id="xpack.fleet.upgradeAgents.confirmSingleButtonLabel"
defaultMessage="Upgrade agent"
/>
) : (
<FormattedMessage
id="xpack.fleet.upgradeAgents.confirmMultipleButtonLabel"
defaultMessage="Upgrade {count} agents"
values={{ count: agentCount }}
/>
)
}
>
<p>
{isSingleAgent ? (
<FormattedMessage
id="xpack.fleet.upgradeAgents.upgradeSingleDescription"
defaultMessage="This action upgrades the agent running on '{hostName}' to version {version}. You can't undo this upgrade."
values={{
hostName: ((agents[0] as Agent).local_metadata.host as any).hostname,
version,
}}
/>
) : (
<FormattedMessage
id="xpack.fleet.upgradeAgents.upgradeMultipleDescription"
defaultMessage="This action upgrades multiple agents to version {version}. You can't undo this upgrade."
values={{ version }}
/>
)}
</p>
</EuiConfirmModal>
</EuiOverlayMask>
) : (
<FormattedMessage
id="xpack.fleet.upgradeAgents.confirmMultipleButtonLabel"
defaultMessage="Upgrade {count} agents"
values={{ count: agentCount }}
/>
)
}
>
<p>
{isSingleAgent ? (
<FormattedMessage
id="xpack.fleet.upgradeAgents.upgradeSingleDescription"
defaultMessage="This action upgrades the agent running on '{hostName}' to version {version}. You can't undo this upgrade."
values={{
hostName: ((agents[0] as Agent).local_metadata.host as any).hostname,
version,
}}
/>
) : (
<FormattedMessage
id="xpack.fleet.upgradeAgents.upgradeMultipleDescription"
defaultMessage="This action upgrades multiple agents to version {version}. You can't undo this upgrade."
values={{ version }}
/>
)}
</p>
</EuiConfirmModal>
);
};

54
x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/components/confirm_delete_modal.tsx
View file

@ -7,7 +7,7 @@
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiConfirmModal, EuiCallOut, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal, EuiCallOut } from '@elastic/eui';
import { EnrollmentAPIKey } from '../../../../types';
interface Props {
@ -19,33 +19,31 @@ interface Props {
export const ConfirmEnrollmentTokenDelete = (props: Props) => {
const { onCancel, onConfirm, enrollmentKey } = props;
return (
<EuiOverlayMask>
<EuiConfirmModal
title={i18n.translate('xpack.fleet.enrollmentTokenDeleteModal.title', {
defaultMessage: 'Revoke enrollment token',
<EuiConfirmModal
title={i18n.translate('xpack.fleet.enrollmentTokenDeleteModal.title', {
defaultMessage: 'Revoke enrollment token',
})}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText={i18n.translate('xpack.fleet.enrollmentTokenDeleteModal.cancelButton', {
defaultMessage: 'Cancel',
})}
confirmButtonText={i18n.translate('xpack.fleet.enrollmentTokenDeleteModal.deleteButton', {
defaultMessage: 'Revoke enrollment token',
})}
defaultFocusedButton="confirm"
buttonColor="danger"
>
<EuiCallOut
title={i18n.translate('xpack.fleet.enrollmentTokenDeleteModal.description', {
defaultMessage:
'Are your sure you want to revoke {keyName}? New agents will no longer be able to be enrolled using this token.',
values: {
keyName: enrollmentKey.name,
},
})}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText={i18n.translate('xpack.fleet.enrollmentTokenDeleteModal.cancelButton', {
defaultMessage: 'Cancel',
})}
confirmButtonText={i18n.translate('xpack.fleet.enrollmentTokenDeleteModal.deleteButton', {
defaultMessage: 'Revoke enrollment token',
})}
defaultFocusedButton="confirm"
buttonColor="danger"
>
<EuiCallOut
title={i18n.translate('xpack.fleet.enrollmentTokenDeleteModal.description', {
defaultMessage:
'Are your sure you want to revoke {keyName}? New agents will no longer be able to be enrolled using this token.',
values: {
keyName: enrollmentKey.name,
},
})}
color="danger"
/>
</EuiConfirmModal>
</EuiOverlayMask>
color="danger"
/>
</EuiConfirmModal>
);
};

80
x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/settings/confirm_package_install.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiCallOut, EuiConfirmModal, EuiOverlayMask, EuiSpacer } from '@elastic/eui';
import { EuiCallOut, EuiConfirmModal, EuiSpacer } from '@elastic/eui';
import React from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
@ -18,50 +18,48 @@ interface ConfirmPackageInstallProps {
export const ConfirmPackageInstall = (props: ConfirmPackageInstallProps) => {
const { onCancel, onConfirm, packageName, numOfAssets } = props;
return (
<EuiOverlayMask>
<EuiConfirmModal
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmInstallModal.installTitle"
defaultMessage="Install {packageName}"
values={{ packageName }}
/>
}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmInstallModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmInstallModal.installButtonLabel"
defaultMessage="Install {packageName}"
values={{ packageName }}
/>
}
defaultFocusedButton="confirm"
>
<EuiCallOut
iconType="iInCircle"
title={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmInstallModal.installTitle"
defaultMessage="Install {packageName}"
values={{ packageName }}
id="xpack.fleet.integrations.settings.confirmInstallModal.installCalloutTitle"
defaultMessage="This action will install {numOfAssets} assets"
values={{ numOfAssets }}
/>
}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmInstallModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmInstallModal.installButtonLabel"
defaultMessage="Install {packageName}"
values={{ packageName }}
/>
}
defaultFocusedButton="confirm"
>
<EuiCallOut
iconType="iInCircle"
title={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmInstallModal.installCalloutTitle"
defaultMessage="This action will install {numOfAssets} assets"
values={{ numOfAssets }}
/>
}
/>
<EuiSpacer size="l" />
<p>
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmInstallModal.installDescription"
defaultMessage="Kibana assets will be installed in the current Space (Default) and will only be accessible to users who have permission to view this Space. Elasticsearch assets are installed globally and will be accessible to all Kibana users."
/>
<EuiSpacer size="l" />
<p>
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmInstallModal.installDescription"
defaultMessage="Kibana assets will be installed in the current Space (Default) and will only be accessible to users who have permission to view this Space. Elasticsearch assets are installed globally and will be accessible to all Kibana users."
/>
</p>
</EuiConfirmModal>
</EuiOverlayMask>
</p>
</EuiConfirmModal>
);
};

88
x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/settings/confirm_package_uninstall.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiCallOut, EuiConfirmModal, EuiOverlayMask, EuiSpacer } from '@elastic/eui';
import { EuiCallOut, EuiConfirmModal, EuiSpacer } from '@elastic/eui';
import React from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
@ -18,58 +18,56 @@ interface ConfirmPackageUninstallProps {
export const ConfirmPackageUninstall = (props: ConfirmPackageUninstallProps) => {
const { onCancel, onConfirm, packageName, numOfAssets } = props;
return (
<EuiOverlayMask>
<EuiConfirmModal
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmUninstallModal.uninstallTitle"
defaultMessage="Uninstall {packageName}"
values={{ packageName }}
/>
}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmUninstallModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmUninstallModal.uninstallButtonLabel"
defaultMessage="Uninstall {packageName}"
values={{ packageName }}
/>
}
defaultFocusedButton="confirm"
buttonColor="danger"
>
<EuiCallOut
color="danger"
title={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmUninstallModal.uninstallTitle"
defaultMessage="Uninstall {packageName}"
values={{ packageName }}
id="xpack.fleet.integrations.settings.confirmUninstallModal.uninstallCallout.title"
defaultMessage="This action will remove {numOfAssets} assets"
values={{ numOfAssets }}
/>
}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmUninstallModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmUninstallModal.uninstallButtonLabel"
defaultMessage="Uninstall {packageName}"
values={{ packageName }}
/>
}
defaultFocusedButton="confirm"
buttonColor="danger"
>
<EuiCallOut
color="danger"
title={
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmUninstallModal.uninstallCallout.title"
defaultMessage="This action will remove {numOfAssets} assets"
values={{ numOfAssets }}
/>
}
>
<p>
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmUninstallModal.uninstallCallout.description"
defaultMessage="Kibana and Elasticsearch assets that were created by this integration will be removed. Agents policies and any data sent by your agents will not be effected."
/>
</p>
</EuiCallOut>
<EuiSpacer size="l" />
<p>
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmUninstallModal.uninstallDescription"
defaultMessage="This action cannot be undone. Are you sure you wish to continue?"
id="xpack.fleet.integrations.settings.confirmUninstallModal.uninstallCallout.description"
defaultMessage="Kibana and Elasticsearch assets that were created by this integration will be removed. Agents policies and any data sent by your agents will not be effected."
/>
</p>
</EuiConfirmModal>
</EuiOverlayMask>
</EuiCallOut>
<EuiSpacer size="l" />
<p>
<FormattedMessage
id="xpack.fleet.integrations.settings.confirmUninstallModal.uninstallDescription"
defaultMessage="This action cannot be undone. Are you sure you wish to continue?"
/>
</p>
</EuiConfirmModal>
);
};

79
x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/components/add_policy_to_template_confirm_modal.tsx
View file

@ -13,7 +13,6 @@ import {
EuiComboBox,
EuiForm,
EuiFormRow,
EuiOverlayMask,
EuiConfirmModal,
EuiFieldText,
EuiSpacer,
@ -257,46 +256,44 @@ export const AddPolicyToTemplateConfirmModal: React.FunctionComponent<Props> = (
);
return (
<EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={onCancel}
onConfirm={addPolicyToTemplate}
cancelButtonText={i18n.translate(
'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.cancelButton',
{
defaultMessage: 'Cancel',
}
)}
confirmButtonText={i18n.translate(
'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.confirmButton',
{
defaultMessage: 'Add policy',
}
)}
confirmButtonDisabled={isLoading || !!error || !templates}
>
<EuiText>
<p>
<FormattedMessage
id="xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.explanationText"
defaultMessage="This will apply the lifecycle policy to
<EuiConfirmModal
title={title}
onCancel={onCancel}
onConfirm={addPolicyToTemplate}
cancelButtonText={i18n.translate(
'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.cancelButton',
{
defaultMessage: 'Cancel',
}
)}
confirmButtonText={i18n.translate(
'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.confirmButton',
{
defaultMessage: 'Add policy',
}
)}
confirmButtonDisabled={isLoading || !!error || !templates}
>
<EuiText>
<p>
<FormattedMessage
id="xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.explanationText"
defaultMessage="This will apply the lifecycle policy to
all indices which match the index template."
/>{' '}
<LearnMoreLink
docPath="indices-templates.html"
text={
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.learnAboutIndexTemplatesLink"
defaultMessage="Learn about index templates"
/>
}
/>
</p>
</EuiText>
<EuiSpacer size="m" />
{renderForm()}
</EuiConfirmModal>
</EuiOverlayMask>
/>{' '}
<LearnMoreLink
docPath="indices-templates.html"
text={
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.learnAboutIndexTemplatesLink"
defaultMessage="Learn about index templates"
/>
}
/>
</p>
</EuiText>
<EuiSpacer size="m" />
{renderForm()}
</EuiConfirmModal>
);
};

54
x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/components/confirm_delete.tsx
View file

@ -8,7 +8,7 @@
import React, { Component } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { PolicyFromES } from '../../../../../common/types';
import { toasts } from '../../../services/notification';
@ -50,33 +50,31 @@ export class ConfirmDelete extends Component<Props> {
values: { name: policyToDelete.name },
});
return (
<EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={onCancel}
onConfirm={this.deletePolicy}
cancelButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.confirmDelete.cancelButton"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.confirmDelete.deleteButton"
defaultMessage="Delete"
/>
}
buttonColor="danger"
>
<div>
<FormattedMessage
id="xpack.indexLifecycleMgmt.confirmDelete.undoneWarning"
defaultMessage="You can't recover a deleted policy."
/>
</div>
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={onCancel}
onConfirm={this.deletePolicy}
cancelButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.confirmDelete.cancelButton"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.confirmDelete.deleteButton"
defaultMessage="Delete"
/>
}
buttonColor="danger"
>
<div>
<FormattedMessage
id="xpack.indexLifecycleMgmt.confirmDelete.undoneWarning"
defaultMessage="You can't recover a deleted policy."
/>
</div>
</EuiConfirmModal>
);
}
}

99
x-pack/plugins/index_lifecycle_management/public/extend_index_management/components/add_lifecycle_confirm_modal.tsx
View file

@ -16,7 +16,6 @@ import {
EuiSelect,
EuiForm,
EuiFormRow,
EuiOverlayMask,
EuiConfirmModal,
EuiModal,
EuiModalBody,
@ -246,63 +245,59 @@ export class AddLifecyclePolicyConfirmModal extends Component<Props, State> {
);
if (!policies.length) {
return (
<EuiOverlayMask>
<EuiModal onClose={closeModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModal onClose={closeModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiCallOut
style={{ maxWidth: 400 }}
title={
<EuiModalBody>
<EuiCallOut
style={{ maxWidth: 400 }}
title={
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.noPoliciesWarningTitle"
defaultMessage="No index lifecycle policies defined"
/>
}
color="warning"
>
<p>
<EuiLink
href={getUrlForApp('management', {
path: `data/index_lifecycle_management/policies/edit`,
})}
>
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.noPoliciesWarningTitle"
defaultMessage="No index lifecycle policies defined"
id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.defineLifecyclePolicyLinkText"
defaultMessage="Define lifecycle policy"
/>
}
color="warning"
>
<p>
<EuiLink
href={getUrlForApp('management', {
path: `data/index_lifecycle_management/policies/edit`,
})}
>
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.defineLifecyclePolicyLinkText"
defaultMessage="Define lifecycle policy"
/>
</EuiLink>
</p>
</EuiCallOut>
</EuiModalBody>
</EuiModal>
</EuiOverlayMask>
</EuiLink>
</p>
</EuiCallOut>
</EuiModalBody>
</EuiModal>
);
}
return (
<EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={closeModal}
onConfirm={this.addPolicy}
cancelButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.cancelButtonText"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.addPolicyButtonText"
defaultMessage="Add policy"
/>
}
>
{this.renderForm()}
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={closeModal}
onConfirm={this.addPolicy}
cancelButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.cancelButtonText"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.addPolicyButtonText"
defaultMessage="Add policy"
/>
}
>
{this.renderForm()}
</EuiConfirmModal>
);
}
}

84
x-pack/plugins/index_lifecycle_management/public/extend_index_management/components/remove_lifecycle_confirm_modal.tsx
View file

@ -8,7 +8,7 @@
import React, { Component, Fragment } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { removeLifecycleForIndex } from '../../application/services/api';
import { showApiError } from '../../application/services/api_errors';
@ -57,54 +57,52 @@ export class RemoveLifecyclePolicyConfirmModal extends Component<Props> {
const { closeModal, indexNames } = this.props;
return (
<EuiOverlayMask>
<EuiConfirmModal
title={
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.removeLifecyclePolicyConfirmModal.modalTitle"
defaultMessage="Remove lifecycle policy from {count, plural, one {index} other {indices}}"
values={{
count: indexNames.length,
}}
/>
}
onCancel={closeModal}
onConfirm={this.removePolicy}
cancelButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.removeLifecyclePolicyConfirmModal.cancelButtonText"
defaultMessage="Cancel"
/>
}
buttonColor="danger"
confirmButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.removeLifecyclePolicyConfirmModal.removePolicyButtonText"
defaultMessage="Remove policy"
/>
}
>
<Fragment>
<p>
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.removeLifecyclePolicyConfirmModal.modalTitle"
defaultMessage="Remove lifecycle policy from {count, plural, one {index} other {indices}}"
id="xpack.indexLifecycleMgmt.indexManagementTable.removeLifecyclePolicyConfirmModal.removeMessage"
defaultMessage="You are about to remove the index lifecycle policy from
{count, plural, one {this index} other {these indices}}.
This operation cannot be undone."
values={{
count: indexNames.length,
}}
/>
}
onCancel={closeModal}
onConfirm={this.removePolicy}
cancelButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.removeLifecyclePolicyConfirmModal.cancelButtonText"
defaultMessage="Cancel"
/>
}
buttonColor="danger"
confirmButtonText={
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.removeLifecyclePolicyConfirmModal.removePolicyButtonText"
defaultMessage="Remove policy"
/>
}
>
<Fragment>
<p>
<FormattedMessage
id="xpack.indexLifecycleMgmt.indexManagementTable.removeLifecyclePolicyConfirmModal.removeMessage"
defaultMessage="You are about to remove the index lifecycle policy from
{count, plural, one {this index} other {these indices}}.
This operation cannot be undone."
values={{
count: indexNames.length,
}}
/>
</p>
</p>
<ul>
{indexNames.map((indexName) => (
<li key={indexName}>{indexName}</li>
))}
</ul>
</Fragment>
</EuiConfirmModal>
</EuiOverlayMask>
<ul>
{indexNames.map((indexName) => (
<li key={indexName}>{indexName}</li>
))}
</ul>
</Fragment>
</EuiConfirmModal>
);
}
}

80
x-pack/plugins/index_management/public/application/components/component_templates/component_template_list/delete_modal.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
@ -81,49 +81,47 @@ export const ComponentTemplatesDeleteModal = ({
};
return (
<EuiOverlayMask>
<EuiConfirmModal
buttonColor="danger"
data-test-subj="deleteComponentTemplatesConfirmation"
title={
<EuiConfirmModal
buttonColor="danger"
data-test-subj="deleteComponentTemplatesConfirmation"
title={
<FormattedMessage
id="xpack.idxMgmt.home.componentTemplates.deleteModal.modalTitleText"
defaultMessage="Delete {numComponentTemplatesToDelete, plural, one {component template} other {# component templates}}"
values={{ numComponentTemplatesToDelete }}
/>
}
onCancel={handleOnCancel}
onConfirm={handleDeleteComponentTemplates}
cancelButtonText={
<FormattedMessage
id="xpack.idxMgmt.home.componentTemplates.deleteModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.idxMgmt.home.componentTemplates.confirmButtonLabel"
defaultMessage="Delete {numComponentTemplatesToDelete, plural, one {component template} other {component templates} }"
values={{ numComponentTemplatesToDelete }}
/>
}
>
<>
<p>
<FormattedMessage
id="xpack.idxMgmt.home.componentTemplates.deleteModal.modalTitleText"
defaultMessage="Delete {numComponentTemplatesToDelete, plural, one {component template} other {# component templates}}"
id="xpack.idxMgmt.home.componentTemplates.deleteModal.deleteDescription"
defaultMessage="You are about to delete {numComponentTemplatesToDelete, plural, one {this component template} other {these component templates} }:"
values={{ numComponentTemplatesToDelete }}
/>
}
onCancel={handleOnCancel}
onConfirm={handleDeleteComponentTemplates}
cancelButtonText={
<FormattedMessage
id="xpack.idxMgmt.home.componentTemplates.deleteModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.idxMgmt.home.componentTemplates.confirmButtonLabel"
defaultMessage="Delete {numComponentTemplatesToDelete, plural, one {component template} other {component templates} }"
values={{ numComponentTemplatesToDelete }}
/>
}
>
<>
<p>
<FormattedMessage
id="xpack.idxMgmt.home.componentTemplates.deleteModal.deleteDescription"
defaultMessage="You are about to delete {numComponentTemplatesToDelete, plural, one {this component template} other {these component templates} }:"
values={{ numComponentTemplatesToDelete }}
/>
</p>
</p>
<ul>
{componentTemplatesToDelete.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
</>
</EuiConfirmModal>
</EuiOverlayMask>
<ul>
{componentTemplatesToDelete.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
</>
</EuiConfirmModal>
);
};

98
x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/modal_confirmation_delete_fields.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { EuiConfirmModal, EuiOverlayMask, EuiBadge, EuiCode } from '@elastic/eui';
import { EuiConfirmModal, EuiBadge, EuiCode } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { NormalizedFields, NormalizedField } from '../../../types';
@ -59,55 +59,53 @@ export const ModalConfirmationDeleteFields = ({
: null;
return (
<EuiOverlayMask>
<EuiConfirmModal
title={title}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText={i18n.translate(
'xpack.idxMgmt.mappingsEditor.deleteField.confirmationModal.cancelButtonLabel',
{
defaultMessage: 'Cancel',
}
<EuiConfirmModal
title={title}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText={i18n.translate(
'xpack.idxMgmt.mappingsEditor.deleteField.confirmationModal.cancelButtonLabel',
{
defaultMessage: 'Cancel',
}
)}
buttonColor="danger"
confirmButtonText={confirmButtonText}
>
<>
{fieldsTree && (
<>
<p>
{i18n.translate(
'xpack.idxMgmt.mappingsEditor.confirmationModal.deleteFieldsDescription',
{
defaultMessage: 'This will also delete the following fields.',
}
)}
</p>
<FieldsTree fields={fieldsTree} />
</>
)}
buttonColor="danger"
confirmButtonText={confirmButtonText}
>
<>
{fieldsTree && (
<>
<p>
{i18n.translate(
'xpack.idxMgmt.mappingsEditor.confirmationModal.deleteFieldsDescription',
{
defaultMessage: 'This will also delete the following fields.',
}
)}
</p>
<FieldsTree fields={fieldsTree} />
</>
)}
{aliases && (
<>
<p>
{i18n.translate(
'xpack.idxMgmt.mappingsEditor.confirmationModal.deleteAliasesDescription',
{
defaultMessage: 'The following aliases will also be deleted.',
}
)}
</p>
<ul>
{aliases.map((aliasPath) => (
<li key={aliasPath}>
<EuiCode>{aliasPath}</EuiCode>
</li>
))}
</ul>
</>
)}
</>
</EuiConfirmModal>
</EuiOverlayMask>
{aliases && (
<>
<p>
{i18n.translate(
'xpack.idxMgmt.mappingsEditor.confirmationModal.deleteAliasesDescription',
{
defaultMessage: 'The following aliases will also be deleted.',
}
)}
</p>
<ul>
{aliases.map((aliasPath) => (
<li key={aliasPath}>
<EuiCode>{aliasPath}</EuiCode>
</li>
))}
</ul>
</>
)}
</>
</EuiConfirmModal>
);
};

109
x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx
View file

@ -8,14 +8,7 @@
import React, { useState, useRef, useCallback } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiConfirmModal,
EuiOverlayMask,
EuiCallOut,
EuiText,
EuiSpacer,
EuiButtonEmpty,
} from '@elastic/eui';
import { EuiConfirmModal, EuiCallOut, EuiText, EuiSpacer, EuiButtonEmpty } from '@elastic/eui';
import { JsonEditor, OnJsonEditorUpdateHandler } from '../../shared_imports';
import { validateMappings, MappingsValidationError } from '../../lib';
@ -220,61 +213,55 @@ export const LoadMappingsProvider = ({ onJson, children }: Props) => {
{children(openModal)}
{state.isModalOpen && (
<EuiOverlayMask>
<EuiConfirmModal
title={i18nTexts.modalTitle}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText={i18nTexts.buttons.cancel}
confirmButtonText={i18nTexts.buttons.confirm}
maxWidth={600}
>
{view === 'json' ? (
// The CSS override for the EuiCodeEditor requires a parent .application css class
<div className="application">
<EuiText color="subdued">
<FormattedMessage
id="xpack.idxMgmt.mappingsEditor.loadJsonModal.jsonEditorHelpText"
defaultMessage="Provide a mappings object, for example, the object assigned to an index {mappings} property. This will overwrite existing mappings, dynamic templates, and options."
values={{
mappings: <code>mappings</code>,
}}
/>
</EuiText>
<EuiSpacer size="m" />
<JsonEditor
label={i18nTexts.editor.label}
onUpdate={onJsonUpdate}
defaultValue={state.json?.unparsed}
euiCodeEditorProps={{
height: '450px',
<EuiConfirmModal
title={i18nTexts.modalTitle}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText={i18nTexts.buttons.cancel}
confirmButtonText={i18nTexts.buttons.confirm}
maxWidth={600}
>
{view === 'json' ? (
// The CSS override for the EuiCodeEditor requires a parent .application css class
<div className="application">
<EuiText color="subdued">
<FormattedMessage
id="xpack.idxMgmt.mappingsEditor.loadJsonModal.jsonEditorHelpText"
defaultMessage="Provide a mappings object, for example, the object assigned to an index {mappings} property. This will overwrite existing mappings, dynamic templates, and options."
values={{
mappings: <code>mappings</code>,
}}
/>
</div>
) : (
<>
<EuiCallOut
title={i18nTexts.validationErrors.title}
iconType="alert"
color="warning"
>
<EuiText>
<p>{i18nTexts.validationErrors.description}</p>
</EuiText>
<EuiSpacer />
<ol>
{state.errors!.slice(0, totalErrorsToDisplay).map((error, i) => (
<li key={i}>{getErrorMessage(error)}</li>
))}
</ol>
{state.errors!.length > MAX_ERRORS_TO_DISPLAY && renderErrorsFilterButton()}
</EuiCallOut>
</>
)}
</EuiConfirmModal>
</EuiOverlayMask>
</EuiText>
<EuiSpacer size="m" />
<JsonEditor
label={i18nTexts.editor.label}
onUpdate={onJsonUpdate}
defaultValue={state.json?.unparsed}
euiCodeEditorProps={{
height: '450px',
}}
/>
</div>
) : (
<>
<EuiCallOut title={i18nTexts.validationErrors.title} iconType="alert" color="warning">
<EuiText>
<p>{i18nTexts.validationErrors.description}</p>
</EuiText>
<EuiSpacer />
<ol>
{state.errors!.slice(0, totalErrorsToDisplay).map((error, i) => (
<li key={i}>{getErrorMessage(error)}</li>
))}
</ol>
{state.errors!.length > MAX_ERRORS_TO_DISPLAY && renderErrorsFilterButton()}
</EuiCallOut>
</>
)}
</EuiConfirmModal>
)}
</>
);

32
x-pack/plugins/index_management/public/application/components/mappings_editor/components/runtime_fields/delete_field_provider.tsx
View file

@ -7,7 +7,7 @@
import React, { useState } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { useDispatch } from '../../mappings_state_context';
import { NormalizedRuntimeField } from '../../types';
@ -68,22 +68,20 @@ export const DeleteRuntimeFieldProvider = ({ children }: Props) => {
{children(deleteField)}
{state.isModalOpen && (
<EuiOverlayMask>
<EuiConfirmModal
title={modalTitle}
data-test-subj="runtimeFieldDeleteConfirmModal"
onCancel={closeModal}
onConfirm={confirmDelete}
cancelButtonText={i18n.translate(
'xpack.idxMgmt.mappingsEditor.deleteRuntimeField.confirmationModal.cancelButtonLabel',
{
defaultMessage: 'Cancel',
}
)}
buttonColor="danger"
confirmButtonText={confirmButtonText}
/>
</EuiOverlayMask>
<EuiConfirmModal
title={modalTitle}
data-test-subj="runtimeFieldDeleteConfirmModal"
onCancel={closeModal}
onConfirm={confirmDelete}
cancelButtonText={i18n.translate(
'xpack.idxMgmt.mappingsEditor.deleteRuntimeField.confirmationModal.cancelButtonLabel',
{
defaultMessage: 'Cancel',
}
)}
buttonColor="danger"
confirmButtonText={confirmButtonText}
/>
)}
</>
);

4
x-pack/plugins/index_management/public/application/components/mappings_editor/constants/data_types_definition.tsx
View file

@ -86,7 +86,7 @@ export const TYPE_DEFINITION: { [key in DataType]: DataTypeDefinition } = {
id="xpack.idxMgmt.mappingsEditor.dataType.constantKeywordLongDescription"
defaultMessage="Constant keyword fields are a special type of keyword fields for fields that contain the same keyword across all documents in the index. Supports the same queries and aggregations as {keyword} fields."
values={{
keyword: <EuiCode inline>{'keyword'}</EuiCode>,
keyword: <EuiCode>{'keyword'}</EuiCode>,
}}
/>
</p>
@ -836,7 +836,7 @@ export const TYPE_DEFINITION: { [key in DataType]: DataTypeDefinition } = {
id="xpack.idxMgmt.mappingsEditor.dataType.pointLongDescription"
defaultMessage="Point fields enable searching of {code} pairs that fall in a 2-dimensional planar coordinate system."
values={{
code: <EuiCode inline>{'x,y'}</EuiCode>,
code: <EuiCode>{'x,y'}</EuiCode>,
}}
/>
</p>

166
x-pack/plugins/index_management/public/application/components/template_delete_modal.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { Fragment, useState } from 'react';
import { EuiConfirmModal, EuiOverlayMask, EuiCallOut, EuiCheckbox, EuiBadge } from '@elastic/eui';
import { EuiConfirmModal, EuiCallOut, EuiCheckbox, EuiBadge } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
@ -81,95 +81,93 @@ export const TemplateDeleteModal = ({
};
return (
<EuiOverlayMask>
<EuiConfirmModal
buttonColor="danger"
data-test-subj="deleteTemplatesConfirmation"
title={
<EuiConfirmModal
buttonColor="danger"
data-test-subj="deleteTemplatesConfirmation"
title={
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.modalTitleText"
defaultMessage="Delete {numTemplatesToDelete, plural, one {template} other {# templates}}"
values={{ numTemplatesToDelete }}
/>
}
onCancel={handleOnCancel}
onConfirm={handleDeleteTemplates}
cancelButtonText={
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.confirmButtonLabel"
defaultMessage="Delete {numTemplatesToDelete, plural, one {template} other {templates} }"
values={{ numTemplatesToDelete }}
/>
}
confirmButtonDisabled={hasSystemTemplate ? !isDeleteConfirmed : false}
>
<Fragment>
<p>
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.modalTitleText"
defaultMessage="Delete {numTemplatesToDelete, plural, one {template} other {# templates}}"
id="xpack.idxMgmt.deleteTemplatesModal.deleteDescription"
defaultMessage="You are about to delete {numTemplatesToDelete, plural, one {this template} other {these templates} }:"
values={{ numTemplatesToDelete }}
/>
}
onCancel={handleOnCancel}
onConfirm={handleDeleteTemplates}
cancelButtonText={
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.confirmButtonLabel"
defaultMessage="Delete {numTemplatesToDelete, plural, one {template} other {templates} }"
values={{ numTemplatesToDelete }}
/>
}
confirmButtonDisabled={hasSystemTemplate ? !isDeleteConfirmed : false}
>
<Fragment>
<p>
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.deleteDescription"
defaultMessage="You are about to delete {numTemplatesToDelete, plural, one {this template} other {these templates} }:"
values={{ numTemplatesToDelete }}
/>
</p>
</p>
<ul>
{templatesToDelete.map(({ name }) => (
<li key={name}>
{name}
{name.startsWith('.') ? (
<Fragment>
{' '}
<EuiBadge iconType="alert" color="hollow">
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.systemTemplateLabel"
defaultMessage="System template"
/>
</EuiBadge>
</Fragment>
) : null}
</li>
))}
</ul>
{hasSystemTemplate && (
<EuiCallOut
title={
<ul>
{templatesToDelete.map(({ name }) => (
<li key={name}>
{name}
{name.startsWith('.') ? (
<Fragment>
{' '}
<EuiBadge iconType="alert" color="hollow">
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.systemTemplateLabel"
defaultMessage="System template"
/>
</EuiBadge>
</Fragment>
) : null}
</li>
))}
</ul>
{hasSystemTemplate && (
<EuiCallOut
title={
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.proceedWithCautionCallOutTitle"
defaultMessage="Deleting a system template can break Kibana"
/>
}
color="danger"
iconType="alert"
data-test-subj="deleteSystemTemplateCallOut"
>
<p>
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.proceedWithCautionCallOutDescription"
defaultMessage="System templates are critical for internal operations.
If you delete this template, you can’t recover it."
/>
</p>
<EuiCheckbox
id="confirmDeleteTemplatesCheckbox"
label={
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.proceedWithCautionCallOutTitle"
defaultMessage="Deleting a system template can break Kibana"
id="xpack.idxMgmt.deleteTemplatesModal.confirmDeleteCheckboxLabel"
defaultMessage="I understand the consequences of deleting a system template"
/>
}
color="danger"
iconType="alert"
data-test-subj="deleteSystemTemplateCallOut"
>
<p>
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.proceedWithCautionCallOutDescription"
defaultMessage="System templates are critical for internal operations.
If you delete this template, you can’t recover it."
/>
</p>
<EuiCheckbox
id="confirmDeleteTemplatesCheckbox"
label={
<FormattedMessage
id="xpack.idxMgmt.deleteTemplatesModal.confirmDeleteCheckboxLabel"
defaultMessage="I understand the consequences of deleting a system template"
/>
}
checked={isDeleteConfirmed}
onChange={(e) => setIsDeleteConfirmed(e.target.checked)}
/>
</EuiCallOut>
)}
</Fragment>
</EuiConfirmModal>
</EuiOverlayMask>
checked={isDeleteConfirmed}
onChange={(e) => setIsDeleteConfirmed(e.target.checked)}
/>
</EuiCallOut>
)}
</Fragment>
</EuiConfirmModal>
);
};

118
x-pack/plugins/index_management/public/application/sections/home/data_stream_list/delete_data_stream_confirmation_modal/delete_data_stream_confirmation_modal.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { Fragment } from 'react';
import { EuiCallOut, EuiConfirmModal, EuiOverlayMask, EuiSpacer } from '@elastic/eui';
import { EuiCallOut, EuiConfirmModal, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
@ -82,69 +82,67 @@ export const DeleteDataStreamConfirmationModal: React.FunctionComponent<Props> =
};
return (
<EuiOverlayMask>
<EuiConfirmModal
buttonColor="danger"
data-test-subj="deleteDataStreamsConfirmation"
title={
<FormattedMessage
id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.modalTitleText"
defaultMessage="Delete {dataStreamsCount, plural, one {data stream} other {# data streams}}"
values={{ dataStreamsCount }}
/>
}
onCancel={() => onClose()}
onConfirm={handleDeleteDataStreams}
cancelButtonText={
<FormattedMessage
id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.confirmButtonLabel"
defaultMessage="Delete {dataStreamsCount, plural, one {data stream} other {data streams} }"
values={{ dataStreamsCount }}
/>
}
>
<Fragment>
<EuiCallOut
title={
<FormattedMessage
id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.warningTitle"
defaultMessage="Deleting data streams also deletes indices"
/>
}
color="danger"
iconType="alert"
>
<p>
<FormattedMessage
id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.warningMessage"
defaultMessage="Data streams are collections of time series indices. Deleting a data stream will also delete its indices."
/>
</p>
</EuiCallOut>
<EuiSpacer />
<EuiConfirmModal
buttonColor="danger"
data-test-subj="deleteDataStreamsConfirmation"
title={
<FormattedMessage
id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.modalTitleText"
defaultMessage="Delete {dataStreamsCount, plural, one {data stream} other {# data streams}}"
values={{ dataStreamsCount }}
/>
}
onCancel={() => onClose()}
onConfirm={handleDeleteDataStreams}
cancelButtonText={
<FormattedMessage
id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.confirmButtonLabel"
defaultMessage="Delete {dataStreamsCount, plural, one {data stream} other {data streams} }"
values={{ dataStreamsCount }}
/>
}
>
<Fragment>
<EuiCallOut
title={
<FormattedMessage
id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.warningTitle"
defaultMessage="Deleting data streams also deletes indices"
/>
}
color="danger"
iconType="alert"
>
<p>
<FormattedMessage
id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.deleteDescription"
defaultMessage="You are about to delete {dataStreamsCount, plural, one {this data stream} other {these data streams} }:"
values={{ dataStreamsCount }}
id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.warningMessage"
defaultMessage="Data streams are collections of time series indices. Deleting a data stream will also delete its indices."
/>
</p>
</EuiCallOut>
<ul>
{dataStreams.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
</Fragment>
</EuiConfirmModal>
</EuiOverlayMask>
<EuiSpacer />
<p>
<FormattedMessage
id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.deleteDescription"
defaultMessage="You are about to delete {dataStreamsCount, plural, one {this data stream} other {these data streams} }:"
values={{ dataStreamsCount }}
/>
</p>
<ul>
{dataStreams.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
</Fragment>
</EuiConfirmModal>
);
};

483
x-pack/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js
View file

@ -20,7 +20,6 @@ import {
EuiPopover,
EuiSpacer,
EuiConfirmModal,
EuiOverlayMask,
EuiCheckbox,
} from '@elastic/eui';
@ -301,102 +300,97 @@ export class IndexActionsContextMenu extends Component {
const selectedIndexCount = indexNames.length;
return (
<EuiOverlayMask>
<EuiConfirmModal
title={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.forceMerge.confirmModal.modalTitle',
{
defaultMessage: 'Force merge',
}
)}
onCancel={this.closeConfirmModal}
onConfirm={() => {
if (!this.forcemergeSegmentsError()) {
this.closePopoverAndExecute(() => {
forcemergeIndices(this.state.forcemergeSegments);
this.setState({
forcemergeSegments: null,
showForcemergeSegmentsModal: null,
});
<EuiConfirmModal
title={i18n.translate('xpack.idxMgmt.indexActionsMenu.forceMerge.confirmModal.modalTitle', {
defaultMessage: 'Force merge',
})}
onCancel={this.closeConfirmModal}
onConfirm={() => {
if (!this.forcemergeSegmentsError()) {
this.closePopoverAndExecute(() => {
forcemergeIndices(this.state.forcemergeSegments);
this.setState({
forcemergeSegments: null,
showForcemergeSegmentsModal: null,
});
}
}}
cancelButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.forceMerge.confirmModal.cancelButtonText',
});
}
}}
cancelButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.forceMerge.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
confirmButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.forceMerge.confirmModal.confirmButtonText',
{
defaultMessage: 'Force merge',
}
)}
>
<p>
<FormattedMessage
id="xpack.idxMgmt.indexActionsMenu.forceMerge.forceMergeDescription"
defaultMessage="You are about to force merge {selectedIndexCount, plural, one {this index} other {these indices} }:"
values={{ selectedIndexCount }}
/>
</p>
<ul>
{indexNames.map((indexName) => (
<li key={indexName}>{indexName}</li>
))}
</ul>
<EuiCallOut
title={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.forceMerge.proceedWithCautionCallOutTitle',
{
defaultMessage: 'Cancel',
}
)}
confirmButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.forceMerge.confirmModal.confirmButtonText',
{
defaultMessage: 'Force merge',
defaultMessage: 'Proceed with caution!',
}
)}
color="warning"
iconType="help"
>
<p>
<FormattedMessage
id="xpack.idxMgmt.indexActionsMenu.forceMerge.forceMergeDescription"
defaultMessage="You are about to force merge {selectedIndexCount, plural, one {this index} other {these indices} }:"
values={{ selectedIndexCount }}
/>
</p>
<ul>
{indexNames.map((indexName) => (
<li key={indexName}>{indexName}</li>
))}
</ul>
<EuiCallOut
title={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.forceMerge.proceedWithCautionCallOutTitle',
{
defaultMessage: 'Proceed with caution!',
}
)}
color="warning"
iconType="help"
>
<p>
<FormattedMessage
id="xpack.idxMgmt.indexActionsMenu.forceMerge.forceMergeWarningDescription"
defaultMessage="
id="xpack.idxMgmt.indexActionsMenu.forceMerge.forceMergeWarningDescription"
defaultMessage="
Don't force-merge indices to which you're still writing, or to which you'll write
again in the future. Instead, rely on the automatic background merge process to
perform merges as needed to keep the index running smoothly. If you write to
a force-merged index then its performance may become much worse.
"
/>
</p>
</EuiCallOut>
/>
</p>
</EuiCallOut>
<EuiSpacer size="m" />
<EuiSpacer size="m" />
<EuiForm
isInvalid={!!this.forcemergeSegmentsError()}
error={this.forcemergeSegmentsError()}
<EuiForm
isInvalid={!!this.forcemergeSegmentsError()}
error={this.forcemergeSegmentsError()}
>
<EuiFormRow
label={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.forceMerge.maximumNumberOfSegmentsFormRowLabel',
{
defaultMessage: 'Maximum number of segments per shard',
}
)}
helpText={helpText}
>
<EuiFormRow
label={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.forceMerge.maximumNumberOfSegmentsFormRowLabel',
{
defaultMessage: 'Maximum number of segments per shard',
}
)}
helpText={helpText}
>
<EuiFieldNumber
onChange={(event) => {
this.setState({ forcemergeSegments: event.target.value });
}}
min={1}
name="maxNumberSegments"
/>
</EuiFormRow>
</EuiForm>
</EuiConfirmModal>
</EuiOverlayMask>
<EuiFieldNumber
onChange={(event) => {
this.setState({ forcemergeSegments: event.target.value });
}}
min={1}
name="maxNumberSegments"
/>
</EuiFormRow>
</EuiForm>
</EuiConfirmModal>
);
};
@ -494,39 +488,37 @@ export class IndexActionsContextMenu extends Component {
);
return (
<EuiOverlayMask>
<EuiConfirmModal
title={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.deleteIndex.confirmModal.modalTitle',
{
defaultMessage: 'Delete {selectedIndexCount, plural, one {index} other {# indices} }',
values: { selectedIndexCount },
}
)}
onCancel={() => {
this.confirmAction(false);
this.closeConfirmModal();
}}
onConfirm={() => this.closePopoverAndExecute(deleteIndices)}
buttonColor="danger"
confirmButtonDisabled={hasSystemIndex ? !isActionConfirmed : false}
cancelButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.deleteIndex.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
confirmButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.deleteIndex.confirmModal.confirmButtonText',
{
defaultMessage: 'Delete {selectedIndexCount, plural, one {index} other {indices} }',
values: { selectedIndexCount },
}
)}
>
{hasSystemIndex ? systemIndexModalBody : standardIndexModalBody}
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
title={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.deleteIndex.confirmModal.modalTitle',
{
defaultMessage: 'Delete {selectedIndexCount, plural, one {index} other {# indices} }',
values: { selectedIndexCount },
}
)}
onCancel={() => {
this.confirmAction(false);
this.closeConfirmModal();
}}
onConfirm={() => this.closePopoverAndExecute(deleteIndices)}
buttonColor="danger"
confirmButtonDisabled={hasSystemIndex ? !isActionConfirmed : false}
cancelButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.deleteIndex.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
confirmButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.deleteIndex.confirmModal.confirmButtonText',
{
defaultMessage: 'Delete {selectedIndexCount, plural, one {index} other {indices} }',
values: { selectedIndexCount },
}
)}
>
{hasSystemIndex ? systemIndexModalBody : standardIndexModalBody}
</EuiConfirmModal>
);
};
@ -536,96 +528,91 @@ export class IndexActionsContextMenu extends Component {
const selectedIndexCount = indexNames.length;
return (
<EuiOverlayMask>
<EuiConfirmModal
<EuiConfirmModal
title={i18n.translate('xpack.idxMgmt.indexActionsMenu.closeIndex.confirmModal.modalTitle', {
defaultMessage: 'Close {selectedIndexCount, plural, one {index} other {# indices} }',
values: { selectedIndexCount },
})}
onCancel={() => {
this.confirmAction(false);
this.closeConfirmModal();
}}
onConfirm={() => this.closePopoverAndExecute(closeIndices)}
buttonColor="danger"
confirmButtonDisabled={!isActionConfirmed}
cancelButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.deleteIndex.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
confirmButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.closeIndex.confirmModal.confirmButtonText',
{
defaultMessage: 'Close {selectedIndexCount, plural, one {index} other {indices} }',
values: { selectedIndexCount },
}
)}
>
<p>
<FormattedMessage
id="xpack.idxMgmt.indexActionsMenu.closeIndex.closeDescription"
defaultMessage="You are about to close {selectedIndexCount, plural, one {this index} other {these indices} }:"
values={{ selectedIndexCount }}
/>
</p>
<ul>
{indexNames.map((indexName) => (
<li key={indexName}>
{indexName}
{isSystemIndexByName[indexName] ? (
<Fragment>
{' '}
<EuiBadge iconType="alert" color="hollow">
<FormattedMessage
id="xpack.idxMgmt.indexActionsMenu.closeIndex.systemIndexLabel"
defaultMessage="System index"
/>
</EuiBadge>
</Fragment>
) : (
''
)}
</li>
))}
</ul>
<EuiCallOut
title={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.closeIndex.confirmModal.modalTitle',
'xpack.idxMgmt.indexActionsMenu.closeIndex.proceedWithCautionCallOutTitle',
{
defaultMessage: 'Close {selectedIndexCount, plural, one {index} other {# indices} }',
values: { selectedIndexCount },
}
)}
onCancel={() => {
this.confirmAction(false);
this.closeConfirmModal();
}}
onConfirm={() => this.closePopoverAndExecute(closeIndices)}
buttonColor="danger"
confirmButtonDisabled={!isActionConfirmed}
cancelButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.deleteIndex.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
confirmButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.closeIndex.confirmModal.confirmButtonText',
{
defaultMessage: 'Close {selectedIndexCount, plural, one {index} other {indices} }',
values: { selectedIndexCount },
defaultMessage: 'Closing a system index can break Kibana',
}
)}
color="danger"
iconType="alert"
>
<p>
<FormattedMessage
id="xpack.idxMgmt.indexActionsMenu.closeIndex.closeDescription"
defaultMessage="You are about to close {selectedIndexCount, plural, one {this index} other {these indices} }:"
values={{ selectedIndexCount }}
id="xpack.idxMgmt.indexActionsMenu.closeIndex.proceedWithCautionCallOutDescription"
defaultMessage="System indices are critical for internal operations.
You can reopen the index using the Open Index API."
/>
</p>
<ul>
{indexNames.map((indexName) => (
<li key={indexName}>
{indexName}
{isSystemIndexByName[indexName] ? (
<Fragment>
{' '}
<EuiBadge iconType="alert" color="hollow">
<FormattedMessage
id="xpack.idxMgmt.indexActionsMenu.closeIndex.systemIndexLabel"
defaultMessage="System index"
/>
</EuiBadge>
</Fragment>
) : (
''
)}
</li>
))}
</ul>
<EuiCallOut
title={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.closeIndex.proceedWithCautionCallOutTitle',
{
defaultMessage: 'Closing a system index can break Kibana',
}
)}
color="danger"
iconType="alert"
>
<p>
<EuiCheckbox
id="confirmCloseIndicesCheckbox"
label={
<FormattedMessage
id="xpack.idxMgmt.indexActionsMenu.closeIndex.proceedWithCautionCallOutDescription"
defaultMessage="System indices are critical for internal operations.
You can reopen the index using the Open Index API."
id="xpack.idxMgmt.indexActionsMenu.closeIndex.checkboxLabel"
defaultMessage="I understand the consequences of closing a system index"
/>
</p>
<EuiCheckbox
id="confirmCloseIndicesCheckbox"
label={
<FormattedMessage
id="xpack.idxMgmt.indexActionsMenu.closeIndex.checkboxLabel"
defaultMessage="I understand the consequences of closing a system index"
/>
}
checked={isActionConfirmed}
onChange={(e) => this.confirmAction(e.target.checked)}
/>
</EuiCallOut>
</EuiConfirmModal>
</EuiOverlayMask>
}
checked={isActionConfirmed}
onChange={(e) => this.confirmAction(e.target.checked)}
/>
</EuiCallOut>
</EuiConfirmModal>
);
};
@ -633,71 +620,69 @@ export class IndexActionsContextMenu extends Component {
const { freezeIndices, indexNames } = this.props;
return (
<EuiOverlayMask>
<EuiConfirmModal
<EuiConfirmModal
title={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.freezeEntity.confirmModal.modalTitle',
{
defaultMessage: 'Confirm freeze {count, plural, one {index} other {indices}}',
values: {
count: indexNames.length,
},
}
)}
onCancel={this.closeConfirmModal}
onConfirm={() => this.closePopoverAndExecute(freezeIndices)}
cancelButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.freezeEntity.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
confirmButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.freezeEntity.confirmModal.confirmButtonText',
{
defaultMessage: 'Freeze {count, plural, one {index} other {indices}}',
values: {
count: indexNames.length,
},
}
)}
>
<p>
<FormattedMessage
id="xpack.idxMgmt.indexActionsMenu.freezeEntity.freezeDescription"
defaultMessage="You are about to freeze {count, plural, one {this index} other {these indices}}:"
values={{ count: indexNames.length }}
/>
</p>
<ul>
{indexNames.map((indexName) => (
<li key={indexName}>{indexName}</li>
))}
</ul>
<EuiCallOut
title={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.freezeEntity.confirmModal.modalTitle',
'xpack.idxMgmt.indexActionsMenu.freezeEntity.proceedWithCautionCallOutTitle',
{
defaultMessage: 'Confirm freeze {count, plural, one {index} other {indices}}',
values: {
count: indexNames.length,
},
}
)}
onCancel={this.closeConfirmModal}
onConfirm={() => this.closePopoverAndExecute(freezeIndices)}
cancelButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.freezeEntity.confirmModal.cancelButtonText',
{
defaultMessage: 'Cancel',
}
)}
confirmButtonText={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.freezeEntity.confirmModal.confirmButtonText',
{
defaultMessage: 'Freeze {count, plural, one {index} other {indices}}',
values: {
count: indexNames.length,
},
defaultMessage: 'Proceed with caution',
}
)}
color="warning"
iconType="help"
>
<p>
<FormattedMessage
id="xpack.idxMgmt.indexActionsMenu.freezeEntity.freezeDescription"
defaultMessage="You are about to freeze {count, plural, one {this index} other {these indices}}:"
values={{ count: indexNames.length }}
/>
</p>
<ul>
{indexNames.map((indexName) => (
<li key={indexName}>{indexName}</li>
))}
</ul>
<EuiCallOut
title={i18n.translate(
'xpack.idxMgmt.indexActionsMenu.freezeEntity.proceedWithCautionCallOutTitle',
{
defaultMessage: 'Proceed with caution',
}
)}
color="warning"
iconType="help"
>
<p>
<FormattedMessage
id="xpack.idxMgmt.indexActionsMenu.freezeEntity.freezeEntityWarningDescription"
defaultMessage="
id="xpack.idxMgmt.indexActionsMenu.freezeEntity.freezeEntityWarningDescription"
defaultMessage="
A frozen index has little overhead on the cluster and is blocked for write operations.
You can search a frozen index, but expect queries to be slower.
"
/>
</p>
</EuiCallOut>
</EuiConfirmModal>
</EuiOverlayMask>
/>
</p>
</EuiCallOut>
</EuiConfirmModal>
);
};

119
x-pack/plugins/infra/public/components/saved_views/create_modal.tsx
View file

@ -16,7 +16,6 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
EuiFieldText,
EuiSpacer,
EuiSwitch,
@ -40,69 +39,67 @@ export const SavedViewCreateModal = ({ close, save, isInvalid }: Props) => {
}, [includeTime, save, viewName]);
return (
<EuiOverlayMask>
<EuiModal onClose={close}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Save View"
id="xpack.infra.waffle.savedView.createHeader"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiFieldText
isInvalid={isInvalid}
placeholder={i18n.translate('xpack.infra.waffle.savedViews.viewNamePlaceholder', {
defaultMessage: 'Name',
})}
data-test-subj="savedViewViweName"
value={viewName}
onChange={textChange}
aria-label={i18n.translate('xpack.infra.waffle.savedViews.viewNamePlaceholder', {
defaultMessage: 'Name',
})}
<EuiModal onClose={close}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Save View"
id="xpack.infra.waffle.savedView.createHeader"
/>
<EuiSpacer size="xl" />
<EuiSwitch
id={'saved-view-save-time-checkbox'}
label={
<FormattedMessage
defaultMessage="Store time with view"
id="xpack.infra.waffle.savedViews.includeTimeFilterLabel"
/>
}
checked={includeTime}
onChange={onCheckChange}
/>
<EuiSpacer size="s" />
<EuiText size={'xs'} grow={false} style={{ maxWidth: 400 }}>
<FormattedMessage
defaultMessage="This changes the time filter to the currently selected time each time the view is loaded"
id="xpack.infra.waffle.savedViews.includeTimeHelpText"
/>
</EuiText>
</EuiModalBody>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalFooter>
<EuiButtonEmpty onClick={close}>
<EuiModalBody>
<EuiFieldText
isInvalid={isInvalid}
placeholder={i18n.translate('xpack.infra.waffle.savedViews.viewNamePlaceholder', {
defaultMessage: 'Name',
})}
data-test-subj="savedViewViweName"
value={viewName}
onChange={textChange}
aria-label={i18n.translate('xpack.infra.waffle.savedViews.viewNamePlaceholder', {
defaultMessage: 'Name',
})}
/>
<EuiSpacer size="xl" />
<EuiSwitch
id={'saved-view-save-time-checkbox'}
label={
<FormattedMessage
defaultMessage="Cancel"
id="xpack.infra.waffle.savedViews.cancelButton"
defaultMessage="Store time with view"
id="xpack.infra.waffle.savedViews.includeTimeFilterLabel"
/>
</EuiButtonEmpty>
<EuiButton
color="primary"
disabled={!viewName}
fill={true}
onClick={saveView}
data-test-subj="createSavedViewButton"
>
<FormattedMessage defaultMessage="Save" id="xpack.infra.waffle.savedViews.saveButton" />
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
}
checked={includeTime}
onChange={onCheckChange}
/>
<EuiSpacer size="s" />
<EuiText size={'xs'} grow={false} style={{ maxWidth: 400 }}>
<FormattedMessage
defaultMessage="This changes the time filter to the currently selected time each time the view is loaded"
id="xpack.infra.waffle.savedViews.includeTimeHelpText"
/>
</EuiText>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={close}>
<FormattedMessage
defaultMessage="Cancel"
id="xpack.infra.waffle.savedViews.cancelButton"
/>
</EuiButtonEmpty>
<EuiButton
color="primary"
disabled={!viewName}
fill={true}
onClick={saveView}
data-test-subj="createSavedViewButton"
>
<FormattedMessage defaultMessage="Save" id="xpack.infra.waffle.savedViews.saveButton" />
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
};

119
x-pack/plugins/infra/public/components/saved_views/update_modal.tsx
View file

@ -16,7 +16,6 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
EuiFieldText,
EuiSpacer,
EuiSwitch,
@ -46,69 +45,67 @@ export function SavedViewUpdateModal<ViewState extends { id: string; name: strin
}, [includeTime, save, viewName]);
return (
<EuiOverlayMask>
<EuiModal onClose={close}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Update View"
id="xpack.infra.waffle.savedView.updateHeader"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiFieldText
isInvalid={isInvalid}
placeholder={i18n.translate('xpack.infra.waffle.savedViews.viewNamePlaceholder', {
defaultMessage: 'Name',
})}
data-test-subj="savedViewViweName"
value={viewName}
onChange={textChange}
aria-label={i18n.translate('xpack.infra.waffle.savedViews.viewNamePlaceholder', {
defaultMessage: 'Name',
})}
<EuiModal onClose={close}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Update View"
id="xpack.infra.waffle.savedView.updateHeader"
/>
<EuiSpacer size="xl" />
<EuiSwitch
id={'saved-view-save-time-checkbox'}
label={
<FormattedMessage
defaultMessage="Store time with view"
id="xpack.infra.waffle.savedViews.includeTimeFilterLabel"
/>
}
checked={includeTime}
onChange={onCheckChange}
/>
<EuiSpacer size="s" />
<EuiText size={'xs'} grow={false} style={{ maxWidth: 400 }}>
<FormattedMessage
defaultMessage="This changes the time filter to the currently selected time each time the view is loaded"
id="xpack.infra.waffle.savedViews.includeTimeHelpText"
/>
</EuiText>
</EuiModalBody>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalFooter>
<EuiButtonEmpty onClick={close}>
<EuiModalBody>
<EuiFieldText
isInvalid={isInvalid}
placeholder={i18n.translate('xpack.infra.waffle.savedViews.viewNamePlaceholder', {
defaultMessage: 'Name',
})}
data-test-subj="savedViewViweName"
value={viewName}
onChange={textChange}
aria-label={i18n.translate('xpack.infra.waffle.savedViews.viewNamePlaceholder', {
defaultMessage: 'Name',
})}
/>
<EuiSpacer size="xl" />
<EuiSwitch
id={'saved-view-save-time-checkbox'}
label={
<FormattedMessage
defaultMessage="Cancel"
id="xpack.infra.waffle.savedViews.cancelButton"
defaultMessage="Store time with view"
id="xpack.infra.waffle.savedViews.includeTimeFilterLabel"
/>
</EuiButtonEmpty>
<EuiButton
color="primary"
disabled={!viewName}
fill={true}
onClick={saveView}
data-test-subj="updateSavedViewButton"
>
<FormattedMessage defaultMessage="Save" id="xpack.infra.waffle.savedViews.saveButton" />
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
}
checked={includeTime}
onChange={onCheckChange}
/>
<EuiSpacer size="s" />
<EuiText size={'xs'} grow={false} style={{ maxWidth: 400 }}>
<FormattedMessage
defaultMessage="This changes the time filter to the currently selected time each time the view is loaded"
id="xpack.infra.waffle.savedViews.includeTimeHelpText"
/>
</EuiText>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={close}>
<FormattedMessage
defaultMessage="Cancel"
id="xpack.infra.waffle.savedViews.cancelButton"
/>
</EuiButtonEmpty>
<EuiButton
color="primary"
disabled={!viewName}
fill={true}
onClick={saveView}
data-test-subj="updateSavedViewButton"
>
<FormattedMessage defaultMessage="Save" id="xpack.infra.waffle.savedViews.saveButton" />
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
}

98
x-pack/plugins/infra/public/components/saved_views/view_list_modal.tsx
View file

@ -9,13 +9,7 @@ import React, { useCallback, useState, useMemo } from 'react';
import { EuiButtonEmpty, EuiModalFooter, EuiButton } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiOverlayMask,
EuiModal,
EuiModalHeader,
EuiModalHeaderTitle,
EuiModalBody,
} from '@elastic/eui';
import { EuiModal, EuiModalHeader, EuiModalHeaderTitle, EuiModalBody } from '@elastic/eui';
import { EuiSelectable } from '@elastic/eui';
import { EuiSelectableOption } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -64,51 +58,49 @@ export function SavedViewListModal<ViewState extends { id: string; name: string
}, [views, currentView]);
return (
<EuiOverlayMask>
<EuiModal onClose={close}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Select a view to load"
id="xpack.infra.waffle.savedView.selectViewHeader"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiSelectable
singleSelection={true}
searchable={true}
options={options || defaultOptions}
onChange={onChange}
searchProps={{
placeholder: i18n.translate('xpack.infra.savedView.searchPlaceholder', {
defaultMessage: 'Search for saved views',
}),
}}
listProps={{ bordered: true }}
>
{(list, search) => (
<>
{search}
<div style={{ marginTop: 20 }}>{list}</div>
</>
)}
</EuiSelectable>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty data-test-subj="cancelSavedViewModal" onClick={close}>
<FormattedMessage defaultMessage="Cancel" id="xpack.infra.openView.cancelButton" />
</EuiButtonEmpty>
<EuiButton
fill={true}
color={'primary'}
data-test-subj="loadSavedViewModal"
onClick={loadView}
>
<FormattedMessage defaultMessage="Load view" id="xpack.infra.openView.loadButton" />
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
<EuiModal onClose={close}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
defaultMessage="Select a view to load"
id="xpack.infra.waffle.savedView.selectViewHeader"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiSelectable
singleSelection={true}
searchable={true}
options={options || defaultOptions}
onChange={onChange}
searchProps={{
placeholder: i18n.translate('xpack.infra.savedView.searchPlaceholder', {
defaultMessage: 'Search for saved views',
}),
}}
listProps={{ bordered: true }}
>
{(list, search) => (
<>
{search}
<div style={{ marginTop: 20 }}>{list}</div>
</>
)}
</EuiSelectable>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty data-test-subj="cancelSavedViewModal" onClick={close}>
<FormattedMessage defaultMessage="Cancel" id="xpack.infra.openView.cancelButton" />
</EuiButtonEmpty>
<EuiButton
fill={true}
color={'primary'}
data-test-subj="loadSavedViewModal"
onClick={loadView}
>
<FormattedMessage defaultMessage="Load view" id="xpack.infra.openView.loadButton" />
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
}

48
x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx
View file

@ -9,7 +9,6 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiModal,
EuiOverlayMask,
EuiText,
EuiTextColor,
EuiToolTip,
@ -51,33 +50,26 @@ export const PageViewLogInContext: React.FC = () => {
}
return (
<EuiOverlayMask>
<EuiModal onClose={closeModal} maxWidth={false}>
<LogInContextWrapper width={vw - MODAL_MARGIN * 2} height={vh - MODAL_MARGIN * 2}>
<EuiFlexGroup
direction="column"
responsive={false}
wrap={false}
style={{ height: '100%' }}
>
<EuiFlexItem grow={false}>
<LogEntryContext context={contextEntry.context} />
</EuiFlexItem>
<EuiFlexItem grow={1}>
<LogStream
sourceId={sourceId}
startTimestamp={startTimestamp}
endTimestamp={endTimestamp}
query={contextQuery}
center={contextEntry.cursor}
highlight={contextEntry.id}
height="100%"
/>
</EuiFlexItem>
</EuiFlexGroup>
</LogInContextWrapper>
</EuiModal>
</EuiOverlayMask>
<EuiModal onClose={closeModal} maxWidth={false}>
<LogInContextWrapper width={vw - MODAL_MARGIN * 2} height={vh - MODAL_MARGIN * 2}>
<EuiFlexGroup direction="column" responsive={false} wrap={false} style={{ height: '100%' }}>
<EuiFlexItem grow={false}>
<LogEntryContext context={contextEntry.context} />
</EuiFlexItem>
<EuiFlexItem grow={1}>
<LogStream
sourceId={sourceId}
startTimestamp={startTimestamp}
endTimestamp={endTimestamp}
query={contextQuery}
center={contextEntry.cursor}
highlight={contextEntry.id}
height="100%"
/>
</EuiFlexItem>
</EuiFlexGroup>
</LogInContextWrapper>
</EuiModal>
);
};

112
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/load_from_json/modal_provider.tsx
View file

@ -8,7 +8,7 @@
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React, { FunctionComponent, useRef, useState, useCallback } from 'react';
import { EuiConfirmModal, EuiOverlayMask, EuiSpacer, EuiText, EuiCallOut } from '@elastic/eui';
import { EuiConfirmModal, EuiSpacer, EuiText, EuiCallOut } from '@elastic/eui';
import { JsonEditor, OnJsonEditorUpdateHandler } from '../../../../../shared_imports';
@ -78,64 +78,62 @@ export const ModalProvider: FunctionComponent<Props> = ({ onDone, children }) =>
<>
{children(() => setIsModalVisible(true))}
{isModalVisible ? (
<EuiOverlayMask>
<EuiConfirmModal
data-test-subj="loadJsonConfirmationModal"
title={i18nTexts.modalTitle}
onCancel={() => {
<EuiConfirmModal
data-test-subj="loadJsonConfirmationModal"
title={i18nTexts.modalTitle}
onCancel={() => {
setIsModalVisible(false);
}}
onConfirm={async () => {
try {
const json = jsonContent.current.data.format();
const { processors, on_failure: onFailure } = json;
// This function will throw if it cannot parse the pipeline object
deserialize({ processors, onFailure });
onDone(json as any);
setIsModalVisible(false);
}}
onConfirm={async () => {
try {
const json = jsonContent.current.data.format();
const { processors, on_failure: onFailure } = json;
// This function will throw if it cannot parse the pipeline object
deserialize({ processors, onFailure });
onDone(json as any);
setIsModalVisible(false);
} catch (e) {
setError(e);
}
}}
cancelButtonText={i18nTexts.buttons.cancel}
confirmButtonDisabled={!isValidJson}
confirmButtonText={i18nTexts.buttons.confirm}
maxWidth={600}
>
<div className="application">
<EuiText color="subdued">
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.loadJsonModal.jsonEditorHelpText"
defaultMessage="Provide a pipeline object. This will override the existing pipeline processors and on-failure processors."
/>
</EuiText>
<EuiSpacer size="m" />
{error && (
<>
<EuiCallOut
data-test-subj="errorCallOut"
title={i18nTexts.error.title}
color="danger"
iconType="alert"
>
{i18nTexts.error.body}
</EuiCallOut>
<EuiSpacer size="m" />
</>
)}
<JsonEditor
label={i18nTexts.editor.label}
onUpdate={onJsonUpdate}
euiCodeEditorProps={{
height: '300px',
}}
} catch (e) {
setError(e);
}
}}
cancelButtonText={i18nTexts.buttons.cancel}
confirmButtonDisabled={!isValidJson}
confirmButtonText={i18nTexts.buttons.confirm}
maxWidth={600}
>
<div className="application">
<EuiText color="subdued">
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.loadJsonModal.jsonEditorHelpText"
defaultMessage="Provide a pipeline object. This will override the existing pipeline processors and on-failure processors."
/>
</div>
</EuiConfirmModal>
</EuiOverlayMask>
</EuiText>
<EuiSpacer size="m" />
{error && (
<>
<EuiCallOut
data-test-subj="errorCallOut"
title={i18nTexts.error.title}
color="danger"
iconType="alert"
>
{i18nTexts.error.body}
</EuiCallOut>
<EuiSpacer size="m" />
</>
)}
<JsonEditor
label={i18nTexts.editor.label}
onUpdate={onJsonUpdate}
euiCodeEditorProps={{
height: '300px',
}}
/>
</div>
</EuiConfirmModal>
) : undefined}
</>
);

4
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/csv.tsx
View file

@ -85,7 +85,7 @@ const fieldsConfig: FieldsConfig = {
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.convertForm.separatorHelpText"
defaultMessage="Delimiter used in the CSV data. Defaults to {value}."
values={{ value: <EuiCode inline>{','}</EuiCode> }}
values={{ value: <EuiCode>{','}</EuiCode> }}
/>
),
},
@ -104,7 +104,7 @@ const fieldsConfig: FieldsConfig = {
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.convertForm.quoteHelpText"
defaultMessage="Escape character used in the CSV data. Defaults to {value}."
values={{ value: <EuiCode inline>{'"'}</EuiCode> }}
values={{ value: <EuiCode>{'"'}</EuiCode> }}
/>
),
},

6
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date.tsx
View file

@ -61,7 +61,7 @@ const fieldsConfig: FieldsConfig = {
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.dateForm.timezoneHelpText"
defaultMessage="Timezone for the date. Defaults to {timezone}."
values={{ timezone: <EuiCode inline>{'UTC'}</EuiCode> }}
values={{ timezone: <EuiCode>{'UTC'}</EuiCode> }}
/>
),
},
@ -75,7 +75,7 @@ const fieldsConfig: FieldsConfig = {
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.dateForm.localeHelpText"
defaultMessage="Locale for the date. Useful when parsing month or day names. Defaults to {timezone}."
values={{ timezone: <EuiCode inline>{'ENGLISH'}</EuiCode> }}
values={{ timezone: <EuiCode>{'ENGLISH'}</EuiCode> }}
/>
),
},
@ -102,7 +102,7 @@ export const DateProcessor: FunctionComponent = () => {
id="xpack.ingestPipelines.pipelineEditor.dateForm.targetFieldHelpText"
defaultMessage="Output field. If empty, the input field is updated in place. Defaults to {defaultField}."
values={{
defaultField: <EuiCode inline>{'@timestamp'}</EuiCode>,
defaultField: <EuiCode>{'@timestamp'}</EuiCode>,
}}
/>
}

8
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date_index_name.tsx
View file

@ -82,7 +82,7 @@ const fieldsConfig: FieldsConfig = {
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.indexNameFormatFieldHelpText"
defaultMessage="Date format used to print the parsed date into the index name. Defaults to {value}."
values={{ value: <EuiCode inline>{'yyyy-MM-dd'}</EuiCode> }}
values={{ value: <EuiCode>{'yyyy-MM-dd'}</EuiCode> }}
/>
),
},
@ -102,7 +102,7 @@ const fieldsConfig: FieldsConfig = {
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.dateFormatsHelpText"
defaultMessage="Expected date formats. Provided formats are applied sequentially. Accepts a Java time pattern, ISO8601, UNIX, UNIX_MS, or TAI64N formats. Defaults to {value}."
values={{ value: <EuiCode inline>{"yyyy-MM-dd'T'HH:mm:ss.SSSXX"}</EuiCode> }}
values={{ value: <EuiCode>{"yyyy-MM-dd'T'HH:mm:ss.SSSXX"}</EuiCode> }}
/>
),
},
@ -119,7 +119,7 @@ const fieldsConfig: FieldsConfig = {
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.timezoneHelpText"
defaultMessage="Timezone used when parsing the date and constructing the index name expression. Defaults to {timezone}."
values={{ timezone: <EuiCode inline>{'UTC'}</EuiCode> }}
values={{ timezone: <EuiCode>{'UTC'}</EuiCode> }}
/>
),
},
@ -136,7 +136,7 @@ const fieldsConfig: FieldsConfig = {
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.dateIndexForm.localeHelpText"
defaultMessage="Locale to use when parsing the date. Useful when parsing month or day names. Defaults to {locale}."
values={{ locale: <EuiCode inline>{'ENGLISH'}</EuiCode> }}
values={{ locale: <EuiCode>{'ENGLISH'}</EuiCode> }}
/>
),
},

2
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/dissect.tsx
View file

@ -82,7 +82,7 @@ const getFieldsConfig = (esDocUrl: string): Record<string, FieldConfig> => {
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.dissectForm.appendSeparatorHelpText"
defaultMessage="If you specify a key modifier, this character separates the fields when appending results. Defaults to {value}."
values={{ value: <EuiCode inline>{'""'}</EuiCode> }}
values={{ value: <EuiCode>{'""'}</EuiCode> }}
/>
),
},

4
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/geoip.tsx
View file

@ -31,8 +31,8 @@ const fieldsConfig: FieldsConfig = {
id="xpack.ingestPipelines.pipelineEditor.geoIPForm.databaseFileHelpText"
defaultMessage="GeoIP2 database file in the {ingestGeoIP} configuration directory. Defaults to {databaseFile}."
values={{
databaseFile: <EuiCode inline>{'GeoLite2-City.mmdb'}</EuiCode>,
ingestGeoIP: <EuiCode inline>{'ingest-geoip'}</EuiCode>,
databaseFile: <EuiCode>{'GeoLite2-City.mmdb'}</EuiCode>,
ingestGeoIP: <EuiCode>{'ingest-geoip'}</EuiCode>,
}}
/>
),

2
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/inference.tsx
View file

@ -168,7 +168,7 @@ export const Inference: FunctionComponent = () => {
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.inferenceForm.targetFieldHelpText"
defaultMessage="Field used to contain inference processor results. Defaults to {targetField}."
values={{ targetField: <EuiCode inline>{'ml.inference.<processor_tag>'}</EuiCode> }}
values={{ targetField: <EuiCode>{'ml.inference.<processor_tag>'}</EuiCode> }}
/>
}
/>

2
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/user_agent.tsx
View file

@ -66,7 +66,7 @@ export const UserAgent: FunctionComponent = () => {
id="xpack.ingestPipelines.pipelineEditor.userAgentForm.targetFieldHelpText"
defaultMessage="Output field. Defaults to {defaultField}."
values={{
defaultField: <EuiCode inline>{'user_agent'}</EuiCode>,
defaultField: <EuiCode>{'user_agent'}</EuiCode>,
}}
/>
}

68
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_remove_modal.tsx
View file

@ -7,7 +7,7 @@
import { FormattedMessage } from '@kbn/i18n/react';
import React from 'react';
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { ProcessorInternal, ProcessorSelector } from '../types';
interface Props {
@ -18,39 +18,37 @@ interface Props {
export const ProcessorRemoveModal = ({ processor, onResult, selector }: Props) => {
return (
<EuiOverlayMask>
<EuiConfirmModal
buttonColor="danger"
data-test-subj="removeProcessorConfirmationModal"
title={
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.removeProcessorModal.titleText"
defaultMessage="Delete {type} processor"
values={{ type: processor.type }}
/>
}
onCancel={() => onResult({ confirmed: false, selector })}
onConfirm={() => onResult({ confirmed: true, selector })}
cancelButtonText={
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.removeProcessorModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.removeProcessorModal.confirmationButtonLabel"
defaultMessage="Delete processor"
/>
}
>
<p>
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.deleteModal.deleteDescription"
defaultMessage="Delete this processor and its on-failure handlers."
/>
</p>
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
buttonColor="danger"
data-test-subj="removeProcessorConfirmationModal"
title={
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.removeProcessorModal.titleText"
defaultMessage="Delete {type} processor"
values={{ type: processor.type }}
/>
}
onCancel={() => onResult({ confirmed: false, selector })}
onConfirm={() => onResult({ confirmed: true, selector })}
cancelButtonText={
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.removeProcessorModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.removeProcessorModal.confirmationButtonLabel"
defaultMessage="Delete processor"
/>
}
>
<p>
<FormattedMessage
id="xpack.ingestPipelines.pipelineEditor.deleteModal.deleteDescription"
defaultMessage="Delete this processor and its on-failure handlers."
/>
</p>
</EuiConfirmModal>
);
};

2
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/shared/map_processor_type_to_form.tsx
View file

@ -135,7 +135,7 @@ export const mapProcessorTypeToDescriptor: MapProcessorTypeToDescriptor = {
<FormattedMessage
id="xpack.ingestPipelines.processors.description.dateIndexName"
defaultMessage="Uses a date or timestamp to add documents to the correct time-based index. Index names must use a date math pattern, such as {value}."
values={{ value: <EuiCode inline>{'my-index-yyyy-MM-dd'}</EuiCode> }}
values={{ value: <EuiCode>{'my-index-yyyy-MM-dd'}</EuiCode> }}
/>
),
},

26
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/reset_documents_modal.tsx
View file

@ -7,7 +7,7 @@
import { i18n } from '@kbn/i18n';
import React, { FunctionComponent } from 'react';
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
interface Props {
confirmResetTestOutput: () => void;
@ -46,18 +46,16 @@ export const ResetDocumentsModal: FunctionComponent<Props> = ({
closeModal,
}) => {
return (
<EuiOverlayMask>
<EuiConfirmModal
buttonColor="danger"
data-test-subj="resetDocumentsConfirmationModal"
title={i18nTexts.modalTitle}
onCancel={closeModal}
onConfirm={confirmResetTestOutput}
cancelButtonText={i18nTexts.cancelButtonLabel}
confirmButtonText={i18nTexts.resetButtonLabel}
>
<p>{i18nTexts.modalDescription}</p>
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
buttonColor="danger"
data-test-subj="resetDocumentsConfirmationModal"
title={i18nTexts.modalTitle}
onCancel={closeModal}
onConfirm={confirmResetTestOutput}
cancelButtonText={i18nTexts.cancelButtonLabel}
confirmButtonText={i18nTexts.resetButtonLabel}
>
<p>{i18nTexts.modalDescription}</p>
</EuiConfirmModal>
);
};

80
x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/delete_modal.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
@ -78,49 +78,47 @@ export const PipelineDeleteModal = ({
};
return (
<EuiOverlayMask>
<EuiConfirmModal
buttonColor="danger"
data-test-subj="deletePipelinesConfirmation"
title={
<EuiConfirmModal
buttonColor="danger"
data-test-subj="deletePipelinesConfirmation"
title={
<FormattedMessage
id="xpack.ingestPipelines.deleteModal.modalTitleText"
defaultMessage="Delete {numPipelinesToDelete, plural, one {pipeline} other {# pipelines}}"
values={{ numPipelinesToDelete }}
/>
}
onCancel={handleOnCancel}
onConfirm={handleDeletePipelines}
cancelButtonText={
<FormattedMessage
id="xpack.ingestPipelines.deleteModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.ingestPipelines.deleteModal.confirmButtonLabel"
defaultMessage="Delete {numPipelinesToDelete, plural, one {pipeline} other {pipelines} }"
values={{ numPipelinesToDelete }}
/>
}
>
<>
<p>
<FormattedMessage
id="xpack.ingestPipelines.deleteModal.modalTitleText"
defaultMessage="Delete {numPipelinesToDelete, plural, one {pipeline} other {# pipelines}}"
id="xpack.ingestPipelines.deleteModal.deleteDescription"
defaultMessage="You are about to delete {numPipelinesToDelete, plural, one {this pipeline} other {these pipelines} }:"
values={{ numPipelinesToDelete }}
/>
}
onCancel={handleOnCancel}
onConfirm={handleDeletePipelines}
cancelButtonText={
<FormattedMessage
id="xpack.ingestPipelines.deleteModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.ingestPipelines.deleteModal.confirmButtonLabel"
defaultMessage="Delete {numPipelinesToDelete, plural, one {pipeline} other {pipelines} }"
values={{ numPipelinesToDelete }}
/>
}
>
<>
<p>
<FormattedMessage
id="xpack.ingestPipelines.deleteModal.deleteDescription"
defaultMessage="You are about to delete {numPipelinesToDelete, plural, one {this pipeline} other {these pipelines} }:"
values={{ numPipelinesToDelete }}
/>
</p>
</p>
<ul>
{pipelinesToDelete.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
</>
</EuiConfirmModal>
</EuiOverlayMask>
<ul>
{pipelinesToDelete.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
</>
</EuiConfirmModal>
);
};

234
x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap generated
View file

@ -296,140 +296,140 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
className="euiSpacer euiSpacer--l"
/>
</EuiSpacer>
<EuiOverlayMask>
<Portal
containerInfo={
<div
class="euiOverlayMask euiOverlayMask--aboveHeader"
>
<div
data-eui="EuiFocusTrap"
>
<EuiConfirmModal
cancelButtonText={
<FormattedMessage
defaultMessage="Cancel"
id="xpack.licenseMgmt.uploadLicense.confirmModal.cancelButtonLabel"
values={Object {}}
/>
}
confirmButtonText={
<FormattedMessage
defaultMessage="Confirm"
id="xpack.licenseMgmt.uploadLicense.confirmModal.confirmButtonLabel"
values={Object {}}
/>
}
onCancel={[Function]}
onConfirm={[Function]}
title={
<FormattedMessage
defaultMessage="Confirm License Upload"
id="xpack.licenseMgmt.uploadLicense.confirmModalTitle"
values={Object {}}
/>
}
>
<EuiModal
className="euiModal--confirmation"
onClose={[Function]}
>
<EuiOverlayMask>
<Portal
containerInfo={
<div
class="euiModal euiModal--maxWidth-default euiModal--confirmation"
tabindex="0"
class="euiOverlayMask euiOverlayMask--aboveHeader"
>
<button
aria-label="Closes this modal window"
class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="cross"
/>
</button>
<div
class="euiModal__flex"
data-eui="EuiFocusTrap"
>
<div
class="euiModalHeader"
class="euiModal euiModal--maxWidth-default euiModal--confirmation"
tabindex="0"
>
<div
class="euiModalHeader__title"
data-test-subj="confirmModalTitleText"
<button
aria-label="Closes this modal window"
class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
type="button"
>
Confirm License Upload
</div>
</div>
<div
class="euiModalBody"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="cross"
/>
</button>
<div
class="euiModalBody__overflow"
class="euiModal__flex"
>
<div
class="euiText euiText--medium"
data-test-subj="confirmModalBodyText"
class="euiModalHeader"
>
<div>
<div
class="euiModalHeader__title"
data-test-subj="confirmModalTitleText"
>
Confirm License Upload
</div>
</div>
<div
class="euiModalBody"
>
<div
class="euiModalBody__overflow"
>
<div
class="euiText euiText--medium"
data-test-subj="confirmModalBodyText"
>
Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
</div>
<div
class="euiText euiText--medium"
>
<ul>
<li>
Watcher will be disabled
</li>
</ul>
<div>
<div
class="euiText euiText--medium"
>
Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
</div>
<div
class="euiText euiText--medium"
>
<ul>
<li>
Watcher will be disabled
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
class="euiModalFooter"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary"
data-test-subj="confirmModalCancelButton"
type="button"
>
<span
class="euiButtonContent euiButtonEmpty__content"
>
<span
class="euiButtonEmpty__text"
>
Cancel
</span>
</span>
</button>
<button
class="euiButton euiButton--primary euiButton--fill"
data-test-subj="confirmModalConfirmButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
>
Confirm
</span>
</span>
</button>
</div>
</div>
</div>
<div
class="euiModalFooter"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary"
data-test-subj="confirmModalCancelButton"
type="button"
>
<span
class="euiButtonContent euiButtonEmpty__content"
>
<span
class="euiButtonEmpty__text"
>
Cancel
</span>
</span>
</button>
<button
class="euiButton euiButton--primary euiButton--fill"
data-test-subj="confirmModalConfirmButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
>
Confirm
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
}
>
<EuiConfirmModal
cancelButtonText={
<FormattedMessage
defaultMessage="Cancel"
id="xpack.licenseMgmt.uploadLicense.confirmModal.cancelButtonLabel"
values={Object {}}
/>
}
confirmButtonText={
<FormattedMessage
defaultMessage="Confirm"
id="xpack.licenseMgmt.uploadLicense.confirmModal.confirmButtonLabel"
values={Object {}}
/>
}
onCancel={[Function]}
onConfirm={[Function]}
title={
<FormattedMessage
defaultMessage="Confirm License Upload"
id="xpack.licenseMgmt.uploadLicense.confirmModalTitle"
values={Object {}}
/>
}
>
<EuiModal
className="euiModal--confirmation"
onClose={[Function]}
}
>
<EuiFocusTrap>
<div
@ -647,10 +647,10 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
</div>
</div>
</EuiFocusTrap>
</EuiModal>
</EuiConfirmModal>
</Portal>
</EuiOverlayMask>
</Portal>
</EuiOverlayMask>
</EuiModal>
</EuiConfirmModal>
<EuiText>
<div
className="euiText euiText--medium"

78
x-pack/plugins/license_management/public/application/sections/license_dashboard/revert_to_basic/revert_to_basic.js
View file

@ -7,15 +7,7 @@
import React from 'react';
import {
EuiFlexItem,
EuiCard,
EuiButton,
EuiLink,
EuiOverlayMask,
EuiConfirmModal,
EuiText,
} from '@elastic/eui';
import { EuiFlexItem, EuiCard, EuiButton, EuiLink, EuiConfirmModal, EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { EXTERNAL_LINKS } from '../../../../../common/constants';
@ -36,41 +28,39 @@ export class RevertToBasic extends React.PureComponent {
return null;
}
return (
<EuiOverlayMask>
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.revertToBasic.confirmModalTitle"
defaultMessage="Confirm Revert to Basic License"
/>
}
onCancel={cancelStartBasicLicense}
onConfirm={() => startBasicLicense(licenseType, true)}
cancelButtonText={
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.revertToBasic.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.revertToBasic.confirmModal.confirmButtonLabel"
defaultMessage="Confirm"
/>
}
>
<div>
<EuiText>{firstLine}</EuiText>
<EuiText>
<ul>
{messages.map((message) => (
<li key={message}>{message}</li>
))}
</ul>
</EuiText>
</div>
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.revertToBasic.confirmModalTitle"
defaultMessage="Confirm Revert to Basic License"
/>
}
onCancel={cancelStartBasicLicense}
onConfirm={() => startBasicLicense(licenseType, true)}
cancelButtonText={
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.revertToBasic.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.revertToBasic.confirmModal.confirmButtonLabel"
defaultMessage="Confirm"
/>
}
>
<div>
<EuiText>{firstLine}</EuiText>
<EuiText>
<ul>
{messages.map((message) => (
<li key={message}>{message}</li>
))}
</ul>
</EuiText>
</div>
</EuiConfirmModal>
);
}
render() {

281
x-pack/plugins/license_management/public/application/sections/license_dashboard/start_trial/start_trial.tsx
View file

@ -14,7 +14,6 @@ import {
EuiFlexItem,
EuiCard,
EuiLink,
EuiOverlayMask,
EuiText,
EuiModal,
EuiModalFooter,
@ -78,154 +77,152 @@ export class StartTrial extends Component<Props, State> {
}
return (
<EuiOverlayMask>
<EuiModal className="licManagement__modal" onClose={this.cancel}>
<EuiModalHeader>
<EuiModalHeaderTitle data-test-subj="confirmModalTitleText">
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalTitle"
defaultMessage="Start your free 30-day trial"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText data-test-subj="confirmModalBodyText">
<div>
<EuiText>
<p>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription"
defaultMessage="This trial is for the full set of {subscriptionFeaturesLinkText} of the Elastic Stack.
<EuiModal className="licManagement__modal" onClose={this.cancel}>
<EuiModalHeader>
<EuiModalHeaderTitle data-test-subj="confirmModalTitleText">
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalTitle"
defaultMessage="Start your free 30-day trial"
/>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText data-test-subj="confirmModalBodyText">
<div>
<EuiText>
<p>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription"
defaultMessage="This trial is for the full set of {subscriptionFeaturesLinkText} of the Elastic Stack.
You'll get immediate access to:"
values={{
subscriptionFeaturesLinkText: (
<EuiLink href={EXTERNAL_LINKS.SUBSCRIPTIONS} target="_blank">
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.subscriptionFeaturesLinkText"
defaultMessage="subscription features"
/>
</EuiLink>
),
}}
/>
</p>
<ul>
<li>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.mashingLearningFeatureTitle"
defaultMessage="Machine learning"
/>
</li>
<li>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.alertingFeatureTitle"
defaultMessage="Alerting"
/>
</li>
<li>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.graphCapabilitiesFeatureTitle"
defaultMessage="Graph capabilities"
/>
</li>
<li>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.dataBaseConnectivityFeatureTitle"
defaultMessage="{jdbcStandard} and {odbcStandard} connectivity for {sqlDataBase}"
values={{
subscriptionFeaturesLinkText: (
<EuiLink href={EXTERNAL_LINKS.SUBSCRIPTIONS} target="_blank">
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.subscriptionFeaturesLinkText"
defaultMessage="subscription features"
/>
</EuiLink>
),
jdbcStandard: 'JDBC',
odbcStandard: 'ODBC',
sqlDataBase: 'SQL',
}}
/>
</p>
<ul>
<li>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.mashingLearningFeatureTitle"
defaultMessage="Machine learning"
/>
</li>
<li>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.alertingFeatureTitle"
defaultMessage="Alerting"
/>
</li>
<li>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.graphCapabilitiesFeatureTitle"
defaultMessage="Graph capabilities"
/>
</li>
<li>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.dataBaseConnectivityFeatureTitle"
defaultMessage="{jdbcStandard} and {odbcStandard} connectivity for {sqlDataBase}"
values={{
jdbcStandard: 'JDBC',
odbcStandard: 'ODBC',
sqlDataBase: 'SQL',
}}
/>
</li>
</ul>
<p>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.securityFeaturesConfigurationDescription"
defaultMessage="Advanced security features, such as authentication ({authenticationTypeList}),
</li>
</ul>
<p>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.securityFeaturesConfigurationDescription"
defaultMessage="Advanced security features, such as authentication ({authenticationTypeList}),
field- and document-level security, and auditing, require configuration.
See the {securityDocumentationLinkText} for instructions."
values={{
authenticationTypeList: 'AD/LDAP, SAML, PKI, SAML/SSO',
securityDocumentationLinkText: (
<EuiLink href={docLinks.security} target="_blank">
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.securityDocumentationLinkText"
defaultMessage="documentation"
/>
</EuiLink>
),
}}
/>
</p>
<p>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.termsAndConditionsDescription"
defaultMessage="By starting this trial, you agree that it is subject to these {termsAndConditionsLinkText}."
values={{
termsAndConditionsLinkText: (
<EuiLink href={EXTERNAL_LINKS.TRIAL_LICENSE} target="_blank">
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.termsAndConditionsLinkText"
defaultMessage="terms and conditions"
/>
</EuiLink>
),
}}
/>
</p>
</EuiText>
</div>
</EuiText>
</EuiModalBody>
<EuiModalFooter>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
{shouldShowTelemetryOptIn(telemetry) && (
<TelemetryOptIn
telemetry={telemetry}
isStartTrial={true}
onOptInChange={this.onOptInChange}
isOptingInToTelemetry={isOptingInToTelemetry}
values={{
authenticationTypeList: 'AD/LDAP, SAML, PKI, SAML/SSO',
securityDocumentationLinkText: (
<EuiLink href={docLinks.security} target="_blank">
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.securityDocumentationLinkText"
defaultMessage="documentation"
/>
</EuiLink>
),
}}
/>
)}
</EuiFlexItem>
<EuiFlexItem grow={false} className="licManagement__ieFlex">
<EuiFlexGroup responsive={false}>
<EuiFlexItem grow={false} className="licManagement__ieFlex">
<EuiButtonEmpty
data-test-subj="confirmModalCancelButton"
onClick={this.cancel}
buttonRef={this.cancelRef}
>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false} className="licManagement__ieFlex">
<EuiButton
data-test-subj="confirmModalConfirmButton"
onClick={this.onStartLicenseTrial}
fill
buttonRef={this.confirmRef}
color="primary"
>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModal.startTrialButtonLabel"
defaultMessage="Start my trial"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
</p>
<p>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.termsAndConditionsDescription"
defaultMessage="By starting this trial, you agree that it is subject to these {termsAndConditionsLinkText}."
values={{
termsAndConditionsLinkText: (
<EuiLink href={EXTERNAL_LINKS.TRIAL_LICENSE} target="_blank">
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModalDescription.termsAndConditionsLinkText"
defaultMessage="terms and conditions"
/>
</EuiLink>
),
}}
/>
</p>
</EuiText>
</div>
</EuiText>
</EuiModalBody>
<EuiModalFooter>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
{shouldShowTelemetryOptIn(telemetry) && (
<TelemetryOptIn
telemetry={telemetry}
isStartTrial={true}
onOptInChange={this.onOptInChange}
isOptingInToTelemetry={isOptingInToTelemetry}
/>
)}
</EuiFlexItem>
<EuiFlexItem grow={false} className="licManagement__ieFlex">
<EuiFlexGroup responsive={false}>
<EuiFlexItem grow={false} className="licManagement__ieFlex">
<EuiButtonEmpty
data-test-subj="confirmModalCancelButton"
onClick={this.cancel}
buttonRef={this.cancelRef}
>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false} className="licManagement__ieFlex">
<EuiButton
data-test-subj="confirmModalConfirmButton"
onClick={this.onStartLicenseTrial}
fill
buttonRef={this.confirmRef}
color="primary"
>
<FormattedMessage
id="xpack.licenseMgmt.licenseDashboard.startTrial.confirmModal.startTrialButtonLabel"
defaultMessage="Start my trial"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiModalFooter>
</EuiModal>
);
}

69
x-pack/plugins/license_management/public/application/sections/upload_license/upload_license.js
View file

@ -13,7 +13,6 @@ import {
EuiForm,
EuiSpacer,
EuiConfirmModal,
EuiOverlayMask,
EuiText,
EuiTitle,
EuiFlexGroup,
@ -62,41 +61,39 @@ export class UploadLicense extends React.PureComponent {
return null;
}
return (
<EuiOverlayMask>
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.licenseMgmt.uploadLicense.confirmModalTitle"
defaultMessage="Confirm License Upload"
/>
}
onCancel={this.cancel}
onConfirm={() => this.send(true)}
cancelButtonText={
<FormattedMessage
id="xpack.licenseMgmt.uploadLicense.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.licenseMgmt.uploadLicense.confirmModal.confirmButtonLabel"
defaultMessage="Confirm"
/>
}
>
<div>
<EuiText>{firstLine}</EuiText>
<EuiText>
<ul>
{messages.map((message) => (
<li key={message}>{message}</li>
))}
</ul>
</EuiText>
</div>
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.licenseMgmt.uploadLicense.confirmModalTitle"
defaultMessage="Confirm License Upload"
/>
}
onCancel={this.cancel}
onConfirm={() => this.send(true)}
cancelButtonText={
<FormattedMessage
id="xpack.licenseMgmt.uploadLicense.confirmModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.licenseMgmt.uploadLicense.confirmModal.confirmButtonLabel"
defaultMessage="Confirm"
/>
}
>
<div>
<EuiText>{firstLine}</EuiText>
<EuiText>
<ul>
{messages.map((message) => (
<li key={message}>{message}</li>
))}
</ul>
</EuiText>
</div>
</EuiConfirmModal>
);
}
errorMessage() {

70
x-pack/plugins/logstash/public/application/components/pipeline_editor/__snapshots__/confirm_delete_pipeline_modal.test.js.snap generated
View file

@ -1,41 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ConfirmDeletePipelineModal component renders as expected 1`] = `
<EuiOverlayMask>
<EuiConfirmModal
buttonColor="danger"
cancelButtonText={
<FormattedMessage
defaultMessage="Cancel"
id="xpack.logstash.confirmDeletePipelineModal.cancelButtonText"
values={Object {}}
/>
}
confirmButtonText={
<FormattedMessage
defaultMessage="Delete pipeline"
id="xpack.logstash.confirmDeletePipelineModal.confirmButtonText"
values={Object {}}
/>
}
defaultFocusedButton="cancel"
onCancel={[MockFunction]}
onConfirm={[MockFunction]}
title={
<FormattedMessage
defaultMessage="Delete pipeline {id}"
id="xpack.logstash.confirmDeletePipelineModal.deletePipelineTitle"
values={
Object {
"id": "the id",
}
<EuiConfirmModal
buttonColor="danger"
cancelButtonText={
<FormattedMessage
defaultMessage="Cancel"
id="xpack.logstash.confirmDeletePipelineModal.cancelButtonText"
values={Object {}}
/>
}
confirmButtonText={
<FormattedMessage
defaultMessage="Delete pipeline"
id="xpack.logstash.confirmDeletePipelineModal.confirmButtonText"
values={Object {}}
/>
}
defaultFocusedButton="cancel"
onCancel={[MockFunction]}
onConfirm={[MockFunction]}
title={
<FormattedMessage
defaultMessage="Delete pipeline {id}"
id="xpack.logstash.confirmDeletePipelineModal.deletePipelineTitle"
values={
Object {
"id": "the id",
}
/>
}
>
<p>
You cannot recover a deleted pipeline.
</p>
</EuiConfirmModal>
</EuiOverlayMask>
}
/>
}
>
<p>
You cannot recover a deleted pipeline.
</p>
</EuiConfirmModal>
`;

58
x-pack/plugins/logstash/public/application/components/pipeline_editor/confirm_delete_pipeline_modal.js
View file

@ -7,41 +7,39 @@
import React from 'react';
import PropTypes from 'prop-types';
import { EuiConfirmModal, EUI_MODAL_CANCEL_BUTTON, EuiOverlayMask } from '@elastic/eui';
import { EuiConfirmModal, EUI_MODAL_CANCEL_BUTTON } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { PIPELINE_EDITOR } from './constants';
export function ConfirmDeletePipelineModal({ id, cancelDeleteModal, confirmDeletePipeline }) {
return (
<EuiOverlayMask>
<EuiConfirmModal
buttonColor="danger"
cancelButtonText={
<FormattedMessage
id="xpack.logstash.confirmDeletePipelineModal.cancelButtonText"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.logstash.confirmDeletePipelineModal.confirmButtonText"
defaultMessage="Delete pipeline"
/>
}
defaultFocusedButton={EUI_MODAL_CANCEL_BUTTON}
onCancel={cancelDeleteModal}
onConfirm={confirmDeletePipeline}
title={
<FormattedMessage
id="xpack.logstash.confirmDeletePipelineModal.deletePipelineTitle"
defaultMessage="Delete pipeline {id}"
values={{ id }}
/>
}
>
<p>{PIPELINE_EDITOR.DELETE_PIPELINE_MODAL_MESSAGE}</p>
</EuiConfirmModal>
</EuiOverlayMask>
<EuiConfirmModal
buttonColor="danger"
cancelButtonText={
<FormattedMessage
id="xpack.logstash.confirmDeletePipelineModal.cancelButtonText"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.logstash.confirmDeletePipelineModal.confirmButtonText"
defaultMessage="Delete pipeline"
/>
}
defaultFocusedButton={EUI_MODAL_CANCEL_BUTTON}
onCancel={cancelDeleteModal}
onConfirm={confirmDeletePipeline}
title={
<FormattedMessage
id="xpack.logstash.confirmDeletePipelineModal.deletePipelineTitle"
defaultMessage="Delete pipeline {id}"
values={{ id }}
/>
}
>
<p>{PIPELINE_EDITOR.DELETE_PIPELINE_MODAL_MESSAGE}</p>
</EuiConfirmModal>
);
}

Some files were not shown because too many files have changed in this diff Show more