Implement new inline Edit answer interface for User Input Settings

[kuasha420]

Feature Description

#5893 implements "inline" answer editing interface to the preview screen of User Input page. The User Input settings is very similar looking with "Edit" buttons on the questions with a few differences. The same inline editing interface should be added here as well according to the updated design which expands the question the user is editing and blocks out the other questions as seen in the Figma design.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The User Input section of Admin Settings page should implement the new inline edit interface for both desktop and mobile.
• Clicking on Edit should expand the question with all available answers where user can update their choice(s).
• While a question is in this expanded state, other questions should be blocked off from any interactions as seen in the design.
• The expanded state should have Buttons for saving the updated answer ("Confirm changes") and closing the editor without saving ("Cancel").
  • Both buttons should always be available, whether user updated the answers or not.
  • Clicking on "Confirm changes" will save the updated answer to the server and close the editor. If there was no update, it should just close the editor.
  • Clicking on "Cancel" should discard changes (if any) and close the editor.

Implementation Brief

Test Coverage

QA Brief

Changelog entry

[aaemnnosttv]

• Both buttons should always be available, whether user updated the answers or not.
• Clicking on "Confirm changes" will save the updated answer to the server and close the editor. If there was no update, it should just close the editor.

@kuasha420 from what I recall, the confirm changes button should work consistently with module settings in that it should be disabled unless a change has been made compared to the saved settings.

Also, since there is a dedicated issue for this, we should probably highlight this on other related issues to not implement this part of the design yet.

[kuasha420]

Sounds like you're right Evan, I missed the later part of the discussion in Figma. ACs updated.

[tofumatt]

ACs look good here 👍🏻

[techanvil]

IB :white_check_mark:

[nfmohit]

@kuasha420 I was working on the IB of #5896 and I have a quick question/observation (please correct me if I'm wrong). In the Figma design, we show if a different admin has answered a question (i.e. This question has been last answered by). Is this something we want to tackle on this issue?

CC: @aaemnnosttv @tofumatt @techanvil

[kuasha420]

@nfmohit It makes sense to tackle this here and I have added a point about it in the ACs, not sure if it's a good idea to edit ACs at this stage but since this has not yet started, I think we can get away with this one. I have also added a point in the IB to address that part of the issue. Should be doable as a 19sp ticket. cc @FlicHollis

[mohitwp]

QA Update ❌

Verified on dev.

1. Font color is different from figma . In Figma font color is #6C726E and implemented color is #5F6561.

2. Only Question no 1( What is the main purpose of this site?) is getting share between 2 admins and answer is getting update as per last answered by any site admin. Other questions don't have common answers and answers showing as per selection of logged in admin. Is this correct and expected ?

Q-1)

Q-2)

cc @wpdarren

[nfmohit]

Hi @mohitwp. Thank you for sharing your concerns.

Font color is different from figma . In Figma font color is #6C726E and implemented color is #5F6561.

The implemented colour is based on the token used in Figma, i.e. surfaces/on-surface-variant. Differences like this will be fixed as a part of #6328.

Only Question no 1( What is the main purpose of this site?) is getting share between 2 admins and answer is getting update as per last answered by any site admin. Other questions don't have common answers and answers showing as per selection of logged in admin. Is this correct and expected ?

This is expected. Only the first one is a site/global scoped question, the others are user scoped questions.

Thanks!

[mohitwp]

QA Update ✅

Thank you @nfmohit for quick reply here

• Verified on dev.
• Verified the edit answer interface showing and working as per AC.