WIP Implement media import via URL

projects/packages/jetpack-mu-wpcom/changelog/wpcom-media-url-import

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Implement media import via URL

projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php

@@ -152,6 +152,7 @@ public static function load_wpcom_user_features() {
 		require_once __DIR__ . '/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php';
 		require_once __DIR__ . '/features/wpcom-locale/sync-locale-from-calypso-to-atomic.php';
 		require_once __DIR__ . '/features/wpcom-media/wpcom-external-media-import.php';
+		require_once __DIR__ . '/features/wpcom-media/wpcom-media-url-import.php';
 		require_once __DIR__ . '/features/wpcom-plugins/wpcom-plugins.php';
 		require_once __DIR__ . '/features/wpcom-profile-settings/profile-settings-link-to-wpcom.php';
 		require_once __DIR__ . '/features/wpcom-profile-settings/profile-settings-notices.php';

projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import-form/index.jsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import wpcomRequest from 'wpcom-proxy-request';
+
+export default function WpcomMediaUrlImportForm( { siteId } ) {
+	const [ url, setUrl ] = useState( '' );
+
+	const handleUrlChange = e => {
+    setUrl( e.target.value );
+  };
+
+	const handleSubmit = async e => {
+		try {
+			new URL(url);
+		} catch (e) {
+			return false;
+		}
+		e.preventDefault();
+
+		console.log({ url, siteId } );
+
+		console.log({ wpcomRequest });
+
+		window.wpcomRequest = wpcomRequest;
+
+		// NOT WORKING!!
+
+		const response = await wpcomRequest( {
+			method: 'POST',
+			apiVersion: '1.1',
+			path: `/sites/${ siteId }/media/new?http_envelope=1`,
+			body: {
+				media_urls: [ url ],
+			}
+		});
+
+
+		console.log('FINISH');
+		console.log({ response});
+
+		return false;
+	}
+
+	return (
+		<div class="wrap">
+			<p>or import from URL YAY!</p>
+				<form onsubmit="return false;">
+					<input
+						type="url"
+						value={ url }
+        		onChange={ handleUrlChange }
+						required />
+					<button onClick={ handleSubmit } class="button button-primary">Import</button>
+				</form>
+		</div>
+	);
+}

projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import WpcomMediaUrlImportForm from './wpcom-media-url-import-form';
+
+const props = typeof window === 'object' ? window.JETPACK_MU_WPCOM_MEDIA_URL_IMPORT : {};
+
+document.addEventListener( 'DOMContentLoaded', function () {
+	const observer = new MutationObserver( mutations => {
+		mutations.forEach( mutation => {
+			if ( mutation.addedNodes.length > 0 ) {
+				const container = document.getElementById( 'wpcom-media-url-import' );
+				if ( container ) {
+					const root = ReactDOM.createRoot( container );
+					root.render( <WpcomMediaUrlImportForm { ...props } /> );
+					observer.disconnect();
+				}
+			}
+		} );
+	} );
+	observer.observe( document.body, { childList: true, subtree: true } );
+} );

projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * WordPress.com media URL import functionality.
+ *
+ *
+ * @package automattic/jetpack-mu-wpcom
+ */
+
+use Automattic\Jetpack\Connection\Manager as Jetpack_Connection;
+use Automattic\Jetpack\Connection\Client;
+
+function wpcom_media_url_import() {
+    ?>
+    <div id="wpcom-media-url-import">
+    </div>
+    <?php
+}
+add_action('post-plupload-upload-ui', 'wpcom_media_url_import', 20 );
+
+/**
+ * Enqueue the assets of the wpcom media URL import.
+ */
+function enqueue_wpcom_media_url_import() {
+	$handle = jetpack_mu_wpcom_enqueue_assets( 'wpcom-media-url-import', array( 'js' ) );
+
+	$blog_id = Jetpack_Options::get_option( 'id' );
+	$data = wp_json_encode(
+		array(
+			'siteId' => $blog_id,
+		)
+	);
+	wp_add_inline_script(
+		$handle,
+		"window.JETPACK_MU_WPCOM_MEDIA_URL_IMPORT = $data;",
+		'before'
+	);
+}
+add_action('post-plupload-upload-ui', 'enqueue_wpcom_media_url_import' );

projects/packages/jetpack-mu-wpcom/webpack.config.js

@@ -47,6 +47,7 @@ module.exports = [
 				'./src/features/wpcom-documentation-links/wpcom-documentation-links.ts',
 			'wpcom-external-media-import-page':
 				'./src/features/wpcom-media/wpcom-external-media-import.js',
+			'wpcom-media-url-import': './src/features/wpcom-media/wpcom-media-url-import.js',
 			'wpcom-plugins-banner': './src/features/wpcom-plugins/js/banner.js',
 			'wpcom-plugins-banner-style': './src/features/wpcom-plugins/css/banner.css',
 			'wpcom-profile-settings-link-to-wpcom':