Update to pagination for workpad and templates (#62050)

Added logic to hide pagination if no Canvas workpads exists, and disable the previous/next arrows if there is only one page, for both workapds and templates
elastic · Apr 13, 2020 · 1084b1c · 1084b1c
1 parent a58cc5d
commit 1084b1c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.js b/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.js
@@ -266,11 +266,17 @@ export class WorkpadLoader extends React.PureComponent {
             data-test-subj="canvasWorkpadLoaderTable"
           />
           <EuiSpacer />
-          <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-            <EuiFlexItem grow={false}>
-              <EuiPagination activePage={pageNumber} onPageClick={setPage} pageCount={totalPages} />
-            </EuiFlexItem>
-          </EuiFlexGroup>
+          {rows.length > 0 && (
+            <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
+              <EuiFlexItem grow={false}>
+                <EuiPagination
+                  activePage={pageNumber}
+                  onPageClick={setPage}
+                  pageCount={totalPages}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          )}
         </WorkpadDropzone>
       </Fragment>
     );

diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_templates/workpad_templates.js b/x-pack/legacy/plugins/canvas/public/components/workpad_templates/workpad_templates.js
@@ -113,11 +113,13 @@ export class WorkpadTemplates extends React.PureComponent {
           className="canvasWorkpad__dropzoneTable canvasWorkpad__dropzoneTable--tags"
         />
         <EuiSpacer />
-        <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>
-            <EuiPagination activePage={pageNumber} onPageClick={setPage} pageCount={totalPages} />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        {rows.length > 0 && (
+          <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiPagination activePage={pageNumber} onPageClick={setPage} pageCount={totalPages} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        )}
       </Fragment>
     );
   };