[WtC-M2] Replace WiKit Message component by Codex's
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	• Sarai-WMDE
	Sep 22 2023, 2:57 PM

Project Tags

Referenced Files

	F41523170: Screenshot 2023-11-21 at 19.09.51.png
	Nov 21 2023, 6:11 PM

	F37750807: Screenshot 2023-09-22 at 16.30.45.png
	Sep 22 2023, 2:57 PM

	F37750811: Screenshot 2023-09-22 at 16.35.17.png
	Sep 22 2023, 2:57 PM

	F37750815: Screenshot 2023-09-22 at 16.37.58.png
	Sep 22 2023, 2:57 PM

Subscribers

Description

Problem

The Mismatch Finder's user interface was composed using a combination of Vue 2 custom components and WiKit elements, such as Message. The WiKit design system is now on its deprecation path, as it has been superseded by Codex, the official Wikimedia design system. The utilization of WiKit components is not recommended, and they should be replaced in order to reduce maintenance costs and ensure consistency.

Solution

We have to replace the WiKit Message by the Codex equivalent: cdx-message(See demo). This will take us a step closer to switching to the new design system and deprecating the old.

Here are some examples of messages used in the Mismatch Finder UI:

Home	Results page
Server side error:	No results found, Log in warning: Submission success:

Acceptance criteria

All types of WiKit Messages used in Mismatch Finder are replaced by their Codex equivalent

Related Objects
Search...

Status	Assigned	Task
Open	None	T327532 [EPIC] [WtC] Migrate WiKit-built products to Codex
Resolved	ItamarWMDE	T327683 [WtC] [EPIC] Migrate Mismatch Finder to Codex
Open	None	T346171 [WtC-M2] [EPIC] Replace WiKit components by available Codex components
Resolved	• guergana.tzatchkova	T347183 [WtC-M2] Replace WiKit Message component by Codex's

Event Timeline

• Sarai-WMDE created this task.Sep 22 2023, 2:57 PM

• Sarai-WMDE mentioned this in T346171: [WtC-M2] [EPIC] Replace WiKit components by available Codex components.Sep 22 2023, 3:45 PM

karapayneWMDE moved this task from Incoming to UX Backlog on the [Archived]Wikidata Dev Team board.Sep 26 2023, 2:06 PM

• Sarai-WMDE updated the task description. (Show Details)Oct 10 2023, 12:24 PM

ItamarWMDE moved this task from UX Backlog to Unified QT Backlog on the [Archived]Wikidata Dev Team board.Oct 11 2023, 12:14 PM

karapayneWMDE set the point value for this task to 3.Oct 17 2023, 8:46 AM

karapayneWMDE moved this task from Unified QT Backlog to Quality Tools "Sprint" on the [Archived]Wikidata Dev Team board.

karapayneWMDE edited projects, added: [Archived]Wikidata Dev Team (Quality Tools "Sprint"); removed: [Archived]Wikidata Dev Team.

karapayneWMDE moved this task from Backlog to Stalled on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.

Task Breakdown Notes

Pay close attention to RTL support
We can simply use Wikit Links inside the message until we get to replacing them
Another find and replace job

ItamarWMDE moved this task from Stalled to Backlog on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Nov 13 2023, 3:09 PM

• guergana.tzatchkova moved this task from Backlog to Doing on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Nov 15 2023, 11:06 AM

• guergana.tzatchkova claimed this task.Nov 15 2023, 4:02 PM

• guergana.tzatchkova added a comment.Nov 15 2023, 5:18 PM

This comment was removed by • guergana.tzatchkova.

Relevant PRs: https://github.com/wmde/wikidata-mismatch-finder/pull/769

• guergana.tzatchkova moved this task from Doing to Peer Review on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Nov 17 2023, 4:06 PM

• guergana.tzatchkova moved this task from Peer Review to Product Verification on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Nov 21 2023, 5:07 PM

All is looking good in general, but I noticed a layout issue only in the case of the success message. Unlike the other instances, this component stops wrapping from the moment the viewport is 640px on, and it overflows the page:

Screenshot 2023-11-21 at 19.09.51.png (1,158×964 px, 144 KB)

No other issues were detected in Chrome v119, Safari v17 or Firefox v119. I couldn't trigger the server side error message, but I don't think there can be differences at a component level.

• guergana.tzatchkova moved this task from Product Verification to Backlog on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Nov 22 2023, 12:50 PM

New PR fixing the CdxMessage wrap issue: https://github.com/wmde/wikidata-mismatch-finder/pull/774

• guergana.tzatchkova moved this task from Backlog to Doing on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Nov 22 2023, 1:31 PM

• guergana.tzatchkova moved this task from Doing to Product Verification on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Nov 22 2023, 1:40 PM

Thanks to the recent fix, the success message now adjusts properly to smaller viewports (under 640px). Verified in Chrome v119, Safari v17 or Firefox v119.

• Sarai-WMDE moved this task from Product Verification to Done on the [Archived]Wikidata Dev Team (Quality Tools "Sprint") board.Nov 23 2023, 11:35 AM

• noarave closed this task as Resolved.Nov 24 2023, 9:18 AM

[WtC-M2] Replace WiKit Message component by Codex'sClosed, ResolvedPublic3 Estimated Story PointsActions