Fixes #34190 - consume pagination from core

theforeman · Jan 17, 2022 · b4ebc72 · b4ebc72
1 parent 21106bd
commit b4ebc72
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 139 deletions.
diff --git a/...ts/AnsibleHostDetail/components/AnsibleVariableOverrides/AnsibleVariableOverridesTable.js b/...ts/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/.../components/AnsibleRolesSwitcher/components/__snapshots__/AvailableRolesList.test.js.snap b/.../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
diff --git 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,13 +28,13 @@ 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],
 });
 
 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