Fix bug where rollup job search would display an empty prompt if no jobs matched the search. (#31642) (#31768)

* Internationalize and refine message.

x-pack/plugins/rollup/public/crud_app/_crud_app.scss

@@ -2,9 +2,17 @@
  * 1. Override EUI styles.
  */
 .rollupJobWizardStepActions {
-  align-items: flex-end;
+  align-items: flex-end; /* 1 */
 }
 
 .rollupJobsRoot {
   display: flex;
 }
+
+/**
+ * 1. Ensure panel fills width of parent when search input yields no matching rollup jobs.
+ */
+.rollupJobsListPanel {
+  // sass-lint:disable-block no-important
+  flex-grow: 1 !important; /* 1 */
+}

x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.container.js

@@ -7,9 +7,9 @@
 import { connect } from 'react-redux';
 
 import {
-  getPageOfJobs,
   isLoading,
-  jobLoadError
+  jobLoadError,
+  getJobsList,
 } from '../../store/selectors';
 
 import {
@@ -23,7 +23,7 @@ import { JobList as JobListView } from './job_list';
 
 const mapStateToProps = (state) => {
   return {
-    jobs: getPageOfJobs(state),
+    hasJobs: Boolean(getJobsList(state).length),
     isLoading: isLoading(state),
     jobLoadError: jobLoadError(state),
   };

x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.js

@@ -42,7 +42,7 @@ export class JobListUi extends Component {
     loadJobs: PropTypes.func,
     refreshJobs: PropTypes.func,
     openDetailPanel: PropTypes.func,
-    jobs: PropTypes.array,
+    hasJobs: PropTypes.bool,
     isLoading: PropTypes.bool,
   }
 
@@ -248,7 +248,7 @@ export class JobListUi extends Component {
   }
 
   render() {
-    const { isLoading, jobs, jobLoadError } = this.props;
+    const { isLoading, hasJobs, jobLoadError } = this.props;
 
     let content;
 
@@ -258,7 +258,7 @@ export class JobListUi extends Component {
       } else {
         content = this.renderError(jobLoadError);
       }
-    } else if (!isLoading && !jobs.length) {
+    } else if (!isLoading && !hasJobs) {
       content = this.renderEmpty();
     } else {
       content = this.renderList();
@@ -267,6 +267,7 @@ export class JobListUi extends Component {
     return (
       <EuiPageContent
         horizontalPosition="center"
+        className="rollupJobsListPanel"
       >
         {content}
       </EuiPageContent>

x-pack/plugins/rollup/public/crud_app/sections/job_list/job_table/job_table.js

@@ -7,7 +7,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { i18n }  from '@kbn/i18n';
-import { injectI18n } from '@kbn/i18n/react';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import _ from 'lodash';
 
 import {
@@ -26,6 +26,7 @@ import {
   EuiTableRow,
   EuiTableRowCell,
   EuiTableRowCellCheckbox,
+  EuiText,
   EuiToolTip,
 } from '@elastic/eui';
 
@@ -398,9 +399,14 @@ export class JobTableUi extends Component {
             </EuiTableBody>
           </EuiTable>
         ) : (
-          <div>
-            No rollup jobs to show
-          </div>
+          <EuiText>
+            <p>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobTable.noJobsMatchSearchMessage"
+                defaultMessage="No rollup jobs match your search"
+              />
+            </p>
+          </EuiText>
         )}
 
         <EuiSpacer size="m" />