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

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

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>