From b4ebc729193b826a96a4befb26e750f07a9ada0d Mon Sep 17 00:00:00 2001
From: Amir Fefer <amirfefer@gmail.com>
Date: Tue, 21 Dec 2021 21:44:27 +0200
Subject: [PATCH] Fixes #34190 - consume pagination from core

---
 .../AnsibleVariableOverridesTable.js          | 32 ++--------------
 .../components/JobsTab/PreviousJobsTable.js   | 29 ++------------
 .../RolesTab/AllRolesModal/AllRolesTable.js   | 38 ++-----------------
 .../RolesTab/AllRolesModal/index.js           |  2 +-
 .../components/RolesTab/RolesTable.js         | 30 ++-------------
 .../AnsibleRolesAndVariables.js               |  3 +-
 .../components/AvailableRolesList.js          |  4 +-
 .../AvailableRolesList.test.js.snap           | 15 +++++---
 webpack/components/withPagination.js          |  0
 webpack/helpers/pageParamsHelper.js           |  6 +--
 webpack/helpers/paginationHelper.js           |  9 -----
 11 files changed, 29 insertions(+), 139 deletions(-)
 delete mode 100644 webpack/components/withPagination.js
 delete mode 100644 webpack/helpers/paginationHelper.js

diff --git a/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/AnsibleVariableOverridesTable.js b/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/AnsibleVariableOverridesTable.js
index c0242531d..ed6be68a1 100644
--- a/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/AnsibleVariableOverridesTable.js
+++ b/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/AnsibleVariableOverridesTable.js
@@ -4,7 +4,6 @@ import { useDispatch } from 'react-redux';
 import { useMutation } from '@apollo/client';
 
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
-import { usePaginationOptions } from 'foremanReact/components/Pagination/PaginationHooks';
 import { openConfirmModal } from 'foremanReact/components/ConfirmModal';
 import {
   TableComposable,
@@ -14,8 +13,9 @@ import {
   Th,
   Td,
 } from '@patternfly/react-table';
-import { Flex, FlexItem, Pagination } from '@patternfly/react-core';
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+import Pagination from 'foremanReact/components/Pagination';
 import deleteAnsibleVariableOverride from '../../../../graphql/mutations/deleteAnsibleVariableOverride.gql';
 import EditableAction from './EditableAction';
 import EditableValue from './EditableValue';
@@ -29,10 +29,6 @@ import {
 } from './AnsibleVariableOverridesTableHelper';
 
 import withLoading from '../../../withLoading';
-import {
-  preparePerPageOptions,
-  refreshPage,
-} from '../../../../helpers/paginationHelper';
 
 const reducer = (state, action) =>
   state.map((item, index) => {
@@ -58,8 +54,6 @@ const AnsibleVariableOverridesTable = ({
   hostId,
   hostGlobalId,
   totalCount,
-  pagination,
-  history,
 }) => {
   const columns = [
     __('Name'),
@@ -69,16 +63,6 @@ const AnsibleVariableOverridesTable = ({
     __('Source attribute'),
   ];
 
-  const handlePerPageSelected = (event, perPage) => {
-    refreshPage(history, { page: 1, perPage });
-  };
-
-  const handlePageSelected = (event, page) => {
-    refreshPage(history, { ...pagination, page });
-  };
-
-  const perPageOptions = preparePerPageOptions(usePaginationOptions());
-
   const [editableState, innerDispatch] = useReducer(
     reducer,
     variables,
@@ -164,15 +148,7 @@ const AnsibleVariableOverridesTable = ({
     <React.Fragment>
       <Flex>
         <FlexItem align={{ default: 'alignRight' }}>
-          <Pagination
-            itemCount={totalCount}
-            page={pagination.page}
-            perPage={pagination.perPage}
-            onSetPage={handlePageSelected}
-            onPerPageSelect={handlePerPageSelected}
-            perPageOptions={perPageOptions}
-            variant="top"
-          />
+          <Pagination updateParamsByUrl itemCount={totalCount} variant="top" />
         </FlexItem>
       </Flex>
       <TableComposable variant="compact">
@@ -231,8 +207,6 @@ AnsibleVariableOverridesTable.propTypes = {
   hostId: PropTypes.number.isRequired,
   hostGlobalId: PropTypes.string.isRequired,
   totalCount: PropTypes.number.isRequired,
-  pagination: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired,
 };
 
 export default withLoading(AnsibleVariableOverridesTable);
diff --git a/webpack/components/AnsibleHostDetail/components/JobsTab/PreviousJobsTable.js b/webpack/components/AnsibleHostDetail/components/JobsTab/PreviousJobsTable.js
index 7a2cd5f50..88408c22d 100644
--- a/webpack/components/AnsibleHostDetail/components/JobsTab/PreviousJobsTable.js
+++ b/webpack/components/AnsibleHostDetail/components/JobsTab/PreviousJobsTable.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { usePaginationOptions } from 'foremanReact/components/Pagination/PaginationHooks';
-
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
 
 import {
@@ -13,14 +11,11 @@ import {
   Th,
   Td,
 } from '@patternfly/react-table';
-import { Flex, FlexItem, Pagination } from '@patternfly/react-core';
+import { Flex, FlexItem } from '@patternfly/react-core';
+import Pagination from 'foremanReact/components/Pagination';
 
 import { decodeId } from '../../../../globalIdHelper';
 import withLoading from '../../../withLoading';
-import {
-  preparePerPageOptions,
-  refreshPage,
-} from '../../../../helpers/paginationHelper';
 
 const PreviousJobsTable = ({ history, totalCount, jobs, pagination }) => {
   const columns = [
@@ -31,30 +26,12 @@ const PreviousJobsTable = ({ history, totalCount, jobs, pagination }) => {
     __('Schedule'),
   ];
 
-  const handlePerPageSelected = (event, perPage) => {
-    refreshPage(history, { page: 1, perPage });
-  };
-
-  const handlePageSelected = (event, page) => {
-    refreshPage(history, { ...pagination, page });
-  };
-
-  const perPageOptions = preparePerPageOptions(usePaginationOptions());
-
   return (
     <React.Fragment>
       <h3>{__('Previously executed jobs')}</h3>
       <Flex className="pf-u-pt-md">
         <FlexItem align={{ default: 'alignRight' }}>
-          <Pagination
-            itemCount={totalCount}
-            page={pagination.page}
-            perPage={pagination.perPage}
-            onSetPage={handlePageSelected}
-            onPerPageSelect={handlePerPageSelected}
-            perPageOptions={perPageOptions}
-            variant="top"
-          />
+          <Pagination updateParamsByUrl itemCount={totalCount} variant="top" />
         </FlexItem>
       </Flex>
       <TableComposable variant="compact">
diff --git a/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/AllRolesTable.js b/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/AllRolesTable.js
index 0dc6278da..0f371adce 100644
--- a/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/AllRolesTable.js
+++ b/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/AllRolesTable.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { usePaginationOptions } from 'foremanReact/components/Pagination/PaginationHooks';
 
 import {
   TableComposable,
@@ -11,45 +10,18 @@ import {
   Th,
   Td,
 } from '@patternfly/react-table';
-
-import { Flex, FlexItem, Pagination } from '@patternfly/react-core';
+import { Flex, FlexItem } from '@patternfly/react-core';
+import Pagination from 'foremanReact/components/Pagination';
 import withLoading from '../../../../withLoading';
-import {
-  preparePerPageOptions,
-  refreshPage,
-} from '../../../../../helpers/paginationHelper';
 
-const AllRolesTable = ({
-  allAnsibleRoles,
-  totalCount,
-  pagination,
-  history,
-}) => {
+const AllRolesTable = ({ allAnsibleRoles, totalCount }) => {
   const columns = [__('Name'), __('Source')];
 
-  const handlePerPageSelected = (event, allPerPage) => {
-    refreshPage(history, { allPage: 1, allPerPage });
-  };
-
-  const handlePageSelected = (event, allPage) => {
-    refreshPage(history, { ...pagination, allPage });
-  };
-
-  const perPageOptions = preparePerPageOptions(usePaginationOptions());
-
   return (
     <React.Fragment>
       <Flex className="pf-u-pt-md">
         <FlexItem align={{ default: 'alignRight' }}>
-          <Pagination
-            itemCount={totalCount}
-            page={pagination.allPage}
-            perPage={pagination.allPerPage}
-            onSetPage={handlePageSelected}
-            onPerPageSelect={handlePerPageSelected}
-            perPageOptions={perPageOptions}
-            variant="top"
-          />
+          <Pagination updateParamsByUrl itemCount={totalCount} variant="top" />
         </FlexItem>
       </Flex>
       <TableComposable variant="compact">
@@ -82,8 +54,6 @@ const AllRolesTable = ({
 AllRolesTable.propTypes = {
   allAnsibleRoles: PropTypes.array.isRequired,
   totalCount: PropTypes.number.isRequired,
-  pagination: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired,
 };
 
 export default withLoading(AllRolesTable);
diff --git a/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/index.js b/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/index.js
index a4d4f6505..2bca56a38 100644
--- a/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/index.js
+++ b/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/index.js
@@ -23,7 +23,7 @@ const AllRolesModal = ({ hostGlobalId, onClose, history }) => {
     disableFocusTrap: true,
   };
 
-  const paginationKeys = { page: 'allPage', perPage: 'allPerPage' };
+  const paginationKeys = { page: 'page', perPage: 'per_page' };
 
   const actions = [
     <Button variant="link" onClick={onClose} key="close">
diff --git a/webpack/components/AnsibleHostDetail/components/RolesTab/RolesTable.js b/webpack/components/AnsibleHostDetail/components/RolesTab/RolesTable.js
index 21928216a..260b2972c 100644
--- a/webpack/components/AnsibleHostDetail/components/RolesTab/RolesTable.js
+++ b/webpack/components/AnsibleHostDetail/components/RolesTab/RolesTable.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { Route, Link } from 'react-router-dom';
-import { usePaginationOptions } from 'foremanReact/components/Pagination/PaginationHooks';
+import Pagination from 'foremanReact/components/Pagination';
 
 import {
   TableComposable,
@@ -12,20 +12,15 @@ import {
   Th,
   Td,
 } from '@patternfly/react-table';
-import { Flex, FlexItem, Button, Pagination } from '@patternfly/react-core';
+import { Flex, FlexItem, Button } from '@patternfly/react-core';
 
 import EditRolesModal from './EditRolesModal';
 
 import withLoading from '../../../withLoading';
 import AllRolesModal from './AllRolesModal';
-import {
-  preparePerPageOptions,
-  refreshPage,
-} from '../../../../helpers/paginationHelper';
 
 const RolesTable = ({
   totalCount,
-  pagination,
   history,
   ansibleRoles,
   hostId,
@@ -34,16 +29,6 @@ const RolesTable = ({
 }) => {
   const columns = [__('Name')];
 
-  const handlePerPageSelected = (event, perPage) => {
-    refreshPage(history, { page: 1, perPage });
-  };
-
-  const handlePageSelected = (event, page) => {
-    refreshPage(history, { ...pagination, page });
-  };
-
-  const perPageOptions = preparePerPageOptions(usePaginationOptions());
-
   const editBtn = canEditHost ? (
     <FlexItem>
       <Link to="/Ansible/roles/edit">
@@ -68,15 +53,7 @@ const RolesTable = ({
       <Flex>
         <FlexItem>{editBtn}</FlexItem>
         <FlexItem align={{ default: 'alignRight' }}>
-          <Pagination
-            itemCount={totalCount}
-            page={pagination.page}
-            perPage={pagination.perPage}
-            onSetPage={handlePageSelected}
-            onPerPageSelect={handlePerPageSelected}
-            perPageOptions={perPageOptions}
-            variant="top"
-          />
+          <Pagination updateParamsByUrl itemCount={totalCount} variant="top" />
         </FlexItem>
       </Flex>
       <TableComposable variant="compact">
@@ -121,7 +98,6 @@ RolesTable.propTypes = {
   hostId: PropTypes.number.isRequired,
   hostGlobalId: PropTypes.string.isRequired,
   history: PropTypes.object.isRequired,
-  pagination: PropTypes.object.isRequired,
   totalCount: PropTypes.number.isRequired,
   canEditHost: PropTypes.bool.isRequired,
 };
diff --git a/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariables.js b/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariables.js
index a70e931e5..495fef2b7 100644
--- a/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariables.js
+++ b/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariables.js
@@ -12,9 +12,8 @@ import {
   ToolbarContent,
   ToolbarItem,
   Checkbox,
-  Pagination,
 } from '@patternfly/react-core';
-
+import Pagination from 'foremanReact/components/Pagination';
 import PropTypes from 'prop-types';
 import { DEFAULT_PER_PAGE } from './AnsibleRolesAndVariablesConstants';
 import './AnsibleRolesAndVariables.scss';
diff --git a/webpack/components/AnsibleRolesSwitcher/components/AvailableRolesList.js b/webpack/components/AnsibleRolesSwitcher/components/AvailableRolesList.js
index a58f38394..3d8f24941 100644
--- a/webpack/components/AnsibleRolesSwitcher/components/AvailableRolesList.js
+++ b/webpack/components/AnsibleRolesSwitcher/components/AvailableRolesList.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { ListView, LoadingState } from 'patternfly-react';
-import PaginationWrapper from 'foremanReact/components/Pagination/PaginationWrapper';
+import Pagination from 'foremanReact/components/Pagination';
 
 import AnsibleRole from './AnsibleRole';
 
@@ -16,7 +16,7 @@ const AvailableRolesList = ({
 }) => (
   <ListView>
     <div className="sticky-pagination">
-      <PaginationWrapper
+      <Pagination
         viewType="list"
         itemCount={itemCount}
         pagination={pagination}
diff --git a/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AvailableRolesList.test.js.snap b/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AvailableRolesList.test.js.snap
index c16293108..51ab887eb 100644
--- a/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AvailableRolesList.test.js.snap
+++ b/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AvailableRolesList.test.js.snap
@@ -7,21 +7,24 @@ exports[`AvailableRolesList should render 1`] = `
   <div
     className="sticky-pagination"
   >
-    <PaginationWrapper
-      className=""
-      disableNext={false}
-      disablePrev={false}
+    <Pagination
+      className={null}
       dropdownButtonId="available-ansible-roles-pagination-row-dropdown"
       itemCount={2}
+      noSidePadding={false}
       onChange={[Function]}
-      onPageSet={[Function]}
-      onPerPageSelect={[Function]}
+      onPerPageSelect={null}
+      onSetPage={null}
+      page={1}
       pagination={
         Object {
           "page": 1,
           "perPage": 25,
         }
       }
+      perPage={null}
+      updateParamsByUrl={true}
+      variant="bottom"
       viewType="list"
     />
   </div>
diff --git a/webpack/components/withPagination.js b/webpack/components/withPagination.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/webpack/helpers/pageParamsHelper.js b/webpack/helpers/pageParamsHelper.js
index 82efa7b0e..c770dd945 100644
--- a/webpack/helpers/pageParamsHelper.js
+++ b/webpack/helpers/pageParamsHelper.js
@@ -14,7 +14,7 @@ export const addSearch = (basePath, params) => {
 
 export const useCurrentPagination = (
   history,
-  keys = { page: 'page', perPage: 'perPage' }
+  keys = { page: 'page', perPage: 'per_page' }
 ) => {
   const pageParams = parsePageParams(history);
   const uiSettings = useForemanSettings();
@@ -28,7 +28,7 @@ export const useCurrentPagination = (
 
 export const pageToVars = (
   pagination,
-  keys = { page: 'page', perPage: 'perPage' }
+  keys = { page: 'page', perPage: 'per_page' }
 ) => ({
   first: pagination[keys.page] * pagination[keys.perPage],
   last: pagination[keys.perPage],
@@ -36,5 +36,5 @@ export const pageToVars = (
 
 export const useParamsToVars = (
   history,
-  keys = { page: 'page', perPage: 'perPage' }
+  keys = { page: 'page', perPage: 'per_page' }
 ) => pageToVars(useCurrentPagination(history, keys), keys);
diff --git a/webpack/helpers/paginationHelper.js b/webpack/helpers/paginationHelper.js
deleted file mode 100644
index 9596d92fc..000000000
--- a/webpack/helpers/paginationHelper.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { addSearch } from './pageParamsHelper';
-
-export const preparePerPageOptions = opts =>
-  opts.map(item => ({ title: item.toString(), value: item }));
-
-export const refreshPage = (history, params = {}) => {
-  const url = addSearch(history.location.pathname, params);
-  history.push(url);
-};