Site Management Widget: Migrate to react (2nd try)

projects/packages/jetpack-mu-wpcom/changelog/feat-dashboard-widget-react

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Site Management Panel: Migrate to react

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

@@ -143,12 +143,12 @@ public static function load_wpcom_user_features() {
 		require_once __DIR__ . '/features/wpcom-admin-interface/wpcom-admin-interface.php';
 		require_once __DIR__ . '/features/wpcom-admin-menu/wpcom-admin-menu.php';
 		require_once __DIR__ . '/features/wpcom-command-palette/wpcom-command-palette.php';
+		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-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';
 		require_once __DIR__ . '/features/wpcom-sidebar-notice/wpcom-sidebar-notice.php';
-		require_once __DIR__ . '/features/wpcom-site-management-widget/class-wpcom-site-management-widget.php';
 		require_once __DIR__ . '/features/wpcom-themes/wpcom-themes.php';
 
 		// Only load the Calypsoify and Masterbar features on WoA sites.

projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js

@@ -0,0 +1,21 @@
+import '../../common/public-path';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import WpcomSiteManagementWidget from './wpcom-site-management-widget';
+
+const data = typeof window === 'object' ? window.JETPACK_MU_WPCOM_DASHBOARD_WIDGETS : {};
+
+const widgets = [
+	{
+		id: 'wpcom_site_management_widget_main',
+		Widget: WpcomSiteManagementWidget,
+	},
+];
+
+widgets.forEach( ( { id, Widget } ) => {
+	const container = document.getElementById( id );
+	if ( container ) {
+		const root = ReactDOM.createRoot( container );
+		root.render( <Widget { ...data } /> );
+	}
+} );

projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php

@@ -0,0 +1,94 @@
+<?php
+/**
+ * Load the widgets of Dashboard for WordPress.com sites.
+ *
+ * @package automattic/jetpack-mu-plugins
+ */
+
+/**
+ * Load all wpcom dashboard widgets.
+ */
+function load_wpcom_dashboard_widgets() {
+	if ( ! current_user_can( 'manage_options' ) ) {
+		return;
+	}
+
+	enqueue_wpcom_dashboard_widgets();
+
+	$wpcom_dashboard_widgets = array(
+		array(
+			'id'       => 'wpcom_site_management_widget',
+			'name'     => __( 'Site Management Panel', 'jetpack-mu-wpcom' ),
+			'priority' => 'high',
+		),
+	);
+
+	foreach ( $wpcom_dashboard_widgets as $wpcom_dashboard_widget ) {
+		wp_add_dashboard_widget(
+			$wpcom_dashboard_widget['id'],
+			$wpcom_dashboard_widget['name'],
+			'render_wpcom_dashboard_widget',
+			function () {},
+			array(
+				'id'   => $wpcom_dashboard_widget['id'],
+				'name' => $wpcom_dashboard_widget['name'],
+			),
+			'normal',
+			$wpcom_dashboard_widget['priority']
+		);
+	}
+}
+add_action( 'wp_dashboard_setup', 'load_wpcom_dashboard_widgets' );
+
+/**
+ * Enqueue the assets of the wpcom dashboard widgets.
+ */
+function enqueue_wpcom_dashboard_widgets() {
+	$handle = jetpack_mu_wpcom_enqueue_assets( 'wpcom-dashboard-widgets', array( 'js', 'css' ) );
+
+	$data = wp_json_encode(
+		array(
+			'siteName'    => get_bloginfo( 'name' ),
+			'siteDomain'  => wp_parse_url( home_url(), PHP_URL_HOST ),
+			'siteIconUrl' => get_site_icon_url( 38 ),
+		)
+	);
+
+	wp_add_inline_script(
+		$handle,
+		"var JETPACK_MU_WPCOM_DASHBOARD_WIDGETS = $data;",
+		'before'
+	);
+}
+
+/**
+ * Render the container of the wpcom dashboard widget.
+ *
+ * @param WP_Post $post The post object.
+ * @param array   $callback_args The callback args of the render function.
+ */
+function render_wpcom_dashboard_widget( $post, $callback_args ) {
+	$args         = $callback_args['args'];
+	$widget_id    = $args['id'] . '_main';
+	$widget_class = $args['class'] ?? $args['id'];
+	$widget_name  = $args['name'];
+
+	$warning = sprintf(
+		/* translators: The name of the widget. */
+		__( 'Your %s widget requires JavaScript to function properly.', 'jetpack-mu-wpcom' ),
+		$widget_name
+	);
+
+	?>
+	<div style="min-height: 200px;">
+		<div class="hide-if-js">
+			<?php echo esc_html( $warning ); ?>
+		</div>
+		<div
+			id="<?php echo esc_attr( $widget_id ); ?>"
+			class="<?php echo esc_attr( $widget_class ); ?> hide-if-no-js"
+			style="height: 100%">
+		</div>
+	</div>
+	<?php
+}

projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js

@@ -0,0 +1,78 @@
+import { __ } from '@wordpress/i18n';
+import React from 'react';
+import './style.scss';
+
+const WpcomSiteManagementWidget = ( { siteName, siteDomain, siteIconUrl } ) => {
+	const devToolItems = [
+		{
+			name: __( 'Deployments', 'jetpack-mu-wpcom' ),
+			href: `/github-deployments/${ siteDomain }`,
+		},
+		{
+			name: __( 'Monitoring', 'jetpack-mu-wpcom' ),
+			href: `/site-monitoring/${ siteDomain }`,
+		},
+		{
+			name: __( 'Logs', 'jetpack-mu-wpcom' ),
+			href: `/site-logs/${ siteDomain }/php`,
+		},
+		{
+			name: __( 'Staging Site', 'jetpack-mu-wpcom' ),
+			href: `/staging-site/${ siteDomain }`,
+		},
+		{
+			name: __( 'Server Settings', 'jetpack-mu-wpcom' ),
+			href: `/hosting-config/${ siteDomain }`,
+		},
+	];
+
+	return (
+		<>
+			<div className="wpcom_site_management_widget__header">
+				<div className="wpcom_site_management_widget__site-favicon">
+					{
+						/* webclip.png is the default on WoA sites. Anything other than that means we have a custom site icon. */
+						siteIconUrl && siteIconUrl !== 'https://s0.wp.com/i/webclip.png' ? (
+							<img src={ siteIconUrl } alt="favicon" />
+						) : (
+							<span>{ siteName[ 0 ] }</span>
+						)
+					}
+				</div>
+				<div className="wpcom_site_management_widget__site-info">
+					<div className="wpcom_site_management_widget__site-name">{ siteName }</div>
+					<div className="wpcom_site_management_widget__site-url">{ siteDomain }</div>
+				</div>
+				<div className="wpcom_site_management_widget__site-actions">
+					<a className="button-primary" href={ `https://wordpress.com/overview/${ siteDomain }` }>
+						{ __( 'Overview', 'jetpack-mu-wpcom' ) }
+					</a>
+				</div>
+			</div>
+			<div className="wpcom_site_management_widget__content">
+				<p>
+					{ __(
+						'Get a quick overview of your plans, storage, and domains, or easily access your development tools using the links provided below:',
+						'jetpack-mu-wpcom'
+					) }
+				</p>
+				<div className="wpcom_site_management_widget__dev-tools">
+					<div className="wpcom_site_management_widget__dev-tools-title">
+						{ __( 'DEV TOOLS:', 'jetpack-mu-wpcom' ) }
+					</div>
+					<div className="wpcom_site_management_widget__dev-tools-content">
+						<ul>
+							{ devToolItems.map( item => (
+								<li key={ item.name }>
+									<a href={ `https://wordpress.com${ item.href }` }>{ item.name }</a>
+								</li>
+							) ) }
+						</ul>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default WpcomSiteManagementWidget;

projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/style.scss

@@ -0,0 +1,101 @@
+#wpcom_site_management_widget {
+	color: #1e1e1e;
+
+	.postbox-title-action {
+		display: none;
+	}
+}
+
+#wpcom_site_management_widget_main {
+	.wpcom_site_management_widget__header {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+	}
+
+	.wpcom_site_management_widget__site-favicon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 38px;
+		height: 38px;
+		overflow: hidden;
+		font-size: 24px;
+		color: #0073aa;
+		background-color: #f5f7f7;
+		border: 1px solid #eeeeee;
+		border-radius: 4px;
+		cursor: default;
+	}
+
+	.wpcom_site_management_widget__site-favicon img {
+		width: 100%;
+		height: auto;
+	}
+
+	.wpcom_site_management_widget__site-info {
+		flex-grow: 1;
+		overflow: hidden;
+	}
+
+	.wpcom_site_management_widget__site-name {
+		font-size: 14px;
+		font-weight: 500;
+		line-height: 20px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.wpcom_site_management_widget__site-url {
+		color: #3a434a;
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 16px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.wpcom_site_management_widget__site-actions {
+		flex-shrink: 0;
+	}
+
+	.wpcom_site_management_widget__content p {
+		margin: 12px 0;
+		font-size: 13px;
+		font-weight: 400;
+		line-height: 18px;
+	}
+
+	.wpcom_site_management_widget__dev-tools-title {
+		margin-bottom: 12px;
+		font-size: 11px;
+		font-weight: 600;
+		line-height: 16px;
+		text-transform: uppercase;
+	}
+
+	.wpcom_site_management_widget__dev-tools-content {
+		ul {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: 12px;
+			margin-bottom: 0;
+			list-style: disc inside;
+		}
+
+		li {
+			margin: 0 8px;
+			color: #0073aa;
+			font-size: 13px;
+			font-weight: 400;
+			line-height: 18px;
+
+			&::marker {
+				margin-inline-end: 2px;
+			}
+		}
+	}
+}

projects/packages/jetpack-mu-wpcom/src/features/wpcom-site-management-widget/class-wpcom-site-management-widget.php

@@ -2,6 +2,7 @@
 /**
  * A class that adds the WPCOM site management widget to the WordPress admin dashboard.
  *
+ * @todo Remove this file in the follow-up PR as it's not required.
  * @package automattic/jetpack-mu-plugins
  */
 

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

@@ -38,6 +38,8 @@ module.exports = [
 			'wpcom-blocks-timeline-view': './src/features/wpcom-blocks/timeline/view.js',
 			'wpcom-block-description-links': './src/features/wpcom-block-description-links/index.tsx',
 			'wpcom-block-editor-nux': './src/features/wpcom-block-editor-nux/index.js',
+			'wpcom-dashboard-widgets':
+				'./src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js',
 			'wpcom-global-styles-editor': './src/features/wpcom-global-styles/index.js',
 			'wpcom-global-styles-frontend':
 				'./src/features/wpcom-global-styles/wpcom-global-styles-view.js',