Add Sign in with Google Settings View screen. #9685

tofumatt · 2024-11-14T04:06:37Z

Summary

Addresses issue:

Create Sign in With Google Settings module settings view screen #9477

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 7.4.
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.
Ensure there are no unexpected significant changes to file sizes.

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 · 2024-11-14T18:03:27Z

Build files for 2c114eb have been deleted.

aaemnnosttv

Thanks @tofumatt – perhaps I'm missing an important detail but it seems like the infra related to the site registration setting could be simplified. Otherwise left a few other points throughout.

assets/js/modules/sign-in-with-google/components/settings/SettingsView.js

assets/js/modules/sign-in-with-google/components/settings/SettingsView.stories.js

includes/Modules/Sign_In_With_Google.php

aaemnnosttv · 2024-11-15T00:36:08Z

assets/js/modules/sign-in-with-google/components/settings/SettingsView.js

+							<SettingsNotice
+								type={ TYPE_WARNING }


Not sure what happened here, but this looks quite different from the design

I just used the Notice component so I figured it was a mismatch between the components and Figma, but I can make some adjustments 🤔

I've updated it to closer match Figma:

My instinct is always to use our base components as they are, and have issues to modify them, but this change was small so I made it here.

I'm guessing we weren't really using it elsewhere, but there are a few instances. A bit concerning that it looks so off and we haven't noticed it elsewhere 🤔

My instinct is always to use our base components as they are, and have issues to modify them, but this change was small so I made it here.

Same! Let's open a follow-up issue to make sure our base components match the current designs so that we avoid introducing inconsistency.

assets/js/modules/sign-in-with-google/datastore/anyoneCanRegister.js

aaemnnosttv · 2024-11-15T00:50:49Z

One more detail I noticed, the badges have different padding and it's the "Beta" that doesn't match the design.

Beta has 6 12 where as New has 4 8 and the design shows both using the values that New has.

It seems the reduced padding was applied to the new badge specifically – which seems incorrect actually – as the sizing should be more contextual rather than badge-specific.

Co-authored-by: Evan Mattson <[email protected]>

…to settings-view-9477.

github-actions · 2024-11-15T16:01:57Z

Size Change: +1.32 kB (+0.07%)

Total Size: 1.88 MB

Filename	Size	Change
`./dist/assets/css/googlesitekit-admin-css-********************.min.css`	60.3 kB	+27 B (+0.04%)
`./dist/assets/js/googlesitekit-activation-********************.js`	24 kB	+5 B (+0.02%)
`./dist/assets/js/googlesitekit-ad-blocking-recovery-********************.js`	54.9 kB	-100 B (-0.18%)
`./dist/assets/js/googlesitekit-adminbar-********************.js`	34.6 kB	+6 B (+0.02%)
`./dist/assets/js/googlesitekit-api-********************.js`	10.1 kB	+2 B (+0.02%)
`./dist/assets/js/googlesitekit-components-gm2-********************.js`	6.17 kB	-3 B (-0.05%)
`./dist/assets/js/googlesitekit-components-gm3-********************.js`	10.1 kB	-3 B (-0.03%)
`./dist/assets/js/googlesitekit-data-********************.js`	2.37 kB	-3 B (-0.13%)
`./dist/assets/js/googlesitekit-datastore-forms-********************.js`	8.97 kB	-1 B (-0.01%)
`./dist/assets/js/googlesitekit-datastore-site-********************.js`	20.9 kB	+36 B (+0.17%)
`./dist/assets/js/googlesitekit-datastore-user-********************.js`	27.3 kB	+6 B (+0.02%)
`./dist/assets/js/googlesitekit-entity-dashboard-********************.js`	82 kB	+76 B (+0.09%)
`./dist/assets/js/googlesitekit-main-dashboard-********************.js`	161 kB	-47 B (-0.03%)
`./dist/assets/js/googlesitekit-modules-ads-********************.js`	33.5 kB	+126 B (+0.38%)
`./dist/assets/js/googlesitekit-modules-adsense-********************.js`	117 kB	-193 B (-0.16%)
`./dist/assets/js/googlesitekit-modules-analytics-4-********************.js`	184 kB	-154 B (-0.08%)
`./dist/assets/js/googlesitekit-modules-pagespeed-insights-********************.js`	22.8 kB	+4 B (+0.02%)
`./dist/assets/js/googlesitekit-modules-reader-revenue-manager-********************.js`	41.1 kB	-29 B (-0.07%)
`./dist/assets/js/googlesitekit-modules-search-console-********************.js`	64.9 kB	+29 B (+0.04%)
`./dist/assets/js/googlesitekit-modules-sign-in-with-google-********************.js`	26.3 kB	+1.58 kB (+6.4%)	🔍
`./dist/assets/js/googlesitekit-modules-tagmanager-********************.js`	32.1 kB	-72 B (-0.22%)
`./dist/assets/js/googlesitekit-settings-********************.js`	126 kB	-25 B (-0.02%)
`./dist/assets/js/googlesitekit-splash-********************.js`	69 kB	+35 B (+0.05%)
`./dist/assets/js/googlesitekit-user-input-********************.js`	43.7 kB	-10 B (-0.02%)
`./dist/assets/js/googlesitekit-vendor-********************.js`	322 kB	-10 B (0%)
`./dist/assets/js/googlesitekit-widgets-********************.js`	96.4 kB	+139 B (+0.14%)
`./dist/assets/js/googlesitekit-wp-dashboard-********************.js`	62.5 kB	-91 B (-0.15%)
`./dist/assets/js/runtime-********************.js`	1.4 kB	-3 B (-0.21%)

