refactor(pagination): parent 37b3c1c

author CD Cabrera <ccabrera@redhat.com> 1654528943 -0400
committer jenny-s51 <jshandel@redhat.com> 1659366125 -0400

fix(build): base dep package updates (quipucords#80)

* build, base deps for dev functionality
* build, stage, review, use pre-built image
* testing, dist test, lint updates
* styling, flip to sass, remove legacy css

chore(build): node, workflow, docs, and tooling refs (quipucords#80)

fix(build): npm updates (quipucords#80)

fix(build): update react (quipucords#80)

* build, update react 17, pf deps
* testing, snapshots, console check

fix(i18n): component loading (quipucords#80)

chore(build): github badge, remove travis (quipucords#81)

chore(build): post clean up, remove unused css copy (quipucords#84)

fix(build): npm updates (quipucords#83)

refactor(services): discovery-8 minor config restructure (quipucords#82)

* service config, allow opts, fallback xhr timeout
* api calls, config wrapper function, named imports

refactor(redux): discovery-8 middleware, hooks, restructure (quipucords#82)

* helpers, aggregatedError func for redux hooks
* redux actions, named exports
* redux hooks, useReactRedux
* redux middleware, middleware export, multi-actions
* store, move middleware, named export

fix(build): npm update, redux middleware (quipucords#82)

fix(build): discovery-8 allow repo locale files (quipucords#85)

* docs, merge repo locale with docs locale files
* helpers, expand noopTranslate, annotations
* i18n, snapshot translate uses
* i18nHelpers, translate helper, expand testing
* testing, hook testing funcs

fix(build): allow running review, stage parallel (quipucords#86)

* build, parallel images, container names, domains
* build, npm script, docker stop

feat(pf4-style): discovery-8 pf4 base css, scss (quipucords#86)

* build, pf4 npm updates
* style, move base css files to index.scss
* style, apply core pf4, overrides.scss

fix(style): discovery-8 css, scss vars for color (quipucords#86)

fix(testing): use i18n unit, remove integration check (quipucords#87)

fix(helpers): discovery-8 consistent brand, getCurrentDate (quipucords#87)

refactor(aboutModal): discovery-148 pf4 conversion (quipucords#87)

* aboutModal, pf4 component conversion
* locales, about modal strings

chore(build): do not start with stored data, db volumes (quipucords#107)

chore(build): activate eslint jsdoc (quipucords#110)

fix(pf4-style): expose scss variables (quipucords#110)

feat(modal): discovery-148 pf4 modal wrapper (quipucords#110)

* locales, modal default string
* modal, consistent pf4 wrapper, allow backdrop disable

refactor(modal): discovery-148 pf4 modal wrapper (quipucords#88)

* locale, button strings for modals
* authentication, apply pf4 modal
* confirmationModal, refactor using pf4 modal
* createCredentialDialog, pf4 modal, buttons
* createScanDialog, pf4 modal, buttons
* credentials, pf4 modal
* mergeReportsDialog, pf modal, buttons
* scans, pf4 modal
* sources, pf4 modal

refactor(createCredentialDialog): discovery-148 pf4 alert(quipucords#108)

refactor(authentication): discovery-148 pf4 alert, locale (quipucords#112)

fix(confirmationModal): expand behavior, allow children (quipucords#113)

refactor(authentication): discovery-148 replace empty-state (quipucords#113)

refactor(credentials): discovery-148 pf4 empty-state (quipucords#116)

* locale, align empty-state strings
* authentication, align with credentials
* credentials, credentialsEmptyState, pf4 empty-state

refactor(refreshTimeButton): discovery-149 pf4 button, icon (quipucords#114)

refactor(scans): discovery-148 pf4 empty-state (quipucords#117)

* locale, align empty-state strings
* scans, jobsList, sourceList, pf4 empty-state

fix(build): base dep package updates (quipucords#80)

* build, base deps for dev functionality
* build, stage, review, use pre-built image
* testing, dist test, lint updates
* styling, flip to sass, remove legacy css

chore(build): node, workflow, docs, and tooling refs (quipucords#80)

fix(build): npm updates (quipucords#80)

fix(build): update react (quipucords#80)

* build, update react 17, pf deps
* testing, snapshots, console check

fix(i18n): component loading (quipucords#80)

chore(build): github badge, remove travis (quipucords#81)

chore(build): post clean up, remove unused css copy (quipucords#84)

fix(build): npm updates (quipucords#83)

fix(build): npm update, redux middleware (quipucords#82)

fix(build): discovery-8 allow repo locale files (quipucords#85)

* docs, merge repo locale with docs locale files
* helpers, expand noopTranslate, annotations
* i18n, snapshot translate uses
* i18nHelpers, translate helper, expand testing
* testing, hook testing funcs

fix(build): allow running review, stage parallel (quipucords#86)

* build, parallel images, container names, domains
* build, npm script, docker stop

feat(pf4-style): discovery-8 pf4 base css, scss (quipucords#86)

* build, pf4 npm updates
* style, move base css files to index.scss
* style, apply core pf4, overrides.scss

fix(style): discovery-8 css, scss vars for color (quipucords#86)

fix(testing): use i18n unit, remove integration check (quipucords#87)

fix(helpers): discovery-8 consistent brand, getCurrentDate (quipucords#87)

refactor(aboutModal): discovery-148 pf4 conversion (quipucords#87)

* aboutModal, pf4 component conversion
* locales, about modal strings

chore(build): do not start with stored data, db volumes (quipucords#107)

chore(build): activate eslint jsdoc (quipucords#110)

fix(pf4-style): expose scss variables (quipucords#110)

feat(modal): discovery-148 pf4 modal wrapper (quipucords#110)

* locales, modal default string
* modal, consistent pf4 wrapper, allow backdrop disable

refactor(modal): discovery-148 pf4 modal wrapper (quipucords#88)

* locale, button strings for modals
* authentication, apply pf4 modal
* confirmationModal, refactor using pf4 modal
* createCredentialDialog, pf4 modal, buttons
* createScanDialog, pf4 modal, buttons
* credentials, pf4 modal
* mergeReportsDialog, pf modal, buttons
* scans, pf4 modal
* sources, pf4 modal

refactor(createCredentialDialog): discovery-148 pf4 alert(quipucords#108)

fix(confirmationModal): expand behavior, allow children (quipucords#113)

refactor(authentication): discovery-148 replace empty-state (quipucords#113)

refactor(credentials): discovery-148 pf4 empty-state (quipucords#116)

* locale, align empty-state strings
* authentication, align with credentials
* credentials, credentialsEmptyState, pf4 empty-state

refactor(scans): discovery-148 pf4 empty-state (quipucords#117)

* locale, align empty-state strings
* scans, jobsList, sourceList, pf4 empty-state

refactor(toastNotificationsList): discovery-148, pf4 alert (quipucords#115)

* build, dotenv toast timeout
* components, adjust alertType to alert variant
* helpers, expose toast timeout
* toastNotificationsList, pf4 alert, alertGroup
* toastNotificationsReducer, adjust pause, resume

fix(testing): expand toastNotificationsList snapshots (quipucords#115)

refactor(sources): discovery-148 pf4 empty-state (quipucords#120)

* locale, add empty-state strings
* sources, pf4 empty-state

refactor(creds,sources,scans): discovery-149 emptyState grid (quipucords#121)

* credentials, sources, scansEmptyState, remove grid

fix(i18n): discovery-8 partial context into keys (quipucords#124)

feat(wizard): discovery-153 pf4 wizard wrapper (quipucords#124)

* confirmationModal, pass isContentOnly
* modal, add isContentOnly, removes padding
* wizard, consistent pf4 wrapper, allow modal sizing

refactor(addSourceWizard): discovery-153, pf4 wizard (quipucords#124)

* locale, wizard form strings
* addSourceWizard, Constants, restructure steps
* addSourceWizardStepThree, add empty-state
* styling, restructure pf3 styling wizard form

refactor(scanHostList): discovery-148, pf4 empty-state (quipucords#125)

refactor(pagination): wip

refactor(pagination): use PF4 component

refactor(pagination): update snapshots

refactor(pagination): update test

refactor(pagination): update test

refactor(creds,sources,scans): discovery-149 pf4 grid, list (quipucords#126)

* credentialsListItem, grid to list, tooltip
* credentials, removed grid
* scanHostList, grid to list
* scanSourceList nested list with icon
* sourceCredentialsList, list with icon

refactor(dropdownSelect): discovery-152 pf4 select, dropdown (quipucords#127)

* addSourceWizardStepTwo, options, pf4 select list
* createCredentialDialog, pf4 select list
* dropdownSelect, use Curiosity pf4 select wrapper
* locale, option strings

refactor(dropdownSelect): discovery-152 pf4 dropdown (quipucords#130)

feat(addCredentialType): discovery-152 button selector (quipucords#130)

refactor(credentials): discovery-152, pf4 dropdown (quipucords#130)

* credentials, pf4 button, addCredentialType
* credentialsEmptyState, addCredentialType
* locale, cred strings

src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap

@@ -104,7 +104,6 @@ exports[`Authentication Component should render a non-connected component pendin
   disableFocusTrap={true}
   footer={null}
   header={null}
-  isContentOnly={false}
   isOpen={true}
   position="top"
   positionOffset="5%"

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

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

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>
 `;