[outreachy] Registry: add pagination

[svrnm]

Outreachy task for @Naggayi-Daphne-Pearl

Based on your user experience report, please provide the following suggested improvement via a PR:

Introducing pagination would enhance usability by breaking up the results into manageable sections and improving navigation.

Note that there is no (trivial) way to chunck the items per page on the server side (especially with search involved). Therefore the pagination should be a purely client side implementation

Note: This is an assigned issue for a participant that has completed the user experience report, if you are an outreachy participant as well, find instructions here: #5290

[crocmons]

Hello @svrnm , as an outreachy contributor I want to work on this issue also

[svrnm]

Hello @svrnm , as an outreachy contributor I want to work on this issue also

hey @crocmons, please review #5290, and follow the instructions for outreachy contributors there.

[Naggayi-Daphne-Pearl]

Hello @svrnm,

I hope your week is beginning well.

I managed to implement the first vision i had for the pagination. My page size is 10 entries per page. I have an issue though my changes dont reflect in the source control for me to commit.

I asked two of my collegues have the same issue

I have attached the screenshot of my git status. I applied changes in the index.html

of my changes.

my first attempt at pagination

[Naggayi-Daphne-Pearl]

I created a link with gitpod The link is attached here: attached link running the server on npm run serve:netlify you can see my changes in my gitpod see link

Still improving the pagination while i figure out why my changes dont reflect in my source control

[svrnm]

hey @Naggayi-Daphne-Pearl, your changes are still in "staging", so you need to run git add to have those files added to your commit, or you can do git commit -a -m <message>, where the -a will auto-add all changes.

[Naggayi-Daphne-Pearl]

hey @svrnm the changes in staging arent really the files i was focusing on this was me doing a try and error to see if other files can be changed. i made changes in the index.html located in the public folder >ecosystem>registry>index.html and registrySearch.js

the changes though reflect when i run my server but not in the source control for me to commit them

here is a screenshot when i try to comment my changes in these two files.

[svrnm]

@Naggayi-Daphne-Pearl can you share with me the output of git status and git log, also since you use gitpod can you make your workspace accessible to me, so I can take a closer look? Thanks

[Naggayi-Daphne-Pearl]

Hey @svrnm here is the link to the gitpod Link commands used : npm run serve:netlify

the machine i am using is macbook pro steps i took during set up

1. Forked the repo
2. Command sudo nvm install
3. Command sudo npm install
4. Command sudo npm run build ~ this helped generate the public folder i am working in
5. npm run serve to run site
6. npm run serve:netlify that runs on port localhost:8888

I was able to edit changes and see them running them running locally

Committing them is where i am getting the blocker. i have reinstalled the app thrice in hope i had done it poorly the first time

git status ~ even though i have made changes to the code

git log

[svrnm]

Command sudo npm run build ~ this helped generate the public folder i am working in

Do not work on the public folder, as it is ignored via .gitignore, you need to edit the source files, see https://github.com/open-telemetry/opentelemetry.io/issues/5290, section "Registry Source Code"

[Naggayi-Daphne-Pearl]

Ohh dear Thanks a lot for this

[Naggayi-Daphne-Pearl]

Hello, It worked!!! Thanks Alot @svrnm for your help

[svrnm]

Great! Then your next step is raising a PR such that I can review your work

[Naggayi-Daphne-Pearl]

Hey @svrnm,

I've created a pull request with pagination improvements for the pages. Users can now customize the number of entries shown per page and use the "Go to Page" feature to navigate directly to specific pages.

I'm still working on further improvements to make the pagination even better.

Please let me know if you have any feedback or require additional information.

Thank you for your help yesterday.

my branch name is pagination/Daphne

[Naggayi-Daphne-Pearl]

Hello @svrnm,

I hope are well.

I wanted to update you on the progress I’ve made with my work. I have implemented several changes, incorporating your helpful comments along the way. You can view my progress through the link below:

• Pull Request: View PR
• Video Demonstration: Watch Here
• Gitpod Snapshot: Access Snapshot
• Gtitpod link to the code: Access Gitpod

Additionally, I have a question: once I complete this issue, would it be possible for me to take on another one that i listed in my google form last week?

Thank you, and I look forward to your feedback!

[Naggayi-Daphne-Pearl]

Hey @svrnm,

Thank you for your help.

I am done making the changes suggested in my PR.

Any suggestions on the way forward