Remove text field from the "Other" option in all User Input Questions

[kuasha420]

Feature Description

All the user input question has an 'Other' options which allows users to input their own answers in a free form text field. This UI/UX should be removed from both User Input (including inline Edit) screen and the Settings (Edit) screens and replaced with a simple "Other" option without the text field.

---

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

Acceptance criteria

• The "Other" option in all User Input questions should be turned into regular option without the text field.
• This should happen across all User Input screens. ie. questions, reviews, inline edit and settings edit.
• This also means removing any logic tied to the text field and cleaning up unnecessary logic and code after the removal of the aforementioned text field.
• No migration is necessary for users who already answered "Other" with a text answer since the feature has not launched yet.
  • However, make sure it doesn't introduce any UI or console error when an user has already answered other, just silently ignoring the answer and treating the question as unanswered should be enough.

Implementation Brief

• In assets/js/components/user-input/util/constants.js:
  • In the object returned from getUserInputAnswers() function, add a new property having other as the key and Other (translatable) as the value at the end of each nested object (answer item).
• In assets/js/components/user-input/UserInputSelectOptions.js:
  • Inside the return statement, remove the div.googlesitekit-user-input__select-option containing the Other <ListComponent />.
  • Remove the following states, their usages, setters, and any logic around them:
    • other
    • hasOtherError
    • disabled
  • Remove inputRef and its usages.
  • Remove the following functions:
    • onOtherChange
    • onOtherBlur
• In assets/js/components/user-input/UserInputPreviewGroup.js:
  • Remove the definition and usage of the sprintfTemplate variable.
• In assets/sass/components/user-input/googlesitekit-user-input-controls.scss:
  • Remove all styles for .googlesitekit-user-input__select-option .mdc-text-field.
  • Remove all styles for .googlesitekit-user-input__select-option-text-field.

Test Coverage

• No tests need to be added/updated.
• Fix any failing tests.

QA Brief

• Ensure that the userInput feature flag is enabled in the tester plugin.
• Go to the User Input screen.
• Verify that all the questions have the Other option at the end has no text field.
• Verify that using the Other option without the text field works as expected all along.
• Verify that there are no console errors.

Changelog entry

• Remove text field from the "Other" option in all User Input questions.

[tofumatt]

ACs look good, thanks! 👍🏻

[FlicHollis]

Hi @nfmohit please could you add a priority to this ticket. Thanks!

[tofumatt]

Update the options prop by adding a new property having other as the key and Other (translatable) as the value.

You mention updating the options prop in assets/js/components/user-input/UserInputSelectOptions.js, but that prop isn't declared with defaults in that file. The user input code is admittedly a bit hard-to-follow for me, but I'm not sure where this new property will be added based on the IB 🤔

A similar question for the changes to options mentioned in assets/js/components/user-input/UserInputPreview.js—could you be more specific with the change? I don't see what's really supposed to change as that file renders several components with an options prop, though they're all UserInputPreviewGroup…

[nfmohit]

Thank you for the kind review and for adding the priority on my behalf, @tofumatt!

You mention updating the options prop in assets/js/components/user-input/UserInputSelectOptions.js, but that prop isn't declared with defaults in that file. The user input code is admittedly a bit hard-to-follow for me, but I'm not sure where this new property will be added based on the IB 🤔

I was thinking of something like this just at the start of the function:
options[ 'other' ] = __( 'Other', 'google-site-kit' );

But you're right, since the options prop doesn't have a default, it's not likely but could cause side effects. How about we set an empty object as a default for options since it expects an object anyway?

A similar question for the changes to options mentioned in assets/js/components/user-input/UserInputPreview.js—could you be more specific with the change? I don't see what's really supposed to change as that file renders several components with an options prop, though they're all UserInputPreviewGroup…

My mistake here. The file should've been assets/js/components/user-input/UserInputPreviewGroup.js.

I have updated the IB with the above findings. Let me know what you think, thanks!

[tofumatt]

Ohhh, I see what you're proposing now. Basically adding the "Other" option to the supplied options passed to the component.

Given there's only three options, I think it'd be better to add the "Other" option to each object here:

site-kit-wp/assets/js/components/user-input/util/constants.js

Line 42 in 6551b8b

export function getUserInputAnswers() {

It's less "DRY", but it also means we won't have to re-architect the questions if we ever want a question without an "Other" value, and it's also less complexity/code to write. Let's do it that way rather than trying to automate it 🙂

[nfmohit]

Makes sense, I've updated the IB. Thank you @tofumatt!

[tofumatt]

Thanks @nfmohit, I think that's a lot more straightforward 🙂

IB ✅

[mohitwp]

QA Update ✅

• Verified on dev.
• Verified questions, reviews, inline edit and settings edit.
• Text field removed successfully from the 'Other' Option.
• No found any console errors.