Implemented pagination on app details page

[LilyLME]

As required in #88 pagination has been added to reduce scroll on very long pages.

Tasks

• Story book
• Use TailwindCSS

[wlach]

This looks like a good start. Just some initial thoughts.

[LilyLME]

Pagination view

[wlach]

Thanks for your persistence on this! It turns out this is a rather complex issue to solve. I've put in some more feedback, hopefully it is helpful.

[wlach]

Thanks for your persistence on this, and sorry for the slowness of my response. I think this is actually pretty close, after taking a second look at this, I think you may have been right about some aspects (e.g. the need to keep more state in the module calling the pagination component). To keep things more managable, I think we can keep track of the various variables inside a paginationState variable. Could you give that a try?

[LilyLME]

Hello @wlach, I have updated this as per requirements discussed. The calling module maintains it's level of state but now very neatly embedded in a single state object.

I would have loved if the components itself could let objects with properties be exported, but looks like it's a difficult problem trying to figure out how attributes within objects change :
See :

• Pass Object into Web Component Property via Element Attribute sveltejs/svelte#3381
• https://svelte.dev/tutorial/spread-props

[wlach]

After testing this out a bit, I'm noticing a few problems:

1. There's an unpaginated list of metrics on top of the paginated one (might just be a merging artifact), this should be easy to fix.
2. The pagination behaviour doesn't play nicely with the filtering. Basically we want to paginate through any list of items that the user has filtered (you can test with a string like "search" with the Fenix browser: http://localhost:5000/#!/apps/fenix)

Thanks again for your hard work on this.

[LilyLME]

@wlach all last change requests made. The pagination now plays nicely with the filteredMetrics also.

[wlach]

This is getting closer for sure, but I found a bug:

• Navigate to: http://localhost:5000/#!/apps/firefox-android-release
• Skip to "page 6" on metrics
• Type "search" into the filter box
• Try to skip back to "page 1"

Neither the search or the skip will work and I see this in the console:

[LilyLME]

Hello @wlach sorry for taking a while with this, can you review again and check for the last the bug so we move on?

[wlach]

Thanks, this works great now!

[wlach]

Some quick followup tasks for this:

• there's the "chunk" thing we talked about (Implemented pagination on app details page #119 (comment))
• we should also look into adding this to the ping page: https://deploy-preview-119--glean-dictionary-dev.netlify.app/#!/apps/firefox-android-release/pings/metrics

@LilyLME feel free to work on these (but obviously feel no obligation). I'll make a note to file some issues on these in the future (today is technically a holiday for me)

[LilyLME]

@wlach that's fine, Since the simpler and faster thing to do would be adding the pagination to ping page, I would rather start with that before looking a lodash' chunk.

• You also had a storybook requirement for the pagination component is that pressing?

[wlach]

@wlach that's fine, Since the simpler and faster thing to do would be adding the pagination to ping page, I would rather start with that before looking a lodash' chunk.

For sure. For what it's worth, I think the lodash chunk task should be quite easy. Mostly just a matter of running npm install lodash and then using it.

* You also had a storybook requirement for the pagination component is that pressing?

Ah yes! We definitely want that too.