From 7d2007cfc89379138d735bb2f48a9ec356670fe6 Mon Sep 17 00:00:00 2001
From: Tim Sullivan <tsullivan@users.noreply.github.com>
Date: Wed, 8 Apr 2020 12:04:34 -0700
Subject: [PATCH] Reporting/fix listing pagination (#62881) (#62976)

* [Reporting] Fix report table pagination

* update snapshot

* nice little comment
---
 .../report_listing.test.tsx.snap              | 524 ------------------
 .../public/components/report_listing.tsx      |  60 +-
 2 files changed, 31 insertions(+), 553 deletions(-)

diff --git a/x-pack/plugins/reporting/public/components/__snapshots__/report_listing.test.tsx.snap b/x-pack/plugins/reporting/public/components/__snapshots__/report_listing.test.tsx.snap
index 75bc1f9eea696..271d61c224210 100644
--- a/x-pack/plugins/reporting/public/components/__snapshots__/report_listing.test.tsx.snap
+++ b/x-pack/plugins/reporting/public/components/__snapshots__/report_listing.test.tsx.snap
@@ -2,525 +2,6 @@
 
 exports[`ReportListing Report job listing with some items 1`] = `
 Array [
-  <EuiInMemoryTable
-    columns={
-      Array [
-        Object {
-          "field": "object_title",
-          "name": "Report",
-          "render": [Function],
-        },
-        Object {
-          "field": "created_at",
-          "name": "Created at",
-          "render": [Function],
-        },
-        Object {
-          "field": "status",
-          "name": "Status",
-          "render": [Function],
-        },
-        Object {
-          "actions": Array [
-            Object {
-              "render": [Function],
-            },
-          ],
-          "name": "Actions",
-        },
-      ]
-    }
-    data-test-subj="reportJobListing"
-    isSelectable={true}
-    itemId="id"
-    items={Array []}
-    loading={true}
-    message="Loading reports"
-    onChange={[Function]}
-    pagination={
-      Object {
-        "hidePerPageOptions": true,
-        "pageIndex": 0,
-        "pageSize": 10,
-        "totalItemCount": 0,
-      }
-    }
-    responsive={true}
-    search={
-      Object {
-        "toolsRight": undefined,
-      }
-    }
-    selection={
-      Object {
-        "itemId": "id",
-        "onSelectionChange": [Function],
-      }
-    }
-    tableLayout="fixed"
-  >
-    <div>
-      <EuiSearchBar
-        onChange={[Function]}
-      >
-        <EuiFlexGroup
-          alignItems="center"
-          gutterSize="m"
-          wrap={true}
-        >
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
-          >
-            <EuiFlexItem
-              className="euiSearchBar__searchHolder"
-              grow={true}
-            >
-              <div
-                className="euiFlexItem euiSearchBar__searchHolder"
-              >
-                <EuiSearchBox
-                  incremental={false}
-                  isInvalid={false}
-                  onSearch={[Function]}
-                  placeholder="Search..."
-                  query=""
-                >
-                  <EuiFieldSearch
-                    aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
-                    compressed={false}
-                    defaultValue=""
-                    fullWidth={true}
-                    incremental={false}
-                    inputRef={[Function]}
-                    isClearable={true}
-                    isInvalid={false}
-                    isLoading={false}
-                    onSearch={[Function]}
-                    placeholder="Search..."
-                  >
-                    <EuiFormControlLayout
-                      compressed={false}
-                      fullWidth={true}
-                      icon="search"
-                      isLoading={false}
-                    >
-                      <div
-                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
-                      >
-                        <div
-                          className="euiFormControlLayout__childrenWrapper"
-                        >
-                          <EuiValidatableControl
-                            isInvalid={false}
-                          >
-                            <input
-                              aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
-                              className="euiFieldSearch euiFieldSearch--fullWidth"
-                              defaultValue=""
-                              onKeyUp={[Function]}
-                              placeholder="Search..."
-                              type="search"
-                            />
-                          </EuiValidatableControl>
-                          <EuiFormControlLayoutIcons
-                            icon="search"
-                            isLoading={false}
-                          >
-                            <div
-                              className="euiFormControlLayoutIcons"
-                            >
-                              <EuiFormControlLayoutCustomIcon
-                                type="search"
-                              >
-                                <span
-                                  className="euiFormControlLayoutCustomIcon"
-                                >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiFormControlLayoutCustomIcon__icon"
-                                    type="search"
-                                  >
-                                    <div
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      data-euiicon-type="search"
-                                    />
-                                  </EuiIcon>
-                                </span>
-                              </EuiFormControlLayoutCustomIcon>
-                            </div>
-                          </EuiFormControlLayoutIcons>
-                        </div>
-                      </div>
-                    </EuiFormControlLayout>
-                  </EuiFieldSearch>
-                </EuiSearchBox>
-              </div>
-            </EuiFlexItem>
-          </div>
-        </EuiFlexGroup>
-      </EuiSearchBar>
-      <EuiSpacer
-        size="l"
-      >
-        <div
-          className="euiSpacer euiSpacer--l"
-        />
-      </EuiSpacer>
-      <EuiBasicTable
-        columns={
-          Array [
-            Object {
-              "field": "object_title",
-              "name": "Report",
-              "render": [Function],
-            },
-            Object {
-              "field": "created_at",
-              "name": "Created at",
-              "render": [Function],
-            },
-            Object {
-              "field": "status",
-              "name": "Status",
-              "render": [Function],
-            },
-            Object {
-              "actions": Array [
-                Object {
-                  "render": [Function],
-                },
-              ],
-              "name": "Actions",
-            },
-          ]
-        }
-        data-test-subj="reportJobListing"
-        isSelectable={true}
-        itemId="id"
-        items={Array []}
-        loading={true}
-        noItemsMessage="Loading reports"
-        onChange={[Function]}
-        pagination={
-          Object {
-            "hidePerPageOptions": true,
-            "pageIndex": 0,
-            "pageSize": 10,
-            "pageSizeOptions": Array [
-              10,
-              25,
-              50,
-            ],
-            "totalItemCount": 0,
-          }
-        }
-        responsive={true}
-        selection={
-          Object {
-            "itemId": "id",
-            "onSelectionChange": [Function],
-          }
-        }
-        tableLayout="fixed"
-      >
-        <div
-          className="euiBasicTable euiBasicTable-loading"
-          data-test-subj="reportJobListing"
-        >
-          <div>
-            <EuiTableHeaderMobile>
-              <div
-                className="euiTableHeaderMobile"
-              >
-                <EuiFlexGroup
-                  alignItems="baseline"
-                  justifyContent="spaceBetween"
-                  responsive={false}
-                >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
-                  >
-                    <EuiFlexItem
-                      grow={false}
-                    >
-                      <div
-                        className="euiFlexItem euiFlexItem--flexGrowZero"
-                      >
-                        <EuiI18n
-                          default="Select all rows"
-                          token="euiBasicTable.selectAllRows"
-                        >
-                          <EuiCheckbox
-                            aria-label="Select all rows"
-                            checked={false}
-                            compressed={false}
-                            disabled={true}
-                            id="_selection_column-checkbox_generated-id"
-                            indeterminate={false}
-                            label="Select all rows"
-                            onChange={[Function]}
-                          >
-                            <div
-                              className="euiCheckbox"
-                            >
-                              <input
-                                aria-label="Select all rows"
-                                checked={false}
-                                className="euiCheckbox__input"
-                                disabled={true}
-                                id="_selection_column-checkbox_generated-id"
-                                onChange={[Function]}
-                                type="checkbox"
-                              />
-                              <div
-                                className="euiCheckbox__square"
-                              />
-                              <label
-                                className="euiCheckbox__label"
-                                htmlFor="_selection_column-checkbox_generated-id"
-                              >
-                                Select all rows
-                              </label>
-                            </div>
-                          </EuiCheckbox>
-                        </EuiI18n>
-                      </div>
-                    </EuiFlexItem>
-                    <EuiFlexItem
-                      grow={false}
-                    >
-                      <div
-                        className="euiFlexItem euiFlexItem--flexGrowZero"
-                      />
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-              </div>
-            </EuiTableHeaderMobile>
-            <EuiTable
-              responsive={true}
-              tableLayout="fixed"
-            >
-              <table
-                className="euiTable euiTable--responsive"
-              >
-                <EuiScreenReaderOnly>
-                  <caption
-                    className="euiScreenReaderOnly euiTableCaption"
-                  >
-                    <EuiDelayRender
-                      delay={500}
-                    />
-                  </caption>
-                </EuiScreenReaderOnly>
-                <EuiTableHeader>
-                  <thead>
-                    <tr>
-                      <EuiTableHeaderCellCheckbox
-                        key="_selection_column_h"
-                      >
-                        <th
-                          className="euiTableHeaderCellCheckbox"
-                          scope="col"
-                          style={
-                            Object {
-                              "width": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="euiTableCellContent"
-                          >
-                            <EuiI18n
-                              default="Select all rows"
-                              token="euiBasicTable.selectAllRows"
-                            >
-                              <EuiCheckbox
-                                aria-label="Select all rows"
-                                checked={false}
-                                compressed={false}
-                                data-test-subj="checkboxSelectAll"
-                                disabled={true}
-                                id="_selection_column-checkbox_generated-id"
-                                indeterminate={false}
-                                label={null}
-                                onChange={[Function]}
-                                type="inList"
-                              >
-                                <div
-                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
-                                >
-                                  <input
-                                    aria-label="Select all rows"
-                                    checked={false}
-                                    className="euiCheckbox__input"
-                                    data-test-subj="checkboxSelectAll"
-                                    disabled={true}
-                                    id="_selection_column-checkbox_generated-id"
-                                    onChange={[Function]}
-                                    type="checkbox"
-                                  />
-                                  <div
-                                    className="euiCheckbox__square"
-                                  />
-                                </div>
-                              </EuiCheckbox>
-                            </EuiI18n>
-                          </div>
-                        </th>
-                      </EuiTableHeaderCellCheckbox>
-                      <EuiTableHeaderCell
-                        align="left"
-                        data-test-subj="tableHeaderCell_object_title_0"
-                        key="_data_h_object_title_0"
-                      >
-                        <th
-                          className="euiTableHeaderCell"
-                          data-test-subj="tableHeaderCell_object_title_0"
-                          role="columnheader"
-                          scope="col"
-                          style={
-                            Object {
-                              "width": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="euiTableCellContent"
-                          >
-                            <span
-                              className="euiTableCellContent__text"
-                            >
-                              Report
-                            </span>
-                          </div>
-                        </th>
-                      </EuiTableHeaderCell>
-                      <EuiTableHeaderCell
-                        align="left"
-                        data-test-subj="tableHeaderCell_created_at_1"
-                        key="_data_h_created_at_1"
-                      >
-                        <th
-                          className="euiTableHeaderCell"
-                          data-test-subj="tableHeaderCell_created_at_1"
-                          role="columnheader"
-                          scope="col"
-                          style={
-                            Object {
-                              "width": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="euiTableCellContent"
-                          >
-                            <span
-                              className="euiTableCellContent__text"
-                            >
-                              Created at
-                            </span>
-                          </div>
-                        </th>
-                      </EuiTableHeaderCell>
-                      <EuiTableHeaderCell
-                        align="left"
-                        data-test-subj="tableHeaderCell_status_2"
-                        key="_data_h_status_2"
-                      >
-                        <th
-                          className="euiTableHeaderCell"
-                          data-test-subj="tableHeaderCell_status_2"
-                          role="columnheader"
-                          scope="col"
-                          style={
-                            Object {
-                              "width": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="euiTableCellContent"
-                          >
-                            <span
-                              className="euiTableCellContent__text"
-                            >
-                              Status
-                            </span>
-                          </div>
-                        </th>
-                      </EuiTableHeaderCell>
-                      <EuiTableHeaderCell
-                        align="right"
-                        key="_actions_h_3"
-                      >
-                        <th
-                          className="euiTableHeaderCell"
-                          role="columnheader"
-                          scope="col"
-                          style={
-                            Object {
-                              "width": undefined,
-                            }
-                          }
-                        >
-                          <div
-                            className="euiTableCellContent euiTableCellContent--alignRight"
-                          >
-                            <span
-                              className="euiTableCellContent__text"
-                            >
-                              Actions
-                            </span>
-                          </div>
-                        </th>
-                      </EuiTableHeaderCell>
-                    </tr>
-                  </thead>
-                </EuiTableHeader>
-                <EuiTableBody>
-                  <tbody>
-                    <EuiTableRow>
-                      <tr
-                        className="euiTableRow"
-                      >
-                        <EuiTableRowCell
-                          align="center"
-                          colSpan={5}
-                          isMobileFullWidth={true}
-                        >
-                          <td
-                            className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
-                            colSpan={5}
-                            style={
-                              Object {
-                                "width": undefined,
-                              }
-                            }
-                          >
-                            <div
-                              className="euiTableCellContent euiTableCellContent--alignCenter"
-                            >
-                              <span
-                                className="euiTableCellContent__text"
-                              >
-                                Loading reports
-                              </span>
-                            </div>
-                          </td>
-                        </EuiTableRowCell>
-                      </tr>
-                    </EuiTableRow>
-                  </tbody>
-                </EuiTableBody>
-              </table>
-            </EuiTable>
-          </div>
-        </div>
-      </EuiBasicTable>
-    </div>
-  </EuiInMemoryTable>,
   <EuiBasicTable
     columns={
       Array [
@@ -561,11 +42,6 @@ Array [
         "hidePerPageOptions": true,
         "pageIndex": 0,
         "pageSize": 10,
-        "pageSizeOptions": Array [
-          10,
-          25,
-          50,
-        ],
         "totalItemCount": 0,
       }
     }
diff --git a/x-pack/plugins/reporting/public/components/report_listing.tsx b/x-pack/plugins/reporting/public/components/report_listing.tsx
index be930ac4b7c81..8c28aba31b752 100644
--- a/x-pack/plugins/reporting/public/components/report_listing.tsx
+++ b/x-pack/plugins/reporting/public/components/report_listing.tsx
@@ -5,7 +5,7 @@
  */
 
 import {
-  EuiInMemoryTable,
+  EuiBasicTable,
   EuiPageContent,
   EuiSpacer,
   EuiText,
@@ -16,7 +16,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import { get } from 'lodash';
 import moment from 'moment';
-import { Component, default as React } from 'react';
+import { Component, Fragment, default as React } from 'react';
 import { Subscription } from 'rxjs';
 import { ApplicationStart, ToastsSetup } from 'src/core/public';
 import { ILicense, LicensingPluginSetup } from '../../../licensing/public';
@@ -225,6 +225,10 @@ class ReportListingUi extends Component<Props, State> {
           throw error;
         }
       }
+
+      // Since the contents of the table have changed, we must reset the pagination
+      // and re-fetch. Otherwise, the Nth page we are on could be empty of jobs.
+      this.setState(() => ({ page: 0 }), this.fetchJobs);
     };
 
     return (
@@ -476,34 +480,32 @@ class ReportListingUi extends Component<Props, State> {
       onSelectionChange: this.onSelectionChange,
     };
 
-    const search = {
-      toolsRight: this.renderDeleteButton(),
-    };
-
     return (
-      <EuiInMemoryTable
-        itemId="id"
-        items={this.state.jobs}
-        loading={this.state.isLoading}
-        columns={tableColumns}
-        message={
-          this.state.isLoading
-            ? intl.formatMessage({
-                id: 'xpack.reporting.listing.table.loadingReportsDescription',
-                defaultMessage: 'Loading reports',
-              })
-            : intl.formatMessage({
-                id: 'xpack.reporting.listing.table.noCreatedReportsDescription',
-                defaultMessage: 'No reports have been created',
-              })
-        }
-        pagination={pagination}
-        selection={selection}
-        search={search}
-        isSelectable={true}
-        onChange={this.onTableChange}
-        data-test-subj="reportJobListing"
-      />
+      <Fragment>
+        <EuiBasicTable
+          itemId="id"
+          items={this.state.jobs}
+          loading={this.state.isLoading}
+          columns={tableColumns}
+          noItemsMessage={
+            this.state.isLoading
+              ? intl.formatMessage({
+                  id: 'xpack.reporting.listing.table.loadingReportsDescription',
+                  defaultMessage: 'Loading reports',
+                })
+              : intl.formatMessage({
+                  id: 'xpack.reporting.listing.table.noCreatedReportsDescription',
+                  defaultMessage: 'No reports have been created',
+                })
+          }
+          pagination={pagination}
+          selection={selection}
+          isSelectable={true}
+          onChange={this.onTableChange}
+          data-test-subj="reportJobListing"
+        />
+        {this.state.selectedJobs.length > 0 ? this.renderDeleteButton() : null}
+      </Fragment>
     );
   }
 }