Page MenuHomePhabricator

[MEX] M3.1.1 - create basic edit statement form for simple text inputs
Closed, ResolvedPublic

Description

New statement

Screenshot 2025-09-15 at 08.00.59.png (1×1 px, 154 KB)

Figma file here

Notes:

  • Property selector dropdown limited to 5 results on screen - further results scrollbar
  • Publish button only becomes default (operable) once there is something valid to show (publish functionality to be added in T402620)
  • the fields turn red if there is an error (will look into further error correction assistance in a near future) (error handling will be handled in T403011)
  • once the user clicks publish, the button turns grey again (so the user does not bomb click) (this functionality is not required for a first pass as publish functionality to be added in T402620)
  • //there will be a progress indicator for while the user waits for the server response (wip for now) (this functionality is not required for a first pass as publish functionality to be added in T402620)

Edit existing statement (ready)

Screenshot 2025-08-28 at 10.03.25.png (1×1 px, 150 KB)

Notes:

  • all fields are operable, editing existing values happens on this screen
  • publish button becomes active when something valid has been edited correctly (this functionality is not required for a first pass as publish functionality to be added in T402620)
  • when something is added (qualifier, reference etc...) the user goes to another screen (this functionality is not required for a first pass as these will be handled in T402618)
  • Triggered suggestion dropdowns on this screen show 4 results as well
  • same error / publish handling (error handling will be handled in T403011)
  • there will be a confirmation pop up (are you sure you want to delete this) when the user clicks remove (wip)

https://www.figma.com/design/RtMDwH7sMF5IPRJvyyZPv4/Mobile-editing-experience?node-id=2227-11950&t=C9HTDU2XkF8Mdz6A-1

a/c

  • all statements attached to the statement group being edited are displayed (e.g. in the example screenshot, there are 2)
  • the order they're displayed in matches the order they're listed in on the view page
  • minimally, the property name(s), and remove button should display (completed in T401403)
  • design matches the figma file (but does not need to be pixel perfect) (base completed in T401403, should continue to match after being populated with real data)
    • Note: there are two different designs when opening the edit statement screen
      • When adding a new statement, the property is changeable and listed outside of the header (completed in T401403)
      • When editing an existing statement, the property cannot be changed and is listed inside the header (completed in T401403)
  • remove button is read-only (completed in T401403)
  • text values appear in input fields(in example A$AP Rocky and Hassan Jameel) can be changed but do not save
  • existing references are displayed
  • existing qualifiers are displayed
  • existing ranking is displayed
  • unit tests update and/or added

Note:

  • Rank, qualifiers, and references basic UI were completed in T401403.

Event Timeline

Change #1182184 had a related patch set uploaded (by Audrey Penven; author: Audrey Penven):

[mediawiki/extensions/Wikibase@master] [WIP] basic edit form for string values

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

taking this out of In Development, as I'm about to be out for a week.

handover notes for anyone who wants to pick this up in my absence:

  • there's a basic cypress test that checks whether some placeholder text shows up when clicking the edit button on a statement. I didn't get this functionality working, so the test fails.
  • there's a very empty new component for the edit form. It currently just has the placeholder text that the test looks for.
  • in StatementView, I attempted to add a variable for whether it should be in edit mode, and conditionally show either the read-only view or the edit form. The implementation here doesn't work, and breaks php-vuejs-templating. Probably everything I did in this file can be thrown away and replaced.

Updated design for main screen of edit statement is needed, one for when its a new T401403: [MEX] M3 - add dialog to edit empty statement

Alice.moutinho updated the task description. (Show Details)
Alice.moutinho updated the task description. (Show Details)

@karapayneWMDE

I added the screens. Not sure how to re-assign and to whom. Note that the property selector triggers the suggestions dropdown, which was only supposed to be tackled in another phase of the project.

Note: The "add statement" and "add identifier" buttons at the bottom of the screen should also open on the main screen. In T401403: [MEX] M3 - add dialog to edit empty statement, these buttons open the input field on the main screen

Hello @karapayneWMDE, what is needed to complete this ticket from my end?

Oh, maybe nothing, i am just added as a subscriber. My bad 💃🏽

Change #1183113 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@master] Extract modal overlay into separate component

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

Change #1183114 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@master] Move property selector into modal overlay

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

Change #1183113 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Extract modal overlay into separate component

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

Change #1183114 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Move property selector into modal overlay

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

Change #1184503 had a related patch set uploaded (by Hasan Akgün (WMDE); author: Hasan Akgün (WMDE)):

[mediawiki/extensions/Wikibase@master] Create basic edit statement form for simple text inputs

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

Change #1184503 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Create basic edit statement form for simple text inputs

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

Hi @karapayneWMDE , not sure if this needs to go through refinement again - so i am assigning it to you!

@Alice.moutinho and I discussed. The ranking is acceptable for the first pass review and so this ticket is complete

Change #1182184 abandoned by Audrey Penven:

[mediawiki/extensions/Wikibase@master] [WIP] basic edit form for string values

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