ℹ️ View Unchanged

Filename	Size
`./dist/assets/css/googlesitekit-adminbar-css-********************.min.css`	11.8 kB
`./dist/assets/css/googlesitekit-authorize-application-css-********************.min.css`	846 B
`./dist/assets/css/googlesitekit-wp-dashboard-css-********************.min.css`	8.2 kB
`./dist/assets/js/32-********************.js`	2.76 kB
`./dist/assets/js/33-********************.js`	2.25 kB
`./dist/assets/js/34-********************.js`	3.64 kB
`./dist/assets/js/35-********************.js`	935 B
`./dist/assets/js/36-********************.js`	893 B
`./dist/assets/js/37-********************.js`	1.61 kB
`./dist/assets/js/38-********************.js`	1.57 kB
`./dist/assets/js/39-********************.js`	1.61 kB
`./dist/assets/js/40-********************.js`	1.59 kB
`./dist/assets/js/41-********************.js`	1.83 kB
`./dist/assets/js/42-********************.js`	3.11 kB
`./dist/assets/js/analytics-advanced-tracking-********************.js`	901 B
`./dist/assets/js/googlesitekit-consent-mode-********************.js`	25.6 kB
`./dist/assets/js/googlesitekit-datastore-location-********************.js`	2.08 kB
`./dist/assets/js/googlesitekit-datastore-ui-********************.js`	10.1 kB
`./dist/assets/js/googlesitekit-events-provider-contact-form-7-********************.js`	646 B
`./dist/assets/js/googlesitekit-events-provider-easy-digital-downloads-********************.js`	624 B
`./dist/assets/js/googlesitekit-events-provider-mailchimp-********************.js`	630 B
`./dist/assets/js/googlesitekit-events-provider-ninja-forms-********************.js`	712 B
`./dist/assets/js/googlesitekit-events-provider-optin-monster-********************.js`	675 B
`./dist/assets/js/googlesitekit-events-provider-popup-maker-********************.js`	634 B
`./dist/assets/js/googlesitekit-events-provider-woocommerce-********************.js`	657 B
`./dist/assets/js/googlesitekit-events-provider-wpforms-********************.js`	633 B
`./dist/assets/js/googlesitekit-i18n-********************.js`	3.93 kB
`./dist/assets/js/googlesitekit-modules-********************.js`	22.2 kB
`./dist/assets/js/googlesitekit-notifications-********************.js`	22.8 kB
`./dist/assets/js/googlesitekit-polyfills-********************.js`	377 B

_{compressed-size-action}

tofumatt · 2024-11-15T16:48:39Z

One more detail I noticed, the badges have different padding and it's the "Beta" that doesn't match the design.
Beta has `6 12` where as New has `4 8` and the design shows both using the values that New has.
It seems the reduced padding was applied to the new badge specifically – which seems incorrect actually – as the sizing should be more contextual rather than badge-specific.

I'm not sure I follow, the badges are using the exact same components: https://github.com/google/site-kit-wp/blob/92c4bd10e1b6f4e90c8817c0b4da4e1060ba4010/assets/js/components/settings/SettingsActiveModule/Header.js#L173-L192

And the only CSS for the .googlesitekit-beta-badge is here: https://github.com/google/site-kit-wp/blob/92c4bd10e1b6f4e90c8817c0b4da4e1060ba4010/assets/sass/components/global/_googlesitekit-badge.scss#L47-L50

Nothing to do with margins, etc. I didn't make any changes to those styles components here, at any rate 🤔

aaemnnosttv · 2024-11-15T17:11:13Z

I'm not sure I follow, the badges are using the exact same components: 92c4bd1/assets/js/components/settings/SettingsActiveModule/Header.js#L173-L192

And the only CSS for the .googlesitekit-beta-badge is here: 92c4bd1/assets/sass/components/global/_googlesitekit-badge.scss#L47-L50

Nothing to do with margins, etc. I didn't make any changes to those styles components here, at any rate 🤔

I guess it's not implemented here so we can leave it alone, and I'll raise it on the bug bash board instead 👍

aaemnnosttv

Thanks @tofumatt – this is super close and much cleaner now. Nothing major left, so I'll push a few small corrections and this should be G2G 👍

aaemnnosttv · 2024-11-15T17:22:55Z

assets/js/modules/sign-in-with-google/components/settings/SettingsView.js

+	const generalSettingsURL = useSelect(
+		( select ) =>
+			`${ select( CORE_SITE ).getAdminURL() }options-general.php`
+	);


That's odd, I thought we could do this with this selector, but we can't without using some legacy behavior I guess. Let's at least construct this more properly :)

