Skip to content

Commit 0e02524

Browse files
tofumatttofumatt
authored
Merge pull request #7178 from google/followup/6262-user-input-side-effect
Only render Key Metrics settings card when user input is enabled
2 parents 3f65a39 + 4e63d37 commit 0e02524

File tree

6 files changed

+126
-131
lines changed

6 files changed

+126
-131
lines changed

‎assets/js/components/settings/SettingsAdmin.js

Lines changed: 2 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -19,119 +19,27 @@
1919
/**
2020
* WordPress dependencies
2121
*/
22-
import { useEffect } from '@wordpress/element';
2322
import { __ } from '@wordpress/i18n';
24-
import { addQueryArgs } from '@wordpress/url';
2523

2624
/**
2725
* Internal dependencies
2826
*/
29-
import Data from 'googlesitekit-data';
30-
import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
31-
import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
32-
import { CORE_LOCATION } from '../../googlesitekit/datastore/location/constants';
3327
import Layout from '../layout/Layout';
3428
import { Grid, Cell, Row } from '../../material-components';
3529
import OptIn from '../OptIn';
3630
import ResetButton from '../ResetButton';
37-
import UserInputPreview from '../user-input/UserInputPreview';
38-
import { USER_INPUT_QUESTIONS_LIST } from '../user-input/util/constants';
3931
import { useFeature } from '../../hooks/useFeature';
40-
import { trackEvent } from '../../util';
32+
import SettingsCardKeyMetrics from './SettingsCardKeyMetrics';
4133
import SettingsPlugin from './SettingsPlugin';
42-
import useViewContext from '../../hooks/useViewContext';
43-
import SettingsKeyMetrics from './SettingsKeyMetrics';
44-
import Link from '../Link';
45-
const { useSelect, useDispatch } = Data;
4634

