Merge branch 'trunk' into add/wpcomsh-tests-to-matrix

projects/js-packages/ai-client/CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.16.1] - 2024-08-05
+### Changed
+- AI Logo Generator: fix UI issues. [#38590]
+- Fixup versions [#38612]
+
+### Fixed
+- AI Logo Generator: fix multiple feature requests error + retry handling. [#38630]
+- AI Logo Generator: fix small UI issues. [#38676]
+- AI Logo Generator: fix upgrade URLs so they work on any site type. [#38598]
+- AI Logo Generator: update upgrade message. [#38690]
+
 ## [0.16.0] - 2024-07-29
 ### Added
 - AI Logo Generator: support placement property on the generator modal, for tracking purposes. [#38574]
@@ -366,6 +377,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.16.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.16.0...v0.16.1
 [0.16.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.15.0...v0.16.0
 [0.15.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.6...v0.15.0
 [0.14.6]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.5...v0.14.6

projects/js-packages/ai-client/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.16.1-alpha",
+	"version": "0.16.1",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {

projects/js-packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.55.5] - 2024-08-05
+### Fixed
+- Fixed TS types for Notice components by marking optional props as such [#38686]
+
 ## [0.55.4] - 2024-08-01
 ### Added
 - Update Welcome Banner and set async site-only connection [#38534]
@@ -1110,6 +1114,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.55.5]: https://github.com/Automattic/jetpack-components/compare/0.55.4...0.55.5
 [0.55.4]: https://github.com/Automattic/jetpack-components/compare/0.55.3...0.55.4
 [0.55.3]: https://github.com/Automattic/jetpack-components/compare/0.55.2...0.55.3
 [0.55.2]: https://github.com/Automattic/jetpack-components/compare/0.55.1...0.55.2

projects/js-packages/components/components/notice/index.tsx

@@ -5,10 +5,10 @@ import styles from './style.module.scss';
 
 type NoticeProps = {
 	/** The severity of the alert. */
-	level: 'error' | 'warning' | 'info' | 'success';
+	level?: 'error' | 'warning' | 'info' | 'success';
 
 	/** The title of the notice */
-	title: string;
+	title?: string;
 
 	/** A list of action elements to show across the bottom */
 	actions?: React.ReactNode[];

projects/js-packages/components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.55.4",
+	"version": "0.55.5",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

projects/js-packages/publicize-components/CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.59.0] - 2024-08-05
+### Added
+- Added connection toggle to social post preview [#38686]
+- Added feature flag management for social [#38669]
+- Added preview section to the social post modal [#38686]
+- Added Social post UI modal and trigger [#38666]
+- Added tracking for the publicize settings changes [#38714]
+- Social: Added settings section to the social post modal [#38683]
+
+### Fixed
+- Fix the media validation notice for Instagram when SIG is enabled [#38689]
+
 ## [0.58.0] - 2024-08-01
 ### Changed
 - Fixup versions [#38612]
@@ -807,6 +819,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Updated package dependencies. [#24470]
 
+[0.59.0]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.58.0...v0.59.0
 [0.58.0]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.57.0...v0.58.0
 [0.57.0]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.56.2...v0.57.0
 [0.56.2]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.56.1...v0.56.2

projects/js-packages/publicize-components/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.59.0-alpha",
+	"version": "0.59.0",
 	"description": "A library of JS components required by the Publicize editor plugin",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme",
 	"bugs": {

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

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { store } from '../../social-store';
 import { ThemedConnectionsModal as ManageConnectionsModal } from '../manage-connections-modal';
-import { SupportedService, useSupportedServices } from '../services/use-supported-services';
+import { useService } from '../services/use-service';
 import { ConnectionInfo } from './connection-info';
 import styles from './style.module.scss';
 
@@ -35,14 +35,7 @@ const ConnectionManagement = ( { className = null } ) => {
 		refresh();
 	}, [ refresh ] );
 
-	const supportedServices = useSupportedServices();
-	const servicesByName = supportedServices.reduce< Record< string, SupportedService > >(
-		( acc, service ) => {
-			acc[ service.ID ] = service;
-			return acc;
-		},
-		{}
-	);
+	const getService = useService();
 
 	const { openConnectionsModal } = useDispatch( store );
 
@@ -62,7 +55,7 @@ const ConnectionManagement = ( { className = null } ) => {
 									<Disabled isDisabled={ isUpdatingOrDeleting }>
 										<ConnectionInfo
 											connection={ connection }
-											service={ servicesByName[ connection.service_name ] }
+											service={ getService( connection.service_name ) }
 										/>
 									</Disabled>
 								</li>

projects/js-packages/publicize-components/src/components/form/connections-list.tsx

@@ -1,3 +1,5 @@
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { useCallback } from 'react';
 import usePublicizeConfig from '../../hooks/use-publicize-config';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import PublicizeConnection from '../connection';
@@ -7,12 +9,25 @@ import styles from './styles.module.scss';
 import { useConnectionState } from './use-connection-state';
 
 export const ConnectionsList: React.FC = () => {
-	const { connections, toggleById } = useSocialMediaConnections();
+	const { recordEvent } = useAnalytics();
 
+	const { connections, toggleById } = useSocialMediaConnections();
 	const { canBeTurnedOn, shouldBeDisabled } = useConnectionState();
 
 	const { needsUserConnection } = usePublicizeConfig();
 
+	const toggleConnection = useCallback(
+		( connectionId: string, connection ) => () => {
+			toggleById( connectionId );
+			recordEvent( 'jetpack_social_connection_toggled', {
+				location: 'editor',
+				enabled: ! connection.enabled,
+				service_name: connection.service_name,
+			} );
+		},
+		[ recordEvent, toggleById ]
+	);
+
 	return (
 		<div>
 			<ul className={ styles[ 'connections-list' ] }>
@@ -28,7 +43,7 @@ export const ConnectionsList: React.FC = () => {
 							id={ currentId }
 							label={ display_name }
 							name={ service_name }
-							toggleConnection={ toggleById }
+							toggleConnection={ toggleConnection( currentId, conn ) }
 							profilePicture={ profile_picture }
 						/>
 					);

projects/js-packages/publicize-components/src/components/form/index.tsx

@@ -105,7 +105,9 @@ export default function PublicizeForm() {
 
 			{ ! isPublicizeDisabledBySitePlan && (
 				<Fragment>
-					{ isPublicizeEnabled && hasEnabledConnections && <SharePostForm /> }
+					{ isPublicizeEnabled && hasEnabledConnections && (
+						<SharePostForm analyticsData={ { location: 'editor' } } />
+					) }
 					<AdvancedPlanNudge />
 				</Fragment>
 			) }

projects/js-packages/publicize-components/src/components/form/share-post-form.tsx

@@ -3,15 +3,30 @@ import useSocialMediaMessage from '../../hooks/use-social-media-message';
 import MediaSection from '../media-section';
 import MessageBoxControl from '../message-box-control';
 
-export const SharePostForm: React.FC = () => {
+type SharePostFormProps = {
+	analyticsData?: object;
+};
+
+/**
+ * The SharePostForm component.
+ * @param {object} props - The component props.
+ * @param {object} [props.analyticsData] - Data for tracking analytics.
+ * @returns {object} The SharePostForm component.
+ */
+export const SharePostForm: React.FC< SharePostFormProps > = ( { analyticsData = null } ) => {
 	const { message, updateMessage, maxLength } = useSocialMediaMessage();
 
 	const { isEnhancedPublishingEnabled } = usePublicizeConfig();
 
 	return (
 		<>
-			<MessageBoxControl maxLength={ maxLength } onChange={ updateMessage } message={ message } />
-			{ isEnhancedPublishingEnabled && <MediaSection /> }
+			<MessageBoxControl
+				maxLength={ maxLength }
+				onChange={ updateMessage }
+				message={ message }
+				analyticsData={ analyticsData }
+			/>
+			{ isEnhancedPublishingEnabled && <MediaSection analyticsData={ analyticsData } /> }
 		</>
 	);
 };

projects/js-packages/publicize-components/src/components/media-section/index.js

@@ -1,4 +1,5 @@
 import { ThemeProvider, getRedirectUrl } from '@automattic/jetpack-components';
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Disabled, ExternalLink, Notice, BaseControl } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -16,14 +17,17 @@ const ADD_MEDIA_LABEL = __( 'Choose Media', 'jetpack' );
  * @param {boolean} [props.disabled=false] - Indicates whether the MediaSection is disabled or not.
  * @param {string} [props.disabledNoticeMessage=''] - An optional notice that's displayed when the section is disabled.
  * @param {import('react').ReactNode} [props.CustomNotice=null] - An optional custom notice that's displayed.
+ * @param {object} [props.analyticsData] - Data for tracking analytics.
  * @returns {object} The media section.
  */
 export default function MediaSection( {
 	disabled = false,
 	disabledNoticeMessage = '',
 	CustomNotice = null,
+	analyticsData,
 } ) {
 	const { attachedMedia, updateAttachedMedia } = useAttachedMedia();
+	const { recordEvent } = useAnalytics();
 
 	const [ mediaDetails ] = useMediaDetails( attachedMedia[ 0 ]?.id );
 
@@ -32,11 +36,13 @@ export default function MediaSection( {
 			if ( ! media ) {
 				updateAttachedMedia( [] );
 			} else {
+				recordEvent( 'jetpack_social_media_attached', analyticsData );
+
 				const { id, url, mime: type } = media;
 				updateAttachedMedia( [ { id, url, type } ] );
 			}
 		},
-		[ updateAttachedMedia ]
+		[ analyticsData, recordEvent, updateAttachedMedia ]
 	);
 
 	const MediaWrapper = disabled ? Disabled : Fragment;

projects/js-packages/publicize-components/src/components/message-box-control/index.js

@@ -1,5 +1,7 @@
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { TextareaControl } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { useCallback, useRef } from 'react';
 
 /**
  * Wrapper around a textbox to restrict the number of characters and
@@ -10,16 +12,37 @@ import { __, _n, sprintf } from '@wordpress/i18n';
  * @param {Function} props.onChange  - Callback to invoke as the message changes.
  * @param {boolean}  [props.disabled]  - Whether the control is disabled.
  * @param {number}   props.maxLength - The maximum character length of the message.
+ * @param {object}   props.analyticsData - Data for tracking analytics.
  * @returns {object} The message box component.
  */
-export default function MessageBoxControl( { message = '', onChange, disabled, maxLength } ) {
+export default function MessageBoxControl( {
+	message = '',
+	onChange,
+	disabled,
+	maxLength,
+	analyticsData = null,
+} ) {
+	const { recordEvent } = useAnalytics();
+	const isFirstChange = useRef( true );
+
 	const charactersRemaining = maxLength - message.length;
 
+	const handleChange = useCallback(
+		newMessage => {
+			onChange( newMessage );
+			if ( isFirstChange.current ) {
+				recordEvent( 'jetpack_social_custom_message_changed', analyticsData );
+				isFirstChange.current = false;
+			}
+		},
+		[ analyticsData, isFirstChange, onChange, recordEvent ]
+	);
+
 	return (
 		<TextareaControl
 			value={ message }
 			label={ __( 'Message', 'jetpack' ) }
-			onChange={ onChange }
+			onChange={ handleChange }
 			disabled={ disabled }
 			maxLength={ maxLength }
 			placeholder={ __( 'Write a message for your audience here.', 'jetpack' ) }