SSO: Add invite user button option #88369

renancarvalho · 2024-03-11T12:34:16Z

Related to #

Proposed Changes

We want to align as much as possible wp-admin and calypso feature, this PR makes it possible to invite not connected users to join your site by adding an invite button to the user list

Testing Instructions

Pull and run this branch or use live link
Navigate to {LIVE_LINK}/people/team/{YOUR_SITE}
There you should be able to invite not connected users to join your site
You should also be allowed to revoke invited users from the pending list users
You should not see the same users in both lists
Invite users from wp-admin and check if both lists are persistent, you should see them as pending in Calypso

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2024-03-11T12:34:28Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-100791

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-100791&env=jetpack

matticbot · 2024-03-11T12:43:13Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~1375 bytes added 📈 [gzipped])

name                     parsed_size           gzip_size
people                       +3346 B  (+0.6%)    +1293 B  (+0.7%)
import-hosted-site-flow       +508 B  (+0.1%)      +82 B  (+0.0%)
import-flow                   +508 B  (+0.0%)      +82 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

escapemanuele · 2024-03-12T11:43:56Z

client/my-sites/people/team-members/index.tsx

+								components: {
+									a: (
+										<a
+											href="https://jetpack.com/support/sso/"


Let's use localizeUrl here

escapemanuele · 2024-03-12T13:51:41Z

Let's fix smaller viewports 👍

escapemanuele · 2024-03-12T13:59:28Z

We're so close with the flow, great!

If I add someone, the team members list gets refreshed, but not the pending invite one. I see that there is 1 pending invite, but they are not showed until I refresh

heavyweight · 2024-03-13T11:47:21Z

client/my-sites/people/people-list-item/index.tsx

+			{ email_or_username: email as string, role: userRoles },
+		] ) ) as [ sendInvitesResponse ];
+
+		const success = response && response[ 0 ].success;


Can add safety checks here?
Also we need to manage errors, and maybe log the invite error event. WDYT?

For sure! It is coming in the next commit. :)

Addressed 👍

renancarvalho · 2024-03-13T14:05:34Z

client/my-sites/people/invite-status/index.jsx

 	deletingInvite,
 } ) => {
 	const translate = useTranslate();
 	const { isPending } = invite;

-	if ( invite && inviteWasDeleted ) {


Hi @agrullon95 To keep the pending list up to date, I had to remove this logic added by you in #86927. Could you please help me to test and make sure it is still working well?

I don't recall why I added that there, but I didn't notice any issues with invitations/revokes when testing.

renancarvalho · 2024-03-13T14:05:50Z

client/my-sites/people/people-invite-details/index.jsx

 			requestingResend,
 			resendSuccess,
 			inviteWasDeleted,
 			deletingInvite,
 		} = this.props;

-		if ( ! site || ! site.ID || deleteSuccess ) {


@agrullon95 same here

escapemanuele · 2024-03-13T14:49:41Z

client/my-sites/people/people-list-item/index.tsx

-				)
-			);
-		}
+		const success = response && response[ 0 ]?.success;


Does it work if we do

const success = response?.[0]?.success;

?

Yes, wouldn't it be the same? Personally, I read better like it is now.

Your call 👍

agrullon95 · 2024-03-13T15:51:02Z

client/my-sites/people/team-members/index.tsx

+	const siteId = site?.ID as number;
+
+	const pendingInvites = useSelector( ( state ) => getPendingInvitesForSite( state, siteId ) );
+	const pendingInvitesMails = pendingInvites?.map( ( invite ) => invite.user?.email );


Lets rename to pendingInvitesEmails

agrullon95

Tested inviting a new user via Calypso and accepting the invitation.
Also tested inviting a new user via Calypso, creating the same user via /wp-admin and accepting the invite.

escapemanuele · 2024-03-14T10:45:35Z

Cool, let's fix the unit test and then this should be good to go 👍

renancarvalho · 2024-03-14T11:16:56Z

client/my-sites/people/people-invite-details/test/index.jsx

