Implement search for participant list on EventDetails (JS experience)
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	ldelench_wmf
	May 17 2022, 3:44 PM

Description

As an organizer or participant, I want to be able to apply search (by name) on list of participants, so I can easily find specific participants in the list.

Resources:

Acceptance Criteria:

An organizer or participant (or any user who comes upon the the EventDetails page) should be able to apply "Search for participants" functionality on participant list within registration details (organizer and participant view) as shown in wireframe
Before a search is applied, the user should see a search icon (magnifying glass) and instructional text ("Search for participants") displayed in light grey
The search should function by the user typing a username and the results automatically being placed.
Note that we have discussed that the search box component exists in OOUI, but we need to build the search logic.
The documentation of the list participants endpoint should mention the new parameter for the username filter and related error
Out of scope:
- Infinite scrolling of participant list (this will be handled separately in T308576)
- No-JS experience with a button for search (this will be handled separately in T310152 and it is lower priority; it can be in V0 or V1)

Visual example:

Screen Shot 2022-04-29 at 12.44.56 PM.png (1×2 px, 215 KB)

Details

Subject	Repo	Branch	Lines +/-
selenium: Replace Math.random() with Date.now() in getTestString in Selenium in core	mediawiki/core	master	+1 -1
Fix JS error when searching participants	mediawiki/extensions/CampaignEvents	master	+6 -2
Add the ability to search participants	mediawiki/extensions/CampaignEvents	master	+174 -70

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		ifried	T307124 Registration details (organizer view)
		Resolved		cmelo	T308574 Implement search for participant list on EventDetails (JS experience)

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

In T308574#7982657, @cmelo wrote:

Hi @ifried, @gonyeahialam, @Daimona, @vyuen, I was wondering if we should add a search button, rr it should be like: After type at least 3 characters, we apply the search?
I am asking this because if we add the button, it will work for noJS users.

Since we're using infinite scrolling for this list, which is a JS-only thing, I suppose it could be fine to do the search on the fly for now, until we decide how (and whether!) to support no-JS for the participants list.

Yes, I agree with @Daimona. I think regular search for JS users is fine for now, and we can consider options for no JS users later.

gonyeahialam updated the task description. (Show Details)Jun 7 2022, 8:23 AM

@cmelo We can use the search on the fly for JS and search with a button for no-JS.

ifried renamed this task from Implement search for participant list to Implement search for participant list (JS experience).Jun 8 2022, 1:10 PM

ifried updated the task description. (Show Details)

ifried renamed this task from Implement search for participant list (JS experience) to Implement search for participant list on EventDetails (JS experience).Jun 8 2022, 1:14 PM

ifried mentioned this in T310152: Implement search for participant list on EventDetails (no JS experience).

ifried mentioned this in T310154: Determine button & pagination for EventDetails (no-JS).Jun 8 2022, 1:18 PM

In T308574#7985021, @gonyeahialam wrote:

@cmelo We can use the search on the fly for JS and search with a button for no-JS.

Thank you @gonyeahialam

Hi @gonyeahialam, I was able to make it looks more like the wireframes, I am adding screenshots of the old and new vector with two option:

Option 1: The "Back to Your Events" above the title
Option 2: The "Back to Your Events" below the title

@Daimona, I was able to do option one by hiding the default header of the page, because the page title is added by default even if I don't pass any text for that, so I added this css to hide the h1 element because if not it will add a border on the page. Do you think this can be a problem?

CSS added:

.firstHeading.mw-first-heading {
	display: none;
}

old-skin-link-below.png (1×3 px, 538 KB)

old-skin-link-above.png (1×3 px, 552 KB)

new-skin-link-above.png (1×3 px, 483 KB)

new-skin-link-below.png (1×3 px, 484 KB)

In T308574#7990250, @cmelo wrote:

@Daimona, I was able to do option one by hiding the default header of the page, because the page title is added by default even if I don't pass any text for that, so I added this css to hide the h1 element because if not it will add a border on the page. Do you think this can be a problem?

Wouldn't this result in a page without a title (h1) element? I believe the rendering of the h1 element is up to each skin, and it may be modified in the process, so I'm unsure what would happen if we pass a bogus title. In general, if MW does not let us suppress the page title, I don't know if it's a good idea to forcibly hide it.

ifried updated the task description. (Show Details)Jun 9 2022, 12:10 PM

ifried updated the task description. (Show Details)

ifried updated the task description. (Show Details)Jun 9 2022, 12:19 PM

In T308574#7990825, @Daimona wrote:

In T308574#7990250, @cmelo wrote:

@Daimona, I was able to do option one by hiding the default header of the page, because the page title is added by default even if I don't pass any text for that, so I added this css to hide the h1 element because if not it will add a border on the page. Do you think this can be a problem?

Wouldn't this result in a page without a title (h1) element? I believe the rendering of the h1 element is up to each skin, and it may be modified in the process, so I'm unsure what would happen if we pass a bogus title. In general, if MW does not let us suppress the page title, I don't know if it's a good idea to forcibly hide it.

Thanks @Daimona, I am adding the (h1) element manually, and this css will just be applied in this page, I tried it in almost all other skins, and it works fine, but there is another way we can do it, which is instead of hide the h1 element, I just remove its border-bottom like this:

.firstHeading.mw-first-heading {
	border-bottom: none;
}

