From ebfec7fb30221b185d29fb6b338f82367e00ae74 Mon Sep 17 00:00:00 2001 From: Eugene Manuilov Date: Mon, 27 Sep 2021 17:10:03 +0300 Subject: [PATCH 01/18] Add required areas. --- assets/js/googlesitekit/widgets/default-areas.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/assets/js/googlesitekit/widgets/default-areas.js b/assets/js/googlesitekit/widgets/default-areas.js index f8dfa1b282e..e8ed86cecb2 100644 --- a/assets/js/googlesitekit/widgets/default-areas.js +++ b/assets/js/googlesitekit/widgets/default-areas.js @@ -27,6 +27,11 @@ export const AREA_PAGE_DASHBOARD_ALL_TRAFFIC = 'pageDashboardAllTraffic'; export const AREA_PAGE_DASHBOARD_ACQUISITION = 'pageDashboardAcquisition'; export const AREA_PAGE_DASHBOARD_SPEED = 'pageDashboardSpeed'; +export const AREA_MAIN_DASHBOARD_CONTENT_PRIMARY = + 'mainDashboardContentPrimary'; +export const AREA_ENTITY_DASHBOARD_CONTENT_PRIMARY = + 'entityDashboardContentPrimary'; + export default { AREA_DASHBOARD_ALL_TRAFFIC, AREA_DASHBOARD_SEARCH_FUNNEL, @@ -37,4 +42,6 @@ export default { AREA_PAGE_DASHBOARD_ALL_TRAFFIC, AREA_PAGE_DASHBOARD_ACQUISITION, AREA_PAGE_DASHBOARD_SPEED, + AREA_MAIN_DASHBOARD_CONTENT_PRIMARY, + AREA_ENTITY_DASHBOARD_CONTENT_PRIMARY, }; From 371e42073adda8f10152b78254e4d5a22a73c444 Mon Sep 17 00:00:00 2001 From: Eugene Manuilov Date: Mon, 27 Sep 2021 17:12:30 +0300 Subject: [PATCH 02/18] Update the DashboardPopularKeywordsWidget widget. --- assets/js/modules/search-console/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/assets/js/modules/search-console/index.js b/assets/js/modules/search-console/index.js index 324ad33316f..78bf63af747 100644 --- a/assets/js/modules/search-console/index.js +++ b/assets/js/modules/search-console/index.js @@ -33,6 +33,8 @@ import ModuleOverviewWidget from './components/module/ModuleOverviewWidget'; import { AREA_DASHBOARD_ACQUISITION, AREA_DASHBOARD_SEARCH_FUNNEL, + AREA_ENTITY_DASHBOARD_CONTENT_PRIMARY, + AREA_MAIN_DASHBOARD_CONTENT_PRIMARY, AREA_PAGE_DASHBOARD_ACQUISITION, AREA_PAGE_DASHBOARD_SEARCH_FUNNEL, } from '../../googlesitekit/widgets/default-areas'; @@ -85,7 +87,12 @@ export const registerWidgets = ( widgets ) => { priority: 1, wrapWidget: false, }, - [ AREA_DASHBOARD_ACQUISITION, AREA_PAGE_DASHBOARD_ACQUISITION ] + [ + AREA_DASHBOARD_ACQUISITION, + AREA_PAGE_DASHBOARD_ACQUISITION, + AREA_MAIN_DASHBOARD_CONTENT_PRIMARY, + AREA_ENTITY_DASHBOARD_CONTENT_PRIMARY, + ] ); widgets.registerWidget( 'searchConsoleModuleOverview', From af7076a46a4a55b80b66377553fe3134d61eded6 Mon Sep 17 00:00:00 2001 From: Eugene Manuilov Date: Mon, 27 Sep 2021 17:13:38 +0300 Subject: [PATCH 03/18] Update the DashboardIdeasWidget widget. --- assets/js/modules/idea-hub/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/assets/js/modules/idea-hub/index.js b/assets/js/modules/idea-hub/index.js index c09d3474f1d..a6fc056e743 100644 --- a/assets/js/modules/idea-hub/index.js +++ b/assets/js/modules/idea-hub/index.js @@ -27,8 +27,10 @@ import { __ } from '@wordpress/i18n'; import { MODULES_IDEA_HUB } from './datastore/constants'; import { registerStore as registerDataStore } from './datastore'; import { isFeatureEnabled } from '../../features'; -import { AREA_DASHBOARD_ACQUISITION } from '../../googlesitekit/widgets/default-areas'; - +import { + AREA_DASHBOARD_ACQUISITION, + AREA_MAIN_DASHBOARD_CONTENT_PRIMARY, +} from '../../googlesitekit/widgets/default-areas'; import DashboardIdeasWidget from './components/dashboard/DashboardIdeasWidget'; import IdeaHubIcon from '../../../svg/idea-hub.svg'; import { SettingsView } from './components/settings'; @@ -70,6 +72,6 @@ export const registerWidgets = ifIdeaHubIsEnabled( ( widgets ) => { priority: 2, wrapWidget: false, }, - [ AREA_DASHBOARD_ACQUISITION ] + [ AREA_DASHBOARD_ACQUISITION, AREA_MAIN_DASHBOARD_CONTENT_PRIMARY ] ); } ); From 542f5274c4319d457905904e721ba753c5be58da Mon Sep 17 00:00:00 2001 From: Eugene Manuilov Date: Mon, 27 Sep 2021 17:15:42 +0300 Subject: [PATCH 04/18] Update the DashboardPopularPagesWidget widget. --- assets/js/modules/analytics/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/js/modules/analytics/index.js b/assets/js/modules/analytics/index.js index da6438f7838..90e33018071 100644 --- a/assets/js/modules/analytics/index.js +++ b/assets/js/modules/analytics/index.js @@ -30,6 +30,7 @@ import { AREA_DASHBOARD_SEARCH_FUNNEL, AREA_PAGE_DASHBOARD_SEARCH_FUNNEL, AREA_DASHBOARD_ACQUISITION, + AREA_MAIN_DASHBOARD_CONTENT_PRIMARY, } from '../../googlesitekit/widgets/default-areas'; import { WIDGET_AREA_STYLES } from '../../googlesitekit/widgets/datastore/constants'; import AnalyticsIcon from '../../../svg/analytics.svg'; @@ -122,7 +123,7 @@ export const registerWidgets = ( widgets ) => { priority: 3, wrapWidget: false, }, - [ AREA_DASHBOARD_ACQUISITION ] + [ AREA_DASHBOARD_ACQUISITION, AREA_MAIN_DASHBOARD_CONTENT_PRIMARY ] ); widgets.registerWidget( From df4f0f5b8519e9605d9ec1e25a282497fe0f9ceb Mon Sep 17 00:00:00 2001 From: Eugene Manuilov Date: Mon, 27 Sep 2021 17:17:53 +0300 Subject: [PATCH 05/18] Add the correct width for the DashboardPopularPagesWidget widget. --- assets/js/modules/analytics/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/modules/analytics/index.js b/assets/js/modules/analytics/index.js index 90e33018071..b61e20a25ec 100644 --- a/assets/js/modules/analytics/index.js +++ b/assets/js/modules/analytics/index.js @@ -119,7 +119,7 @@ export const registerWidgets = ( widgets ) => { 'analyticsPopularPages', { Component: DashboardPopularPagesWidget, - width: widgets.WIDGET_WIDTHS.HALF, + width: [ widgets.WIDGET_WIDTHS.HALF, widgets.WIDGET_WIDTHS.FULL ], priority: 3, wrapWidget: false, }, From 9d9e9ef3e57e670c2457f329bd3f28e8bf2af3cd Mon Sep 17 00:00:00 2001 From: Evan Mattson Date: Tue, 28 Sep 2021 19:01:41 +0300 Subject: [PATCH 06/18] Restore base path in CSS output filename. --- webpack.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 39bb96a133a..458545c6755 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -389,8 +389,8 @@ function* webpackConfig( env, argv ) { new MiniCssExtractPlugin( { filename: 'production' === mode - ? '[name].[contenthash].css' - : '[name].css', + ? '/assets/css/[name].[contenthash].css' + : '/assets/css/[name].css', } ), new WebpackBar( { name: 'Plugin CSS', From 8536185d911205351310ef8b7eb16937961c495b Mon Sep 17 00:00:00 2001 From: Eugene Manuilov Date: Wed, 15 Sep 2021 19:19:04 +0300 Subject: [PATCH 07/18] Update setup form to check scopes before submitting the form. --- .../analytics/components/setup/SetupForm.js | 84 +++++++++++++++++-- 1 file changed, 76 insertions(+), 8 deletions(-) diff --git a/assets/js/modules/analytics/components/setup/SetupForm.js b/assets/js/modules/analytics/components/setup/SetupForm.js index 2245b69f40f..c41ecfd406e 100644 --- a/assets/js/modules/analytics/components/setup/SetupForm.js +++ b/assets/js/modules/analytics/components/setup/SetupForm.js @@ -40,11 +40,21 @@ import { MODULES_ANALYTICS, FORM_SETUP, EDIT_SCOPE, + PROPERTY_CREATE, + PROFILE_CREATE, } from '../../datastore/constants'; +import { + MODULES_ANALYTICS_4, + PROPERTY_CREATE as GA4_PROPERTY_CREATE, + WEBDATASTREAM_CREATE, +} from '../../../analytics-4/datastore/constants'; import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants'; import { CORE_FORMS } from '../../../../googlesitekit/datastore/forms/constants'; import { trackEvent } from '../../../../util'; -import { isPermissionScopeError } from '../../../../util/errors'; +import { + ERROR_CODE_MISSING_REQUIRED_SCOPE, + isPermissionScopeError, +} from '../../../../util/errors'; import SetupFormLegacy from './SetupFormLegacy'; import SetupFormUA from './SetupFormUA'; import SetupFormGA4 from './SetupFormGA4'; @@ -52,35 +62,93 @@ import SetupFormGA4Transitional from './SetupFormGA4Transitional'; const { useSelect, useDispatch } = Data; export default function SetupForm( { finishSetup } ) { - const canSubmitChanges = useSelect( ( select ) => - select( MODULES_ANALYTICS ).canSubmitChanges() - ); + const { + canSubmitChanges, + setupFlowMode, + uaPropertyID, + uaProfileID, + } = useSelect( ( select ) => ( { + canSubmitChanges: select( MODULES_ANALYTICS ).canSubmitChanges(), + setupFlowMode: select( MODULES_ANALYTICS ).getSetupFlowMode(), + uaPropertyID: select( MODULES_ANALYTICS ).getPropertyID(), + uaProfileID: select( MODULES_ANALYTICS ).getProfileID(), + } ) ); + const hasEditScope = useSelect( ( select ) => select( CORE_USER ).hasScope( EDIT_SCOPE ) ); + const autoSubmit = useSelect( ( select ) => select( CORE_FORMS ).getValue( FORM_SETUP, 'autoSubmit' ) ); - const setupFlowMode = useSelect( ( select ) => - select( MODULES_ANALYTICS ).getSetupFlowMode() - ); + const { ga4PropertyID, ga4WebDataStreamID } = useSelect( ( select ) => ( { + ga4PropertyID: select( MODULES_ANALYTICS_4 ).getPropertyID(), + ga4WebDataStreamID: select( MODULES_ANALYTICS_4 ).getWebDataStreamID(), + } ) ); + + const { setPermissionScopeError } = useDispatch( CORE_USER ); const { setValues } = useDispatch( CORE_FORMS ); const { submitChanges } = useDispatch( MODULES_ANALYTICS ); const submitForm = useCallback( async ( event ) => { event.preventDefault(); + + const scopes = []; + + if ( + ! hasEditScope && + ( uaPropertyID === PROPERTY_CREATE || + uaProfileID === PROFILE_CREATE || + ga4PropertyID === GA4_PROPERTY_CREATE || + ga4WebDataStreamID === WEBDATASTREAM_CREATE ) + ) { + scopes.push( EDIT_SCOPE ); + } + + // If scope not granted, trigger scope error right away. These are + // typically handled automatically based on API responses, but + // this particular case has some special handling to improve UX. + if ( scopes.length > 0 ) { + // When state is restored, auto-submit the request again. + setValues( FORM_SETUP, { autoSubmit: true } ); + setPermissionScopeError( { + code: ERROR_CODE_MISSING_REQUIRED_SCOPE, + message: __( + 'Additional permissions are required to save Analytics settings.', + 'google-site-kit' + ), + data: { + status: 403, + scopes, + skipModal: true, + }, + } ); + return; + } + const { error } = await submitChanges(); if ( isPermissionScopeError( error ) ) { setValues( FORM_SETUP, { autoSubmit: true } ); } + if ( ! error ) { setValues( FORM_SETUP, { autoSubmit: false } ); await trackEvent( 'analytics_setup', 'analytics_configured' ); finishSetup(); } }, - [ finishSetup, setValues, submitChanges ] + [ + finishSetup, + hasEditScope, + setPermissionScopeError, + setValues, + submitChanges, + ga4PropertyID, + ga4WebDataStreamID, + uaProfileID, + uaPropertyID, + ] ); // If the user lands back on this component with autoSubmit and the edit scope, From 85b54425fcf779f949d47b279669d30aaf42063c Mon Sep 17 00:00:00 2001 From: Eugene Manuilov Date: Thu, 23 Sep 2021 17:20:46 +0300 Subject: [PATCH 08/18] Fix ga4 issues. --- .../analytics/components/setup/SetupForm.js | 35 +++++++++++-------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/assets/js/modules/analytics/components/setup/SetupForm.js b/assets/js/modules/analytics/components/setup/SetupForm.js index c41ecfd406e..15b05e5a8ea 100644 --- a/assets/js/modules/analytics/components/setup/SetupForm.js +++ b/assets/js/modules/analytics/components/setup/SetupForm.js @@ -55,6 +55,7 @@ import { ERROR_CODE_MISSING_REQUIRED_SCOPE, isPermissionScopeError, } from '../../../../util/errors'; +import { useFeature } from '../../../../hooks/useFeature'; import SetupFormLegacy from './SetupFormLegacy'; import SetupFormUA from './SetupFormUA'; import SetupFormGA4 from './SetupFormGA4'; @@ -62,18 +63,17 @@ import SetupFormGA4Transitional from './SetupFormGA4Transitional'; const { useSelect, useDispatch } = Data; export default function SetupForm( { finishSetup } ) { - const { - canSubmitChanges, - setupFlowMode, - uaPropertyID, - uaProfileID, - } = useSelect( ( select ) => ( { - canSubmitChanges: select( MODULES_ANALYTICS ).canSubmitChanges(), - setupFlowMode: select( MODULES_ANALYTICS ).getSetupFlowMode(), - uaPropertyID: select( MODULES_ANALYTICS ).getPropertyID(), - uaProfileID: select( MODULES_ANALYTICS ).getProfileID(), - } ) ); + const isGA4Enabled = useFeature( 'ga4setup' ); + const canSubmitChanges = useSelect( ( select ) => + select( MODULES_ANALYTICS ).canSubmitChanges() + ); + const uaPropertyID = useSelect( ( select ) => + select( MODULES_ANALYTICS ).getPropertyID() + ); + const uaProfileID = useSelect( ( select ) => + select( MODULES_ANALYTICS ).getProfileID() + ); const hasEditScope = useSelect( ( select ) => select( CORE_USER ).hasScope( EDIT_SCOPE ) ); @@ -81,11 +81,16 @@ export default function SetupForm( { finishSetup } ) { const autoSubmit = useSelect( ( select ) => select( CORE_FORMS ).getValue( FORM_SETUP, 'autoSubmit' ) ); + const setupFlowMode = useSelect( ( select ) => + select( MODULES_ANALYTICS ).getSetupFlowMode() + ); - const { ga4PropertyID, ga4WebDataStreamID } = useSelect( ( select ) => ( { - ga4PropertyID: select( MODULES_ANALYTICS_4 ).getPropertyID(), - ga4WebDataStreamID: select( MODULES_ANALYTICS_4 ).getWebDataStreamID(), - } ) ); + const ga4PropertyID = useSelect( ( select ) => + isGA4Enabled ? select( MODULES_ANALYTICS_4 ).getPropertyID() : '' + ); + const ga4WebDataStreamID = useSelect( ( select ) => + isGA4Enabled ? select( MODULES_ANALYTICS_4 ).getWebDataStreamID() : '' + ); const { setPermissionScopeError } = useDispatch( CORE_USER ); const { setValues } = useDispatch( CORE_FORMS ); From cf2888abbcbae3e15c7231fafced033b9af98625 Mon Sep 17 00:00:00 2001 From: Eugene Manuilov Date: Thu, 23 Sep 2021 22:14:40 +0300 Subject: [PATCH 09/18] Fix missing dialog issue. --- assets/js/modules/analytics/components/setup/SetupForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/modules/analytics/components/setup/SetupForm.js b/assets/js/modules/analytics/components/setup/SetupForm.js index 15b05e5a8ea..f3a9a65018a 100644 --- a/assets/js/modules/analytics/components/setup/SetupForm.js +++ b/assets/js/modules/analytics/components/setup/SetupForm.js @@ -126,7 +126,7 @@ export default function SetupForm( { finishSetup } ) { data: { status: 403, scopes, - skipModal: true, + skipModal: false, }, } ); return; From aaee6f40839a0d0508a8e503f1543be23af19a5d Mon Sep 17 00:00:00 2001 From: Eugene Manuilov Date: Mon, 27 Sep 2021 21:37:46 +0300 Subject: [PATCH 10/18] Revert UA property and profile checks. --- .../analytics/components/setup/SetupForm.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/assets/js/modules/analytics/components/setup/SetupForm.js b/assets/js/modules/analytics/components/setup/SetupForm.js index f3a9a65018a..93f436ffb1f 100644 --- a/assets/js/modules/analytics/components/setup/SetupForm.js +++ b/assets/js/modules/analytics/components/setup/SetupForm.js @@ -40,8 +40,6 @@ import { MODULES_ANALYTICS, FORM_SETUP, EDIT_SCOPE, - PROPERTY_CREATE, - PROFILE_CREATE, } from '../../datastore/constants'; import { MODULES_ANALYTICS_4, @@ -68,12 +66,6 @@ export default function SetupForm( { finishSetup } ) { const canSubmitChanges = useSelect( ( select ) => select( MODULES_ANALYTICS ).canSubmitChanges() ); - const uaPropertyID = useSelect( ( select ) => - select( MODULES_ANALYTICS ).getPropertyID() - ); - const uaProfileID = useSelect( ( select ) => - select( MODULES_ANALYTICS ).getProfileID() - ); const hasEditScope = useSelect( ( select ) => select( CORE_USER ).hasScope( EDIT_SCOPE ) ); @@ -103,9 +95,7 @@ export default function SetupForm( { finishSetup } ) { if ( ! hasEditScope && - ( uaPropertyID === PROPERTY_CREATE || - uaProfileID === PROFILE_CREATE || - ga4PropertyID === GA4_PROPERTY_CREATE || + ( ga4PropertyID === GA4_PROPERTY_CREATE || ga4WebDataStreamID === WEBDATASTREAM_CREATE ) ) { scopes.push( EDIT_SCOPE ); @@ -151,8 +141,6 @@ export default function SetupForm( { finishSetup } ) { submitChanges, ga4PropertyID, ga4WebDataStreamID, - uaProfileID, - uaPropertyID, ] ); From 13bb60c205ac853c796b77d5843f8f3746bc107d Mon Sep 17 00:00:00 2001 From: Eugene Manuilov Date: Mon, 27 Sep 2021 21:42:12 +0300 Subject: [PATCH 11/18] Update error title. --- .../analytics/components/setup/SetupForm.js | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/assets/js/modules/analytics/components/setup/SetupForm.js b/assets/js/modules/analytics/components/setup/SetupForm.js index 93f436ffb1f..9e32b4b6e79 100644 --- a/assets/js/modules/analytics/components/setup/SetupForm.js +++ b/assets/js/modules/analytics/components/setup/SetupForm.js @@ -91,14 +91,26 @@ export default function SetupForm( { finishSetup } ) { async ( event ) => { event.preventDefault(); - const scopes = []; + let errorMessage = __( + 'Additional permissions are required to save Analytics settings.', + 'google-site-kit' + ); - if ( - ! hasEditScope && - ( ga4PropertyID === GA4_PROPERTY_CREATE || - ga4WebDataStreamID === WEBDATASTREAM_CREATE ) - ) { - scopes.push( EDIT_SCOPE ); + const scopes = []; + if ( ! hasEditScope ) { + if ( ga4PropertyID === GA4_PROPERTY_CREATE ) { + scopes.push( EDIT_SCOPE ); + errorMessage = __( + 'You’ll need to grant Site Kit permission to create a new Analytics 4 property on your behalf.', + 'google-site-kit' + ); + } else if ( ga4WebDataStreamID === WEBDATASTREAM_CREATE ) { + scopes.push( EDIT_SCOPE ); + errorMessage = __( + 'You’ll need to grant Site Kit permission to create a new Analytics 4 Measurement ID for this site on your behalf.', + 'google-site-kit' + ); + } } // If scope not granted, trigger scope error right away. These are @@ -109,10 +121,7 @@ export default function SetupForm( { finishSetup } ) { setValues( FORM_SETUP, { autoSubmit: true } ); setPermissionScopeError( { code: ERROR_CODE_MISSING_REQUIRED_SCOPE, - message: __( - 'Additional permissions are required to save Analytics settings.', - 'google-site-kit' - ), + message: errorMessage, data: { status: 403, scopes, From 0f2a20f5dff4c48729a14a343941d51d2a1646fb Mon Sep 17 00:00:00 2001 From: Eugene Manuilov Date: Tue, 28 Sep 2021 16:09:29 +0300 Subject: [PATCH 12/18] Rework UA/GA4 settings to save GA4 settings before UA settings only if a new GA4 property needs to be created. --- .../analytics/components/setup/SetupForm.js | 71 +------------------ .../modules/analytics/datastore/settings.js | 48 ++++++++++--- 2 files changed, 42 insertions(+), 77 deletions(-) diff --git a/assets/js/modules/analytics/components/setup/SetupForm.js b/assets/js/modules/analytics/components/setup/SetupForm.js index 9e32b4b6e79..ec41bf8ca39 100644 --- a/assets/js/modules/analytics/components/setup/SetupForm.js +++ b/assets/js/modules/analytics/components/setup/SetupForm.js @@ -41,19 +41,10 @@ import { FORM_SETUP, EDIT_SCOPE, } from '../../datastore/constants'; -import { - MODULES_ANALYTICS_4, - PROPERTY_CREATE as GA4_PROPERTY_CREATE, - WEBDATASTREAM_CREATE, -} from '../../../analytics-4/datastore/constants'; import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants'; import { CORE_FORMS } from '../../../../googlesitekit/datastore/forms/constants'; import { trackEvent } from '../../../../util'; -import { - ERROR_CODE_MISSING_REQUIRED_SCOPE, - isPermissionScopeError, -} from '../../../../util/errors'; -import { useFeature } from '../../../../hooks/useFeature'; +import { isPermissionScopeError } from '../../../../util/errors'; import SetupFormLegacy from './SetupFormLegacy'; import SetupFormUA from './SetupFormUA'; import SetupFormGA4 from './SetupFormGA4'; @@ -61,8 +52,6 @@ import SetupFormGA4Transitional from './SetupFormGA4Transitional'; const { useSelect, useDispatch } = Data; export default function SetupForm( { finishSetup } ) { - const isGA4Enabled = useFeature( 'ga4setup' ); - const canSubmitChanges = useSelect( ( select ) => select( MODULES_ANALYTICS ).canSubmitChanges() ); @@ -77,60 +66,12 @@ export default function SetupForm( { finishSetup } ) { select( MODULES_ANALYTICS ).getSetupFlowMode() ); - const ga4PropertyID = useSelect( ( select ) => - isGA4Enabled ? select( MODULES_ANALYTICS_4 ).getPropertyID() : '' - ); - const ga4WebDataStreamID = useSelect( ( select ) => - isGA4Enabled ? select( MODULES_ANALYTICS_4 ).getWebDataStreamID() : '' - ); - - const { setPermissionScopeError } = useDispatch( CORE_USER ); const { setValues } = useDispatch( CORE_FORMS ); const { submitChanges } = useDispatch( MODULES_ANALYTICS ); const submitForm = useCallback( async ( event ) => { event.preventDefault(); - let errorMessage = __( - 'Additional permissions are required to save Analytics settings.', - 'google-site-kit' - ); - - const scopes = []; - if ( ! hasEditScope ) { - if ( ga4PropertyID === GA4_PROPERTY_CREATE ) { - scopes.push( EDIT_SCOPE ); - errorMessage = __( - 'You’ll need to grant Site Kit permission to create a new Analytics 4 property on your behalf.', - 'google-site-kit' - ); - } else if ( ga4WebDataStreamID === WEBDATASTREAM_CREATE ) { - scopes.push( EDIT_SCOPE ); - errorMessage = __( - 'You’ll need to grant Site Kit permission to create a new Analytics 4 Measurement ID for this site on your behalf.', - 'google-site-kit' - ); - } - } - - // If scope not granted, trigger scope error right away. These are - // typically handled automatically based on API responses, but - // this particular case has some special handling to improve UX. - if ( scopes.length > 0 ) { - // When state is restored, auto-submit the request again. - setValues( FORM_SETUP, { autoSubmit: true } ); - setPermissionScopeError( { - code: ERROR_CODE_MISSING_REQUIRED_SCOPE, - message: errorMessage, - data: { - status: 403, - scopes, - skipModal: false, - }, - } ); - return; - } - const { error } = await submitChanges(); if ( isPermissionScopeError( error ) ) { setValues( FORM_SETUP, { autoSubmit: true } ); @@ -142,15 +83,7 @@ export default function SetupForm( { finishSetup } ) { finishSetup(); } }, - [ - finishSetup, - hasEditScope, - setPermissionScopeError, - setValues, - submitChanges, - ga4PropertyID, - ga4WebDataStreamID, - ] + [ finishSetup, setValues, submitChanges ] ); // If the user lands back on this component with autoSubmit and the edit scope, diff --git a/assets/js/modules/analytics/datastore/settings.js b/assets/js/modules/analytics/datastore/settings.js index 4e9ab4756ff..36f9d8ad5cf 100644 --- a/assets/js/modules/analytics/datastore/settings.js +++ b/assets/js/modules/analytics/datastore/settings.js @@ -28,7 +28,11 @@ import API from 'googlesitekit-api'; import { CORE_FORMS } from '../../../googlesitekit/datastore/forms/constants'; import { CORE_MODULES } from '../../../googlesitekit/modules/datastore/constants'; import { MODULES_TAGMANAGER } from '../../tagmanager/datastore/constants'; -import { MODULES_ANALYTICS_4 } from '../../analytics-4/datastore/constants'; +import { + MODULES_ANALYTICS_4, + PROPERTY_CREATE as GA4_PROPERTY_CREATE, + WEBDATASTREAM_CREATE, +} from '../../analytics-4/datastore/constants'; import { INVARIANT_DOING_SUBMIT_CHANGES, INVARIANT_SETTINGS_NOT_CHANGED, @@ -70,7 +74,22 @@ export const INVARIANT_INVALID_INTERNAL_PROPERTY_ID = export const INVARIANT_INSUFFICIENT_TAG_PERMISSIONS = 'cannot submit without proper permissions'; -export async function submitChanges( { select, dispatch } ) { +async function submitGA4Changes( { select, dispatch } ) { + if ( ! select( MODULES_ANALYTICS_4 ).haveSettingsChanged() ) { + return {}; + } + + const { error } = await dispatch( MODULES_ANALYTICS_4 ).submitChanges(); + if ( isPermissionScopeError( error ) ) { + return { error }; + } + + return {}; +} + +export async function submitChanges( registry ) { + const { select, dispatch } = registry; + let propertyID = select( MODULES_ANALYTICS ).getPropertyID(); if ( propertyID === PROPERTY_CREATE ) { const accountID = select( MODULES_ANALYTICS ).getAccountID(); @@ -108,6 +127,22 @@ export async function submitChanges( { select, dispatch } ) { dispatch( MODULES_ANALYTICS ).setProfileID( profile.id ); } + const canUseGA4Controls = select( MODULES_ANALYTICS ).canUseGA4Controls(); + if ( canUseGA4Controls ) { + const ga4PropertyID = select( MODULES_ANALYTICS_4 ).getPropertyID(); + const ga4StreamID = select( MODULES_ANALYTICS_4 ).getWebDataStreamID(); + + if ( + ga4PropertyID === GA4_PROPERTY_CREATE || + ga4StreamID === WEBDATASTREAM_CREATE + ) { + const { error } = await submitGA4Changes( registry ); + if ( error ) { + return { error }; + } + } + } + // This action shouldn't be called if settings haven't changed, // but this prevents errors in tests. if ( select( MODULES_ANALYTICS ).haveSettingsChanged() ) { @@ -120,12 +155,9 @@ export async function submitChanges( { select, dispatch } ) { await API.invalidateCache( 'modules', 'analytics' ); - if ( - select( MODULES_ANALYTICS ).canUseGA4Controls() && - select( MODULES_ANALYTICS_4 ).haveSettingsChanged() - ) { - const { error } = await dispatch( MODULES_ANALYTICS_4 ).submitChanges(); - if ( isPermissionScopeError( error ) ) { + if ( canUseGA4Controls ) { + const { error } = await submitGA4Changes( registry ); + if ( error ) { return { error }; } } From f2a37b638f7b1a8254d4028c9b6bd7a402456829 Mon Sep 17 00:00:00 2001 From: Eugene Manuilov Date: Tue, 28 Sep 2021 16:10:22 +0300 Subject: [PATCH 13/18] Revert whitespace changes. --- assets/js/modules/analytics/components/setup/SetupForm.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/assets/js/modules/analytics/components/setup/SetupForm.js b/assets/js/modules/analytics/components/setup/SetupForm.js index ec41bf8ca39..2245b69f40f 100644 --- a/assets/js/modules/analytics/components/setup/SetupForm.js +++ b/assets/js/modules/analytics/components/setup/SetupForm.js @@ -58,7 +58,6 @@ export default function SetupForm( { finishSetup } ) { const hasEditScope = useSelect( ( select ) => select( CORE_USER ).hasScope( EDIT_SCOPE ) ); - const autoSubmit = useSelect( ( select ) => select( CORE_FORMS ).getValue( FORM_SETUP, 'autoSubmit' ) ); @@ -71,12 +70,10 @@ export default function SetupForm( { finishSetup } ) { const submitForm = useCallback( async ( event ) => { event.preventDefault(); - const { error } = await submitChanges(); if ( isPermissionScopeError( error ) ) { setValues( FORM_SETUP, { autoSubmit: true } ); } - if ( ! error ) { setValues( FORM_SETUP, { autoSubmit: false } ); await trackEvent( 'analytics_setup', 'analytics_configured' ); From 602d41d44b58d59c4ff71f289dbd98353be698ae Mon Sep 17 00:00:00 2001 From: John Phillips Date: Thu, 16 Sep 2021 14:48:23 +0100 Subject: [PATCH 14/18] Scaffold out DashboardMainApp and DashboardEntityApp. --- .../dashboard-entity/DashboardEntityApp.js | 33 +++++++++++++++++++ .../dashboard-main/DashboardMainApp.js | 28 ++++++++++++++++ assets/js/googlesitekit-dashboard-details.js | 13 +++++++- assets/js/googlesitekit-dashboard.js | 8 +++++ 4 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 assets/js/components/dashboard-entity/DashboardEntityApp.js create mode 100644 assets/js/components/dashboard-main/DashboardMainApp.js diff --git a/assets/js/components/dashboard-entity/DashboardEntityApp.js b/assets/js/components/dashboard-entity/DashboardEntityApp.js new file mode 100644 index 00000000000..4ca340f79f6 --- /dev/null +++ b/assets/js/components/dashboard-entity/DashboardEntityApp.js @@ -0,0 +1,33 @@ +/** + * DashboardEntityApp component. + * + * Site Kit by Google, Copyright 2021 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Internal dependencies + */ +import Header from '../Header'; + +function DashboardEntityApp() { + return ( +
+
+
Entity
+
+ ); +} + +export default DashboardEntityApp; diff --git a/assets/js/components/dashboard-main/DashboardMainApp.js b/assets/js/components/dashboard-main/DashboardMainApp.js new file mode 100644 index 00000000000..b6b972b2e00 --- /dev/null +++ b/assets/js/components/dashboard-main/DashboardMainApp.js @@ -0,0 +1,28 @@ +/** + * DashboardMainApp component. + * + * Site Kit by Google, Copyright 2021 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Internal dependencies + */ +import Header from '../Header'; + +function DashboardMainApp() { + return
; +} + +export default DashboardMainApp; diff --git a/assets/js/googlesitekit-dashboard-details.js b/assets/js/googlesitekit-dashboard-details.js index d649b8f3839..9ec8ea7fae9 100644 --- a/assets/js/googlesitekit-dashboard-details.js +++ b/assets/js/googlesitekit-dashboard-details.js @@ -26,10 +26,21 @@ import { render } from '@wordpress/element'; * Internal dependencies. */ import './components/legacy-notifications'; +import { useFeature } from './hooks/useFeature'; import DashboardDetailsApp from './components/dashboard-details/DashboardDetailsApp'; +import DashboardEntityApp from './components/dashboard-entity/DashboardEntityApp'; import Root from './components/Root'; import { VIEW_CONTEXT_PAGE_DASHBOARD } from './googlesitekit/constants'; +const GoogleSitekitDashboardDetails = () => { + const unifiedDashboardEnabled = useFeature( 'unifiedDashboard' ); + + if ( unifiedDashboardEnabled ) { + return ; + } + return ; +}; + // Initialize the app once the DOM is ready. domReady( () => { const renderTarget = document.getElementById( @@ -39,7 +50,7 @@ domReady( () => { if ( renderTarget ) { render( - + , renderTarget ); diff --git a/assets/js/googlesitekit-dashboard.js b/assets/js/googlesitekit-dashboard.js index 4807950cb63..a1e68cd56ed 100644 --- a/assets/js/googlesitekit-dashboard.js +++ b/assets/js/googlesitekit-dashboard.js @@ -26,9 +26,11 @@ import { render, Fragment } from '@wordpress/element'; * Internal dependencies */ import { clearWebStorage } from './util'; +import { useFeature } from './hooks/useFeature'; import Root from './components/Root'; import ModuleSetup from './components/setup/ModuleSetup'; import DashboardApp from './components/dashboard/DashboardApp'; +import DashboardMainApp from './components/dashboard-main/DashboardMainApp'; import NotificationCounter from './components/legacy-notifications/notification-counter'; import './components/legacy-notifications'; import { @@ -37,6 +39,12 @@ import { } from './googlesitekit/constants'; const GoogleSitekitDashboard = ( { setupModuleSlug } ) => { + const unifiedDashboardEnabled = useFeature( 'unifiedDashboard' ); + + if ( unifiedDashboardEnabled ) { + return ; + } + if ( !! setupModuleSlug ) { return ; } From 1e852722e01dc34b5d4a01478d84c69bc4a68fc5 Mon Sep 17 00:00:00 2001 From: John Phillips Date: Fri, 24 Sep 2021 14:39:32 +0100 Subject: [PATCH 15/18] Remove debug statement. --- .../js/components/dashboard-entity/DashboardEntityApp.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/assets/js/components/dashboard-entity/DashboardEntityApp.js b/assets/js/components/dashboard-entity/DashboardEntityApp.js index 4ca340f79f6..a1150a88e2a 100644 --- a/assets/js/components/dashboard-entity/DashboardEntityApp.js +++ b/assets/js/components/dashboard-entity/DashboardEntityApp.js @@ -22,12 +22,7 @@ import Header from '../Header'; function DashboardEntityApp() { - return ( -
-
-
Entity
-
- ); + return
; } export default DashboardEntityApp; From 283f687fcd0b499eaa5c2fb43ff005fd01f0f8fd Mon Sep 17 00:00:00 2001 From: John Phillips Date: Tue, 28 Sep 2021 17:10:59 +0100 Subject: [PATCH 16/18] Remove folder structure for Dashboard apps (CR feedback). --- .../js/components/{dashboard-entity => }/DashboardEntityApp.js | 2 +- assets/js/components/{dashboard-main => }/DashboardMainApp.js | 2 +- assets/js/googlesitekit-dashboard-details.js | 2 +- assets/js/googlesitekit-dashboard.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) rename assets/js/components/{dashboard-entity => }/DashboardEntityApp.js (96%) rename assets/js/components/{dashboard-main => }/DashboardMainApp.js (96%) diff --git a/assets/js/components/dashboard-entity/DashboardEntityApp.js b/assets/js/components/DashboardEntityApp.js similarity index 96% rename from assets/js/components/dashboard-entity/DashboardEntityApp.js rename to assets/js/components/DashboardEntityApp.js index a1150a88e2a..036b1dd285c 100644 --- a/assets/js/components/dashboard-entity/DashboardEntityApp.js +++ b/assets/js/components/DashboardEntityApp.js @@ -19,7 +19,7 @@ /** * Internal dependencies */ -import Header from '../Header'; +import Header from './Header'; function DashboardEntityApp() { return
; diff --git a/assets/js/components/dashboard-main/DashboardMainApp.js b/assets/js/components/DashboardMainApp.js similarity index 96% rename from assets/js/components/dashboard-main/DashboardMainApp.js rename to assets/js/components/DashboardMainApp.js index b6b972b2e00..d3e50de7471 100644 --- a/assets/js/components/dashboard-main/DashboardMainApp.js +++ b/assets/js/components/DashboardMainApp.js @@ -19,7 +19,7 @@ /** * Internal dependencies */ -import Header from '../Header'; +import Header from './Header'; function DashboardMainApp() { return
; diff --git a/assets/js/googlesitekit-dashboard-details.js b/assets/js/googlesitekit-dashboard-details.js index 9ec8ea7fae9..01b17192989 100644 --- a/assets/js/googlesitekit-dashboard-details.js +++ b/assets/js/googlesitekit-dashboard-details.js @@ -28,7 +28,7 @@ import { render } from '@wordpress/element'; import './components/legacy-notifications'; import { useFeature } from './hooks/useFeature'; import DashboardDetailsApp from './components/dashboard-details/DashboardDetailsApp'; -import DashboardEntityApp from './components/dashboard-entity/DashboardEntityApp'; +import DashboardEntityApp from './components/DashboardEntityApp'; import Root from './components/Root'; import { VIEW_CONTEXT_PAGE_DASHBOARD } from './googlesitekit/constants'; diff --git a/assets/js/googlesitekit-dashboard.js b/assets/js/googlesitekit-dashboard.js index a1e68cd56ed..7404fdf30bc 100644 --- a/assets/js/googlesitekit-dashboard.js +++ b/assets/js/googlesitekit-dashboard.js @@ -30,7 +30,7 @@ import { useFeature } from './hooks/useFeature'; import Root from './components/Root'; import ModuleSetup from './components/setup/ModuleSetup'; import DashboardApp from './components/dashboard/DashboardApp'; -import DashboardMainApp from './components/dashboard-main/DashboardMainApp'; +import DashboardMainApp from './components/DashboardMainApp'; import NotificationCounter from './components/legacy-notifications/notification-counter'; import './components/legacy-notifications'; import { From 1bcc35d090356df17a4c651a354f49cd7279d0ac Mon Sep 17 00:00:00 2001 From: "Matthew Riley MacPherson (tofumatt)" Date: Fri, 8 Oct 2021 22:01:29 +0100 Subject: [PATCH 17/18] Fix widget registration behind feature flags. --- assets/js/modules/analytics/index.js | 13 ------------- assets/js/modules/search-console/index.js | 5 ++++- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/assets/js/modules/analytics/index.js b/assets/js/modules/analytics/index.js index b92274a8639..71918a53124 100644 --- a/assets/js/modules/analytics/index.js +++ b/assets/js/modules/analytics/index.js @@ -33,7 +33,6 @@ import { AREA_DASHBOARD_ACQUISITION, AREA_MAIN_DASHBOARD_CONTENT_PRIMARY, AREA_MAIN_DASHBOARD_TRAFFIC_PRIMARY, - AREA_ENTITY_DASHBOARD_CONTENT_PRIMARY, AREA_ENTITY_DASHBOARD_TRAFFIC_PRIMARY, } from '../../googlesitekit/widgets/default-areas'; import { WIDGET_AREA_STYLES } from '../../googlesitekit/widgets/datastore/constants'; @@ -55,7 +54,6 @@ import { ModulePopularPagesWidget, ModuleAcquisitionChannelsWidget, } from './components/module'; -import DashboardPopularKeywordsWidget from '../search-console/components/dashboard/DashboardPopularKeywordsWidget'; export { registerStore } from './datastore'; @@ -190,16 +188,5 @@ export const registerWidgets = ( widgets ) => { }, [ AREA_MAIN_DASHBOARD_CONTENT_PRIMARY ] ); - - widgets.registerWidget( - 'analyticsPopularPages', - { - Component: DashboardPopularKeywordsWidget, - width: widgets.WIDGET_WIDTHS.FULL, - priority: 1, - wrapWidget: false, - }, - [ AREA_ENTITY_DASHBOARD_CONTENT_PRIMARY ] - ); } }; diff --git a/assets/js/modules/search-console/index.js b/assets/js/modules/search-console/index.js index 7e8c68deb4b..ec9d2554379 100644 --- a/assets/js/modules/search-console/index.js +++ b/assets/js/modules/search-console/index.js @@ -130,7 +130,10 @@ export const registerWidgets = ( widgets ) => { 'searchConsolePopularKeywords', { Component: DashboardPopularKeywordsWidget, - width: widgets.WIDGET_WIDTHS.HALF, + width: [ + widgets.WIDGET_WIDTHS.HALF, + widgets.WIDGET_WIDTHS.FULL, + ], priority: 1, wrapWidget: false, }, From 5a8270fe3dc842413931d720a98c350c63fd6307 Mon Sep 17 00:00:00 2001 From: "Matthew Riley MacPherson (tofumatt)" Date: Fri, 8 Oct 2021 22:21:00 +0100 Subject: [PATCH 18/18] Restore removed module from merge. --- assets/js/modules/analytics/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/assets/js/modules/analytics/index.js b/assets/js/modules/analytics/index.js index 71918a53124..174180c6af2 100644 --- a/assets/js/modules/analytics/index.js +++ b/assets/js/modules/analytics/index.js @@ -161,6 +161,17 @@ export const registerWidgets = ( widgets ) => { }, [ AREA_MODULE_ANALYTICS_MAIN ] ); + + widgets.registerWidget( + 'analyticsModulePopularPages', + { + Component: ModulePopularPagesWidget, + width: widgets.WIDGET_WIDTHS.FULL, + priority: 2, + wrapWidget: false, + }, + [ AREA_MODULE_ANALYTICS_MAIN ] + ); } if ( isFeatureEnabled( 'unifiedDashboard' ) ) {