fix: logical fixes in Pagination component

[areddy-eightfold]

SUMMARY:

Currently if we have only 1 page, the jumper is still shown in pagination.

In pagination component, we have a check to show jumper component only when there is more than one page. But the variable was initialised using number of elements rather than number of pages. This PR fixes the issue.

Changes are made to include max and min values for Text Input component so that we can limit the count in Pagination component

Changes are made to display page Sizes section if number of pages is greater than 1 for at least one of the page sizes

JIRA TASK (Eightfold Employees Only):

https://eightfoldai.atlassian.net/browse/ENG-38825

CHANGE TYPE:

• Bugfix Pull Request
• Feature Pull Request

TEST COVERAGE:

• Tests for this change already exist
• I have added unittests for this change

TEST PLAN:

• Use table component in code sandbox with pagination and jumper. Verify that for single page we do not see the jumper.

You can use the following component from story book site

<Table
        alternateRowColor
        classNames="my-table-class"
        columns={[
          {
            dataIndex: "title",
            title: "Role"
          },
          {
            dataIndex: "profile",
            render: function y() {},
            title: "Profile"
          },
          {
            dataIndex: "level",
            title: "Level"
          }
        ]}
        dataSource={[
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "AM",
            key: "1",
            level: 78,
            location: "Beacon, NY",
            name: "Anamika Musafir",
            phone: "123456",
            profile: ["Anamika Musafir", "AM", "Beacon, NY"],
            tel: "123456",
            title: "Senior Sales Engineer"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "CG",
            key: "2",
            level: 86,
            location: "Delhi, Delhi",
            name: "Chandra Garg",
            phone: "123456",
            profile: ["Chandra Garg", "CG", "Delhi, Delhi"],
            tel: "123456",
            title: "Sales Executive"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "CF",
            key: "3",
            level: 95,
            location: "New York, NA",
            name: "Clarey Fike",
            phone: "123456",
            profile: ["Clarey Fike", "CF", "New York, NA"],
            tel: "123456",
            title: "Regional Sales VP"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "CD",
            key: "4",
            level: 66,
            location: "Atlanta, GA",
            name: "Cobbey Deevey",
            phone: "123456",
            profile: ["Cobbey Deevey", "CD", "Atlanta, GA"],
            tel: "123456",
            title: "Sales Director"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "DS",
            key: "5",
            level: 72,
            location: "San Diego, USA",
            name: "Dave Shaw",
            phone: "123456",
            profile: ["Dave Shaw", "DS", "San Diego, USA"],
            tel: "123456",
            title: "Sales Engineer Manager"
          },
          {
            description: null,
            initials: "FA",
            key: "6",
            level: 97,
            location: "Mumbai, Maharashtra",
            name: "Farida Ashfaq",
            phone: "123456",
            profile: ["Farida Ashfaq", "FA", "Mumbai, Maharashtra"],
            tel: "123456",
            title: "Sales Executive"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "FB",
            key: "7",
            level: 87,
            location: "Houston, Texas Area",
            name: "Frank Baptist",
            phone: "123456",
            profile: ["Frank Baptist", "FB", "Houston, Texas Area"],
            tel: "123456",
            title: "Sales Engineer"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "JF",
            key: "8",
            level: 88,
            location: "Irvine, CA",
            name: "Jerome Feng",
            phone: "123456",
            profile: ["Jerome Feng", "JF", "Irvine, CA"],
            tel: "123456",
            title: "Sales Engineer"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "JT",
            key: "9",
            level: 52,
            location: "Bangalore, Karnataka",
            name: "Julie Tharoor",
            phone: "123456",
            profile: ["Julie Tharoor", "JT", "Bangalore, Karnataka"],
            tel: "123456",
            title: "Sales Executive"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "NG",
            key: "10",
            level: 97,
            location: "Delhi, Delhi",
            name: "Nikita Gagan",
            phone: "123456",
            profile: ["Nikita Gagan", "NG", "Delhi, Delhi"],
            tel: "123456",
            title: "Sales Executive"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "PR",
            key: "11",
            level: 97,
            location: null,
            name: "Peter Rege",
            phone: "123456",
            profile: ["Peter Rege", "PR"],
            tel: "123456",
            title: "Sales Representative"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "RR",
            key: "12",
            level: 74,
            location: "San Francisco Bay Area",
            name: "Revathi Roy",
            phone: "123456",
            profile: ["Revathi Roy", "RR", "San Francisco Bay Area"],
            tel: "123456",
            title: "Senior Sales Engineer"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "UL",
            key: "13",
            level: 76,
            location: "Salt Lake City, UT",
            name: "Urbanus Laurens",
            phone: "123456",
            profile: ["Urbanus Laurens", "UL", "Salt Lake City, UT"],
            tel: "123456",
            title: "Account Executive"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "VR",
            key: "14",
            level: 90,
            location: "St Louis, MO",
            name: "Vance Renner",
            phone: "123456",
            profile: ["Vance Renner", "VR", "St Louis, MO"],
            tel: "123456",
            title: "Senior Account Executive"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "ZG",
            key: "15",
            level: 79,
            location: "Chicago, IL",
            name: "Zarla Greener",
            phone: "123456",
            profile: ["Zarla Greener", "ZG", "Chicago, IL"],
            tel: "123456",
            title: "Sales Manager"
          },
          {
            description:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            initials: "DS",
            key: "16",
            level: 72,
            location: "San Diego, USA",
            name: "Dave Doe",
            phone: "123456",
            profile: ["Dave Doe", "DS", "San Diego, USA"],
            tel: "123456",
            title: "Sales Engineer Manager"
          }
        ]}
        headerClassName="my-header"
        id="myTableId"
        onRowHoverEnter={function y() {}}
        onRowHoverLeave={function y() {}}
        pagination={{
          layout: ["total", "sizes", "prev", "pager", "next", "jumper"],
          pageSize: 16,
          position: ["none", "bottomRight"],
          total: 16
        }}
      />

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f34d69c:

Sandbox	Source
React	Configuration
Vanilla	Configuration

[codecov-commenter]

Codecov Report

❗ No coverage uploaded for pull request base (main@0b8f5f6). Click here to learn what that means.
Patch has no changes to coverable lines.

❗ Current head d5e996f differs from pull request most recent head d996735. Consider uploading reports for the commit d996735 to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #479   +/-   ##
=======================================
  Coverage        ?   84.99%           
=======================================
  Files           ?      749           
  Lines           ?    16058           
  Branches        ?     5498           
=======================================
  Hits            ?    13648           
  Misses          ?     2349           
  Partials        ?       61           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.