ldelench_wmf edited projects, added Campaign-Tools (Campaign-Tools-Sprint-15); removed Campaign-Tools.Jun 9 2022, 4:20 PM

In T308574#7992451, @cmelo wrote:

Thanks @Daimona, I am adding the (h1) element manually

Right, but technically that is not the "page title" that MW core defines as such, and I'm wondering if there could be issues with that. I really don't know if there are going to problems in practice. One thing we could do is put the link below the title for now and then, for the long term, patch MW core so that it's possible to add a backlink above the page title.

In T308574#7993532, @Daimona wrote:

In T308574#7992451, @cmelo wrote:

Thanks @Daimona, I am adding the (h1) element manually

Right, but technically that is not the "page title" that MW core defines as such, and I'm wondering if there could be issues with that. I really don't know if there are going to problems in practice. One thing we could do is put the link below the title for now and then, for the long term, patch MW core so that it's possible to add a backlink above the page title.

Ok, I see, thank you @Daimona !

@gonyeahialam, is it ok if we add the link below the header?
It will looks like below:

Screen Shot 2022-06-13 at 15.38.18.png (1×3 px, 388 KB)

Just to clarify, Claudio and I talked about this today. My proposal is that we choose one of the two options for V0, and then implement a proper customization system in MW core for V1 or later that would allow us to put the back link above the title cleanly. As for which option to choose for V0, I would suggest below the title, unless having it above is very important from a design/usability perspective. I'm saying this because if we put it above the title now and decide to fix it later, the "later" could get pushed back indefinitely and the temporary solution would become permanent, as is often the case.

cmelo claimed this task.Jun 20 2022, 3:07 PM

We just find a blocker on how to implement the search on the participants list, as we do not save the user_name on the ce_participants table on our central database (just the user id), we don't have a way to filter by username, adding a user_name column to the ce_participants seems to be the best option for the moment to solve this. The feasible options we have at the moment in my opinion seems to be:

Add a user_name column to the ce_participants
Remove this feature from V0 and check later if there is a better way to do it.

@ifried @Daimona @vyuen

@cmelo Would adding user_name column to the ce_participants be a separate ticket, and do you imagine it would be a large amount of work? If yes, perhaps we can estimate it separately and it can be worked on shortly after other V0 tickets are completed. If it's a smaller amount of work, we can see if we can include it in V0. I'll await engineering input before we consider next steps.

In T308574#8029404, @ifried wrote:

@cmelo Would adding user_name column to the ce_participants be a separate ticket, and do you imagine it would be a large amount of work? If yes, perhaps we can estimate it separately and it can be worked on shortly after other V0 tickets are completed. If it's a smaller amount of work, we can see if we can include it in V0. I'll await engineering input before we consider next steps.

Hi @ifried thanks, so adding the user_name to ce_participats is easy, we also need to change the Register participant action to get the username and save it, which is easy too, I don't think we need a new task for this, but I would like to check if there is a better option than saving the username in our table, because we already save the user ID, but if we want to have it on V0 I think this is the best option we have even for V1 I think.

In T308574#8029684, @cmelo wrote:

In T308574#8029404, @ifried wrote:

@cmelo Would adding user_name column to the ce_participants be a separate ticket, and do you imagine it would be a large amount of work? If yes, perhaps we can estimate it separately and it can be worked on shortly after other V0 tickets are completed. If it's a smaller amount of work, we can see if we can include it in V0. I'll await engineering input before we consider next steps.

Hi @ifried thanks, so adding the user_name to ce_participats is easy, we also need to change the Register participant action to get the username and save it, which is easy too, I don't think we need a new task for this, but I would like to check if there is a better option than saving the username in our table, because we already save the user ID, but if we want to have it on V0 I think this is the best option we have even for V1 I think.

I think a separate task wouldn't hurt, just in case it turns out to be more complex. I should also note that storing usernames is not the best thing in the world, but it's probably the least worst option.

cmelo moved this task from Ready 🎬 to In Progress 💻 on the Campaign-Tools (Campaign-Tools-Sprint-15) board.Jun 29 2022, 11:34 AM

cmelo moved this task from In Progress 💻 to Review/Feedback 💬 on the Campaign-Tools (Campaign-Tools-Sprint-15) board.Jul 6 2022, 5:02 PM

ldelench_wmf edited projects, added Campaign-Tools (Campaign-Tools-Sprint-16); removed Campaign-Tools (Campaign-Tools-Sprint-15).Jul 6 2022, 5:02 PM

ldelench_wmf moved this task from Ready 🎬 to In Progress 💻 on the Campaign-Tools (Campaign-Tools-Sprint-16) board.Jul 6 2022, 5:07 PM

ldelench_wmf moved this task from In Progress 💻 to Review/Feedback 💬 on the Campaign-Tools (Campaign-Tools-Sprint-16) board.

Change 811772 had a related patch set uploaded (by Cmelo; author: Cmelo):

[mediawiki/extensions/CampaignEvents@master] Add the ability to search participants

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

gerritbot added a project: Patch-For-Review.Jul 6 2022, 8:24 PM

Test wiki created on Patch demo by CMelo (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/37d1e30e67/w/

Test wiki created on Patch demo by CMelo (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/5c34d2d3e7/w/

Test wiki created on Patch demo by CMelo (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/4c16b0e309/w/

Test wiki created on Patch demo by CMelo (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/ebacfb5e93/w/

Test wiki created on Patch demo by CMelo (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/2bd509e065/w/