SSO Invite: Move invite status under invite details #86927

agrullon95 · 2024-01-27T16:57:40Z

Related to #35278

Proposed Changes

These changes move the invite status underneath the invite details, allows the email/username to overflow and fixes the button overlapping issues on mobile viewport.

Before:

Desktop:

Mobile:

After:

Desktop:

Mobile:

Testing Instructions

Checkout branch or use calypso live link
Navigate to http://calypso.localhost:3000/people/team/{SITE_SLUG}
Add/Invite a new user to your site, if you haven't already.
Click on the new pending invite to see more details about the user and the invitation.
Test the "Resend Invite" and "Revoke" buttons.
The "Resend Invite" button text should change to "Invite Sent!" after a successful invite request has been made.
The "Revoke" button should display an "Invite deleted" notice after the invite has been revoked and you should be navigated to the previous page.

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-ajp-p2)?

github-actions · 2024-01-27T16:57:51Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

alshakero

Tested on desktop and mobile. Works great. Found one UX issue.

alshakero · 2024-01-27T23:09:44Z

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

+			) }
+			<Button
+				className="people-list-item__invite-revoke"
+				busy={ deletingInvite }


Let's disable this one when requestingResend is true. Now you can resend and revoke an invite.

I think requestingResend should be added to deletingInvite? 🤔

I don't think so. Making the button busy implies that the button is doing the action written on it. Disabled makes more sense IMO.

Yes, I mistaken busy and disabled, thanks!

I agree , disabled makes sense here and will be a nice UX update. I'll quickly add this in this PR.

alshakero · 2024-01-27T23:10:34Z

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

+						'is-success': resendSuccess,
+					} ) }
+					onClick={ onResend }
+					busy={ requestingResend }


Let's disable this one when deletingInvite is true. Now you can resend and revoke an invite.

Same thing as before

crisbusquets

💯

escapemanuele

Let's review the busy field and then merge this ✌️

matticbot · 2024-01-29T14:55:34Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/invite-status-location on your sandbox.

matticbot · 2024-01-31T16:14:48Z

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

Sections (~50 bytes added 📈 [gzipped])

name    parsed_size           gzip_size
people       +294 B  (+0.0%)      +50 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.

Move invite status under invite details

e0310a0

agrullon95 self-assigned this Jan 27, 2024

agrullon95 requested a review from a team January 27, 2024 16:57

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

agrullon95 requested a review from crisbusquets January 27, 2024 16:58

agrullon95 added 4 commits January 27, 2024 11:59

Clean up code

8189eaa

Add test cases

04d7250

Update components for easier testing

61985d5

Update styling

81577dc

alshakero approved these changes Jan 27, 2024

View reviewed changes

crisbusquets approved these changes Jan 29, 2024

View reviewed changes

escapemanuele self-requested a review January 29, 2024 11:28

escapemanuele approved these changes Jan 29, 2024

View reviewed changes

escapemanuele added Jetpack SSO and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jan 29, 2024

agrullon95 and others added 2 commits January 29, 2024 09:47

Add disabled state when request for other button is being fulfilled

5342ef5

Merge branch 'trunk' into update/invite-status-location

5831b52

Merge branch 'trunk' into update/invite-status-location

e41d1c2

agrullon95 merged commit 9c7c30a into trunk Jan 29, 2024
11 checks passed

agrullon95 deleted the update/invite-status-location branch January 29, 2024 16:47

jjchrisdiehl pushed a commit that referenced this pull request Feb 5, 2024

SSO Invite: Move invite status under invite details (#86927)

d8b814e

renancarvalho mentioned this pull request Mar 13, 2024

SSO: Add invite user button option #88369

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSO Invite: Move invite status under invite details #86927

SSO Invite: Move invite status under invite details #86927

agrullon95 commented Jan 27, 2024 •

edited

Loading

github-actions bot commented Jan 27, 2024 •

edited by matticbot

Loading

alshakero left a comment

alshakero Jan 27, 2024

escapemanuele Jan 29, 2024

alshakero Jan 29, 2024

escapemanuele Jan 29, 2024

agrullon95 Jan 29, 2024

alshakero Jan 27, 2024

escapemanuele Jan 29, 2024

crisbusquets left a comment

escapemanuele left a comment

matticbot commented Jan 29, 2024

matticbot commented Jan 31, 2024 •

edited

Loading

SSO Invite: Move invite status under invite details #86927

SSO Invite: Move invite status under invite details #86927

Conversation

agrullon95 commented Jan 27, 2024 • edited Loading

Proposed Changes

Before:

After:

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jan 27, 2024 • edited by matticbot Loading

alshakero left a comment

Choose a reason for hiding this comment

alshakero Jan 27, 2024

Choose a reason for hiding this comment

escapemanuele Jan 29, 2024

Choose a reason for hiding this comment

alshakero Jan 29, 2024

Choose a reason for hiding this comment

escapemanuele Jan 29, 2024

Choose a reason for hiding this comment

agrullon95 Jan 29, 2024

Choose a reason for hiding this comment

alshakero Jan 27, 2024

Choose a reason for hiding this comment

escapemanuele Jan 29, 2024

Choose a reason for hiding this comment

crisbusquets left a comment

Choose a reason for hiding this comment

escapemanuele left a comment

Choose a reason for hiding this comment

matticbot commented Jan 29, 2024

matticbot commented Jan 31, 2024 • edited Loading

agrullon95 commented Jan 27, 2024 •

edited

Loading

github-actions bot commented Jan 27, 2024 •

edited by matticbot

Loading

matticbot commented Jan 31, 2024 •

edited

Loading