@@ -150,11 +150,6 @@ describe( 'PeopleInviteDetails', () => {
 		expect( mockGoBack ).toHaveBeenCalledTimes( 1 );
 		expect( mockGoBack ).toHaveBeenCalledWith( '/people/invites/' + siteObject.slug );

-		// Verify that a placeholder is rendered while waiting for `page.back`


Since we are refreshing the list again after revoking or inviting, we don't need this placeholder anymore.
The Placeholder was causing issues when revoking and inviting again the same user.

a8ci18n · 2024-03-14T12:19:00Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/11603794

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @renancarvalho for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2024-03-18T00:29:42Z

Translation for this Pull Request has now been finished.

* Add invite button option * Fix type * Remove unnecessary comment * Add notice and style * Use LocalizeUrl * Fix small viewport message style * Fix pending invites not being shown sometimes * Add error handling * Use correct icon * Rename variable * Remove unnecessary test expectation

Add invite button option

a5b59ff

renancarvalho self-assigned this Mar 11, 2024

renancarvalho added 3 commits March 11, 2024 15:07

Fix type

0e5d298

Remove unnecessary comment

5dc0b2a

Add notice and style

90cd024

renancarvalho changed the title ~~Add invite button option - Draft~~ SSO: Add invite user button option — Draft Mar 11, 2024

Merge branch 'trunk' into add/sso-send-invite

6c33370

escapemanuele reviewed Mar 12, 2024

View reviewed changes

renancarvalho added 3 commits March 12, 2024 15:06

Merge branch 'trunk' into add/sso-send-invite

74fb30b

Use LocalizeUrl

65b999d

Fix small viewport message style

77f7906

renancarvalho added the Jetpack SSO label Mar 12, 2024

renancarvalho added this to In progress in Vertex Team Board via automation Mar 12, 2024

heavyweight reviewed Mar 13, 2024

View reviewed changes

renancarvalho added 2 commits March 13, 2024 13:46

Fix pending invites not being shown sometimes

5721ce0

Add error handling

fd83cc4

renancarvalho changed the title ~~SSO: Add invite user button option — Draft~~ SSO: Add invite user button option Mar 13, 2024

renancarvalho requested a review from agrullon95 March 13, 2024 14:03

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 13, 2024

renancarvalho commented Mar 13, 2024

View reviewed changes

renancarvalho marked this pull request as ready for review March 13, 2024 14:09

renancarvalho moved this from In progress to Needs review in Vertex Team Board Mar 13, 2024

escapemanuele reviewed Mar 13, 2024

View reviewed changes

Use correct icon

9f2e827

agrullon95 reviewed Mar 13, 2024

View reviewed changes

Rename variable

0ea9519

agrullon95 self-requested a review March 13, 2024 16:15

agrullon95 approved these changes Mar 13, 2024

View reviewed changes

escapemanuele removed this from Needs review in Vertex Team Board Mar 13, 2024

escapemanuele added this to Needs Review in Hosting Friendly User Management Mar 13, 2024

Remove unnecessary test expectation

4045525

renancarvalho commented Mar 14, 2024

View reviewed changes

renancarvalho merged commit 157f8df into trunk Mar 14, 2024
11 checks passed

Hosting Friendly User Management automation moved this from Needs Review to Done Mar 14, 2024

renancarvalho deleted the add/sso-send-invite branch March 14, 2024 11:52

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 14, 2024

escapemanuele mentioned this pull request Mar 25, 2024

Improve Calypso user management #86602

Closed

arthur791004 mentioned this pull request Apr 23, 2024

Simple site: Remove the invite button from the users section for the current users #89783

Open

ivan-ottinger mentioned this pull request Apr 26, 2024

User Totals Not Displayed Correctly - Updated as Page Loads #89506

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSO: Add invite user button option #88369

SSO: Add invite user button option #88369

renancarvalho commented Mar 11, 2024 •

edited

github-actions bot commented Mar 11, 2024 •

edited by matticbot

matticbot commented Mar 11, 2024 •

edited

escapemanuele Mar 12, 2024

escapemanuele commented Mar 12, 2024

escapemanuele commented Mar 12, 2024

heavyweight Mar 13, 2024

renancarvalho Mar 13, 2024 •

edited

renancarvalho Mar 13, 2024

agrullon95 Mar 13, 2024

renancarvalho Mar 13, 2024

escapemanuele Mar 13, 2024

renancarvalho Mar 13, 2024 •

edited

escapemanuele Mar 13, 2024

agrullon95 Mar 13, 2024

renancarvalho Mar 13, 2024

agrullon95 left a comment

escapemanuele commented Mar 14, 2024

renancarvalho Mar 14, 2024

a8ci18n commented Mar 14, 2024

a8ci18n commented Mar 18, 2024

SSO: Add invite user button option #88369

SSO: Add invite user button option #88369

Conversation

renancarvalho commented Mar 11, 2024 • edited

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Mar 11, 2024 • edited by matticbot

matticbot commented Mar 11, 2024 • edited

Choose a reason for hiding this comment

escapemanuele commented Mar 12, 2024

escapemanuele commented Mar 12, 2024

Choose a reason for hiding this comment

renancarvalho Mar 13, 2024 • edited

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

renancarvalho Mar 13, 2024 • edited

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

agrullon95 left a comment

Choose a reason for hiding this comment

escapemanuele commented Mar 14, 2024

Choose a reason for hiding this comment

a8ci18n commented Mar 14, 2024

a8ci18n commented Mar 18, 2024

renancarvalho commented Mar 11, 2024 •

edited

github-actions bot commented Mar 11, 2024 •

edited by matticbot

matticbot commented Mar 11, 2024 •

edited

renancarvalho Mar 13, 2024 •

edited

renancarvalho Mar 13, 2024 •

edited