Create Sign in With Google Settings module settings view screen

[benbowler]

Feature Description

The settings screen for Sign in with Google should be created and available after Sign in with Google is connected. See the Figma designs for this UI in view/edit mode: https://www.figma.com/design/h9yGR15Pg2DUtgERW4AFAv/Sign-in-with-Google?node-id=27-1045&node-type=frame&t=pIlj66YsTMINwgVT-0

This ticket should implement the view screen only, with the edit screen implemented in #9334

It should be only visible when the signInWithGoogleModule feature flag is enabled.

View

---

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

Acceptance criteria

• All features in this AC should only be visible when the signInWithGoogleModule feature flag is enabled.
• A new settings component for the Sign in with Google module should appear in Site Kit module settings when Sign in with Google is connected.
• The design should follow the Figma design: https://www.figma.com/design/h9yGR15Pg2DUtgERW4AFAv/Sign-in-with-Google?node-id=20-1129&node-type=frame&t=xGrDkU14DU9FcenS-0

Implementation Brief

SettingsView component

• [ ] Create a new assets/js/modules/sign-in-with-google/components/settings/SettingsView.js, based on other SettingsView components (eg.):

  • Get each settings using the relevant selectors and render then using the following format: https://github.com/google/site-kit-wp/blob/ed5ebdde53f445730245c879e533692b291d9ed0/assets/js/modules/analytics-4/components/settings/SettingsView.js#L79-L87
  • TODO: "Anyone can register" notice.

• [ ] Update assets/sass/components/sing-in-with-google/_googlesitekit-sign-in-with-google-settings-module.scss, styling the settings view screen based on the Figma designs

• [ ] Update the module registration:

  • Change the SettingsViewComponent prop to return the newly created SettingsView component.

"Anyone can register" notice

• [ ] Update includes/Modules/Sign_In_With_Google.php:

  • Set up a REST infrastructure for this module by implementing get_datapoint_definitions and create_data_request methods modelled on other modules.
  • Create a new REST GET endpoint anyone-can-register, this API should return the value of wp_options users_can_register setting.

• [ ] creating a new fetch store assets/js/modules/sign-in-with-google/datastore/anyone-can-register.js:

  • Use the control callback API.get( 'modules', 'sign-in-with-google', 'anyone-can-regsiter', {} )
  • Create a base resolver and selector getAnyoneCanRegister, modelled on other modules stores.

• [ ] Update assets/js/modules/sign-in-with-google/datastore/base.js, include this new fetch store in the combineStores call.

• [ ] Update assets/js/modules/sign-in-with-google/components/settings/SettingsView.js:

  • If getAnyoneCanRegister resolves to false, render the banner design in Figma adapting the Notices component to match the designs.
  • Use the dismissed items infrastructure to dismiss this notice if the user clicks "Got It" with the key SIGN_IN_WITH_GOOGLE_ANYONE_CAN_REGISTER_NOTICE = 'sign-in-with-google-anyone-can-register-notice'

Test Coverage

• Create new stories for SettingsView components within this module, including a state showing the "Anyone can register" notice.
• Create simple test for the new fetch store ``assets/js/modules/sign-in-with-google/datastore/anyone-can-register.test.js`

QA Brief

Changelog entry

[benbowler]

@tofumatt should I spec the "Anyone can register" banner and it's related REST endpoint and store as part of this ticket?

[benbowler]

Increasing the estimate to account for implementing the "Anyone can register" banner.

[tofumatt]

IB ✅

[tofumatt]

Leaving this assigned to myself as I accidentally started this one, not realising it wasn't in the sprint 😅

[mohitwp]

QA Update ❌

• Tested on dev environment.
• Verified SIWG settings view when "Anyone can register" setting in Settings > General is disabled.
• Verified SIWG settings view when "Anyone can register" setting in Settings > General is enabled.
• Verified that clicking on 'Got It' permanently dismiss the notice.

@benbowler

Issue

I notice that "Anyone can register" disable notice is full width in Figma where as under actual implementation it is not full width.

Figma

[mohitwp]

QA Update ⚠

Tested on dev environment.

@benbowler The notice now looks good on mobile and tablet devices. However, on dashboard and laptop viewports, the content is not breaking which causing the notice content to appear misaligned with the icon and the 'Got It' button. I think we should break and show Visit WordPress Settings to manage this setting in next line. This should be a small fix, but let me know if you’d like me to create a separate ticket for it.

Dashboard view

Mobile and tablet view

[mohitwp]

QA Update ✅

• Tested on main environment.
• Tested when SIWG feature flag is enabled.
• Also, tested when SIWG feature flag is not enabled.
• Verified SIWG settings view when "Anyone can register" setting in Settings > General is disabled.
• Verified SIWG settings view when "Anyone can register" setting in Settings > General is enabled.
• Verified that clicking on 'Got It' permanently dismiss the notice.
• Verified SIWG module settings view screen is looking same as Figma design.
• Verified functionality of SIWG module settings view screen.
• Verified issue related to notice described above is now resolved.

Desktop view

Tablet View

Mobile view