Skip to content

Commit

Permalink
[ML] Fix modal titles (#147855)
Browse files Browse the repository at this point in the history 
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**
<img width="824" alt="image"
src="https://user-images.githubusercontent.com/22172091/208673148-3da918c4-f1d7-48c5-8afd-022b912b49fc.png">

**New**
<img width="857" alt="image"
src="https://user-images.githubusercontent.com/22172091/208673087-1b8cba03-504b-4505-ac65-0fcfcce4b99b.png">
  • Loading branch information
@jgowdyelastic
jgowdyelastic authored Jan 10, 2023
1 parent 09ec33b commit 5c8b6f2
Show file tree
Hide file tree
Showing 27 changed files with 206 additions and 242 deletions.
38 changes: 19 additions & 19 deletions ...ck/plugins/ml/public/application/components/annotations/delete_annotation_modal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -27,26 +27,26 @@ export const DeleteAnnotationModal: React.FC<Props> = ({
<Fragment>
{isVisible === true && (
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.ml.timeSeriesExplorer.deleteAnnotationModal.deleteAnnotationTitle"
defaultMessage="Delete this annotation?"
/>
}
title={i18n.translate(
'xpack.ml.timeSeriesExplorer.deleteAnnotationModal.deleteAnnotationTitle',
{
defaultMessage: 'Delete this annotation?',
}
)}
onCancel={cancelAction}
onConfirm={deleteAction}
cancelButtonText={
<FormattedMessage
id="xpack.ml.timeSeriesExplorer.deleteAnnotationModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.ml.timeSeriesExplorer.deleteAnnotationModal.deleteButtonLabel"
defaultMessage="Delete"
/>
}
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"
Expand Down
10 changes: 6 additions & 4 deletions ...on/components/delete_space_aware_item_check_modal/delete_space_aware_item_check_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,10 +339,12 @@ export const DeleteSpaceAwareItemCheckModal: FC<Props> = ({
<>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="xpack.ml.deleteSpaceAwareItemCheckModal.modalTitle"
defaultMessage="Checking space permissions"
/>
<h1>
<FormattedMessage
id="xpack.ml.deleteSpaceAwareItemCheckModal.modalTitle"
defaultMessage="Checking space permissions"
/>
</h1>
</EuiModalHeaderTitle>
</EuiModalHeader>

Expand Down
24 changes: 3 additions & 21 deletions ...on/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 12 additions & 18 deletions ...gins/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -44,27 +45,20 @@ export class DeleteRuleModal extends Component {
if (this.state.isModalVisible) {
modal = (
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.ml.ruleEditor.deleteRuleModal.deleteRuleTitle"
defaultMessage="Delete rule?"
/>
}
title={i18n.translate('xpack.ml.ruleEditor.deleteRuleModal.deleteRuleTitle', {
defaultMessage: 'Delete rule?',
})}
onCancel={this.closeModal}
onConfirm={this.deleteRule}
buttonColor="danger"
cancelButtonText={
<FormattedMessage
id="xpack.ml.ruleEditor.deleteRuleModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.ml.ruleEditor.deleteRuleModal.deleteButtonLabel"
defaultMessage="Delete"
/>
}
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}
/>
);
Expand Down
4 changes: 3 additions & 1 deletion x-pack/plugins/ml/public/application/components/validate_job/validate_job_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,9 @@ const LoadingSpinner = () => (
const Modal = ({ close, title, children }) => (
<EuiModal onClose={close} style={{ width: '800px' }}>
<EuiModalHeader>
<EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
<EuiModalHeaderTitle>
<h1>{title}</h1>
</EuiModalHeaderTitle>
</EuiModalHeader>

<EuiModalBody>{children}</EuiModalBody>
Expand Down
4 changes: 3 additions & 1 deletion ...k/plugins/ml/public/application/explorer/dashboard_controls/add_to_dashboard_controls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,9 @@ export const AddToDashboardControl: FC<AddToDashboardControlProps> = ({
return (
<EuiModal onClose={onClose.bind(null, undefined)} data-test-subj="mlAddToDashboardModal">
<EuiModalHeader>
<EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
<EuiModalHeaderTitle>
<h1>{title}</h1>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
{children}
Expand Down
4 changes: 3 additions & 1 deletion .../public/application/jobs/jobs_list/components/confirm_modals/close_jobs_confirm_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,9 @@ export const CloseJobsConfirmModal: FC<Props> = ({
return (
<EuiModal data-test-subj="mlCloseJobsConfirmModal" onClose={closeModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
<EuiModalHeaderTitle>
<h1>{title}</h1>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<ManagedJobsWarningCallout
Expand Down
4 changes: 3 additions & 1 deletion ...lic/application/jobs/jobs_list/components/confirm_modals/stop_datafeeds_confirm_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,9 @@ export const StopDatafeedsConfirmModal: FC<Props> = ({
return (
<EuiModal data-test-subj="mlStopDatafeedsConfirmModal" onClose={closeModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
<EuiModalHeaderTitle>
<h1>{title}</h1>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<ManagedJobsWarningCallout
Expand Down
18 changes: 10 additions & 8 deletions ...ins/ml/public/application/jobs/jobs_list/components/delete_job_modal/delete_job_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,14 +92,16 @@ export const DeleteJobModal: FC<Props> = ({ setShowFunction, unsetShowFunction,
<EuiModal data-test-subj="mlDeleteJobConfirmModal" onClose={closeModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="xpack.ml.jobsList.deleteJobModal.deleteJobsTitle"
defaultMessage="Delete {jobsCount, plural, one {{jobId}} other {# jobs}}?"
values={{
jobsCount: jobIds.length,
jobId: jobIds[0],
}}
/>
<h1>
<FormattedMessage
id="xpack.ml.jobsList.deleteJobModal.deleteJobsTitle"
defaultMessage="Delete {jobsCount, plural, one {{jobId}} other {# jobs}}?"
values={{
jobsCount: jobIds.length,
jobId: jobIds[0],
}}
/>
</h1>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
Expand Down
29 changes: 11 additions & 18 deletions ...lugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -475,26 +475,19 @@ export class EditJobFlyoutUI extends Component {
if (this.state.isConfirmationModalVisible) {
confirmationModal = (
<EuiConfirmModal
title={
<FormattedMessage
id="xpack.ml.jobsList.editJobFlyout.unsavedChangesDialogTitle"
defaultMessage="Save changes before leaving?"
/>
}
title={i18n.translate('xpack.ml.jobsList.editJobFlyout.unsavedChangesDialogTitle', {
defaultMessage: 'Save changes before leaving?',
})}
onCancel={() => this.closeFlyout(true)}
onConfirm={() => this.save()}
cancelButtonText={
<FormattedMessage
id="xpack.ml.jobsList.editJobFlyout.leaveAnywayButtonLabel"
defaultMessage="Leave anyway"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.ml.jobsList.editJobFlyout.saveChangesButtonLabel"
defaultMessage="Save changes"
/>
}
cancelButtonText={i18n.translate(
'xpack.ml.jobsList.editJobFlyout.leaveAnywayButtonLabel',
{ defaultMessage: 'Leave anyway' }
)}
confirmButtonText={i18n.translate(
'xpack.ml.jobsList.editJobFlyout.saveChangesButtonLabel',
{ defaultMessage: 'Save changes' }
)}
defaultFocusedButton="confirm"
>
<p>
Expand Down
10 changes: 6 additions & 4 deletions ...gins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,10 +288,12 @@ class CustomUrlsUI extends Component<CustomUrlsProps, CustomUrlsState> {
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="xpack.ml.jobsList.editJobFlyout.customUrls.addCustomUrlButtonLabel"
defaultMessage="Add custom URL"
/>
<h1>
<FormattedMessage
id="xpack.ml.jobsList.editJobFlyout.customUrls.addCustomUrlButtonLabel"
defaultMessage="Add custom URL"
/>
</h1>
</EuiModalHeaderTitle>
</EuiModalHeader>

Expand Down
18 changes: 10 additions & 8 deletions ...ugins/ml/public/application/jobs/jobs_list/components/reset_job_modal/reset_job_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,14 +87,16 @@ export const ResetJobModal: FC<Props> = ({ setShowFunction, unsetShowFunction, r
<EuiModal data-test-subj="mlResetJobConfirmModal" onClose={closeModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="xpack.ml.jobsList.resetJobModal.resetJobsTitle"
defaultMessage="Reset {jobsCount, plural, one {{jobId}} other {# jobs}}?"
values={{
jobsCount: jobIds.length,
jobId: jobIds[0],
}}
/>
<h1>
<FormattedMessage
id="xpack.ml.jobsList.resetJobModal.resetJobsTitle"
defaultMessage="Reset {jobsCount, plural, one {{jobId}} other {# jobs}}?"
values={{
jobsCount: jobIds.length,
jobId: jobIds[0],
}}
/>
</h1>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
Expand Down
18 changes: 10 additions & 8 deletions ...public/application/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,14 +149,16 @@ export class StartDatafeedModal extends Component {
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="xpack.ml.jobsList.startDatafeedModal.startJobsTitle"
defaultMessage="Start {jobsCount, plural, one {{jobId}} other {# jobs}}"
values={{
jobsCount: startableJobs.length,
jobId: startableJobs[0].id,
}}
/>
<h1>
<FormattedMessage
id="xpack.ml.jobsList.startDatafeedModal.startJobsTitle"
defaultMessage="Start {jobsCount, plural, one {{jobId}} other {# jobs}}"
values={{
jobsCount: startableJobs.length,
jobId: startableJobs[0].id,
}}
/>
</h1>
</EuiModalHeaderTitle>
</EuiModalHeader>

Expand Down
10 changes: 6 additions & 4 deletions ...ion/jobs/new_job/pages/components/datafeed_step/components/data_view/change_data_view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,10 +129,12 @@ export const ChangeDataViewModal: FC<Props> = ({ onClose }) => {
<EuiModal onClose={onClose} data-test-subj="mlJobMgmtImportJobsFlyout">
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="xpack.ml.newJob.wizard.datafeedStep.dataView.step0.title"
defaultMessage="Change data view"
/>
<h1>
<FormattedMessage
id="xpack.ml.newJob.wizard.datafeedStep.dataView.step0.title"
defaultMessage="Change data view"
/>
</h1>
</EuiModalHeaderTitle>
</EuiModalHeader>

Expand Down
10 changes: 6 additions & 4 deletions ...ob/pages/components/pick_fields_step/components/advanced_detector_modal/modal_wrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,12 @@ export const ModalWrapper: FC<Props> = ({ onCreateClick, closeModal, saveEnabled
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
id="xpack.ml.newJob.wizard.pickFieldsStep.advancedDetectorModal.title"
defaultMessage="Create detector"
/>
<h1>
<FormattedMessage
id="xpack.ml.newJob.wizard.pickFieldsStep.advancedDetectorModal.title"
defaultMessage="Create detector"
/>
</h1>
</EuiModalHeaderTitle>
</EuiModalHeader>

Expand Down
12 changes: 7 additions & 5 deletions .../application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 6 additions & 4 deletions x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/import_modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,10 +147,12 @@ export class ImportModal extends Component {
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiModalHeaderTitle>
<FormattedMessage
id="xpack.ml.calendarsEdit.eventsTable.importEventsTitle"
defaultMessage="Import events"
/>
<h1>
<FormattedMessage
id="xpack.ml.calendarsEdit.eventsTable.importEventsTitle"
defaultMessage="Import events"
/>
</h1>
</EuiModalHeaderTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
Loading

0 comments on commit 5c8b6f2

Please sign in to comment.