Forms: Add integrations status to block sidebar #43178

edanzer · 2025-04-21T19:52:53Z

Proposed changes:

Adds an integration icon to the Manage Integrations panel when an integration is enabled for a particular form. This is based on designs at p1HpG7-wqy-p2

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

P2: p1HpG7-wqy-p2

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

No.

Testing instructions:

Add a form to a page
On the block sidebar, in the Integrations panel, confirm you see icons for any integrations that are active and enabled for this particular form.
Try deactivating Akismet or toggling off the Jetpack CRM connection and confirm status correctly updates on the sidebar.

github-actions · 2025-04-21T19:53:45Z

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 WoA dev 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 (Jetpack), and enable the add/form-block-sidebar-icons branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/form-block-sidebar-icons

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 · 2025-04-21T19:54:00Z

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 Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ 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 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

jp-launch-control · 2025-04-21T20:01:54Z

Code Coverage Summary

1 file is newly checked for coverage.

File	Coverage
projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/active-integrations/index.js	0/16 (0.00%) 💔

Full summary · PHP report · JS report

_{If appropriate, add one of these labels to override the failing coverage check:

Covered by non-unit tests
Use to ignore the Code coverage requirement check when E2Es or other non-unit tests cover the code

Coverage tests to be added later
Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR

I don't care about code coverage for this PR
Use this label to ignore the check for insufficient code coveage.}

edanzer · 2025-04-23T00:20:39Z

...packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/akismet-card.js

@@ -13,7 +13,7 @@ const AkismetCard = ( { isExpanded, onToggle, data, refreshStatus } ) => {
 	const cardData = {
 		...data,
 		showHeaderToggle: true,
-		headerToggleValue: data?.isConnected,
+		headerToggleValue: akismetActiveWithKey,


This change is unrelated. It's just a small improvement I saw that didn't warrant it's own PR. We already define akismetActiveWithKey as data.isConnected further up in the component, and use it elsewhere. For consistency, we should use it here.

edanzer · 2025-04-23T00:21:40Z

...s/src/blocks/contact-form/components/jetpack-integrations-modal/active-integrations/index.js

+				break;
+		}
+		return acc;
+	}, [] );


The reduce method takes in the list of integrations, and returns:
(a) just those that are active/enabled for this form and
(b) includes the icon so it can be output below
(c) the tooltip text for each active integration

ilonagl

This looks great! Thanks for working on this, Erick!

Could we add on-hover tooltips that would say "Connected – sending data" or something similar? Thanks!

simison · 2025-04-23T08:17:16Z

...src/blocks/contact-form/components/jetpack-integrations-modal/active-integrations/style.scss

