Page MenuHomePhabricator

Proof of concept for editing statements in Paulina
Open, Needs TriagePublicFeature

Assigned To
Authored By
Pepe_piton
Sep 23 2025, 9:09 PM
Referenced Files
F66744789: image.png
Oct 12 2025, 10:08 AM
F66744782: image.png
Oct 12 2025, 10:08 AM
F66744779: image.png
Oct 12 2025, 10:08 AM
F66743334: Screen Shot 2025-10-11 at 6.19.31 PM.png
Oct 11 2025, 5:42 PM
F66743331: Screen Shot 2025-10-11 at 6.19.24 PM.png
Oct 11 2025, 5:42 PM
F66743328: Screen Shot 2025-10-11 at 3.59.52 PM.png
Oct 11 2025, 5:42 PM
F66740337: After_publish.png
Oct 9 2025, 4:07 PM
F66740335: after_edit.png
Oct 9 2025, 4:07 PM

Description

Feature summary: This is a proof of concept for editing statements in Paulina. In this initial test task, the idea is to place a pencil icon next to a data field on the author page user interface. When the user clicks on the pencil icon, the interface allows them to edit the field. The user can then edit the data and, when they finish, they click the check icon, which allows them to publish the information.

Here's a sketch of what the "Nationality" field should look like before the user clicks on the pencil:

editing-interface-before-click.png (736×1 px, 162 KB)

And a second sketch of what the "Nationality" field should look after the user clicks on the pencil, with an editable text form:

editing-interface-after-click.png (734×1 px, 185 KB)

Once the user clicks on the check (publish) icon, Paulina "saves" the edition and the user interface looks again as in the first sketch, but with the new text.

For now, there's no need for the user's input to persist across page reloads. Instead, the task is just focused on creating a user-friendly editing interface using JavaScript.

To work with icons, Paulina uses Bootstrap icons. They can be implemented in the html template using, for example: <i class="bi bi-pencil-fill"></i>

Benefits: This proof of concept will serve to test a user interface for data editing, which will later incorporate the ability to connect to Wikidata and edit statements in Wikidata items.

Event Timeline

Hello @Pepe_piton , I would like to work on this task please.

Hello, @Nurah_Wakili ! Assingning the task to you, happy coding!

sorry @Nurah_Wakili I just saw you have another microtask assigned, removing you as the assignee to that other contributor gets the chance

Hi, @Nat_WDU. I would like to work on this task if it is available.

Olatundeawo subscribed.

I will love to work on this task

Hello @Nat_WDU, I have already completed my assigned task and created a merge request for it. I would like to take this on if it's still available. Thanks

@Nat_WDU I made a merge request for this task. I used Bootstrap icons (pencil, check, and cancel) and JavaScript logic to toggle between view and edit modes. When the user clicks the pencil icon, the field becomes editable; clicking the check updates the displayed text and clicking the cancel icon restores the original value. Merge request- https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/10

Paulina_Tool1.png (883×1 px, 218 KB)

Paulina_Tool2.png (860×1 px, 212 KB)

@Nat_WDU I Implemented an inline edit functionality for author data fields in Paulina’s user interface using bootstrap icons and Javascript logic. When a users click the pencil icon, the field becomes editable, allowing them to modify the text and confirm changes using the check (publish) icon. Additionally, I introduced a cancel button that is beyond the initial task scope to enhance usability. This feature restores the field’s original value when users decide not to proceed with their edits, ensuring a more intuitive and user-friendly editing experience. Merge request: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/18

Before Edit Icon is clicked:

before_edit.png (852×1 px, 243 KB)

After Edit Icon is clicked:

after_edit.png (847×1 px, 245 KB)

After "Publish" button is clicked, displaying the new values:

After_publish.png (855×1 px, 242 KB)

@Nat_WDU I added an interactive edit feature to the author section.
Specifically, I implemented a pencil icon using Bootstrap icons, which serves as an edit button.
When clicked, it triggers a separate JavaScript function that allows users to update or change the author’s nationality dynamically.

This improvement enhances the user experience by making author details editable directly from the interface instead of through a static form.

https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/19

Hi @Pepe_piton @Nat_WDU
I have completed the proof of concept for editing statements in Paulina. The interface now allows inline editing of fields with pencil and check icons. Please have a look when you can. 😊
Here is the link to my MR: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/54

The "Nationality" field before the user clicks on the pencil:

Screen Shot 2025-10-11 at 3.59.52 PM.png (1×2 px, 294 KB)

The "Nationality" field after the user clicks on the pencil, with an editable text form:

Screen Shot 2025-10-11 at 6.19.24 PM.png (1×2 px, 278 KB)

Without any action:

Screen Shot 2025-10-11 at 6.19.31 PM.png (1×2 px, 277 KB)

