Social: Add new connection modal #37211

gmjuhasz · 2024-05-03T14:25:07Z

Fixes https://github.com/Automattic/jetpack-reach/issues/296

This changes adds the "Add new connection" modal to the plugin, which will be used with the connection management component that's being added in #37120

Proposed changes:

Added the new modal
The modal has two pages, first one is the service selector, the second one is the pre-connection page, which is different for each service
Text is copied from https://cloud.jetpack.com/jetpack-social/<SITE>

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

https://github.com/Automattic/jetpack-reach/issues/296

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

NOTE: The colors of the social icons is black, because the CSS variables from Calypso are not loaded properly. This will be fixed in this or a following change.

Go to the Social admin page, with useAdminUiV1 defined.
Click the Add new connection button in the connection list component. The modal window should open.
Check the copy, then click on the next button beside one of the connections.
Check that the page makes sense. The connect button is not hooked up in the PR.
Go back to the main screen and do the same with all connections.

Service selector page:

Examples of pre-connection pages:

github-actions · 2024-05-03T14:26:02Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the add/social-add-connection-modal branch.
- For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/social-add-connection-modal

bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/social-add-connection-modal

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2024-05-03T14:26:17Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen daily.
WoA releases happen weekly.
Releases to self-hosted sites happen monthly. The next release is scheduled for June 4, 2024 (scheduled code freeze on May 27, 2024).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Social plugin:

Next scheduled release: June 4, 2024.
Scheduled code freeze: May 27, 2024.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

gmjuhasz · 2024-05-06T17:24:08Z

...kages/publicize-components/src/components/add-connection-modal/connect-page/connect-page.tsx

