[WIP] Fixes: T315134

[varun-s22]

Adds input search bar to the queue page

Files Updated

• pages/_app.js (for adding new styles)
• pages/queue.js (for adding search-input field)

Here how it looks currently

[varun-s22]

Currently only the search bar is added. Its functionality is yet to discussed, hence its marked work in progress

To be discussed:

• What happens when I click "Search"
• Are the stylings ok, and follow wiki-codex rules?
• Is the positioning of the search bar appropriate?

cc @coderwassananmol @Parthiv-M

[coderwassananmol]

@varun-s22 Here are my thoughts:

1. We don't need the user to click on search. The search can happen as the user types. It can be based on job id and title. Please keep the placeholder as "Search by job id or title"
2. You can refer to Typeahead Search for reference. We can skip the "Search" button as the search will happen automatically.
3. I would suggest we keep the search bar on top of the table so that the context is given to the user that search is for the table.

[varun-s22]

hey @coderwassananmol

1. Done
2. Lets discuss more about this, do we want "live autocomplete" feature, where you type somewhat incomplete title or id, and it autocompletes, or do we want to type the entire stuff up, and then match the results.
   OR
   Alternatively, We can have something like, "on searching any job id or title, we filter the QueueTable accordingly with the value entered on the search bar". I would prefer this one, as we don't have a dedicated Search button, so it makes sense to filter the data on the QueueTable accordingly.
3. We have two choices

Choice 1

Here the length of the search bar expands till the table width

Choice 2

Here the length of search bar matches the length of "Select a Queue" option

I would personally prefer Choice 2, as it maintains the consistency from above.

[varun-s22]

also how would i add some data to my QueueTable.js, as currently its empty, so I can't test the search feature :(

[Parthiv-M]

also how would i add some data to my QueueTable.js, as currently its empty, so I can't test the search feature :(

You can just try uploading a book using any one of the available libraries (Google Books, PDL or Trove). The data will reflect on the table, assuming you have Redis set up :)

[varun-s22]

also how would i add some data to my QueueTable.js, as currently its empty, so I can't test the search feature :(

You can just try uploading a book using any one of the available libraries (Google Books, PDL or Trove). The data will reflect on the table, assuming you have Redis set up :)

yeah for that i need to have the wiki keys right? ( for logging in via wikimedia), and i dont know what perms to tick for getting those
can u share the steps for generating those keys?

[coderwassananmol]

@varun-s22 You can request a key from Beta Wiki For reference, check this proposal. Once you've the keys and they are approved, you need to change the authorization, you need to change the token, userInfo, authorization in the [..nextAuth].js. Refer this for more details. Change the domain from https://meta.wikimedia.org to https://meta.wikimedia.beta.wmflabs.org/ and it should work.

Choice 1 looks good to me and we should only filter the Queue table. No need to show suggestions. Can you also remove Search a Book heading since the search bar should be self-explanatory.

[Parthiv-M]

Closing this as it is fixed in #180