From a1da228b8150a82599487da40ebfad718c799eb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20M=C3=A1rk=20Juh=C3=A1sz?=
 <36671565+gmjuhasz@users.noreply.github.com>
Date: Wed, 28 Aug 2024 15:07:01 +0200
Subject: [PATCH] Social: Fix media validation deadlock (#38933)

* Show SharePostForm if there is attached media

* changelog

* Show form if there is any validation error

* Use only !isConvertible

* Use validationErrors

* Add a small comment to explain why we do that
---
 .../fix-social-media-validation-deadlock      |  4 +++
 .../src/components/form/index.tsx             | 26 ++++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 projects/js-packages/publicize-components/changelog/fix-social-media-validation-deadlock

diff --git a/projects/js-packages/publicize-components/changelog/fix-social-media-validation-deadlock b/projects/js-packages/publicize-components/changelog/fix-social-media-validation-deadlock
new file mode 100644
index 0000000000000..e7849ba5f8506
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/fix-social-media-validation-deadlock
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fixed
+
+Fixed a deadlock with media validation and media picker
diff --git a/projects/js-packages/publicize-components/src/components/form/index.tsx b/projects/js-packages/publicize-components/src/components/form/index.tsx
index 6e1b2eb9039c1..e2c9fa5bffe2a 100644
--- a/projects/js-packages/publicize-components/src/components/form/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/form/index.tsx
@@ -10,6 +10,10 @@ import { Disabled, PanelRow } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { Fragment } from '@wordpress/element';
 import { usePublicizeConfig } from '../../..';
+import useAttachedMedia from '../../hooks/use-attached-media';
+import useFeaturedImage from '../../hooks/use-featured-image';
+import useMediaDetails from '../../hooks/use-media-details';
+import useMediaRestrictions from '../../hooks/use-media-restrictions';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { store as socialStore } from '../../social-store';
 import { ThemedConnectionsModal as ManageConnectionsModal } from '../manage-connections-modal';
@@ -25,8 +29,24 @@ import { SharePostForm } from './share-post-form';
  * @return {object} - Publicize form component.
  */
 export default function PublicizeForm() {
-	const { hasConnections, hasEnabledConnections } = useSocialMediaConnections();
+	const { hasConnections, hasEnabledConnections, connections } = useSocialMediaConnections();
 	const { isPublicizeEnabled, isPublicizeDisabledBySitePlan } = usePublicizeConfig();
+	const { attachedMedia } = useAttachedMedia();
+	const featuredImageId = useFeaturedImage();
+
+	const mediaId = attachedMedia[ 0 ]?.id || featuredImageId;
+	const { validationErrors, isConvertible } = useMediaRestrictions(
+		connections,
+		useMediaDetails( mediaId )[ 0 ]
+	);
+
+	const showSharePostForm =
+		isPublicizeEnabled &&
+		( hasEnabledConnections ||
+			// We show the form if there is any attached media or validation errors to let the user
+			// fix the issues with uploading an image.
+			attachedMedia.length > 0 ||
+			( Object.keys( validationErrors ).length !== 0 && ! isConvertible ) );
 
 	const { useAdminUiV1, featureFlags } = useSelect( select => {
 		const store = select( socialStore );
@@ -57,9 +77,7 @@ export default function PublicizeForm() {
 
 			{ ! isPublicizeDisabledBySitePlan && (
 				<Fragment>
-					{ isPublicizeEnabled && hasEnabledConnections && (
-						<SharePostForm analyticsData={ { location: 'editor' } } />
-					) }
+					{ showSharePostForm && <SharePostForm analyticsData={ { location: 'editor' } } /> }
 				</Fragment>
 			) }
 		</Wrapper>