+					{ <Icon icon={ chevronLeft } className={ styles[ 'chevron-back' ] } /> }
+				</Button>
+				<form className={ classNames( styles[ 'connect-form' ], { [ styles.small ]: isSmall } ) }>
+					{ 'mastodon' === service.name ? (


For Mastodon we need to have the username as an input. We can handle that on the Button onClick event

...kages/publicize-components/src/components/add-connection-modal/connect-page/connect-page.tsx

projects/js-packages/publicize-components/src/components/add-connection-modal/constants.tsx

projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx

...kages/publicize-components/src/components/add-connection-modal/connect-page/connect-page.tsx

projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx

manzoorwanijk

This PR looks really good. Thank you.

I just have some minor suggestions for improvement.

Also, do we need the sharing buttons stuff to be shown in the modal?

projects/js-packages/publicize-components/src/components/add-connection-modal/constants.tsx

…onnection-modal/connect-page/style.module.scss Co-authored-by: Manzoor Wani <[email protected]>

…onnection-modal/style.module.scss Co-authored-by: Manzoor Wani <[email protected]>

…onnection-modal/constants.tsx Co-authored-by: Manzoor Wani <[email protected]>

projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx

manzoorwanijk

This looks good now. We can fix the table a11y once the designs are revisited.

…onnection-modal/index.tsx Co-authored-by: Manzoor Wani <[email protected]>

* Add the constants * Chain down iconSize to SocialServiceIcon * changelog * Add the connection modal * Add the connect page component * Add assets * Add LinkedIn, Nextdoor, and Tumblr example * Add Mastodon * Hook up the modal * Fixup versions * Add aria-label to button * Update projects/js-packages/publicize-components/src/components/add-connection-modal/connect-page/style.module.scss Co-authored-by: Manzoor Wani <[email protected]> * Update projects/js-packages/publicize-components/src/components/add-connection-modal/style.module.scss Co-authored-by: Manzoor Wani <[email protected]> * Update projects/js-packages/publicize-components/src/components/add-connection-modal/style.module.scss Co-authored-by: Manzoor Wani <[email protected]> * Update projects/js-packages/publicize-components/src/components/add-connection-modal/style.module.scss Co-authored-by: Manzoor Wani <[email protected]> * Update projects/js-packages/publicize-components/src/components/add-connection-modal/constants.tsx Co-authored-by: Manzoor Wani <[email protected]> * Add connect button to main page as well * Fixup versions * Show `back` instead of chevronleft * Fix TS compile error for image imports in js-packages * Update projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx Co-authored-by: Manzoor Wani <[email protected]> --------- Co-authored-by: Manzoor Wani <[email protected]>

gmjuhasz added 6 commits May 3, 2024 16:21

Add the constants

2ac54d9

Chain down iconSize to SocialServiceIcon

9ff8f83

changelog

7ba255a

Add the connection modal

6da7cb6

Add the connect page component

f040608

Add assets

6615297

gmjuhasz self-assigned this May 3, 2024

github-actions bot added [JS Package] Components [JS Package] Publicize Components [Plugin] Social Issues about the Jetpack Social plugin [Status] In Progress RNA labels May 3, 2024

gmjuhasz added 5 commits May 6, 2024 12:56

Add LinkedIn, Nextdoor, and Tumblr example

035cb6a

Add Mastodon

08a9777

Merge branch 'trunk' into add/social-add-connection-modal

e70fda9

Hook up the modal

1d33c6f

Fixup versions

dc23280

gmjuhasz requested review from pablinos, spsiddarthan and manzoorwanijk May 6, 2024 15:07

gmjuhasz added the [Status] Needs Team Review label May 6, 2024

gmjuhasz marked this pull request as ready for review May 6, 2024 15:08

gmjuhasz commented May 6, 2024

View reviewed changes

manzoorwanijk reviewed May 7, 2024

View reviewed changes

...kages/publicize-components/src/components/add-connection-modal/connect-page/connect-page.tsx Outdated Show resolved Hide resolved

manzoorwanijk reviewed May 7, 2024

View reviewed changes

projects/js-packages/publicize-components/src/components/add-connection-modal/constants.tsx Show resolved Hide resolved

manzoorwanijk reviewed May 7, 2024

View reviewed changes

projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx Show resolved Hide resolved

manzoorwanijk reviewed May 7, 2024

View reviewed changes

...kages/publicize-components/src/components/add-connection-modal/connect-page/connect-page.tsx Outdated Show resolved Hide resolved

manzoorwanijk reviewed May 7, 2024

View reviewed changes

projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx Outdated Show resolved Hide resolved

manzoorwanijk reviewed May 7, 2024

View reviewed changes

projects/js-packages/publicize-components/src/components/add-connection-modal/constants.tsx Outdated Show resolved Hide resolved

gmjuhasz and others added 10 commits May 7, 2024 12:01

Add aria-label to button

9edd20f

Update projects/js-packages/publicize-components/src/components/add-c…

2bfaeda

…onnection-modal/connect-page/style.module.scss Co-authored-by: Manzoor Wani <[email protected]>

Update projects/js-packages/publicize-components/src/components/add-c…

6444ce6

…onnection-modal/style.module.scss Co-authored-by: Manzoor Wani <[email protected]>

Update projects/js-packages/publicize-components/src/components/add-c…

e9fbc4a

…onnection-modal/style.module.scss Co-authored-by: Manzoor Wani <[email protected]>

Update projects/js-packages/publicize-components/src/components/add-c…

35afae9

…onnection-modal/style.module.scss Co-authored-by: Manzoor Wani <[email protected]>

Update projects/js-packages/publicize-components/src/components/add-c…

f944912

…onnection-modal/constants.tsx Co-authored-by: Manzoor Wani <[email protected]>

Add connect button to main page as well

d260429

Merge branch 'trunk' into add/social-add-connection-modal

8792b32

Fixup versions

6aff2e3

Show back instead of chevronleft

d791d72

gmjuhasz requested a review from a team May 7, 2024 11:08

manzoorwanijk reviewed May 7, 2024

View reviewed changes

projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx Outdated Show resolved Hide resolved

manzoorwanijk previously approved these changes May 7, 2024

View reviewed changes

Fix TS compile error for image imports in js-packages

c45a42b

manzoorwanijk dismissed their stale review via c45a42b May 7, 2024 11:30

github-actions bot added the [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ label May 7, 2024

manzoorwanijk previously approved these changes May 7, 2024

View reviewed changes

Update projects/js-packages/publicize-components/src/components/add-c…

fef8379

…onnection-modal/index.tsx Co-authored-by: Manzoor Wani <[email protected]>

gmjuhasz dismissed manzoorwanijk’s stale review via fef8379 May 7, 2024 18:45

Merge branch 'trunk' into add/social-add-connection-modal

7f8d947

gmjuhasz enabled auto-merge (squash) May 7, 2024 19:15

manzoorwanijk approved these changes May 8, 2024

View reviewed changes

gmjuhasz merged commit e59c66e into trunk May 8, 2024
72 checks passed

gmjuhasz deleted the add/social-add-connection-modal branch May 8, 2024 07:59

github-actions bot removed [Status] In Progress [Status] Needs Team Review labels May 8, 2024

manzoorwanijk mentioned this pull request May 14, 2024

Social: Add account connection confirmation UI #37295

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Social: Add new connection modal #37211

Social: Add new connection modal #37211

gmjuhasz commented May 3, 2024 •

edited

Loading

github-actions bot commented May 3, 2024 •

edited

Loading

github-actions bot commented May 3, 2024 •

edited

Loading

gmjuhasz May 6, 2024

manzoorwanijk left a comment

manzoorwanijk left a comment

Social: Add new connection modal #37211

Social: Add new connection modal #37211

Conversation

gmjuhasz commented May 3, 2024 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

github-actions bot commented May 3, 2024 • edited Loading

github-actions bot commented May 3, 2024 • edited Loading

gmjuhasz May 6, 2024

Choose a reason for hiding this comment

manzoorwanijk left a comment

Choose a reason for hiding this comment

manzoorwanijk left a comment

Choose a reason for hiding this comment

gmjuhasz commented May 3, 2024 •

edited

Loading

github-actions bot commented May 3, 2024 •

edited

Loading

github-actions bot commented May 3, 2024 •

edited

Loading