@@ -0,0 +1,19 @@
+.active-integrations {


Since this will end up at global scope in WP with all kinds of other plugins, let's have something less generic. Basically just prefix with jetpack_ or jetpack_forms_ :-)

simison · 2025-04-23T09:11:44Z

@ilonagl — Should we add the product name to the tooltip?

Jetpack CRM can be confusing since it's just the Jetpack logo (perhaps we have CRM-specific logo somewhere?)

ilonagl · 2025-04-23T13:09:19Z

@ilonagl — Should we add the product name to the tooltip?

Yes, that would be good! E.g., "Jetpack CRM connected - sending data"; I do wonder if we need the 'sending data' piece if we include the product name? I don't want this to be too long; it does add some reassurance that it's working. Thoughts?

ilonagl · 2025-04-23T13:11:13Z

perhaps we have CRM-specific logo somewhere?

No, not really. It acts as all of the Jetpack plugins: jetpack logo + name, or general icon + jetpack logo.

https://wordpress.org/plugins/zero-bs-crm/

simison · 2025-04-23T13:16:45Z

That's tricky. 🤔 Eventually, we'll have integrations to other Jetpack functionality like Newsletters, Payments, so we'll need to solve it somehow. Likely would mean adding labels?

ilonagl · 2025-04-23T13:19:25Z

Likely would mean adding labels?

Full name (e.g., Jetpack Newsletters connected) in the on-hover tooltip would be the easiest solution for now. I'll think about other ways, but i doubt we will have specific for each product.

edanzer · 2025-04-23T16:34:48Z

@simison @ilonagl - I've added tooltips. For now, looks like this:

I used "Akismet is connected for this form" and "Jetpack CRM is connected for this form". Those are big longer but I was thinking it's clear to be specific that the integration is (a) generally connected and (b) active for the current form. If we'd like that to be shorter let me know. Happy to adjust it.

@simison I also namespaced the CSS classes.

edanzer added [Status] In Progress [Type] Task [Pri] Normal [Block] Contact Form Form block (also see Contact Form label) [Package] Forms [Feature] Forms Blocks Blocks designed to streamline user input and engagement, such as contact, newsletter sign-ups, etc. labels Apr 21, 2025

edanzer self-assigned this Apr 21, 2025

github-actions bot added the [Feature] Contact Form label Apr 21, 2025

edanzer force-pushed the add/form-block-sidebar-icons branch 2 times, most recently from aac437d to d2d1094 Compare April 22, 2025 18:59

edanzer added 7 commits April 22, 2025 16:02

Add form integration status to sidebar

d3ec0d4

changelog

d385bf1

Pass block attributes to integration status hook

97cc8f4

Return false for Creative Mail

167299d

Add icons to integrations panel

0902c20

Create separate component file, add status circle

26d8f43

Return raw response data from hook

9734ea7

edanzer force-pushed the add/form-block-sidebar-icons branch from d2d1094 to 9734ea7 Compare April 22, 2025 22:34

edanzer added 8 commits April 22, 2025 16:39

Remove unrelated variable name change

e53c3bf

Remove duplicate file

46c9bb9

Update status method to handle array

86f3bd3

Restore crm card to original state

8c2b26d

Keep akismet status property on same line

8b56581

Update icon styling

90a51be

Move loading check

c3339c9

Update ActiveIntegrations to use reduce

369e858

edanzer commented Apr 23, 2025

View reviewed changes

edanzer marked this pull request as ready for review April 23, 2025 00:22

edanzer requested review from ilonagl and a team April 23, 2025 00:22

Update class names

8987c94

ilonagl previously approved these changes Apr 23, 2025

View reviewed changes

simison reviewed Apr 23, 2025

View reviewed changes

edanzer added 2 commits April 23, 2025 10:22

Namespace css classes

0fa95dd

Add tooltips to icons

eab0253

edanzer dismissed ilonagl’s stale review via eab0253 April 23, 2025 16:30

edanzer merged commit c8d46b0 into trunk Apr 23, 2025
66 of 67 checks passed

edanzer deleted the add/form-block-sidebar-icons branch April 23, 2025 20:35

github-actions bot removed the [Status] In Progress label Apr 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Forms: Add integrations status to block sidebar #43178

Forms: Add integrations status to block sidebar #43178

edanzer commented Apr 21, 2025 •

edited

Loading

github-actions bot commented Apr 21, 2025 •

edited

Loading

github-actions bot commented Apr 21, 2025

jp-launch-control bot commented Apr 21, 2025 •

edited

Loading

edanzer Apr 23, 2025

edanzer Apr 23, 2025 •

edited

Loading

ilonagl left a comment •

edited

Loading

simison Apr 23, 2025 •

edited

Loading

simison commented Apr 23, 2025

ilonagl commented Apr 23, 2025 •

edited

Loading

ilonagl commented Apr 23, 2025

simison commented Apr 23, 2025

ilonagl commented Apr 23, 2025

edanzer commented Apr 23, 2025

Forms: Add integrations status to block sidebar #43178

Forms: Add integrations status to block sidebar #43178

Conversation

edanzer commented Apr 21, 2025 • 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 Apr 21, 2025 • edited Loading

github-actions bot commented Apr 21, 2025

jp-launch-control bot commented Apr 21, 2025 • edited Loading

Code Coverage Summary

edanzer Apr 23, 2025

Choose a reason for hiding this comment

edanzer Apr 23, 2025 • edited Loading

Choose a reason for hiding this comment

ilonagl left a comment • edited Loading

Choose a reason for hiding this comment

simison Apr 23, 2025 • edited Loading

Choose a reason for hiding this comment

simison commented Apr 23, 2025

ilonagl commented Apr 23, 2025 • edited Loading

ilonagl commented Apr 23, 2025

simison commented Apr 23, 2025

ilonagl commented Apr 23, 2025

edanzer commented Apr 23, 2025

edanzer commented Apr 21, 2025 •

edited

Loading

github-actions bot commented Apr 21, 2025 •

edited

Loading

jp-launch-control bot commented Apr 21, 2025 •

edited

Loading

edanzer Apr 23, 2025 •

edited

Loading

ilonagl left a comment •

edited

Loading

simison Apr 23, 2025 •

edited

Loading

ilonagl commented Apr 23, 2025 •

edited

Loading