Page MenuHomePhabricator

Migrate uses of codex-search in Popups to use CodexModule
Closed, ResolvedPublic2 Estimated Story Points

Description

Background

Followup to T356678.

To unblock the Design systems team for the roll out of Codex with code-splitting support we need to replace the use of codex-search-styles with CodexModule as we did in T356678.

User story

  • As a mobile user, I want the mobile experience as optimized as possilbe.

Requirements

  • Replace the use of codex-search-styles with CodexModule

BDD

Feature: Optimize Mobile Experience with CodexModule Integration

  Scenario: Ensure codex-search-styles is replaced with CodexModule
    Given the user is on the mobile version of Wikipedia
    When the user hovers over any link to trigger a page preview
    And the user runs "mw.loader.getState('codex-search-styles')" in the JavaScript console
    Then the output should be "registered"

Design

No change

Test Steps

Test Case: Verify Replacement of codex-search-styles with CodexModule on Mobile

  1. Navigate to the mobile domain of Wikipedia.
  2. Hover over any link on the page to display a page preview.
  3. In the browser developer tools console type mw.loader.getState('codex-search-styles') and press Enter.
  4. AC1: Confirm that the output in the console returns 'registered'.

QA Results - Beta

ACStatusDetails
1T356690#9730913

QA Results - Prod

ACStatusDetails
1T356690#9741766

Event Timeline

I think this is the same work we did here https://phabricator.wikimedia.org/T356677, are we targeting all extensions and skins, ... ?
https://codesearch.wmcloud.org/search/?q=codex-search-styles&files=&excludeFiles=&repos=

the the changes should include:

  • In skin.jsonor extension.json under "ResourceModules" add
"name.of.repo.prefix.search.codex.styles": {
	"class": "MediaWiki\\ResourceLoader\\CodexModule",
	"codexStyleOnly": true,
	"codexComponents": [
		"CdxTypeaheadSearch",
		"CdxSearchInput",
		"CdxButton",
		"CdxRadio",
		"CdxMessage"
	]
},
"name.of.repo.prefix.search.codex.scripts": {
	"dependencies": [
		"skins.vector.search.codex.styles"
	],
	"class": "MediaWiki\\ResourceLoader\\CodexModule",
	"codexScriptOnly": true,
	"codexComponents": [
		"CdxTypeaheadSearch"
	]
}
  • If the styles are only needed do not add the "name.of.repo.prefix.search.codex.scripts"
  • Make sure name.of.repo.prefix.search.codex.scripts and/or name.of.repo.prefix.search.codex.styles modules is loaded and available to use. depending on the area you can use mw.loader.load/mw.loader.using, skin.json required module, $out->addModuleStyles, and $out->addModuleScript
Jdlrobson raised the priority of this task from Medium to High.Fri, Apr 5, 6:17 AM
Jdlrobson subscribed.

Bumping to high as after https://phabricator.wikimedia.org/T356678 Codex is now being loaded twice on page load.

bwang removed bwang as the assignee of this task.Mon, Apr 15, 8:00 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (FY2023-24 Q4 Sprint 1) board.
bwang subscribed.

Change #1019891 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/Popups@master] Replace codex-search with codex module

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

Change #1019891 merged by jenkins-bot:

[mediawiki/extensions/Popups@master] Replace codex-search with codex module

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

Jdlrobson lowered the priority of this task from High to Medium.
Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Test Case: Verify Replacement of codex-search-styles with CodexModule on Mobile

  1. Navigate to the mobile domain of Wikipedia.
  2. Hover over any link on the page to display a page preview.
  3. In the browser developer tools console type mw.loader.getState('codex-search-styles') and press Enter.
  4. AC1: Confirm that the output in the console returns 'registered'.

screenshot 237.png (831×1 px, 364 KB)

Jdlrobson claimed this task.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Test Case: Verify Replacement of codex-search-styles with CodexModule on Mobile

  1. Navigate to the mobile domain of Wikipedia.
  2. Hover over any link on the page to display a page preview.
  3. In the browser developer tools console type mw.loader.getState('codex-search-styles') and press Enter.
  4. AC1: Confirm that the output in the console returns 'registered'.

screenshot 265.png (726×1 px, 354 KB)