From 5c8b6f213c2e965519851ce9462305a36ac887e0 Mon Sep 17 00:00:00 2001 From: James Gowdy Date: Tue, 10 Jan 2023 09:33:56 +0000 Subject: [PATCH] [ML] Fix modal titles (#147855) An EUI change has caused modal titles to no longer be implicitly wrapped in a header tag. This change adds a `h2` to all modal titles. **Old** image **New** image --- .../delete_annotation_modal/index.tsx | 38 +++++++++--------- .../delete_space_aware_item_check_modal.tsx | 10 +++-- .../delete_rule_modal.test.js.snap | 24 ++--------- .../select_rule_action/delete_rule_modal.js | 30 ++++++-------- .../validate_job/validate_job_view.js | 4 +- .../add_to_dashboard_controls.tsx | 4 +- .../close_jobs_confirm_modal.tsx | 4 +- .../stop_datafeeds_confirm_modal.tsx | 4 +- .../delete_job_modal/delete_job_modal.tsx | 18 +++++---- .../edit_job_flyout/edit_job_flyout.js | 29 +++++--------- .../edit_job_flyout/tabs/custom_urls.tsx | 10 +++-- .../reset_job_modal/reset_job_modal.tsx | 18 +++++---- .../start_datafeed_modal.js | 18 +++++---- .../components/data_view/change_data_view.tsx | 10 +++-- .../advanced_detector_modal/modal_wrapper.tsx | 10 +++-- .../__snapshots__/import_modal.test.js.snap | 12 +++--- .../edit/import_modal/import_modal.js | 10 +++-- .../edit/new_event_modal/new_event_modal.js | 10 +++-- .../settings/calendars/list/calendars_list.js | 38 ++++++++---------- .../delete_filter_list_modal.test.js.snap | 29 ++------------ .../delete_filter_list_modal.js | 40 ++++++++----------- .../components/forecasting_modal/modal.js | 10 +++-- .../models_management/delete_models_modal.tsx | 18 +++++---- .../models_management/deployment_setup.tsx | 4 +- .../models_management/force_stop_dialog.tsx | 32 ++++++--------- .../anomaly_charts_initializer.tsx | 4 +- .../anomaly_swimlane_initializer.tsx | 10 +++-- 27 files changed, 206 insertions(+), 242 deletions(-) diff --git a/x-pack/plugins/ml/public/application/components/annotations/delete_annotation_modal/index.tsx b/x-pack/plugins/ml/public/application/components/annotations/delete_annotation_modal/index.tsx index 757cf71511ff..58730179aafd 100644 --- a/x-pack/plugins/ml/public/application/components/annotations/delete_annotation_modal/index.tsx +++ b/x-pack/plugins/ml/public/application/components/annotations/delete_annotation_modal/index.tsx @@ -10,7 +10,7 @@ import React, { Fragment } from 'react'; import { EUI_MODAL_CONFIRM_BUTTON, EuiConfirmModal } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n-react'; +import { i18n } from '@kbn/i18n'; interface Props { cancelAction: () => void; @@ -27,26 +27,26 @@ export const DeleteAnnotationModal: React.FC = ({ {isVisible === true && ( - } + title={i18n.translate( + 'xpack.ml.timeSeriesExplorer.deleteAnnotationModal.deleteAnnotationTitle', + { + defaultMessage: 'Delete this annotation?', + } + )} onCancel={cancelAction} onConfirm={deleteAction} - cancelButtonText={ - - } - confirmButtonText={ - - } + cancelButtonText={i18n.translate( + 'xpack.ml.timeSeriesExplorer.deleteAnnotationModal.cancelButtonLabel', + { + defaultMessage: 'Cancel', + } + )} + confirmButtonText={i18n.translate( + 'xpack.ml.timeSeriesExplorer.deleteAnnotationModal.deleteButtonLabel', + { + defaultMessage: 'Delete', + } + )} buttonColor="danger" defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON} className="eui-textBreakWord" diff --git a/x-pack/plugins/ml/public/application/components/delete_space_aware_item_check_modal/delete_space_aware_item_check_modal.tsx b/x-pack/plugins/ml/public/application/components/delete_space_aware_item_check_modal/delete_space_aware_item_check_modal.tsx index 4b576695c981..8ac2a22be5a9 100644 --- a/x-pack/plugins/ml/public/application/components/delete_space_aware_item_check_modal/delete_space_aware_item_check_modal.tsx +++ b/x-pack/plugins/ml/public/application/components/delete_space_aware_item_check_modal/delete_space_aware_item_check_modal.tsx @@ -339,10 +339,12 @@ export const DeleteSpaceAwareItemCheckModal: FC = ({ <> - +

+ +

diff --git a/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap b/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap index 3a11531f6c4b..1d4889557002 100644 --- a/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap +++ b/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap @@ -44,30 +44,12 @@ exports[`DeleteRuleModal renders modal after clicking delete rule link 1`] = ` - } - confirmButtonText={ - - } + cancelButtonText="Cancel" + confirmButtonText="Delete" defaultFocusedButton="confirm" onCancel={[Function]} onConfirm={[Function]} - title={ - - } + title="Delete rule?" /> `; diff --git a/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js b/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js index 1b62ab2907ff..68221bbe5879 100644 --- a/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js +++ b/x-pack/plugins/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js @@ -11,6 +11,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; +import { i18n } from '@kbn/i18n'; import { EuiConfirmModal, EuiLink, EUI_MODAL_CONFIRM_BUTTON } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -44,27 +45,20 @@ export class DeleteRuleModal extends Component { if (this.state.isModalVisible) { modal = ( - } + title={i18n.translate('xpack.ml.ruleEditor.deleteRuleModal.deleteRuleTitle', { + defaultMessage: 'Delete rule?', + })} onCancel={this.closeModal} onConfirm={this.deleteRule} buttonColor="danger" - cancelButtonText={ - - } - confirmButtonText={ - - } + cancelButtonText={i18n.translate( + 'xpack.ml.ruleEditor.deleteRuleModal.cancelButtonLabel', + { defaultMessage: 'Cancel' } + )} + confirmButtonText={i18n.translate( + 'xpack.ml.ruleEditor.deleteRuleModal.deleteButtonLabel', + { defaultMessage: 'Delete' } + )} defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON} /> ); diff --git a/x-pack/plugins/ml/public/application/components/validate_job/validate_job_view.js b/x-pack/plugins/ml/public/application/components/validate_job/validate_job_view.js index 64910f5abfd2..cc76a708fc77 100644 --- a/x-pack/plugins/ml/public/application/components/validate_job/validate_job_view.js +++ b/x-pack/plugins/ml/public/application/components/validate_job/validate_job_view.js @@ -84,7 +84,9 @@ const LoadingSpinner = () => ( const Modal = ({ close, title, children }) => ( - {title} + +

{title}

+ {children} diff --git a/x-pack/plugins/ml/public/application/explorer/dashboard_controls/add_to_dashboard_controls.tsx b/x-pack/plugins/ml/public/application/explorer/dashboard_controls/add_to_dashboard_controls.tsx index d030cfc9b92b..a5b24a2290d6 100644 --- a/x-pack/plugins/ml/public/application/explorer/dashboard_controls/add_to_dashboard_controls.tsx +++ b/x-pack/plugins/ml/public/application/explorer/dashboard_controls/add_to_dashboard_controls.tsx @@ -81,7 +81,9 @@ export const AddToDashboardControl: FC = ({ return ( - {title} + +

{title}

+ {children} diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/confirm_modals/close_jobs_confirm_modal.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/confirm_modals/close_jobs_confirm_modal.tsx index f0c78c3828ae..e1ec74412990 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/confirm_modals/close_jobs_confirm_modal.tsx +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/confirm_modals/close_jobs_confirm_modal.tsx @@ -87,7 +87,9 @@ export const CloseJobsConfirmModal: FC = ({ return ( - {title} + +

{title}

+ = ({ return ( - {title} + +

{title}

+ = ({ setShowFunction, unsetShowFunction, - +

+ +

diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js index 9100b7ffa03a..0f97acdae5c3 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js @@ -475,26 +475,19 @@ export class EditJobFlyoutUI extends Component { if (this.state.isConfirmationModalVisible) { confirmationModal = ( - } + title={i18n.translate('xpack.ml.jobsList.editJobFlyout.unsavedChangesDialogTitle', { + defaultMessage: 'Save changes before leaving?', + })} onCancel={() => this.closeFlyout(true)} onConfirm={() => this.save()} - cancelButtonText={ - - } - confirmButtonText={ - - } + cancelButtonText={i18n.translate( + 'xpack.ml.jobsList.editJobFlyout.leaveAnywayButtonLabel', + { defaultMessage: 'Leave anyway' } + )} + confirmButtonText={i18n.translate( + 'xpack.ml.jobsList.editJobFlyout.saveChangesButtonLabel', + { defaultMessage: 'Save changes' } + )} defaultFocusedButton="confirm" >

diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx index 9a7508c634c6..d77ed5c3bb2d 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx @@ -288,10 +288,12 @@ class CustomUrlsUI extends Component { > - +

+ +

diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/reset_job_modal/reset_job_modal.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/reset_job_modal/reset_job_modal.tsx index 335b19bd3a79..55891b3b3b57 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/reset_job_modal/reset_job_modal.tsx +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/reset_job_modal/reset_job_modal.tsx @@ -87,14 +87,16 @@ export const ResetJobModal: FC = ({ setShowFunction, unsetShowFunction, r - +

+ +

diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js index c4c53b00591f..3a2728a81042 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js @@ -149,14 +149,16 @@ export class StartDatafeedModal extends Component { > - +

+ +

diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/data_view/change_data_view.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/data_view/change_data_view.tsx index cc3b20966935..9617458c6e81 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/data_view/change_data_view.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/data_view/change_data_view.tsx @@ -129,10 +129,12 @@ export const ChangeDataViewModal: FC = ({ onClose }) => { - +

+ +

diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/modal_wrapper.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/modal_wrapper.tsx index 12344c651bd1..3ab60cd8225c 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/modal_wrapper.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/modal_wrapper.tsx @@ -34,10 +34,12 @@ export const ModalWrapper: FC = ({ onCreateClick, closeModal, saveEnabled > - +

+ +

diff --git a/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap b/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap index 16074e3849d0..61449ab5168d 100644 --- a/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap +++ b/x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap @@ -15,11 +15,13 @@ exports[`ImportModal Renders import modal 1`] = ` grow={false} > - +

+ +

- +

+ +

diff --git a/x-pack/plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js b/x-pack/plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js index ae2815ebb5cd..255405c8cd26 100644 --- a/x-pack/plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js +++ b/x-pack/plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js @@ -266,10 +266,12 @@ export class NewEventModal extends Component { > - +

+ +

diff --git a/x-pack/plugins/ml/public/application/settings/calendars/list/calendars_list.js b/x-pack/plugins/ml/public/application/settings/calendars/list/calendars_list.js index 9864078aff69..a3bb900ca1ce 100644 --- a/x-pack/plugins/ml/public/application/settings/calendars/list/calendars_list.js +++ b/x-pack/plugins/ml/public/application/settings/calendars/list/calendars_list.js @@ -16,7 +16,6 @@ import { ml } from '../../../services/ml_api_service'; import { mlNodesAvailable } from '../../../ml_nodes_check/check_ml_nodes'; import { deleteCalendars } from './delete_calendars'; import { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n-react'; import { withKibana } from '@kbn/kibana-react-plugin/public'; import { getDocLinks } from '../../../util/dependency_cache'; import { HelpMenu } from '../../../components/help_menu'; @@ -105,30 +104,27 @@ export class CalendarsListUI extends Component { destroyModal = ( c.calendar_id).join(', '), - }} - /> - } + }, + } + )} onCancel={this.closeDestroyModal} onConfirm={this.deleteCalendars} - cancelButtonText={ - - } - confirmButtonText={ - - } + cancelButtonText={i18n.translate( + 'xpack.ml.calendarsList.deleteCalendarsModal.cancelButtonLabel', + { defaultMessage: 'Cancel' } + )} + confirmButtonText={i18n.translate( + 'xpack.ml.calendarsList.deleteCalendarsModal.deleteButtonLabel', + { defaultMessage: 'Delete' } + )} buttonColor="danger" defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON} /> diff --git a/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap b/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap index d4ea0c49612a..00072352c4f5 100644 --- a/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap +++ b/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap @@ -99,37 +99,14 @@ exports[`DeleteFilterListModal renders modal after clicking delete button 1`] = - } + cancelButtonText="Cancel" className="eui-textBreakWord" - confirmButtonText={ - - } + confirmButtonText="Delete" data-test-subj="mlFilterListDeleteConfirmation" defaultFocusedButton="confirm" onCancel={[Function]} onConfirm={[Function]} - title={ - - } + title="Delete 2 filter lists?" /> `; diff --git a/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.js b/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.js index 8f7fc02ffdb2..8540d6c803b7 100644 --- a/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.js +++ b/x-pack/plugins/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.js @@ -8,6 +8,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; +import { i18n } from '@kbn/i18n'; import { EuiButton, EuiConfirmModal, EUI_MODAL_CONFIRM_BUTTON } from '@elastic/eui'; @@ -56,34 +57,27 @@ export class DeleteFilterListModal extends Component { let modal; if (this.state.isModalVisible) { - const title = ( - - ); modal = ( - } - confirmButtonText={ - - } + cancelButtonText={i18n.translate( + 'xpack.ml.settings.filterLists.deleteFilterListModal.cancelButtonLabel', + { defaultMessage: 'Cancel' } + )} + confirmButtonText={i18n.translate( + 'xpack.ml.settings.filterLists.deleteFilterListModal.confirmButtonLabel', + { defaultMessage: 'Delete' } + )} buttonColor="danger" defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON} data-test-subj={'mlFilterListDeleteConfirmation'} diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/modal.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/modal.js index 9b7adcf2bce3..1ae5ee2b0560 100644 --- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/modal.js +++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/modal.js @@ -33,10 +33,12 @@ export function Modal(props) { - +

+ +

diff --git a/x-pack/plugins/ml/public/application/trained_models/models_management/delete_models_modal.tsx b/x-pack/plugins/ml/public/application/trained_models/models_management/delete_models_modal.tsx index b4f0bc0ec505..f6799469fd1e 100644 --- a/x-pack/plugins/ml/public/application/trained_models/models_management/delete_models_modal.tsx +++ b/x-pack/plugins/ml/public/application/trained_models/models_management/delete_models_modal.tsx @@ -69,14 +69,16 @@ export const DeleteModelsModal: FC = ({ modelIds, onClos > - +

+ +

diff --git a/x-pack/plugins/ml/public/application/trained_models/models_management/deployment_setup.tsx b/x-pack/plugins/ml/public/application/trained_models/models_management/deployment_setup.tsx index f8082997a1c6..c999376eebea 100644 --- a/x-pack/plugins/ml/public/application/trained_models/models_management/deployment_setup.tsx +++ b/x-pack/plugins/ml/public/application/trained_models/models_management/deployment_setup.tsx @@ -289,7 +289,7 @@ export const StartUpdateDeploymentModal: FC = ({ -

+

{isUpdate ? ( = ({ values={{ modelId }} /> )} -

+ diff --git a/x-pack/plugins/ml/public/application/trained_models/models_management/force_stop_dialog.tsx b/x-pack/plugins/ml/public/application/trained_models/models_management/force_stop_dialog.tsx index 6a9713172322..1800f9b13db0 100644 --- a/x-pack/plugins/ml/public/application/trained_models/models_management/force_stop_dialog.tsx +++ b/x-pack/plugins/ml/public/application/trained_models/models_management/force_stop_dialog.tsx @@ -8,6 +8,7 @@ import React, { FC } from 'react'; import { EuiConfirmModal } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; +import { i18n } from '@kbn/i18n'; import type { OverlayStart, ThemeServiceStart } from '@kbn/core/public'; import { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public'; import type { ModelItem } from './models_list'; @@ -25,27 +26,20 @@ export const ForceStopModelConfirmDialog: FC = }) => { return ( - } + title={i18n.translate('xpack.ml.trainedModels.modelsList.forceStopDialog.title', { + defaultMessage: 'Stop model {modelId}?', + values: { modelId: model.model_id }, + })} onCancel={onCancel} onConfirm={onConfirm} - cancelButtonText={ - - } - confirmButtonText={ - - } + cancelButtonText={i18n.translate( + 'xpack.ml.trainedModels.modelsList.forceStopDialog.cancelText', + { defaultMessage: 'Cancel' } + )} + confirmButtonText={i18n.translate( + 'xpack.ml.trainedModels.modelsList.forceStopDialog.confirmText', + { defaultMessage: 'Stop' } + )} buttonColor="danger" > = ({ > -

+

-

+ diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx index e5e2c2fd3b6b..c4c2fc7262ea 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx +++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx @@ -93,10 +93,12 @@ export const AnomalySwimlaneInitializer: FC = ( - +

+ +