Re-design the User Input Questionnaire.

[benbowler]

Summary

Addresses issue:

• UX Updates to User Input Questionnaire #9374

Relevant technical choices

I implemented based on the updated IB, one point that I skipped was "Remove the now unused assets/js/components/user-input/UserInputPreview.js component." because this component is actually currently used in the settings card when Key Metrics are configured.

There was actually a lot of work here that was not fully captured in the IB including adding new states to the ErrorNotice and ProgressBar as well as updating the E2E tests.

---

Initially I implemented segmented logic inside of the existing ProgressBar component, however the designs specified different color segments for each step of progress. This would be a real hack with the existing ProgressBar component so I made a new clean ProgressSegments component including storybook stories.

PR Author Checklist

• My code is tested and passes existing unit tests.
• My code has an appropriate set of unit tests which all pass.
• My code is backward-compatible with WordPress 5.2 and PHP 7.4.
• My code follows the WordPress coding standards.
• My code has proper inline documentation.
• I have added a QA Brief on the issue linked above.
• I have signed the Contributor License Agreement (see https://cla.developers.google.com/).

---

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

Code Reviewer Checklist

• Run the code.
• Ensure the acceptance criteria are satisfied.
• Reassess the implementation with the IB.
• Ensure no unrelated changes are included.
• Ensure CI checks pass.
• Check Storybook where applicable.
• Ensure there is a QA Brief.
• Ensure there are no unexpected significant changes to file sizes.

Merge Reviewer Checklist

• Ensure the PR has the correct target branch.
• Double-check that the PR is okay to be merged.
• Ensure the corresponding issue has a ZenHub release assigned.
• Add a changelog message to the issue.

[github-actions]

Build files for ae09145 have been deleted.

[github-actions]

Size Change: +1.57 kB (+0.09%)

Total Size: 1.83 MB

Filename	Size	Change
./dist/assets/css/googlesitekit-admin-css-********************.min.css	59.3 kB	+354 B (+0.6%)
./dist/assets/js/googlesitekit-activation-********************.js	23.9 kB	-3 B (-0.01%)
./dist/assets/js/googlesitekit-ad-blocking-recovery-********************.js	54.8 kB	+61 B (+0.11%)
./dist/assets/js/googlesitekit-adminbar-********************.js	34.5 kB	+23 B (+0.07%)
./dist/assets/js/googlesitekit-api-********************.js	10.1 kB	-2 B (-0.02%)
./dist/assets/js/googlesitekit-components-gm2-********************.js	6.08 kB	+38 B (+0.63%)
./dist/assets/js/googlesitekit-components-gm3-********************.js	10.1 kB	+2 B (+0.02%)
./dist/assets/js/googlesitekit-data-********************.js	2.37 kB	-3 B (-0.13%)
./dist/assets/js/googlesitekit-datastore-forms-********************.js	8.95 kB	+3 B (+0.03%)
./dist/assets/js/googlesitekit-datastore-location-********************.js	2.08 kB	+1 B (+0.05%)
./dist/assets/js/googlesitekit-datastore-site-********************.js	20.5 kB	-1 B (0%)
./dist/assets/js/googlesitekit-datastore-ui-********************.js	10 kB	+2 B (+0.02%)
./dist/assets/js/googlesitekit-datastore-user-********************.js	26.8 kB	-6 B (-0.02%)
./dist/assets/js/googlesitekit-entity-dashboard-********************.js	81.3 kB	-21 B (-0.03%)
./dist/assets/js/googlesitekit-main-dashboard-********************.js	156 kB	-4 B (0%)
./dist/assets/js/googlesitekit-modules-ads-********************.js	33.4 kB	+50 B (+0.15%)
./dist/assets/js/googlesitekit-modules-adsense-********************.js	111 kB	+69 B (+0.06%)
./dist/assets/js/googlesitekit-modules-analytics-4-********************.js	178 kB	-74 B (-0.04%)
./dist/assets/js/googlesitekit-modules-********************.js	22.2 kB	-3 B (-0.01%)
./dist/assets/js/googlesitekit-modules-pagespeed-insights-********************.js	22.6 kB	+6 B (+0.03%)
./dist/assets/js/googlesitekit-modules-reader-revenue-manager-********************.js	40.6 kB	-1 B (0%)
./dist/assets/js/googlesitekit-modules-search-console-********************.js	59.5 kB	+14 B (+0.02%)
./dist/assets/js/googlesitekit-modules-sign-in-with-google-********************.js	18.2 kB	+104 B (+0.57%)
./dist/assets/js/googlesitekit-modules-tagmanager-********************.js	32.2 kB	+41 B (+0.13%)
./dist/assets/js/googlesitekit-notifications-********************.js	22.7 kB	-4 B (-0.02%)
./dist/assets/js/googlesitekit-settings-********************.js	119 kB	+434 B (+0.37%)
./dist/assets/js/googlesitekit-splash-********************.js	68.8 kB	+27 B (+0.04%)
./dist/assets/js/googlesitekit-user-input-********************.js	43.5 kB	-101 B (-0.23%)
./dist/assets/js/googlesitekit-vendor-********************.js	322 kB	+712 B (+0.22%)
./dist/assets/js/googlesitekit-widgets-********************.js	89.8 kB	-181 B (-0.2%)
./dist/assets/js/googlesitekit-wp-dashboard-********************.js	62.5 kB	+35 B (+0.06%)
./dist/assets/js/runtime-********************.js	1.4 kB	-1 B (-0.07%)

ℹ️ View Unchanged

Filename	Size
./dist/assets/css/googlesitekit-adminbar-css-********************.min.css	11.8 kB
./dist/assets/css/googlesitekit-authorize-application-css-********************.min.css	846 B
./dist/assets/css/googlesitekit-wp-dashboard-css-********************.min.css	8.2 kB
./dist/assets/js/32-********************.js	2.76 kB
./dist/assets/js/33-********************.js	2.25 kB
./dist/assets/js/34-********************.js	3.64 kB
./dist/assets/js/35-********************.js	935 B
./dist/assets/js/36-********************.js	893 B
./dist/assets/js/37-********************.js	1.61 kB
./dist/assets/js/38-********************.js	1.57 kB
./dist/assets/js/39-********************.js	1.61 kB
./dist/assets/js/40-********************.js	1.59 kB
./dist/assets/js/41-********************.js	1.64 kB
./dist/assets/js/42-********************.js	3.12 kB
./dist/assets/js/analytics-advanced-tracking-********************.js	901 B
./dist/assets/js/googlesitekit-consent-mode-********************.js	25.6 kB
./dist/assets/js/googlesitekit-events-provider-contact-form-7-********************.js	646 B
./dist/assets/js/googlesitekit-events-provider-easy-digital-downloads-********************.js	624 B
./dist/assets/js/googlesitekit-events-provider-mailchimp-********************.js	630 B
./dist/assets/js/googlesitekit-events-provider-ninja-forms-********************.js	712 B
./dist/assets/js/googlesitekit-events-provider-optin-monster-********************.js	675 B
./dist/assets/js/googlesitekit-events-provider-popup-maker-********************.js	634 B
./dist/assets/js/googlesitekit-events-provider-woocommerce-********************.js	657 B
./dist/assets/js/googlesitekit-events-provider-wpforms-********************.js	633 B
./dist/assets/js/googlesitekit-i18n-********************.js	3.93 kB
./dist/assets/js/googlesitekit-polyfills-********************.js	377 B

_{compressed-size-action}

[benbowler]

Implemented but I need to update the E2E tests and VRTs.

[zutigrm]

Thanks @benbowler nice work! I just left few comments

[zutigrm]

Thanks, nice one. LGTM

[tofumatt]

Largely looks good, but there's a few small tweaks/adjustments needed to the text ("etc." as an abbreviation of "et cetera" should have a period at the end).