Move page size select to the Paginator component (#5064)

getredash · Jul 27, 2020 · f3a47a9 · f3a47a9
1 parent 7804dfd
commit f3a47a9
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 92 deletions.
diff --git a/client/app/components/Paginator.jsx b/client/app/components/Paginator.jsx
@@ -2,24 +2,38 @@ import React from "react";
 import PropTypes from "prop-types";
 import Pagination from "antd/lib/pagination";
 
-export default function Paginator({ page, itemsPerPage, totalCount, onChange }) {
-  if (totalCount <= itemsPerPage) {
+const MIN_ITEMS_PER_PAGE = 5;
+
+export default function Paginator({ page, showPageSizeSelect, pageSize, onPageSizeChange, totalCount, onChange }) {
+  if (totalCount <= (showPageSizeSelect ? MIN_ITEMS_PER_PAGE : pageSize)) {
     return null;
   }
   return (
     <div className="paginator-container">
-      <Pagination defaultCurrent={page} defaultPageSize={itemsPerPage} total={totalCount} onChange={onChange} />
+      <Pagination
+        showSizeChanger={showPageSizeSelect}
+        pageSizeOptions={["5", "10", "20", "50", "100"]}
+        onShowSizeChange={(_, size) => onPageSizeChange(size)}
+        defaultCurrent={page}
+        pageSize={pageSize}
+        total={totalCount}
+        onChange={onChange}
+      />
     </div>
   );
 }
 
 Paginator.propTypes = {
   page: PropTypes.number.isRequired,
-  itemsPerPage: PropTypes.number.isRequired,
+  showPageSizeSelect: PropTypes.bool,
+  pageSize: PropTypes.number.isRequired,
   totalCount: PropTypes.number.isRequired,
+  onPageSizeChange: PropTypes.func,
   onChange: PropTypes.func,
 };
 
 Paginator.defaultProps = {
+  showPageSizeSelect: false,
   onChange: () => {},
+  onPageSizeChange: () => {},
 };
diff --git a/client/app/components/groups/DetailsPageSidebar.jsx b/client/app/components/groups/DetailsPageSidebar.jsx
@@ -24,12 +24,6 @@ export default function DetailsPageSidebar({
   return (
     <React.Fragment>
       <Sidebar.Menu items={items} selected={controller.params.currentPage} />
-      <Sidebar.PageSizeSelect
-        className="m-b-10"
-        options={controller.pageSizeOptions}
-        value={controller.itemsPerPage}
-        onChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
-      />
       {canAddMembers && (
         <Button className="w-100 m-t-5" type="primary" onClick={onAddMembersClick}>
           <i className="fa fa-plus m-r-5" />

diff --git a/client/app/components/items-list/components/Sidebar.jsx b/client/app/components/items-list/components/Sidebar.jsx
@@ -3,7 +3,6 @@ import React, { useState, useCallback, useEffect } from "react";
 import PropTypes from "prop-types";
 import Input from "antd/lib/input";
 import AntdMenu from "antd/lib/menu";
-import Select from "antd/lib/select";
 import TagsList from "@/components/TagsList";
 
 /*
@@ -147,27 +146,3 @@ Tags.propTypes = {
   url: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
 };
-
-/*
-    PageSizeSelect
- */
-
-export function PageSizeSelect({ options, value, onChange, ...props }) {
-  return (
-    <div {...props}>
-      <Select className="w-100" defaultValue={value} onChange={onChange}>
-        {map(options, option => (
-          <Select.Option key={option} value={option}>
-            {option} results
-          </Select.Option>
-        ))}
-      </Select>
-    </div>
-  );
-}
-
-PageSizeSelect.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.number).isRequired,
-  value: PropTypes.number.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
diff --git a/client/app/pages/admin/OutdatedQueries.jsx b/client/app/pages/admin/OutdatedQueries.jsx
@@ -2,7 +2,6 @@ import { map } from "lodash";
 import React from "react";
 
 import Switch from "antd/lib/switch";
-import * as Grid from "antd/lib/grid";
 import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
 import Paginator from "@/components/Paginator";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
@@ -15,7 +14,6 @@ import { ItemsSource } from "@/components/items-list/classes/ItemsSource";
 import { StateStorage } from "@/components/items-list/classes/StateStorage";
 
 import LoadingState from "@/components/items-list/components/LoadingState";
-import { PageSizeSelect } from "@/components/items-list/components/Sidebar";
 import ItemsTable, { Columns } from "@/components/items-list/components/ItemsTable";
 
 import { axios } from "@/services/axios";
@@ -92,35 +90,24 @@ class OutdatedQueries extends React.Component {
     const { controller } = this.props;
     return (
       <Layout activeTab={controller.params.currentPage}>
-        <Grid.Row className="m-15">
-          <Grid.Col span={16}>
-            <div>
-              <label htmlFor="auto-update-switch" className="m-0">
-                Auto update
-              </label>
-              <Switch
-                id="auto-update-switch"
-                className="m-l-10"
-                checked={this.state.autoUpdate}
-                onChange={autoUpdate => this.setState({ autoUpdate })}
-              />
+        <div className="m-15">
+          <div>
+            <label htmlFor="auto-update-switch" className="m-0">
+              Auto update
+            </label>
+            <Switch
+              id="auto-update-switch"
+              className="m-l-10"
+              checked={this.state.autoUpdate}
+              onChange={autoUpdate => this.setState({ autoUpdate })}
+            />
+          </div>
+          {controller.params.lastUpdatedAt && (
+            <div className="m-t-5">
+              Last updated: <TimeAgo date={controller.params.lastUpdatedAt * 1000} />
             </div>
-            {controller.params.lastUpdatedAt && (
-              <div className="m-t-5">
-                Last updated: <TimeAgo date={controller.params.lastUpdatedAt * 1000} />
-              </div>
-            )}
-          </Grid.Col>
-          <Grid.Col span={8}>
-            {controller.isLoaded && !controller.isEmpty && (
-              <PageSizeSelect
-                options={controller.pageSizeOptions}
-                value={controller.itemsPerPage}
-                onChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
-              />
-            )}
-          </Grid.Col>
-        </Grid.Row>
+          )}
+        </div>
         {!controller.isLoaded && <LoadingState />}
         {controller.isLoaded && controller.isEmpty && (
           <div className="text-center p-15">There are no outdated queries.</div>
@@ -135,8 +122,10 @@ class OutdatedQueries extends React.Component {
               toggleSorting={controller.toggleSorting}
             />
             <Paginator
+              showPageSizeSelect
               totalCount={controller.totalItemsCount}
-              itemsPerPage={controller.itemsPerPage}
+              pageSize={controller.itemsPerPage}
+              onPageSizeChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
               page={controller.page}
               onChange={page => controller.updatePagination({ page })}
             />

diff --git a/client/app/pages/alerts/AlertsList.jsx b/client/app/pages/alerts/AlertsList.jsx
@@ -104,8 +104,10 @@ class AlertsList extends React.Component {
                   toggleSorting={controller.toggleSorting}
                 />
                 <Paginator
+                  showPageSizeSelect
                   totalCount={controller.totalItemsCount}
-                  itemsPerPage={controller.itemsPerPage}
+                  pageSize={controller.itemsPerPage}
+                  onPageSizeChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
                   page={controller.page}
                   onChange={page => controller.updatePagination({ page })}
                 />

diff --git a/client/app/pages/dashboards/DashboardList.jsx b/client/app/pages/dashboards/DashboardList.jsx
@@ -97,12 +97,6 @@ class DashboardList extends React.Component {
               />
               <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
               <Sidebar.Tags url="api/dashboards/tags" onChange={controller.updateSelectedTags} />
-              <Sidebar.PageSizeSelect
-                className="m-b-10"
-                options={controller.pageSizeOptions}
-                value={controller.itemsPerPage}
-                onChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
-              />
             </Layout.Sidebar>
             <Layout.Content>
               {controller.isLoaded ? (
@@ -123,8 +117,10 @@ class DashboardList extends React.Component {
                         toggleSorting={controller.toggleSorting}
                       />
                       <Paginator
+                        showPageSizeSelect
                         totalCount={controller.totalItemsCount}
-                        itemsPerPage={controller.itemsPerPage}
+                        pageSize={controller.itemsPerPage}
+                        onPageSizeChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
                         page={controller.page}
                         onChange={page => controller.updatePagination({ page })}
                       />

diff --git a/client/app/pages/groups/GroupDataSources.jsx b/client/app/pages/groups/GroupDataSources.jsx
@@ -210,8 +210,10 @@ class GroupDataSources extends React.Component {
                   toggleSorting={controller.toggleSorting}
                 />
                 <Paginator
+                  showPageSizeSelect
                   totalCount={controller.totalItemsCount}
-                  itemsPerPage={controller.itemsPerPage}
+                  pageSize={controller.itemsPerPage}
+                  onPageSizeChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
                   page={controller.page}
                   onChange={page => controller.updatePagination({ page })}
                 />

diff --git a/client/app/pages/groups/GroupMembers.jsx b/client/app/pages/groups/GroupMembers.jsx
@@ -173,8 +173,10 @@ class GroupMembers extends React.Component {
                   toggleSorting={controller.toggleSorting}
                 />
                 <Paginator
+                  showPageSizeSelect
                   totalCount={controller.totalItemsCount}
-                  itemsPerPage={controller.itemsPerPage}
+                  pageSize={controller.itemsPerPage}
+                  onPageSizeChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
                   page={controller.page}
                   onChange={page => controller.updatePagination({ page })}
                 />

diff --git a/client/app/pages/groups/GroupsList.jsx b/client/app/pages/groups/GroupsList.jsx
@@ -112,8 +112,10 @@ class GroupsList extends React.Component {
               toggleSorting={controller.toggleSorting}
             />
             <Paginator
+              showPageSizeSelect
               totalCount={controller.totalItemsCount}
-              itemsPerPage={controller.itemsPerPage}
+              pageSize={controller.itemsPerPage}
+              onPageSizeChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
               page={controller.page}
               onChange={page => controller.updatePagination({ page })}
             />

diff --git a/client/app/pages/queries-list/QueriesList.jsx b/client/app/pages/queries-list/QueriesList.jsx
@@ -130,12 +130,6 @@ class QueriesList extends React.Component {
               />
               <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
               <Sidebar.Tags url="api/queries/tags" onChange={controller.updateSelectedTags} />
-              <Sidebar.PageSizeSelect
-                className="m-b-10"
-                options={controller.pageSizeOptions}
-                value={controller.itemsPerPage}
-                onChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
-              />
             </Layout.Sidebar>
             <Layout.Content>
               {!controller.isLoaded && <LoadingState />}
@@ -156,8 +150,10 @@ class QueriesList extends React.Component {
                     toggleSorting={controller.toggleSorting}
                   />
                   <Paginator
+                    showPageSizeSelect
                     totalCount={controller.totalItemsCount}
-                    itemsPerPage={controller.itemsPerPage}
+                    pageSize={controller.itemsPerPage}
+                    onPageSizeChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
                     page={controller.page}
                     onChange={page => controller.updatePagination({ page })}
                   />

diff --git a/client/app/pages/query-snippets/QuerySnippetsList.jsx b/client/app/pages/query-snippets/QuerySnippetsList.jsx
@@ -177,8 +177,10 @@ class QuerySnippetsList extends React.Component {
               toggleSorting={controller.toggleSorting}
             />
             <Paginator
+              showPageSizeSelect
               totalCount={controller.totalItemsCount}
-              itemsPerPage={controller.itemsPerPage}
+              pageSize={controller.itemsPerPage}
+              onPageSizeChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
               page={controller.page}
               onChange={page => controller.updatePagination({ page })}
             />

diff --git a/client/app/pages/users/UsersList.jsx b/client/app/pages/users/UsersList.jsx
@@ -213,12 +213,6 @@ class UsersList extends React.Component {
           <Layout.Sidebar className="m-b-0">
             <Sidebar.SearchInput value={controller.searchTerm} onChange={controller.updateSearch} />
             <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
-            <Sidebar.PageSizeSelect
-              className="m-b-10"
-              options={controller.pageSizeOptions}
-              value={controller.itemsPerPage}
-              onChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
-            />
           </Layout.Sidebar>
           <Layout.Content>
             {!controller.isLoaded && <LoadingState className="" />}
@@ -234,8 +228,10 @@ class UsersList extends React.Component {
                   toggleSorting={controller.toggleSorting}
                 />
                 <Paginator
+                  showPageSizeSelect
                   totalCount={controller.totalItemsCount}
-                  itemsPerPage={controller.itemsPerPage}
+                  pageSize={controller.itemsPerPage}
+                  onPageSizeChange={itemsPerPage => controller.updatePagination({ itemsPerPage })}
                   page={controller.page}
                   onChange={page => controller.updatePagination({ page })}
                 />