Add a Storybook story for the new-property row.

Show the Advanced data breakdowns row with the Enable button disabled
during new property setup, and add a Backstop scenario for it.

Author: shervElmi

assets/js/modules/analytics-4/components/settings/SettingsForm.stories.js

@@ -28,7 +28,11 @@ import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
 import { Cell, Grid, Row } from '@/js/material-components';
 import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
 import * as fixtures from '@/js/modules/analytics-4/datastore/__fixtures__';
-import { MODULES_ANALYTICS_4 } from '@/js/modules/analytics-4/datastore/constants';
+import {
+	MODULES_ANALYTICS_4,
+	PROPERTY_CREATE,
+	WEBDATASTREAM_CREATE,
+} from '@/js/modules/analytics-4/datastore/constants';
 import { provideModules } from '@tests/js/utils';
 import WithRegistrySetup from '@tests/js/WithRegistrySetup';
 import SettingsForm from './SettingsForm';
@@ -321,8 +325,11 @@ WithSiteGoalsBreakdownsRow.decorators = [
 			registry
 				.dispatch( MODULES_ANALYTICS_4 )
 				.receiveGetAdvancedDataBreakdownsSettings( {
-					enabled: false,
+					[ propertyID ]: false,
 				} );
+			registry
+				.dispatch( MODULES_ANALYTICS_4 )
+				.receiveGetCustomDimensions( [], { propertyID } );
 		}
 
 		return (
@@ -346,25 +353,21 @@ WithSiteGoalsBreakdownsRowEnabled.decorators = [
 			registry
 				.dispatch( MODULES_ANALYTICS_4 )
 				.receiveGetAdvancedDataBreakdownsSettings( {
-					enabled: true,
+					[ propertyID ]: true,
 				} );
-			registry.dispatch( MODULES_ANALYTICS_4 ).setSettings( {
-				accountID,
-				propertyID,
-				webDataStreamID,
-				measurementID,
-				useSnippet: true,
-				anonymizeIP: true,
-				trackingDisabled: [ 'loggedinUsers' ],
-				availableCustomDimensions: [
-					'googlesitekit_post_date',
-					'googlesitekit_post_author',
-					'googlesitekit_post_categories',
-					'googlesitekit_post_type',
-					'googlesitekit_event_provider',
-					'googlesitekit_form_id',
-				],
-			} );
+			registry
+				.dispatch( MODULES_ANALYTICS_4 )
+				.receiveGetCustomDimensions(
+					[
+						'googlesitekit_post_date',
+						'googlesitekit_post_author',
+						'googlesitekit_post_categories',
+						'googlesitekit_post_type',
+						'googlesitekit_event_provider',
+						'googlesitekit_form_id',
+					],
+					{ propertyID }
+				);
 		}
 
 		return (
@@ -376,6 +379,39 @@ WithSiteGoalsBreakdownsRowEnabled.decorators = [
 ];
 WithSiteGoalsBreakdownsRowEnabled.scenario = {};
 
+export const WithSiteGoalsBreakdownsRowNewProperty = Template.bind( null );
+WithSiteGoalsBreakdownsRowNewProperty.storyName =
+	'With Site Goals custom dimensions row and a new property';
+WithSiteGoalsBreakdownsRowNewProperty.parameters = {
+	features: [ 'siteGoals' ],
+};
+WithSiteGoalsBreakdownsRowNewProperty.decorators = [
+	( Story ) => {
+		function setupRegistry( registry ) {
+			registry
+				.dispatch( MODULES_ANALYTICS_4 )
+				.receiveGetAdvancedDataBreakdownsSettings( {
+					[ propertyID ]: true,
+				} );
+			// Select "Set up a new property", which disables the Enable
+			// button in the Advanced data breakdowns row.
+			registry
+				.dispatch( MODULES_ANALYTICS_4 )
+				.setPropertyID( PROPERTY_CREATE );
+			registry
+				.dispatch( MODULES_ANALYTICS_4 )
+				.setWebDataStreamID( WEBDATASTREAM_CREATE );
+		}
+
+		return (
+			<WithRegistrySetup func={ setupRegistry }>
+				<Story />
+			</WithRegistrySetup>
+		);
+	},
+];
+WithSiteGoalsBreakdownsRowNewProperty.scenario = {};
+
 export default {
 	title: 'Modules/Analytics4/Settings/SettingsEdit',
 	decorators: [