Fix bug where rollup job search would display an empty prompt if no j…

…obs matched the search. (elastic#31642) (elastic#31770) * Internationalize and refine message.
monfera · Feb 22, 2019 · 170986f · 170986f
1 parent 963b26b
commit 170986f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 12 deletions.
diff --git a/x-pack/plugins/rollup/public/crud_app/_crud_app.scss b/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 */
+}
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.container.js b/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),
   };

diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.js b/x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.js
@@ -44,7 +44,7 @@ export class JobListUi extends Component {
     loadJobs: PropTypes.func,
     refreshJobs: PropTypes.func,
     openDetailPanel: PropTypes.func,
-    jobs: PropTypes.array,
+    hasJobs: PropTypes.bool,
     isLoading: PropTypes.bool,
   }
 
@@ -252,7 +252,7 @@ export class JobListUi extends Component {
   }
 
   render() {
-    const { isLoading, jobs, jobLoadError } = this.props;
+    const { isLoading, hasJobs, jobLoadError } = this.props;
 
     let content;
 
@@ -262,7 +262,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();
@@ -271,6 +271,7 @@ export class JobListUi extends Component {
     return (
       <EuiPageContent
         horizontalPosition="center"
+        className="rollupJobsListPanel"
       >
         {content}
       </EuiPageContent>

diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_list/job_table/job_table.js b/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" />