Forms: Add integrations status to block sidebar

projects/packages/forms/changelog/add-form-block-sidebar-icons

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: Added integration status to block sidebar.

projects/packages/forms/src/blocks/contact-form/components/jetpack-integration-controls.js

@@ -5,6 +5,7 @@ import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { plugins } from '@wordpress/icons';
 import IntegrationsModal from './jetpack-integrations-modal';
+import ActiveIntegrations from './jetpack-integrations-modal/active-integrations';
 import { useIntegrationsStatus } from './jetpack-integrations-modal/hooks/useIntegrationsStatus';
 
 /**
@@ -17,7 +18,7 @@ import { useIntegrationsStatus } from './jetpack-integrations-modal/hooks/useInt
  */
 export default function IntegrationControls( { attributes, setAttributes } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const { integrations, refreshIntegrations } = useIntegrationsStatus();
+	const { integrations, refreshIntegrations, isLoading } = useIntegrationsStatus();
 	const { tracks } = useAnalytics();
 
 	const handleOpenModal = entry_point => {
@@ -28,10 +29,15 @@ export default function IntegrationControls( { attributes, setAttributes } ) {
 	return (
 		<>
 			<PanelBody
-				title={ __( 'Manage integrations', 'jetpack-forms' ) }
+				title={ __( 'Integrations', 'jetpack-forms' ) }
 				className="jetpack-contact-form__integrations-panel"
 				initialOpen={ false }
 			>
+				<ActiveIntegrations
+					integrations={ integrations }
+					attributes={ attributes }
+					isLoading={ isLoading }
+				/>
 				<Button
 					variant="secondary"
 					onClick={ () => handleOpenModal( 'block-sidebar' ) }

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/active-integrations/index.js

@@ -0,0 +1,59 @@
+import colorStudio from '@automattic/color-studio';
+import { JetpackIcon } from '@automattic/jetpack-components';
+import { Spinner, Tooltip } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import AkismetIcon from '../../../../../icons/akismet-icon';
+import './style.scss';
+
+const COLOR_JETPACK = colorStudio.colors[ 'Jetpack Green 40' ];
+
+export default function ActiveIntegrations( { integrations, attributes, isLoading } ) {
+	const activeIntegrations = integrations.reduce( ( acc, integration ) => {
+		switch ( integration.id ) {
+			case 'akismet':
+				if ( integration.isConnected ) {
+					acc.push( {
+						...integration,
+						icon: <AkismetIcon width={ 30 } height={ 30 } />,
+						tooltip: __( 'Akismet is connected for this form', 'jetpack-forms' ),
+					} );
+				}
+				break;
+			case 'zero-bs-crm':
+				if ( integration.isActive && integration.details?.hasExtension && attributes.jetpackCRM ) {
+					acc.push( {
+						...integration,
+						icon: <JetpackIcon size={ 30 } color={ COLOR_JETPACK } />,
+						tooltip: __( 'Jetpack CRM is connected for this form', 'jetpack-forms' ),
+					} );
+				}
+				break;
+		}
+		return acc;
+	}, [] );
+
+	if ( isLoading ) {
+		return (
+			<div className="jetpack-forms-active-integrations">
+				<Spinner />
+			</div>
+		);
+	}
+
+	if ( ! activeIntegrations?.length ) {
+		return null;
+	}
+
+	return (
+		<div className="jetpack-forms-active-integrations">
+			{ activeIntegrations.map( integration => (
+				<Tooltip key={ integration.id } text={ integration.tooltip }>
+					<span className="jetpack-forms-active-integrations__item">
+						{ integration.icon }
+						<span className="jetpack-forms-active-integrations__status" />
+					</span>
+				</Tooltip>
+			) ) }
+		</div>
+	);
+}

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

@@ -0,0 +1,19 @@
+.jetpack-forms-active-integrations {
+	margin: 8px 0 10px;
+
+	&__item {
+		position: relative;
+		margin-right: 8px;
+	}
+
+	&__status {
+		position: absolute;
+		bottom: 1px;
+		right: 1px;
+		width: 9px;
+		height: 9px;
+		background-color: #4AB866;
+		box-shadow: 0 0 0 1px #fff;
+		border-radius: 50%;
+	}
+} 

projects/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,
 		isHeaderToggleEnabled: false,
 		isLoading: ! data || typeof data.isInstalled === 'undefined',
 		refreshStatus,