Page MenuHomePhabricator

[MEX] M3.3.2 MessageBox displays over buttons when saving and re-opening the edit modals
Closed, ResolvedPublic

Description

When we complete an edit in one of the edit modals, we see a green 'success' pop-up, which stays on the screen for a few seconds.

If the user edits another statement / property / qualifier / reference while the pop-up is still showing, the 'cancel' / 'publish' buttons are covered by the pop-up. This is a confusing user experience, and also significantly slows down the cypress tests (as the tests wait for buttons to be visible before proceeding).

Cypress could be made to click away / dismiss the message boxes, but that wouldn't improve the situation for users. I propose that we always display messages floating further up the page than the footer, especially the footer of the modal that contains the action buttons.

Acceptance Criteria

  • The StatusMessage component and its users are updated so that status messages do not obscure important user interface elements (e.g. 'cancel' and 'publish').

Event Timeline

Change #1211022 had a related patch set uploaded (by Arthur taylor; author: Arthur taylor):

[mediawiki/extensions/Wikibase@master] Avoid covering modal save / cancel buttons with messages

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

@Alice.moutinho - I proposed a workaround in the ticket for status messages covering the save / submit buttons, but as @Lucas_Werkmeister_WMDE points out, this is a UX / product decision. Do you have thoughts about the best way to solve this?

@ArthurTaylor - sorry, i was not aware of this ticket at all! so the green success message should only appear when a publish is successful to the main page, and then it appears not over the edit modal, but on the display page where the new statement/reference/whatever change is shown. So it should actually never cover any buttons!

Screenshot 2025-11-28 at 11.09.59.png (1×1 px, 95 KB)

This can, nevertheless, happen when a publish fails, that the fail message covers the buttons. But the user can always cancel these messages away.

Screenshot 2025-11-28 at 11.10.09.png (1×990 px, 83 KB)

does this help?

@Alice.moutinho The situation happens if you successfully edit and then quickly open the edit dialog again. The green message covers the button for 3 seconds and the question is what to do there.

@ArthurTaylor ahhh i see... ideally, the success message would disappear when the user changes environment - when he leaves the main page.
But we can also follow @Lucas_Werkmeister_WMDE suggestion and have the message float a bit higher above - like the error message already does!

I think @Lucas_Werkmeister_WMDE's suggestion was to immediately dismiss any messages when the form reopens - mine was to move the messages up so that the buttons are not covered. Which of those do you prefer? And if the buttons should be moved up, how far? (Currently the green message floats arbitrarily 100px above the bottom of the form. Anchoring it above the grey line like we do with the red message would be slightly more complicated but also doable.)

Since you said 'ideally' for making them disappear, and since that's easier, I think we can just go with that :)

@ArthurTaylor agreed! especially if it is even easier i would go with that

I think @Lucas_Werkmeister_WMDE's suggestion was to immediately dismiss any messages when the form reopens - mine was to move the messages up so that the buttons are not covered. Which of those do you prefer?

My suggestion was to clear success messages when the form reopens. I’m not convinced clearing error messages, as the patch also does (IIUC), is a good idea – what do you think, Alice?

hello @Lucas_Werkmeister_WMDE. You are right but, error messages always only happen in the edit modal anyway - when there is a publish error the user simply stays where he was, doesn't go back to the main page and cannot click the edit button again. Therefore it shouldn't matter if the code would cancel the error message, because this case never happens anyway. I think?

We saw one counterexample in the showcase meeting today – if you make an error, then correct it and successfully save the statement, the error message can still be there. Alternatively, you can cancel the current edit, and then you’re also back on the “main page” (statement list) and an error message is shown.

Change #1211022 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Avoid covering modal save / cancel buttons with messages

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