Hello @Pepe_piton @Nat_WDU I have shared a merge request on this task. As per the requirements, there is a pencil icon next to the author's nationality. When a user clicks on the pencil icon, they can edit the field. They can then edit the nationality and when they finish, click the check icon to publish the information. An added feature is the ability to cancel their edit if they no longer want to edit it. Here is the link to the request: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/57

What the "Nationality" field looks like before the user clicks on the pencil:

image.png (894×1 px, 184 KB)

What the "Nationality" field looks like after the user clicks on the pencil, with an editable text form and the option to cancel their edit:

image.png (894×1 px, 184 KB)

After editing, displaying the new nationality (Paulina "saves" the edition and the user interface looks again as in the first sketch, but with the new nationality):

image.png (894×1 px, 184 KB)

hey @Pepe_piton @Nat_WDU
i made a merge request related this issue:-https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/82
changes made:-

  • Added pencil icon next to field.
  • Clicking the pencil replaces the text with an input box and a check icon.
  • Clicking the check saves and restores the updated value.

I'd appreciate it if you could take a look at my work and provide feedback. I want to make sure I'm meeting expectations and understand any areas for improvemen

@Ritika-Bhambri11 I like very much your approach, and I also like that you added the cancel button and the "Esc" key cancel action. It works well and the code is pretty straightforward. Congrats!

@Nurah_Wakili Thanks for your contribution! Your solution works super well. I like the styling of the icons. I also like that you added the "Nationality cannot be empty" alert. One minor detail: the alert message and the "Cancel" and "Publish" strings weren't prepared for translation. This is very easy to add using Jinja's syntax.

@Olatundeawo Thanks for contributing! I like very much the idea of working in a separate .js file for a feature like this, which requires several dozen lines of code. The edit pencil works super well. The input part of the task also works well, but it could be better if the JS code also listens to the "Enter" key to save the input. Another little problem that i found is that, once you save the input, the interface doesn't allow you to edit the field again. Good work anyway!

@Oluwatumininu.m I really liked the addition of css styles. Very nice! The feature works very well. The only minor detail I found is that if the user clicks outside the input box, the interface saves the input. May be it's better to leave the input box editable until the user clicks on the publish button or hits the "Enter" key.

@Kimondorose The feature works perfectly. Congrats! There's a slight style mismatch in the underlining of the "publish" and "cancel" links, but it's a minor issue. As for the author template CSS styles, I think you can add them to main.css, so that they can then be used to replicate the styles on other pages.

@Dipanshu1223 Good work. Your solution meets the request. As I mentioned in a previous comment, it might be helpful if the script listened for the Enter key to save the input. Additionally, a cursor pointer could be added when hovering over the icons, to indicate interactivity. And finally, something we didn't ask for in the task but several people added, and I understand is very useful, is a cancel button.

Thank you all for your excellent work and dedication to this task!

Hello @Pepe_piton, I have now added a wrapper for the 'Publish' & 'Cancel' buttons and also the alert message so all user-facing strings can be properly translated. Thank you so much for the feedback!
MR: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/18

hi @Pepe_piton @Nat_WDU
Thanks for feedback @Pepe_piton
i made some changes a merge request related this issue:-https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/82
changes made:-

  • Added hover effect on cursor
  • Added keyboard shortcuts: Enter to save and Escape to cancel
  • Added a Cancel button
  • Added validation: “Nationality cannot be empty” message

I'd appreciate it if you could take a look at my work and provide feedback. I want to make sure I'm meeting expectations and understand any areas for improvemen

@Oluwatumininu.m I really liked the addition of css styles. Very nice! The feature works very well. The only minor detail I found is that if the user clicks outside the input box, the interface saves the input. May be it's better to leave the input box editable until the user clicks on the publish button or hits the "Enter" key.

Thank you very much for the feedback.
I have made corrections to the input box. It is editable until the user clicks on the publish button.

Updated commit: https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/54/commits

@Olatundeawo Thanks for contributing! I like very much the idea of working in a separate .js file for a feature like this, which requires several dozen lines of code. The edit pencil works super well. The input part of the task also works well, but it could be better if the JS code also listens to the "Enter" key to save the input. Another little problem that i found is that, once you save the input, the interface doesn't allow you to edit the field again. Good work anyway!

Thanks for the feedback, this is the adjustment version https://gitlab.wikimedia.org/toolforge-repos/paulina/-/merge_requests/19

@Sopzy You did a great job implementing everything we asked for in a very straightforward way. Perhaps the only thing missing is the ability to exit editing without saving, but that''s something I didn't explicitly ask for.

@Sopzy You did a great job implementing everything we asked for in a very straightforward way. Perhaps the only thing missing is the ability to exit editing without saving, but that''s something I didn't explicitly ask for.

You're spot on!

Thanks for the feedback @Pepe_piton