[ML] Reset paging when data changes.

walterra · walterra · commit 5bc646043f42 · 2020-03-02T16:57:50.000+01:00
diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
@@ -52,6 +52,8 @@ interface Props {
   query: PivotQuery;
 }
 
+const defaultPagination = { pageIndex: 0, pageSize: 5 };
+
 export const SourceIndexPreview: React.FC<Props> = React.memo(({ query }) => {
   const indexPattern = useCurrentIndexPattern();
   const allFields = indexPattern.fields.map(f => f.name);
@@ -72,7 +74,11 @@ export const SourceIndexPreview: React.FC<Props> = React.memo(({ query }) => {
   // Column visibility
   const [visibleColumns, setVisibleColumns] = useState<EsFieldName[]>(indexPatternFields);
 
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
+  const [pagination, setPagination] = useState(defaultPagination);
+
+  useEffect(() => {
+    setPagination(defaultPagination);
+  }, [query]);
 
   const { errorMessage, status, rowCount, tableItems: data } = useSourceIndexData(
     indexPattern,
diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/pivot_preview.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/pivot_preview.tsx
@@ -106,6 +106,8 @@ interface PivotPreviewProps {
   query: PivotQuery;
 }
 
+const defaultPagination = { pageIndex: 0, pageSize: 5 };
+
 export const PivotPreview: FC<PivotPreviewProps> = React.memo(({ aggs, groupBy, query }) => {
   const indexPattern = useCurrentIndexPattern();
 
@@ -132,7 +134,13 @@ export const PivotPreview: FC<PivotPreviewProps> = React.memo(({ aggs, groupBy,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(columnKeys)]);
 
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
+  const [pagination, setPagination] = useState(defaultPagination);
+
+  // Reset pagination if data changes. This is to avoid ending up with an empty table
+  // when for example the user selected a page that is not available with the updated data.
+  useEffect(() => {
+    setPagination(defaultPagination);
+  }, [data.length]);
 
   // EuiDataGrid State
   const dataGridColumns = columnKeys.map(id => ({ id }));
