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 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.
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
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

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

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
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
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
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
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
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
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
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
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
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
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
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

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

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.