From ffbc18466a227d2c0f6b2fb6202b7dc98c6e5a8e Mon Sep 17 00:00:00 2001
From: Jenny <jshandel@redhat.com>
Date: Mon, 6 Jun 2022 11:22:23 -0400
Subject: [PATCH] refactor(pagination): use new PF4 component

---
 .../__snapshots__/scans.test.js.snap          |   1 -
 .../__snapshots__/sources.test.js.snap        |   1 -
 .../viewPaginationRow.test.js.snap            | 333 +++++++++---------
 .../viewPaginationRow/viewPaginationRow.js    |  47 ++-
 .../viewOptionsReducer.test.js.snap           | 112 +++---
 src/redux/reducers/viewOptionsReducer.js      |   2 +-
 src/styles/app/_views.scss                    |   2 +
 tests/__snapshots__/dist.test.js.snap         |   8 +
 8 files changed, 263 insertions(+), 243 deletions(-)

diff --git a/src/components/scans/__tests__/__snapshots__/scans.test.js.snap b/src/components/scans/__tests__/__snapshots__/scans.test.js.snap
index c1d60b28..a70f5396 100644
--- a/src/components/scans/__tests__/__snapshots__/scans.test.js.snap
+++ b/src/components/scans/__tests__/__snapshots__/scans.test.js.snap
@@ -134,7 +134,6 @@ exports[`Scans Component should render a non-connected component: non-connected
     pageSize={0}
     selectedItems={Array []}
     totalCount={0}
-    totalPages={0}
     viewType="SCANS_VIEW"
   />
   <div
diff --git a/src/components/sources/__tests__/__snapshots__/sources.test.js.snap b/src/components/sources/__tests__/__snapshots__/sources.test.js.snap
index dbf07735..ce0a2b63 100644
--- a/src/components/sources/__tests__/__snapshots__/sources.test.js.snap
+++ b/src/components/sources/__tests__/__snapshots__/sources.test.js.snap
@@ -251,7 +251,6 @@ exports[`Sources Component should render a non-connected component: non-connecte
     pageSize={0}
     selectedItems={Array []}
     totalCount={0}
-    totalPages={0}
     viewType="SOURCES_VIEW"
   />
   <div
diff --git a/src/components/viewPaginationRow/__tests__/__snapshots__/viewPaginationRow.test.js.snap b/src/components/viewPaginationRow/__tests__/__snapshots__/viewPaginationRow.test.js.snap
index 2aee9a92..71e66cfb 100644
--- a/src/components/viewPaginationRow/__tests__/__snapshots__/viewPaginationRow.test.js.snap
+++ b/src/components/viewPaginationRow/__tests__/__snapshots__/viewPaginationRow.test.js.snap
@@ -1,193 +1,208 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ViewPaginationRow Component should render 1`] = `
-<form
-  class="content-view-pf-pagination list-view-pagination-top list-view-pf-pagination clearfix"
+<div
+  class="pf-c-pagination list-view-pagination-top"
+  data-ouia-component-id="OUIA-Generated-Pagination-top-1"
+  data-ouia-component-type="PF4/Pagination"
+  data-ouia-safe="true"
+  id="pagination-options-menu-0"
+  style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
 >
   <div
-    class="form-group"
+    class="pf-c-pagination__total-items"
   >
-    <div
-      class="dropdown pagination-pf-pagesize btn-group"
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="dropdown-toggle btn btn-default"
-        id="pagination-row-dropdown"
-        role="button"
-        type="button"
-      >
-        10 
-        <span
-          class="caret"
-        />
-      </button>
-      <ul
-        aria-labelledby="pagination-row-dropdown"
-        class="dropdown-menu"
-        role="menu"
-      >
-        <li
-          class="active"
-          role="presentation"
-        >
-          <a
-            href="#"
-            role="menuitem"
-            tabindex="-1"
-          >
-            10
-          </a>
-        </li>
-        <li
-          class=""
-          role="presentation"
-        >
-          <a
-            href="#"
-            role="menuitem"
-            tabindex="-1"
-          >
-            15
-          </a>
-        </li>
-        <li
-          class=""
-          role="presentation"
-        >
-          <a
-            href="#"
-            role="menuitem"
-            tabindex="-1"
-          >
-            25
-          </a>
-        </li>
-        <li
-          class=""
-          role="presentation"
-        >
-          <a
-            href="#"
-            role="menuitem"
-            tabindex="-1"
-          >
-            50
-          </a>
-        </li>
-        <li
-          class=""
-          role="presentation"
-        >
-          <a
-            href="#"
-            role="menuitem"
-            tabindex="-1"
-          >
-            100
-          </a>
-        </li>
-      </ul>
-    </div>
-    <span>
-      per page
-    </span>
+    <b>
+      1 - 10
+    </b>
+     of 
+    <b>
+      200
+    </b>
+     
   </div>
   <div
-    class="form-group"
+    class="pf-c-options-menu"
+    data-ouia-component-type="PF4/PaginationOptionsMenu"
+    data-ouia-safe="true"
   >
-    <span>
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label=""
+      class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="pagination-options-menu-toggle-0"
+      type="button"
+    >
       <span
-        class="pagination-pf-items-current"
+        class="pf-c-options-menu__toggle-text"
       >
-        1-10
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          200
+        </b>
+         
       </span>
-       of 
       <span
-        class="pagination-pf-items-total"
+        class="pf-c-options-menu__toggle-icon"
       >
-        200
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
       </span>
-    </span>
-    <ul
-      class="pagination pagination-pf-back"
+    </button>
+  </div>
+  <nav
+    aria-label="Pagination"
+    class="pf-c-pagination__nav"
+  >
+    <div
+      class="pf-c-pagination__nav-control pf-m-first"
     >
-      <li
-        class="disabled"
+      <button
+        aria-disabled="true"
+        aria-label="Go to first page"
+        class="pf-c-button pf-m-plain pf-m-disabled"
+        data-action="first"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        disabled=""
+        type="button"
       >
-        <a
-          href="#"
-          title="First Page"
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 448 512"
+          width="1em"
         >
-          <span
-            aria-hidden="true"
-            class="fa fa-angle-double-left i"
+          <path
+            d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
           />
-        </a>
-      </li>
-      <li
-        class="disabled"
+        </svg>
+      </button>
+    </div>
+    <div
+      class="pf-c-pagination__nav-control"
+    >
+      <button
+        aria-disabled="true"
+        aria-label="Go to previous page"
+        class="pf-c-button pf-m-plain pf-m-disabled"
+        data-action="previous"
+        data-ouia-component-id="OUIA-Generated-Button-plain-2"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        disabled=""
+        type="button"
       >
-        <a
-          href="#"
-          title="Previous Page"
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 256 512"
+          width="1em"
         >
-          <span
-            aria-hidden="true"
-            class="fa fa-angle-left i"
+          <path
+            d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
           />
-        </a>
-      </li>
-    </ul>
-    <label
-      class="sr-only control-label"
+        </svg>
+      </button>
+    </div>
+    <div
+      class="pf-c-pagination__nav-page-select"
     >
-      Current Page
-    </label>
-    <input
-      class="pagination-pf-page form-control"
-      type="text"
-      value="1"
-    />
-    <span>
-       of 
+      <input
+        aria-label="Current page"
+        class="pf-c-form-control"
+        max="20"
+        min="1"
+        type="number"
+        value="1"
+      />
       <span
-        class="pagination-pf-pages"
+        aria-hidden="true"
       >
-        20
+        of 20
       </span>
-    </span>
-    <ul
-      class="pagination pagination-pf-forward"
+    </div>
+    <div
+      class="pf-c-pagination__nav-control"
     >
-      <li
-        class=""
+      <button
+        aria-disabled="false"
+        aria-label="Go to next page"
+        class="pf-c-button pf-m-plain"
+        data-action="next"
+        data-ouia-component-id="OUIA-Generated-Button-plain-3"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <a
-          href="#"
-          title="Next Page"
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 256 512"
+          width="1em"
         >
-          <span
-            aria-hidden="true"
-            class="fa fa-angle-right i"
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
           />
-        </a>
-      </li>
-      <li
-        class=""
+        </svg>
+      </button>
+    </div>
+    <div
+      class="pf-c-pagination__nav-control pf-m-last"
+    >
+      <button
+        aria-disabled="false"
+        aria-label="Go to last page"
+        class="pf-c-button pf-m-plain"
+        data-action="last"
+        data-ouia-component-id="OUIA-Generated-Button-plain-4"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <a
-          href="#"
-          title="Last Page"
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 448 512"
+          width="1em"
         >
-          <span
-            aria-hidden="true"
-            class="fa fa-angle-double-right i"
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
           />
-        </a>
-      </li>
-    </ul>
-  </div>
-</form>
+        </svg>
+      </button>
+    </div>
+  </nav>
+</div>
 `;
diff --git a/src/components/viewPaginationRow/viewPaginationRow.js b/src/components/viewPaginationRow/viewPaginationRow.js
index 0d37aa7f..8622db68 100644
--- a/src/components/viewPaginationRow/viewPaginationRow.js
+++ b/src/components/viewPaginationRow/viewPaginationRow.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { PaginationRow, PAGINATION_VIEW } from 'patternfly-react';
+import { Pagination } from '@patternfly/react-core';
 import { reduxTypes, store } from '../../redux';
 
 class ViewPaginationRow extends React.Component {
@@ -45,43 +45,42 @@ class ViewPaginationRow extends React.Component {
     });
   };
 
-  onPerPageSelect = eventKey => {
+  onPerPageSelect = (_e, perPage) => {
     const { viewType } = this.props;
     store.dispatch({
       type: reduxTypes.viewPagination.SET_PER_PAGE,
       viewType,
-      pageSize: eventKey
+      pageSize: perPage
     });
   };
 
-  render() {
-    const perPageOptions = [10, 15, 25, 50, 100];
-    const { currentPage, pageSize, totalCount, totalPages } = this.props;
+  onSetPage = () => {
+    const { viewType } = this.props;
+    store.dispatch({
+      viewType
+    });
+  };
 
-    const rowPagination = {
-      page: currentPage,
-      perPage: pageSize,
-      perPageOptions
-    };
+  render() {
+    const { currentPage, pageSize, totalCount } = this.props;
 
     const itemsStart = (currentPage - 1) * pageSize + 1;
     const itemsEnd = Math.min(currentPage * pageSize, totalCount);
 
     return (
-      <PaginationRow
+      <Pagination
         className="list-view-pagination-top"
-        viewType={PAGINATION_VIEW.LIST}
-        pagination={rowPagination}
-        amountOfPages={totalPages}
-        pageSizeDropUp={false}
-        pageInputValue={currentPage}
+        perPageComponent="button"
+        perPage={pageSize}
+        page={currentPage}
+        onSetPage={this.onSetPage}
         itemCount={totalCount}
         itemsStart={itemsStart}
         itemsEnd={itemsEnd}
-        onFirstPage={this.onFirstPage}
-        onLastPage={this.onLastPage}
-        onPreviousPage={this.onPreviousPage}
-        onNextPage={this.onNextPage}
+        onFirstClick={this.onFirstPage}
+        onLastClick={this.onLastPage}
+        onPreviousClick={this.onPreviousPage}
+        onNextClick={this.onNextPage}
         onPageInput={this.onPageInput}
         onPerPageSelect={this.onPerPageSelect}
       />
@@ -93,16 +92,14 @@ ViewPaginationRow.propTypes = {
   viewType: PropTypes.string,
   currentPage: PropTypes.number,
   pageSize: PropTypes.number,
-  totalCount: PropTypes.number,
-  totalPages: PropTypes.number
+  totalCount: PropTypes.number
 };
 
 ViewPaginationRow.defaultProps = {
   viewType: null,
   currentPage: 0,
   pageSize: 0,
-  totalCount: 0,
-  totalPages: 0
+  totalCount: 0
 };
 
 export { ViewPaginationRow as default, ViewPaginationRow };
diff --git a/src/redux/reducers/__tests__/__snapshots__/viewOptionsReducer.test.js.snap b/src/redux/reducers/__tests__/__snapshots__/viewOptionsReducer.test.js.snap
index 0408ddd8..9d666547 100644
--- a/src/redux/reducers/__tests__/__snapshots__/viewOptionsReducer.test.js.snap
+++ b/src/redux/reducers/__tests__/__snapshots__/viewOptionsReducer.test.js.snap
@@ -9,7 +9,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -23,7 +23,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -37,7 +37,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -59,7 +59,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -73,7 +73,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -87,7 +87,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -109,7 +109,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -123,7 +123,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -137,7 +137,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -159,7 +159,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -173,7 +173,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -189,7 +189,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -211,7 +211,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -225,7 +225,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -239,7 +239,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -261,7 +261,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -275,7 +275,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -289,7 +289,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -311,7 +311,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -325,7 +325,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -339,7 +339,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -361,7 +361,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -375,7 +375,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -389,7 +389,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -411,7 +411,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -425,7 +425,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -439,7 +439,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [
         undefined,
       ],
@@ -463,7 +463,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -477,7 +477,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -491,7 +491,7 @@ Object {
       "expandedItems": Array [],
       "filterType": undefined,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -513,7 +513,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -527,7 +527,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -541,7 +541,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": undefined,
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -563,7 +563,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -577,7 +577,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -613,7 +613,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -627,7 +627,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -641,7 +641,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": undefined,
@@ -663,7 +663,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -677,7 +677,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -691,7 +691,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": false,
       "sortField": "name",
@@ -713,7 +713,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -727,7 +727,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -741,7 +741,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -763,7 +763,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -777,7 +777,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -791,7 +791,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -813,7 +813,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -827,7 +827,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -841,7 +841,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -863,7 +863,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -877,7 +877,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -891,7 +891,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -913,7 +913,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -927,7 +927,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
@@ -941,7 +941,7 @@ Object {
       "expandedItems": Array [],
       "filterType": null,
       "filterValue": "",
-      "pageSize": 15,
+      "pageSize": 10,
       "selectedItems": Array [],
       "sortAscending": true,
       "sortField": "name",
diff --git a/src/redux/reducers/viewOptionsReducer.js b/src/redux/reducers/viewOptionsReducer.js
index 70f0f426..78610a36 100644
--- a/src/redux/reducers/viewOptionsReducer.js
+++ b/src/redux/reducers/viewOptionsReducer.js
@@ -15,7 +15,7 @@ const initialState = {};
 
 const INITAL_VIEW_STATE = {
   currentPage: 1,
-  pageSize: 15,
+  pageSize: 10,
   totalCount: 0,
   totalPages: 0,
   filterType: null,
diff --git a/src/styles/app/_views.scss b/src/styles/app/_views.scss
index 95036ded..4315db26 100644
--- a/src/styles/app/_views.scss
+++ b/src/styles/app/_views.scss
@@ -54,6 +54,7 @@
 }
 
 .quipicords-list-view {
+  margin-top: 15px;
   .list-view-pf-actions {
     margin-left: 0;
     text-align: right;
@@ -175,6 +176,7 @@
 
 .list-view-pagination-top {
   padding: 0 14px;
+  margin-top: 15px;
 }
 
 .toolbar-pf-results .quipucords-view-count {
diff --git a/tests/__snapshots__/dist.test.js.snap b/tests/__snapshots__/dist.test.js.snap
index d493e3c4..760f3578 100644
--- a/tests/__snapshots__/dist.test.js.snap
+++ b/tests/__snapshots__/dist.test.js.snap
@@ -605,6 +605,10 @@ Array [
   "./dist/client/static/css/25*chunk.css",
   "./dist/client/static/css/26*chunk*map",
   "./dist/client/static/css/26*chunk.css",
+  "./dist/client/static/css/27*chunk*map",
+  "./dist/client/static/css/27*chunk.css",
+  "./dist/client/static/css/28*chunk*map",
+  "./dist/client/static/css/28*chunk.css",
   "./dist/client/static/css/3*chunk*map",
   "./dist/client/static/css/3*chunk.css",
   "./dist/client/static/css/4*chunk*map",
@@ -658,6 +662,10 @@ Array [
   "./dist/client/static/js/25*chunk.js",
   "./dist/client/static/js/26*chunk*map",
   "./dist/client/static/js/26*chunk.js",
+  "./dist/client/static/js/27*chunk*map",
+  "./dist/client/static/js/27*chunk.js",
+  "./dist/client/static/js/28*chunk*map",
+  "./dist/client/static/js/28*chunk.js",
   "./dist/client/static/js/3*chunk*map",
   "./dist/client/static/js/3*chunk.js",
   "./dist/client/static/js/4*chunk*map",