4735
export default function SettingsAdmin() {
48-
const viewContext = useViewContext();
4936
const userInputEnabled = useFeature( 'userInput' );
50-
const isUserInputCompleted = useSelect(
51-
( select ) =>
52-
userInputEnabled && select( CORE_USER ).isUserInputCompleted()
53-
);
54-
const userInputURL = useSelect( ( select ) =>
55-
select( CORE_SITE ).getAdminURL( 'googlesitekit-user-input' )
56-
);
57-
58-
const { navigateTo } = useDispatch( CORE_LOCATION );
59-
const goTo = ( questionIndex = 1 ) => {
60-
const questionSlug = USER_INPUT_QUESTIONS_LIST[ questionIndex - 1 ];
61-
if ( questionSlug ) {
62-
trackEvent( viewContext, 'question_edit', questionSlug );
63-
64-
navigateTo(
65-
addQueryArgs( userInputURL, {
66-
question: questionSlug,
67-
redirect_url: global.location.href,
68-
single: 'settings', // Allows the user to edit a single question then return to the settings page.
69-
} )
70-
);
71-
}
72-
};
73-
74-
const hasUserPickedMetrics = useSelect( ( select ) =>
75-
select( CORE_USER ).getUserPickedMetrics()
76-
);
77-
const ctaLabel = !! hasUserPickedMetrics?.length
78-
? __( 'Set your site goals', 'google-site-kit' )
79-
: __( 'Personalize your metrics', 'google-site-kit' );
80-
81-
useEffect( () => {
82-
if ( isUserInputCompleted ) {
83-
trackEvent( viewContext, 'summary_view' );
84-
}
85-
}, [ isUserInputCompleted, viewContext ] );
8637

8738
return (
8839
<Row>
8940
{ userInputEnabled && (
9041
<Cell size={ 12 }>
91-
<Layout
92-
title={ __( 'Key metrics', 'google-site-kit' ) }
93-
header
94-
rounded
95-
>
96-
<div className="googlesitekit-settings-module googlesitekit-settings-module--active googlesitekit-settings-user-input">
97-
<SettingsKeyMetrics />
98-
<Grid>
99-
{ isUserInputCompleted && (
100-
<Row>
101-
<Cell size={ 12 }>
102-
<UserInputPreview
103-
goTo={ goTo }
104-
noHeader
105-
noFooter
106-
settingsView
107-
showIndividualCTAs
108-
/>
109-
</Cell>
110-
</Row>
111-
) }
112-
{ isUserInputCompleted === false && (
113-
<Row>
114-
<Cell
115-
className="googlesitekit-user-input__notification"
116-
size={ 12 }
117-
>
118-
<p>
119-
<span>
120-
{ __(
121-
'Answer 3 quick questions to help us show the most relevant data for your site',
122-
'google-site-kit'
123-
) }
124-
</span>
125-
</p>
126-
<Link href={ userInputURL }>
127-
{ ctaLabel }
128-
</Link>
129-
</Cell>
130-
</Row>
131-
) }
132-
</Grid>
133-
</div>
134-
</Layout>
42+
<SettingsCardKeyMetrics />
13543
</Cell>
13644
) }
13745

‎assets/js/components/settings/SettingsApp.test.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,6 @@ describe( 'SettingsApp', () => {
5858
registry
5959
.dispatch( CORE_SITE )
6060
.receiveGetAdminBarSettings( { enabled: true } );
61-
registry.dispatch( CORE_USER ).receiveGetKeyMetricsSettings( {
62-
widgetSlugs: [],
63-
isWidgetHidden: false,
64-
} );
6561

6662
provideSiteInfo( registry, {
6763
proxySupportLinkURL: 'https://test.com',

‎assets/js/components/settings/SettingsCardKeyMetrics.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
/**
2+
* Site Kit by Google, Copyright 2023 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* WordPress dependencies
19+
*/
20+
import { useEffect } from '@wordpress/element';
21+
import { __ } from '@wordpress/i18n';
22+
import { addQueryArgs } from '@wordpress/url';
23+
24+
/**
25+
* Internal dependencies
26+
*/
27+
import Data from 'googlesitekit-data';
28+
import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
29+
import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
30+
import { CORE_LOCATION } from '../../googlesitekit/datastore/location/constants';
31+
import { USER_INPUT_QUESTIONS_LIST } from '../user-input/util/constants';
32+
import { trackEvent } from '../../util';
33+
import useViewContext from '../../hooks/useViewContext';
34+
import SettingsKeyMetrics from './SettingsKeyMetrics';
35+
import UserInputPreview from '../user-input/UserInputPreview';
36+
import Layout from '../layout/Layout';
37+
import { Grid, Cell, Row } from '../../material-components';
38+
import Link from '../Link';
39+
40+
const { useSelect, useDispatch } = Data;
41+
42+
export default function SettingsCardKeyMetrics() {
43+
const viewContext = useViewContext();
44+
const isUserInputCompleted = useSelect( ( select ) =>
45+
select( CORE_USER ).isUserInputCompleted()
46+
);
47+
const userInputURL = useSelect( ( select ) =>
48+
select( CORE_SITE ).getAdminURL( 'googlesitekit-user-input' )
49+
);
50+
51+
useEffect( () => {
52+
if ( isUserInputCompleted ) {
53+
trackEvent( viewContext, 'summary_view' );
54+
}
55+
}, [ isUserInputCompleted, viewContext ] );
56+
57+
const { navigateTo } = useDispatch( CORE_LOCATION );
58+
const goTo = ( questionIndex = 1 ) => {
59+
const questionSlug = USER_INPUT_QUESTIONS_LIST[ questionIndex - 1 ];
60+
if ( questionSlug ) {
61+
trackEvent( viewContext, 'question_edit', questionSlug );
62+
63+
navigateTo(
64+
addQueryArgs( userInputURL, {
65+
question: questionSlug,
66+
redirect_url: global.location.href,
67+
single: 'settings', // Allows the user to edit a single question then return to the settings page.
68+
} )
69+
);
70+
}
71+
};
72+
73+
const hasUserPickedMetrics = useSelect( ( select ) =>
74+
select( CORE_USER ).getUserPickedMetrics()
75+
);
76+
77+
const ctaLabel = !! hasUserPickedMetrics?.length
78+
? __( 'Set your site goals', 'google-site-kit' )
79+
: __( 'Personalize your metrics', 'google-site-kit' );
80+
81+
return (
82+
<Layout title={ __( 'Key metrics', 'google-site-kit' ) } header rounded>
83+
<div className="googlesitekit-settings-module googlesitekit-settings-module--active googlesitekit-settings-user-input">
84+
<SettingsKeyMetrics />
85+
86+
<Grid>
87+
{ isUserInputCompleted && (
88+
<Row>
89+
<Cell size={ 12 }>
90+
<UserInputPreview
91+
goTo={ goTo }
92+
noHeader
93+
noFooter
94+
settingsView
95+
showIndividualCTAs
96+
/>
97+
</Cell>
98+
</Row>
99+
) }
100+
101+
{ isUserInputCompleted === false && (
102+
<Row>
103+
<Cell
104+
className="googlesitekit-user-input__notification"
105+
size={ 12 }
106+
>
107+
<p>
108+
<span>
109+
{ __(
110+
'Answer 3 quick questions to help us show the most relevant data for your site',
111+
'google-site-kit'
112+
) }
113+
</span>
114+
</p>
115+
116+
<Link href={ userInputURL }>{ ctaLabel }</Link>
117+
</Cell>
118+
</Row>
119+
) }
120+
</Grid>
121+
</div>
122+
</Layout>
123+
);
124+
}

‎assets/js/components/settings/SettingsModules.test.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,6 @@ describe( 'SettingsModules', () => {
9494
coreUserTrackingSettingsEndpointRegExp,
9595
coreUserTrackingResponse
9696
);
97-
registry.dispatch( CORE_USER ).receiveGetKeyMetricsSettings( {
98-
widgetSlugs: [],
99-
isWidgetHidden: false,
100-
} );
10197

10298
await registry.dispatch( CORE_USER ).setTrackingEnabled( false );
10399

‎tests/e2e/specs/admin-tracking.test.js

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,6 @@ describe( 'admin tracking', () => {
5050
useRequestInterception( ( request ) => {
5151
const url = request.url();
5252
if (
53-
url.match( '/google-site-kit/v1/core/user/data/key-metrics' )
54-
) {
55-
request.respond( {
56-
status: 200,
57-
body: JSON.stringify( {
58-
widgetSlugs: [],
59-
isWidgetHidden: false,
60-
} ),
61-
} );
62-
} else if (
6353
url.match(
6454
'/google-site-kit/v1/modules/search-console/data/searchanalytics'
6555
)

‎tests/e2e/specs/plugin-reset.test.js

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
setClientConfig,
1616
setSearchConsoleProperty,
1717
setSiteVerification,
18-
useRequestInterception,
1918
} from '../utils';
2019

2120
describe( 'Plugin Reset', () => {
@@ -25,24 +24,6 @@ describe( 'Plugin Reset', () => {
2524
await setAuthToken();
2625
await setSiteVerification();
2726
await setSearchConsoleProperty();
28-
29-
await page.setRequestInterception( true );
30-
useRequestInterception( ( request ) => {
31-
const url = request.url();
32-
if (
33-
url.match( '/google-site-kit/v1/core/user/data/key-metrics' )
34-
) {
35-
request.respond( {
36-
status: 200,
37-
body: JSON.stringify( {
38-
widgetSlugs: [],
39-
isWidgetHidden: false,
40-
} ),
41-
} );
42-
} else {
43-
request.continue();
44-
}
45-
} );
4627
} );
4728

4829
beforeEach( async () => {

0 commit comments

Comments
 (0)