[ML] Updates Anomaly Detection job wizard button styles, page panel and titles (#53340) (#54344)

* Update button styles, page panel and page title

* Add getJobCreatorTitle function for human readable job type name

* Add formatMessage to Create job title

* Fix translation test

* Update tests

x-pack/legacy/plugins/ml/public/application/components/full_time_range_selector/__snapshots__/full_time_range_selector.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`FullTimeRangeSelector renders the selector 1`] = `
 <EuiButton
   data-test-subj="mlButtonUseFullData"
-  fill={true}
   isDisabled={false}
   onClick={[Function]}
 >

x-pack/legacy/plugins/ml/public/application/components/full_time_range_selector/full_time_range_selector.tsx

@@ -31,7 +31,6 @@ export const FullTimeRangeSelector: FC<Props> = ({ indexPattern, query, disabled
   }
   return (
     <EuiButton
-      fill
       isDisabled={disabled}
       onClick={() => setRange(indexPattern, query)}
       data-test-subj="mlButtonUseFullData"

x-pack/legacy/plugins/ml/public/application/jobs/new_job/common/job_creator/util/general.ts

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import { Job, Datafeed, Detector } from '../configs';
 import { newJobCapsService } from '../../../../../services/new_job_capabilities_service';
 import {
@@ -270,3 +271,30 @@ export function advancedStartDatafeed(jobCreator: JobCreatorType) {
 export function aggFieldPairsCanBeCharted(afs: AggFieldPair[]) {
   return afs.some(a => a.agg.dslName === null) === false;
 }
+
+export function getJobCreatorTitle(jobCreator: JobCreatorType) {
+  switch (jobCreator.type) {
+    case JOB_TYPE.SINGLE_METRIC:
+      return i18n.translate('xpack.ml.newJob.wizard.jobCreatorTitle.singleMetric', {
+        defaultMessage: 'Single metric',
+      });
+    case JOB_TYPE.MULTI_METRIC:
+      return i18n.translate('xpack.ml.newJob.wizard.jobCreatorTitle.multiMetric', {
+        defaultMessage: 'Multi metric',
+      });
+    case JOB_TYPE.POPULATION:
+      return i18n.translate('xpack.ml.newJob.wizard.jobCreatorTitle.population', {
+        defaultMessage: 'Population',
+      });
+    case JOB_TYPE.ADVANCED:
+      return i18n.translate('xpack.ml.newJob.wizard.jobCreatorTitle.advanced', {
+        defaultMessage: 'Advanced',
+      });
+    // case JOB_TYPE.CATEGORIZATION:
+    //   return i18n.translate('xpack.ml.newJob.wizard.jobCreatorTitle.categorization', {
+    //     defaultMessage: 'Categorization',
+    //   });
+    default:
+      return '';
+  }
+}

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/wizard_nav/wizard_nav.tsx

@@ -8,7 +8,13 @@ import React, { FC, Fragment } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+} from '@elastic/eui';
 
 interface StepsNavProps {
   previousActive?: boolean;
@@ -44,20 +50,23 @@ export const WizardNav: FC<StepsNavProps> = ({
 );
 
 export const PreviousButton: FC<StepsNavProps> = ({ previous, previousActive = true }) => (
-  <EuiButton
+  <EuiButtonEmpty
     disabled={!previousActive}
     onClick={previous}
     iconType="arrowLeft"
+    iconSide="left"
     data-test-subj="mlJobWizardNavButtonPrevious"
   >
     <FormattedMessage id="xpack.ml.newJob.wizard.previousStepButton" defaultMessage="Previous" />
-  </EuiButton>
+  </EuiButtonEmpty>
 );
 
 export const NextButton: FC<StepsNavProps> = ({ next, nextActive = true }) => (
   <EuiButton
+    fill
     disabled={!nextActive}
     onClick={next}
+    iconSide="right"
     iconType="arrowRight"
     data-test-subj="mlJobWizardNavButtonNext"
   >

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/new_job/page.tsx

@@ -5,13 +5,22 @@
  */
 
 import React, { FC, useEffect, Fragment } from 'react';
-
-import { EuiPage, EuiPageBody, EuiPageContentBody } from '@elastic/eui';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiTitle,
+  EuiPageContentBody,
+} from '@elastic/eui';
 import { toastNotifications } from 'ui/notify';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { Wizard } from './wizard';
 import { WIZARD_STEPS } from '../components/step_types';
 import { jobCreatorFactory, isAdvancedJobCreator } from '../../common/job_creator';
+import { getJobCreatorTitle } from '../../common/job_creator/util/general';
 import {
   JOB_TYPE,
   DEFAULT_MODEL_MEMORY_LIMIT,
@@ -37,7 +46,6 @@ export interface PageProps {
 
 export const Page: FC<PageProps> = ({ existingJobsAndGroups, jobType }) => {
   const kibanaContext = useKibanaContext();
-
   const jobCreator = jobCreatorFactory(jobType)(
     kibanaContext.currentIndexPattern,
     kibanaContext.currentSavedSearch,
@@ -149,21 +157,39 @@ export const Page: FC<PageProps> = ({ existingJobsAndGroups, jobType }) => {
     };
   });
 
+  const jobCreatorTitle = getJobCreatorTitle(jobCreator);
+
   return (
     <Fragment>
       <EuiPage style={{ backgroundColor: 'inherit' }} data-test-subj={`mlPageJobWizard ${jobType}`}>
         <EuiPageBody>
-          <EuiPageContentBody>
-            <Wizard
-              jobCreator={jobCreator}
-              chartLoader={chartLoader}
-              resultsLoader={resultsLoader}
-              chartInterval={chartInterval}
-              jobValidator={jobValidator}
-              existingJobsAndGroups={existingJobsAndGroups}
-              firstWizardStep={firstWizardStep}
-            />
-          </EuiPageContentBody>
+          <EuiPageContent>
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle>
+                  <h2>
+                    <FormattedMessage
+                      id="xpack.ml.newJob.page.createJob"
+                      defaultMessage="Create job"
+                    />
+                    : {jobCreatorTitle}
+                  </h2>
+                </EuiTitle>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+
+            <EuiPageContentBody>
+              <Wizard
+                jobCreator={jobCreator}
+                chartLoader={chartLoader}
+                resultsLoader={resultsLoader}
+                chartInterval={chartInterval}
+                jobValidator={jobValidator}
+                existingJobsAndGroups={existingJobsAndGroups}
+                firstWizardStep={firstWizardStep}
+              />
+            </EuiPageContentBody>
+          </EuiPageContent>
         </EuiPageBody>
       </EuiPage>
     </Fragment>

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/new_job/wizard_steps.tsx

@@ -143,8 +143,8 @@ export const WizardSteps: FC<Props> = ({ currentStep, setCurrentStep }) => {
 const Title: FC<{ 'data-test-subj': string }> = ({ 'data-test-subj': dataTestSubj, children }) => {
   return (
     <Fragment>
-      <EuiTitle>
-        <h2 data-test-subj={dataTestSubj}>{children}</h2>
+      <EuiTitle size="s">
+        <h3 data-test-subj={dataTestSubj}>{children}</h3>
       </EuiTitle>
       <EuiSpacer />
     </Fragment>

x-pack/plugins/translations/translations/ja-JP.json

@@ -12704,4 +12704,4 @@
     "xpack.lens.xyVisualization.stackedBarLabel": "スタックされたバー",
     "xpack.lens.xyVisualization.xyLabel": "XY"
   }
-}
+}

x-pack/plugins/translations/translations/zh-CN.json

@@ -12732,4 +12732,4 @@
     "xpack.lens.xyVisualization.stackedBarLabel": "堆叠条形图",
     "xpack.lens.xyVisualization.xyLabel": "XY"
   }
-}
+}