Suggested change

const generalSettingsURL = useSelect(

( select ) =>

`${ select( CORE_SITE ).getAdminURL() }options-general.php`

);

const generalSettingsURL = useSelect(

( select ) =>

new URL( 'options-general.php', select( CORE_SITE ).getAdminURL() ).href

);

aaemnnosttv · 2024-11-15T17:24:21Z

assets/js/modules/sign-in-with-google/components/settings/SettingsView.js

+			<div className="googlesitekit-settings-module__meta-items">
+				<div className="googlesitekit-settings-module__meta-item">
+					<h5 className="googlesitekit-settings-module__meta-item-type">
+						{ __( 'One tap sign in', 'google-site-kit' ) }


"One Tap" should be capitalized https://developers.google.com/identity/gsi/web/guides/features

The design shows this as well

Suggested change

{ __( 'One tap sign in', 'google-site-kit' ) }

{ __( 'One Tap sign in', 'google-site-kit' ) }

aaemnnosttv · 2024-11-15T17:26:36Z

assets/js/modules/sign-in-with-google/components/settings/SettingsView.js

+							<SettingsNotice
+								type={ TYPE_WARNING }


My instinct is always to use our base components as they are, and have issues to modify them, but this change was small so I made it here.

Same! Let's open a follow-up issue to make sure our base components match the current designs so that we avoid introducing inconsistency.

aaemnnosttv

Great, thanks @tofumatt !

tofumatt added 3 commits November 14, 2024 04:05

Add Sign in with Google Settings View screen.

2d1515a

Add stories to Sign in with Google settings view.

df214b8

Add anyoneCanRegister test cases.

51ac04b

tofumatt marked this pull request as ready for review November 14, 2024 17:56

aaemnnosttv requested changes Nov 15, 2024

View reviewed changes

tofumatt and others added 7 commits November 15, 2024 15:39

Use dedicated isItemDismissed selector.

b8fbed2

Co-authored-by: Evan Mattson <[email protected]>

Remove length check.

7dd9cad

Remove empty checks for variables/components.

d6bb44f

Update to single condition.

2ad0bca

Co-authored-by: Evan Mattson <[email protected]>

Update storybook string.

78e3285

Co-authored-by: Evan Mattson <[email protected]>

Merge branch 'settings-view-9477' of github.com:google/site-kit-wp in…

57b7ba8

…to settings-view-9477.

Merge branch 'develop' into settings-view-9477.

247a7c5

tofumatt added 4 commits November 15, 2024 16:08

Remove scenario prop.

779e289

Add anyoneCanRegister to CORE_SITE settings.

f33b287

Update settings notice to closer match the Figma design.

e479a51

Return value from useSelect call.

92c4bd1

aaemnnosttv reviewed Nov 15, 2024

View reviewed changes

aaemnnosttv added 3 commits November 15, 2024 12:43

Apply suggestions from CR.

80e507f

Simplify definition of stories.

5fb99ac

Simplify stories further.

2c114eb

aaemnnosttv approved these changes Nov 15, 2024

View reviewed changes

aaemnnosttv merged commit 3fcc96a into develop Nov 15, 2024
24 of 27 checks passed

aaemnnosttv deleted the settings-view-9477 branch November 15, 2024 18:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Sign in with Google Settings View screen. #9685

Add Sign in with Google Settings View screen. #9685

tofumatt commented Nov 14, 2024 •

edited

Loading

github-actions bot commented Nov 14, 2024 •

edited

Loading

aaemnnosttv left a comment

aaemnnosttv Nov 15, 2024

tofumatt Nov 15, 2024

tofumatt Nov 15, 2024

aaemnnosttv Nov 15, 2024

aaemnnosttv Nov 15, 2024

aaemnnosttv commented Nov 15, 2024

github-actions bot commented Nov 15, 2024 •

edited

Loading

tofumatt commented Nov 15, 2024

aaemnnosttv commented Nov 15, 2024

aaemnnosttv left a comment

aaemnnosttv Nov 15, 2024

aaemnnosttv Nov 15, 2024

aaemnnosttv Nov 15, 2024

aaemnnosttv left a comment

	{ __( 'One tap sign in', 'google-site-kit' ) }
	{ __( 'One Tap sign in', 'google-site-kit' ) }

Add Sign in with Google Settings View screen. #9685

Add Sign in with Google Settings View screen. #9685

Conversation

tofumatt commented Nov 14, 2024 • edited Loading

Summary

PR Author Checklist

Code Reviewer Checklist

Merge Reviewer Checklist

github-actions bot commented Nov 14, 2024 • edited Loading

aaemnnosttv left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aaemnnosttv commented Nov 15, 2024

github-actions bot commented Nov 15, 2024 • edited Loading

tofumatt commented Nov 15, 2024

aaemnnosttv commented Nov 15, 2024

aaemnnosttv left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aaemnnosttv left a comment

Choose a reason for hiding this comment

tofumatt commented Nov 14, 2024 •

edited

Loading

github-actions bot commented Nov 14, 2024 •

edited

Loading

github-actions bot commented Nov 15, 2024 •

edited

Loading