Prevent errors due to unique data stream name constraint

[aaemnnosttv]

Feature Description

GA4 requires that all data stream names for a property are unique as can be seen in the admin interface:

This constraint can result in failing API requests when attempting to create a data stream that has a non-unique name

While data streams are not the GA4 equivalent of UA views, this is somewhat related to the work we did for enhancing the creation of a new view (see https://github.com/google/site-kit-wp/issues/716).

---

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

Acceptance criteria

• The experience for creating a new web data stream should be updated to provide an input for the stream name when the option is selected to create a new web data stream
• The stream name should default to the same value used today
• If a stream already exists by the same name for the selected property, an error should be displayed and the user should be blocked from submitting changes until it is addressed either by selecting another data stream choice or providing a different name for the stream
• It should not be possible to submit changes when the current web data stream name to create is known to already exist

Note: this is essentially the GA4 version of #716

Implementation Brief

• In assets/js/modules/analytics-4/datastore/constants.js
  • Define new constant FORM_SETUP
• Add assets/js/modules/analytics-4/components/common/WebDataStreamNameInput.js
  • Include a TexField component to render the input field. Default value should be Set up a new web data stream, and this value should be saved to FORM_SETUP, under, say webDataStreamName
  • Show error if user tries to submit the form with this field being empty, if Web Data Stream name already exists, or name is invalid
  • If web data stream is invalid, show error border around this field, instead of select field. And update the select field, to skip that check when WEBDATASTREAM_CREATE option is selected
  • To check if added name, exists, run the value agains all existing Web data streams
  • You can check ProfileNameTextField for inspiration, as it handles similar thing just for UA counterpart
• In assets/js/modules/analytics-4/datastore/settings.js:
  • Pass the webDataStreamName to the createWebDataStream action
  • Include another check if Web data stream name already exists in validateCanSubmitChanges
• In assets/js/modules/analytics-4/datastore/webdatastreams.js:
  • Update createWebDataStream action
    • Check for webDataStreamName value, it should be required and not empty
    • Pass it to the fetchCreateWebDataStream
    • Update fetchCreateWebDataStreamStore to accepts webDataStreamName parameter and forward it to the API request
• Update assets/js/modules/analytics-4/components/setup/SetupForm.js:
  • Render new WebDataStreamNameInput component bellow the other 3 select components, if WEBDATASTREAM_CREATE is selected
  • You can see the example how it is done for Profile name field
• In assets/js/modules/analytics-4/components/settings/SettingsControls.js:
  • Include WebDataStreamNameInput, you can see example here
• In includes/Modules/Analytics_4.php
  • Update POST:create-webdatastream
    • Modify displayName to pull data from webDataStreamName

Test Coverage

• Currently there are no tests for WebDataStreamSelect component, it would be handy to add it as part of this issue, and at least cover the new field behaviour with a test case, as a start.
• Update assets/js/modules/analytics-4/datastore/webdatastreams.test.js, for createWebDataStream to reflect the change of having new webDataStreamName parameter
• Update assets/js/modules/analytics-4/datastore/settings.test.js
  • In some instance where createWebDataStreamsEndpoint is used, include webDataStreamName where/if needed

QA Brief

• Set up SK.
• Go onto setup the Analytics module.
• Choose to create a new web data stream.
• Verify that you see a "Web Data Stream Name" field.
• Verify that it defaults to the site's URL hostname.
• Try making it blank. Verify that it shows an error state with an appropriate message. Also verify that it doesn't let you submit the form.
• Try setting it to a web data stream name that already exists. Verify that it shows an error state with an appropriate message. Also, verify that it doesn't let you submit the form.
• Enter a different web data stream name and set up Analytics.
• Now, go to Analytics settings and try creating a new web data stream from the Analytics settings edit view.
• Perform all the verifications described above.
  • Do note that if you add an invalid web data stream name in the settings edit screen, even though the field will show an error state, it will still let you submit the form. This is likely a pre-existing bug with the module settings edit form that doesn't disable the submission button in an event where it should, instead just changes "Apply changes" to "Save". Please file an issue if you agree this is the case, and if such an issue is not filed already.

Changelog entry

• Enhance Web Data Stream creation in Analytics setup and settings screens to allow using custom web data stream name.