@gonyeahialam we may need pagination for this one

In T356683#9859681, @cmelo wrote:

@gonyeahialam we may need pagination for this one

Okay.

Do we have a pagination component in OOUI @Daimona

@gonyeahialam there is no component, all pagination so far has been custom

@gonyeahialam Hello there! I am checking in on getting an updated design with pagination. Thanks!

This is my current exploration for this @cmelo @Daimona @MHorsey-WMF

In T356683#9880765, @gonyeahialam wrote:

This is my current exploration for this @cmelo @Daimona @MHorsey-WMF

I don't think we have a navigation bar like that. We have a similar one for table pagers (example), but this one here wouldn't be a table. Could we use the standard navigation bar for list pagers, like on Special:AllEvents or Special:Log? I know it's really basic and ugly, but that's what we've got...

1 to simplest implementation for MVP, so I think we should go with what we have already for navigation standards and then we can improve the UX over time. cc @gonyeahialam

Yes

In T356683#9882217, @ifried wrote:

1 to simplest implementation for MVP, so I think we should go with what we have already for navigation standards and then we can improve the UX over time. cc @gonyeahialam

Ok, thanks for the response, @gonyeahialam. In that case, can the design example be updated?

Preliminary feedback from the Usability test for the Invitation lists MVP
(Urgent feedback that needs to be worked on for people to be able to use the tool.)

• A few participants interpreted the '33 editors' as the editors that invites have been sent to.

Updated the design to include the pagination used in the Wikipedia Search results page

View (previous 10 | next 10) (10 | 20 | 50 |100 | 200)

Change #1051718 had a related patch set uploaded (by Mhorsey; author: Mhorsey):

[mediawiki/extensions/CampaignEvents@master] [WIP] Add InvitationsListPager, requires storage layer to be complete before this can be finished.

https://gerrit.wikimedia.org/r/1051718

@MHorsey-WMF: Hello! I have discussed this ticket with @gonyeahialam and made some tweaks to the AC based on his suggestions. These changes include:

• Changing title from 'My invitation lists' to 'Your invitation lists'
• Changing 'pending' to 'processing'
• Adding 'generated' after number of editors in list
• Adding some more details on the 'new' button and the fact that the invitation list title has a link

Also, @gonyeahialam will update the design example to see 'Your invitation lists.'

Thank you!

Design updated in the description

@ifried / @gonyeahialam the AC says to have a default page length of 10, but this is actually quite complex (I know, it's silly!). The default list length is 50, can we stick to that initially to ease implementation?

In T356683#9977108, @MHorsey-WMF wrote:

@ifried / @gonyeahialam the AC says to have a default page length of 10, but this is actually quite complex (I know, it's silly!). The default list length is 50, can we stick to that initially to ease implementation?

Do you mean page length or number of invitation lists? If you mean number of invitation lists, I think we can go with the 50.

@gonyeahialam Yes, number of invitation lists per page.

Yes, that is fine and I think it makes sense to stick to the standard. I will update the AC, @MHorsey-WMF. If we want to consider changing this for usability later, we can consider doing so, but I don't think changing this behavior is a priority for MVP.

Thanks @gonyeahialam and @ifried I have retained the default implementation for now.

@ifried @Daimona As discussed in Sprint planning I have created T370181 for improvements to this page based on the decisions made in T364804

Change #1051718 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] Populate SpecialMyInvitationLists

https://gerrit.wikimedia.org/r/1051718

Acceptance Criteria:

• Given that an organizer is on Special:MyInvitationLists,
  • And if they have previously requested an Invitation List,
    • They should see a list of their Invitation Lists on the page, which includes:
      • ✅ The label: "Your invitation lists"
      • 
      • ✅ The name of the invitation list with a link to the invitation list
      • 
        • ✅ The number of editors found (if list generated), which will be written as:
          • ✅ [icon for generated] [number] editors generated
          • 
        • ✅ "Processing" status (if list generation is still in progress)
          • ✅ This should have the processing icon
          • 

• • ❌ They should see a "New Invitation List" button at the top of the page (" New" button)
    • The button is Add instead of New. Do we just need to update the AC for this or does the copy need to change?
    • 
• And if there are more than 50 invitation lists,
  • ❓ There should be pagination with 50 lists per pagination link
    • @MHorsey-WMF The pagination with 50 is functional, but when selecting pagination that is over the amount of Invitation lists (for example, when there are 99 invitation lists, selecting pagination of 100) then the pagination disappears at the bottom of the page, so then the user can not select a lower pagination of 20 or 50. See gif below:
      • 

In T356683#9992934, @vaughnwalters wrote:

The button is Add instead of New. Do we just need to update the AC for this or does the copy need to change?

Good question. I'm not seeing "Add" anywhere in this task, so I assume we would have to update the code.

• @MHorsey-WMF The pagination with 50 is functional, but when selecting pagination that is over the amount of Invitation lists (for example, when there are 99 invitation lists, selecting pagination of 100) then the pagination disappears at the bottom of the page, so then the user can not select a lower pagination of 20 or 50. See gif below:

This seems to be the normal behaviour in the core pager. I agree that it should be improved, but perhaps surprisingly, I'm unable to find a task for this.

Change #1055159 had a related patch set uploaded (by Mhorsey; author: Mhorsey):

[mediawiki/extensions/CampaignEvents@master] Change text for "new" button on special:MyInvitationLists

https://gerrit.wikimedia.org/r/1055159

The "Add" was a leftover from a previous design file IIRC, I've updated it now.

@vaughnwalters The pager thing sucks, but as it's a problem with core I think we should go ahead and release this, but raise a ticket and fix the core issue separately.

@MHorsey-WMF There is a lack of adequate top and bottom padding in the chip, the icons are very close to the edge of the chip.
I think the problem here is either a bigger icon is being used or the text is smaller.

In T356683#9994247, @gonyeahialam wrote:

@MHorsey-WMF There is a lack of adequate top and bottom padding in the chip, the icons are very close to the edge of the chip.
I think the problem here is either a bigger icon is being used or the text is smaller.

It appears this is being tackled in this task T370181 by @Daimona I will put further comments there.

@gonyeahialam as this is an issue with Codex (as explained in T370181) rather than our own extension, are you happy to progress this ticket?

Change #1055159 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] Change text for "new" button on special:MyInvitationLists

https://gerrit.wikimedia.org/r/1055159

In T356683#9994247, @gonyeahialam wrote:

@MHorsey-WMF There is a lack of adequate top and bottom padding in the chip, the icons are very close to the edge of the chip.
I think the problem here is either a bigger icon is being used or the text is smaller.

In T356683#9995137, @MHorsey-WMF wrote:

@gonyeahialam as this is an issue with Codex (as explained in T370181) rather than our own extension, are you happy to progress this ticket?

Created task T370473 to fix this after T370132 is resolved.

Button text has been updated and the info chip work is tracked in T370473, moving this back to QA.

✅ They should see a "New Invitation List" button at the top of the page (" New" button)

This is fixed now, and with creation of T370473 to update the padding for the chip, and T370485 to deal with the pagination issue in core, I am sending this to design sign off.