Added paginator UI in Infra Roles tab (#5923)

[chaitali-mane]

Signed-off-by: chaitali-mane cmane@progress.com

🔩 Description: What code changed, and why?

Need to add new functionality of paginator with custom items per page dropdown in Infra tabs.
UX design -
https://www.figma.com/proto/bGLU1dghH8ZotUfI76OwwC/Manage->-Automate-Roles?page-id=0%3A1&node-id=1420%3A2673&viewport=241%2C48%2C0.08&scaling=min-zoom&starting-point-node-id=1420%3A2673

⛓️ Related Resources

#6072

👍 Definition of Done

Added custom dropdown paginator as per design.

👟 How to Build and Test the Change

inside the hab studio

[default:/src:0]# build components/automate-ui-devproxy/
[default:/src:0]# start_automate_ui_background
[default:/src:0]# start_all_services

STEP 2
open new window
go to automate UI path

$ cd components/automate-ui
and run the command 

npm run serve:hab

Steps for Infra tab:
Go To Infrastructure -> Chef Servers -> Click on any Chef Infra Server -> Click on any org -> Any tab (except cookbooks). where you can see changes

✅ Checklist

All PRs must tick these:

• I have read the CONTRIBUTING document.
• All commits signed-off for the Developer Certification of Origin.

With occasional exceptions, all PRs from Progress employees must tick these:

• Is the code clear? (complicated code or lots of comments--subdivide and use well-named methods, meaningful variable names, etc.)
• Consistency checked? (user notifications, user prompts, visual patterns, code patterns, variable names)
• Repeated code blocks eliminated? (adapt and reuse existing components, blocks, functions, etc.)
• Spelling, grammar, typos checked? (at a minimum use make spell in any component directory)
• Code well-formatted? (indents, line breaks, etc. improve rather than hinder readability)

All PRs from Progress employees should tick these if appropriate:

• Tests added/updated? (all new code needs new tests)
• Docs added/updated? (all customer-facing changes)

Please add a note next to any checkbox above if you are NOT ticking it.

📷 Screenshots, if applicable

[netlify]

👷 Deploy Preview for chef-automate processing.

🔨 Explore the source changes: 9fb962d

🔍 Inspect the deploy log: https://app.netlify.com/sites/chef-automate/deploys/618a97d7f5598f00079639fd

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
4 Code Smells

No Coverage information
0.0% Duplication

[Venkatesh-rengasamy]

Looks good to me