Enhance/#8177 - Add the settings section toggle switch for audience segmentation widget area visibility

[hussain-t]

Summary

Addresses issue:

• Add the Settings Section toggle switch variant and hook up the setting to toggle the Audiences Widget Area on/off #8177

Relevant technical choices

• The IB suggests creating a new file in the assets/js/modules/analytics-4/components/settings/AudienceSegmentation directory. However, as a convention, all other admin settings files and components are in assets/js/components/settings/. Hence, the SettingsVisitorGroups component is created in assets/js/components/settings/.

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 5.6.
• 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.

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 5f47018 have been deleted.

[github-actions]

Size Change: +291 B (0%)

Total Size: 1.42 MB

Filename	Size	Change
./dist/assets/js/34-********************.js	3.12 kB	-1 B (0%)
./dist/assets/js/googlesitekit-activation-********************.js	23.8 kB	-3 B (0%)
./dist/assets/js/googlesitekit-ad-blocking-recovery-********************.js	57.4 kB	+9 B (0%)
./dist/assets/js/googlesitekit-adminbar-********************.js	34.1 kB	+1 B (0%)
./dist/assets/js/googlesitekit-api-********************.js	10 kB	+1 B (0%)
./dist/assets/js/googlesitekit-components-gm2-********************.js	5.87 kB	+3 B (0%)
./dist/assets/js/googlesitekit-components-gm3-********************.js	10 kB	-4 B (0%)
./dist/assets/js/googlesitekit-data-********************.js	2.17 kB	-1 B (0%)
./dist/assets/js/googlesitekit-datastore-forms-********************.js	9.11 kB	-2 B (0%)
./dist/assets/js/googlesitekit-datastore-site-********************.js	18.3 kB	-1 B (0%)
./dist/assets/js/googlesitekit-datastore-ui-********************.js	10 kB	-1 B (0%)
./dist/assets/js/googlesitekit-datastore-user-********************.js	24.4 kB	-3 B (0%)
./dist/assets/js/googlesitekit-entity-dashboard-********************.js	66.8 kB	-13 B (0%)
./dist/assets/js/googlesitekit-main-dashboard-********************.js	91.2 kB	+3 B (0%)
./dist/assets/js/googlesitekit-modules-********************.js	21.7 kB	-1 B (0%)
./dist/assets/js/googlesitekit-modules-ads-********************.js	16.7 kB	-4 B (0%)
./dist/assets/js/googlesitekit-modules-adsense-********************.js	111 kB	+34 B (0%)
./dist/assets/js/googlesitekit-modules-analytics-4-********************.js	111 kB	-5 B (0%)
./dist/assets/js/googlesitekit-modules-pagespeed-insights-********************.js	22.5 kB	-1 B (0%)
./dist/assets/js/googlesitekit-modules-search-console-********************.js	58 kB	-3 B (0%)
./dist/assets/js/googlesitekit-modules-tagmanager-********************.js	30 kB	-2 B (0%)
./dist/assets/js/googlesitekit-settings-********************.js	59.2 kB	+249 B (0%)
./dist/assets/js/googlesitekit-splash-********************.js	72 kB	+12 B (0%)
./dist/assets/js/googlesitekit-user-input-********************.js	46.9 kB	+18 B (0%)
./dist/assets/js/googlesitekit-vendor-********************.js	316 kB	+8 B (0%)
./dist/assets/js/googlesitekit-wp-dashboard-********************.js	60 kB	-3 B (0%)
./dist/assets/js/runtime-********************.js	1.3 kB	+1 B (0%)

ℹ️ View Unchanged

Filename	Size
./dist/assets/css/googlesitekit-admin-css-********************.min.css	53 kB
./dist/assets/css/googlesitekit-adminbar-css-********************.min.css	11.2 kB
./dist/assets/css/googlesitekit-wp-dashboard-css-********************.min.css	7.47 kB
./dist/assets/js/29-********************.js	2.8 kB
./dist/assets/js/30-********************.js	2.28 kB
./dist/assets/js/31-********************.js	3.72 kB
./dist/assets/js/32-********************.js	930 B
./dist/assets/js/33-********************.js	888 B
./dist/assets/js/analytics-advanced-tracking-********************.js	778 B
./dist/assets/js/googlesitekit-datastore-location-********************.js	2.09 kB
./dist/assets/js/googlesitekit-i18n-********************.js	3.92 kB
./dist/assets/js/googlesitekit-polyfills-********************.js	379 B
./dist/assets/js/googlesitekit-widgets-********************.js	33.2 kB

_{compressed-size-action}

[aaemnnosttv]

@techanvil @hussain-t

[aaemnnosttv]

This is a misspelling which was copied from the design. I've raised it there as well but we should fix this in a follow-up.

[techanvil]

Thanks @aaemnnosttv, I've created #8496 to address this.

[techanvil]

Hi @hussain-t, just a heads up that while I did spot your note about the location for this file in relevant technical choices, the location specced in the IB was actually correct, in line with the code organization section of the design doc and as mentioned here: #8177 (comment)

An extra wrinkle is that in fact we have also identified this initial code org as needing improvement and we're going to move the Audience Segmentation component files under assets/js/modules/analytics-4/components/audience-segmentation/ instead.

I've created #8495 to address the wider reorganisation, but in the meantime we should stick to the code structure outlined in the design doc to make it easy to keep track of all the Audience Segmentation components and move them appropriately when the time comes.

I've also created #8496 to address the typo that Evan spotted and mentioned separately in this issue (which of course was simply copied from Figma and not introduced via this PR), and to move this component at the same time.

[hussain-t]

Thanks for pointing it out, @techanvil 👍