[ML] Fixing position of job management search bar error (#30251) (#30361)

* [ML] Style tweaks for job management in K7

* adjusting search bar error

* removing custom title style for EuiTitle

Author: jgowdyelastic

x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/job_filter_bar.js

@@ -7,20 +7,21 @@
 
 import PropTypes from 'prop-types';
 import React, {
-  Component
+  Component,
+  Fragment,
 } from 'react';
 
 import { ml } from 'plugins/ml/services/ml_api_service';
 import { JobGroup } from '../job_group';
 
 import {
   EuiSearchBar,
-  EuiCallOut,
-  EuiSpacer,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiFormRow,
 } from '@elastic/eui';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
 function loadGroups() {
   return ml.jobs.groups()
@@ -68,29 +69,9 @@ class JobFilterBarUI extends Component {
     }
   };
 
-  renderError() {
-    const { error } = this.state;
-    if (!error) {
-      return;
-    }
-    return (
-      <EuiFlexItem grow={false}>
-        <EuiCallOut
-          color="danger"
-          title={(<FormattedMessage
-            id="xpack.ml.jobsList.jobFilterBar.invalidSearchErrorMessage"
-            defaultMessage="Invalid search: {errorMessage}"
-            values={{ errorMessage: error.message }}
-          />
-          )}
-        />
-        <EuiSpacer size="l" />
-      </EuiFlexItem>
-    );
-  }
-
   render() {
     const { intl } = this.props;
+    const { error } = this.state;
     const filters = [
       {
         type: 'field_value_toggle_group',
@@ -164,8 +145,15 @@ class JobFilterBarUI extends Component {
             onChange={this.onChange}
             className="mlJobFilterBar"
           />
+          <EuiFormRow
+            fullWidth
+            isInvalid={(error !== null)}
+            error={getError(error)}
+            style={{ maxHeight: '0px' }}
+          >
+            <Fragment />
+          </EuiFormRow>
         </EuiFlexItem>
-        { this.renderError() || ''}
       </EuiFlexGroup>
     );
   }
@@ -174,4 +162,15 @@ JobFilterBarUI.propTypes = {
   setFilters: PropTypes.func.isRequired,
 };
 
+function getError(error) {
+  if (error) {
+    return i18n.translate('xpack.ml.jobsList.jobFilterBar.invalidSearchErrorMessage', {
+      defaultMessage: 'Invalid search: {errorMessage}',
+      values: { errorMessage: error.message },
+    });
+  }
+
+  return '';
+}
+
 export const JobFilterBar = injectI18n(JobFilterBarUI);

x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss

@@ -3,10 +3,6 @@
   min-height: 60px;
   display: flex;
   align-items: center;
-
-  & > div:nth-child(1) {
-    width: 300px;
-  }
 }
 
 .job-management {

x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/_multi_job_actions.scss

@@ -1,23 +1,10 @@
   // SASSTODO: This looks like it needs some rewriting for all the pixel values
 .multi-select-actions {
-  padding: 10px 0px;
+  padding-right: $euiSizeS;
+  padding-bottom: $euiSizeM;
   display: inline-block;
   white-space: nowrap;
 
-  // SASSTODO: This looks like it should just be an EUI title
-  .jobs-selected-title {
-    display: inline-block;
-    font-weight: normal;
-
-    color: #1a1a1a;
-    font-size: 28px;
-    font-size: 1.55rem;
-    line-height: 1.25;
-    font-weight: 300;
-    line-height: 2.5rem;
-    vertical-align: bottom;
-  }
-
   .actions-border, .actions-border-large {
     height: 20px;
     border-right: $euiBorderThin;

x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/multi_job_actions.js

@@ -10,6 +10,10 @@ import React, {
   Component, Fragment
 } from 'react';
 
+import {
+  EuiTitle
+} from '@elastic/eui';
+
 import { ResultLinks } from '../job_actions';
 import { MultiJobActionsMenu } from './actions_menu';
 import { GroupSelector } from './group_selector';
@@ -28,13 +32,18 @@ export class MultiJobActions extends Component {
       <div className={`multi-select-actions${jobsSelected ? '' : '-no-display'}`}>
         {jobsSelected &&
           <Fragment>
-            <span className="jobs-selected-title">
-              <FormattedMessage
-                id="xpack.ml.jobsList.multiJobsActions.jobsSelectedLabel"
-                defaultMessage="{selectedJobsCount, plural, one {# job} other {# jobs}} selected"
-                values={{ selectedJobsCount: this.props.selectedJobs.length }}
-              />
-            </span>
+            <EuiTitle
+              size="s"
+              style={{ display: 'inline' }}
+            >
+              <h3>
+                <FormattedMessage
+                  id="xpack.ml.jobsList.multiJobsActions.jobsSelectedLabel"
+                  defaultMessage="{selectedJobsCount, plural, one {# job} other {# jobs}}   selected"
+                  values={{ selectedJobsCount: this.props.selectedJobs.length }}
+                />
+              </h3>
+            </EuiTitle>
             <div className="actions-border-large" />
             <ResultLinks jobs={this.props.selectedJobs} />