Page MenuHomePhabricator

Sticky header: add search to sticky header
Closed, ResolvedPublic5 Estimated Story Points

Description

Background

In T289716: Create sticky header skeleton we are building the skeleton for the sticky header. This task will cover the beginning of adding distinct functionality to the header, focusing on the search functionality.

Acceptance criteria

  • Add the following items to the sticky header as per the prototype below:
    • Search icon
    • Search widget
  • It should be impossible to see two searches at any given time (e.g. it should not be possible to see the search icon in the header as well as the one in the sticky header)

Prototype

https://di-community-round-2.web.app/Audre_Lorde

Developer notes

A placeholder for the search exists. You'll likely want to update the SkinVector data to make the search icon visible, and add classes to ensure that it gets wired up correctly.
It's possible you'll need to create a new Vue instance to handle this case.

Note, that conversations about WVUI are still ongoing. For now, it would be acceptable to link the search icon via an anchor tag to the input at the top of the page if WVUI is not loaded.

The "meat and potatoes" of this work will include:

See https://gerrit.wikimedia.org/r/716693

QA Results - Beta

ACStatusDetails
1T289724#7393949
2T289724#7393949

QA Results - Prod

ACStatusDetails
1T289724#7393949
2T289724#7393949

Event Timeline

ovasileva created this task.

Change 716693 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] POC Sticky header: add search to sticky header

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

Change 716693 abandoned by Nray:

[mediawiki/skins/Vector@master] POC Sticky header: add search to sticky header

Reason:

poc, feel free to reopen if helpful

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

nray updated the task description. (Show Details)

Change 716693 restored by Nray:

[mediawiki/skins/Vector@master] POC Sticky header: add search to sticky header

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

Change 716693 abandoned by Nray:

[mediawiki/skins/Vector@master] POC Sticky header: add search to sticky header

Reason:

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

Change 716693 restored by Nray:

[mediawiki/skins/Vector@master] POC Sticky header: add search to sticky header

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

@ovasileva @alexhollender What should happen if a wiki has WVUI search turned off (e.g. Wikidata uses legacy search by turning off the wgVectorUseWvuiSearch config variable)? Do we not show the search toggle?

@nray Wikidata is the only site using the legacy search and there is a discussion about either dropping support for legacy search (see T275251#7325272).
For now, it would be acceptable to link the search icon via an anchor tag to the input at the top of the page in this case which is how we want it to behave when WVUI is not loaded.

I'd rather we not add additional complexity for the Wikidata case we'll soon be removing/fixing.

Change 720328 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Scope styles that should only apply to the main header to Header.less

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

@nray Wikidata is the only site using the legacy search and there is a discussion about either dropping support for legacy search (see T275251#7325272).
For now, it would be acceptable to link the search icon via an anchor tag to the input at the top of the page in this case which is how we want it to behave when WVUI is not loaded.

I'd rather we not add additional complexity for the Wikidata case we'll soon be removing/fixing.

another option to consider, replace the search icon with a back to top arrow:

image.png (904×3 px, 583 KB)

this also brings up the topic: for Wikidata, Commons, etc. do we want to/can we present the ULS in the sticky header? cc @ovasileva

bwang removed bwang as the assignee of this task.Sep 14 2021, 4:07 PM
bwang subscribed.

Change 720328 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Scope styles that should only apply to the main header to Header.less

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

Change 716693 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add search to sticky header

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

Change 721607 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Search data should support multiple searches

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

Change 721609 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Wire up sticky header search feature

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

Change 721607 merged by jenkins-bot:

[mediawiki/core@master] Search data should support multiple searches

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

Change 721609 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Wire up sticky header search feature

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Add the following items to the sticky header as per the prototype below:
Search icon
Search widget
✅ AC1: It should be impossible to see two searches at any given time (e.g. it should not be possible to see the search icon in the header as well as the one in the sticky header)

Screen Recording 2021-09-30 at 7.08.46 PM.mov.gif (560×956 px, 2 MB)

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Add the following items to the sticky header as per the prototype below:
Search icon
Search widget
✅ AC1: It should be impossible to see two searches at any given time (e.g. it should not be possible to see the search icon in the header as well as the one in the sticky header)

Screen Recording 2021-09-30 at 7.12.04 PM.mov.gif (560×956 px, 1 MB)