Add support for additional survey question type "multi_select"

When the initial user feedback survey was introduced, scope of the MVP was limited to only support questions of the “rating” type, since that was the only one used for the initial survey. This should now be followed up on, with this issue focusing on the “multi_select” question type.

---

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

Acceptance criteria

• A new SurveyQuestionMultiSelect JS component should be introduced and integrated into the user feedback survey JS infrastructure, rendering a survey question of type “multi_select”.
• The UI should look like the above screenshot and follow the “rating” question type where similar (e.g. font, spacing, G icon etc.).
• The available arguments to consider here from the Site Kit Service /survey/trigger/ API response are fairly similar to those for the “rating” type, as follows:
  • question.question.answer_choice contains the list of choices, with answer_ordinal (int) and text (string), like for the rating question type.
    • In addition, an extra write_in boolean property should be supported within each answer choice. If set to true, the respective answer should offer a free-text input where the user can type something custom. In that case, the text field should be displayed right before the text input. The text input must be non-empty in order to proceed. The maximum character limit should be 100. (This additional free-text input concept is also used in #3760, so this should be coordinated to work similarly, potentially reuse common logic where possible.)
  • In addition, question.question.min_choices and question.question.max_choices should be supported - if present, these are integers that limit the minimum required and maximum allowed choices to provide (relevant since this is a multi-select question). The default should be 1 minimum, unlimited maximum.
• The data object for answering the question (what needs to be passed to the answerQuestion function prop) should look as follows:
  • A single answer property, containing an array of objects about the selected answers, each with its answer_ordinal (similar to the “rating” question type), and in addition answer_text (string with free-text input value, if applicable for the selected answer).
  • Example: { answer: [ { answer_ordinal: 2 }, { answer_ordinal: 4, answer_text: 'My custom response' } ] }
• The new question type should have an example in Storybook where it can be inspected, similar to the existing “rating” type component.

Additional ACs after QA

• If the min_choices value is provided and more than 1, a helper text should be shown below the list of answers (to clarify that one answer is not sufficient to proceed): Choose at least %s answers
  • This helper text can have styling similar to the helper text for the open_text question type (see #3762).
• The min_choices and max_choices fields need to be on the question.question object, not the main question object (this is also in the original ACs above, but the implementation is slightly off).

Implementation Brief

Create new component

Create assets/js/components/surveys/SurveyQuestionMultiSelect.js

Base on SurveyQuestionRating.js

• wrap everything in a div with class .googlesitekit-survey__question-rating
• Use SurveyHeader for the current header
• Add string props and propTypes: question
• Add function props and propTypes: answerQuestion, dismissSurvey
• Add number props and propTypes: min_choices, max_choices
• Add choices propType like on SurveyQuestionRating but with an additional boolean write_in key
• Use the TextField, Input, ‘Checkbox’, and ‘Button’ components
• Normalise the choices prop into a datastructure that, for each answer_ordinal, stores a selected bool and answer_text (if write_in is true)
• When an option checkbox is toggled, update the selected value in this data structure for that answer_ordinal
• Do not allow any TextField to be edited if that option is not checked
• In order to limit user input to 100 characters, just disallow extra characters in the TextField’s onChange handler (slicing the text to 100 characters)

Set the disabled prop to true on the submit button if:

• The TextField is empty for a selected option
• There are fewer options selected than the prop min_choices allows
• There are more options selected than the prop max_choices allows

When submitting

• pass the answer to answerQuestion as per AC example.

In assets/sass/components/surveys/_googlesitekit-surveys.scss

• Add a new rule for .googlesitekit-survey__multi-select
• Nest rule for .googlesitekit-survey__body
• Style this to match the design. Something like:
  • phone gap padding on mobile
  • horizontal desktop gap padding on desktop

Add new component to map on assets/js/components/surveys/CurrentSurvey.js

• ComponentMap also needs to map multi_select to SurveyQuestionMultiSelect

❗ ❗ See PR here with everything done up until here https://github.com/google/site-kit-wp/pull/3788 ❗ ❗

Test Coverage

• Add new tests within assets/js/components/surveys/CurrentSurvey.test.js for the new question type.

We need to add this question type to the “main” test suite for CurrentSurvey to make sure the question type works as expected when “plugged in” to the rest of the survey components, next button, etc.

Visual Regression Changes

• None

QA Brief

• Check that https://google.github.io/site-kit-wp/storybook/develop/path=/story/components-surveys--survey-question-multi-select-story works and behaves as per AC
• Enter the code from https://pastebin.com/x0iiFBWh into your browser console on a Site Kit dashboard page to trigger a survey with a question from #3760, this issue (#3761), and #3762.

Changelog entry

• Add multiple choice selection questions to User Input surveys.

[felixarntz]

@aaemnnosttv Added the extra ACs here - note also the actual QA problem I noticed above.

[danielgent]

Done @aaemnnosttv . I put it the same as the other ticket 👍