Connection UI: Building the Framework.

The commit includes:
- The new package
- JS building configuration
- Handy yarn commands
- The WP admin menu link

package.json

@@ -17,7 +17,7 @@
 		"build-concurrently": "yarn install-if-deps-outdated && yarn clean && yarn concurrently 'yarn build-php' 'yarn build-packages' 'yarn build-jetpack-concurrently'",
 		"build-jetpack": "cd projects/plugins/jetpack && yarn build",
 		"build-jetpack-concurrently": "cd projects/plugins/jetpack && yarn build-concurrently",
-		"build-packages": "(cd projects/packages/lazy-images && yarn build)",
+		"build-packages": "(cd projects/packages/lazy-images && yarn build) && (cd projects/packages/connection-ui && yarn build)",
 		"build-php": "composer install --ignore-platform-reqs",
 		"build-production": "yarn distclean && yarn install --production=false && yarn build-production-php && yarn build-production-packages && yarn build-production-jetpack",
 		"build-production-concurrently": "yarn distclean && yarn install --production=false && yarn concurrently 'yarn build-production-php' 'yarn build-production-packages' 'yarn build-production-jetpack-concurrently'",

projects/packages/connection-ui/.babelrc

@@ -0,0 +1,9 @@
+{
+	"presets": [
+		["@babel/preset-env", {
+			"targets": {
+				"node": "current"
+			}
+		}]
+	]
+}

projects/packages/connection-ui/.gitignore

@@ -0,0 +1,3 @@
+/build
+/node_modules
+/.cache

projects/packages/connection-ui/_inc/actions/index.js

@@ -0,0 +1,5 @@
+const actions = {
+	// We'll import actions from other files in this directory, and merge them here.
+};
+
+export default actions;

projects/packages/connection-ui/_inc/admin.jsx

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { registerStore } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_ID, storeConfig } from './store';
+
+registerStore( STORE_ID, storeConfig );
+
+/**
+ * The initial renderer function.
+ */
+function render() {
+	const container = document.getElementById( 'jetpack-connection-ui-container' );
+
+	if ( null === container ) {
+		return;
+	}
+
+	ReactDOM.render( <h1>Connection Manager</h1>, container );
+}
+
+render();

projects/packages/connection-ui/_inc/reducers/index.js

@@ -0,0 +1,10 @@
+/**
+ * External dependencies
+ */
+import { combineReducers } from '@wordpress/data';
+
+const reducer = combineReducers( {
+	// We'll use it to combine selectors imported from other files in this directory.
+} );
+
+export default reducer;

projects/packages/connection-ui/_inc/selectors/index.js

@@ -0,0 +1,5 @@
+const selectors = {
+	// We'll import selectors from other files in this directory, and merge them here.
+};
+
+export default selectors;

projects/packages/connection-ui/_inc/store.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import reducer from './reducers';
+import actions from './actions';
+import selectors from './selectors';
+
+export const STORE_ID = 'jetpack-connection-ui';
+export const storeConfig = {
+	reducer,
+	actions,
+	selectors,
+	initialState: window.CUI_INITIAL_STATE || {},
+};

projects/packages/connection-ui/composer.json

@@ -0,0 +1,22 @@
+{
+	"name": "automattic/jetpack-connection-ui",
+	"description": "Jetpack Connection UI",
+	"type": "library",
+	"license": "GPL-2.0-or-later",
+	"require": {
+		"automattic/jetpack-connection": "@dev"
+	},
+	"autoload": {
+		"classmap": [
+			"src/"
+		]
+	},
+	"repositories": [
+		{
+			"type": "path",
+			"url": "../*"
+		}
+	],
+	"minimum-stability": "dev",
+	"prefer-stable": true
+}

projects/packages/connection-ui/gulpfile.babel.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import gulp from 'gulp';
+import webpack from 'webpack';
+import log from 'fancy-log';
+
+/**
+ * Get the Webpack config.
+ *
+ * @returns {Array} - The Webpack config.
+ */
+function getWebpackConfig() {
+	return require( './webpack.config.js' );
+}
+
+gulp.task( 'build', function ( done ) {
+	return webpack( getWebpackConfig() ).run( done );
+} );
+
+gulp.task( 'watch', function () {
+	return webpack( getWebpackConfig() ).watch( { aggregateTimeout: 100 }, error => {
+		if ( error ) {
+			log( error );
+			return;
+		}
+	} );
+} );
+
+gulp.task( 'default', gulp.series( 'build' ) );

projects/packages/connection-ui/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "jetpack-connection-manager-ui",
+	"version": "1.0.0",
+	"description": "Jetpack Connection Manager UI",
+	"main": "_inc/admin.jsx",
+	"repository": "https://github.com/Automattic/jetpack-connection-ui",
+	"author": "Automattic",
+	"license": "GPL-2.0-or-later",
+	"scripts": {
+		"build": "yarn install-if-deps-outdated && yarn clean && yarn build-client",
+		"build-client": "gulp",
+		"clean": "rm -rf build/",
+		"install-if-deps-outdated": "yarn check 2> /dev/null || yarn install --check-files --production=false --frozen-lockfile",
+		"watch": "yarn build && yarn gulp watch"
+	},
+	"dependencies": {
+		"@automattic/calypso-build": "6.5.0",
+		"@babel/core": "7.12.10",
+		"@babel/helper-module-imports": "7.12.5",
+		"@babel/preset-env": "7.12.11",
+		"@babel/register": "7.12.10",
+		"@wordpress/data": "4.26.1",
+		"fancy-log": "1.3.3",
+		"gulp": "4.0.2",
+		"react": "16.14.0",
+		"react-dom": "16.14.0",
+		"static-site-generator-webpack-plugin": "3.4.2",
+		"webpack": "4.45.0"
+	},
+	"devDependencies": {
+		"@wordpress/dependency-extraction-webpack-plugin": "2.9.0",
+		"enzyme": "^3.11.0",
+		"jest": "26.6.3"
+	},
+	"engines": {
+		"node": "^12.19.1",
+		"yarn": "^1.22.10"
+	}
+}

projects/packages/connection-ui/src/class-admin.php

@@ -0,0 +1,73 @@
+<?php
+/**
+ * The Connection UI Admin Area.
+ *
+ * @package automattic/jetpack-connection-ui
+ */
+
+namespace Automattic\Jetpack\ConnectionUI;
+
+/**
+ * The Connection UI Admin Area
+ */
+class Admin {
+
+	/**
+	 * Construction.
+	 */
+	public function __construct() {
+		add_action( 'admin_menu', array( $this, 'register_submenu_page' ), 1000 );
+		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
+	}
+
+	/**
+	 * Initialize the UI.
+	 */
+	public static function init() {
+		add_action(
+			'plugins_loaded',
+			function () {
+				new static();
+			}
+		);
+	}
+
+	/**
+	 * Register's submenu.
+	 */
+	public function register_submenu_page() {
+		add_submenu_page(
+			'tools.php',
+			'Connection Manager',
+			'Connection Manager',
+			'manage_options',
+			'wpcom-connection-manager',
+			array( $this, 'render_ui' ),
+			4
+		);
+	}
+
+	/**
+	 * Enqueue scripts!
+	 *
+	 * @param string $hook Page hook.
+	 */
+	public function enqueue_scripts( $hook ) {
+		if ( strpos( $hook, 'tools_page_wpcom-connection-manager' ) === 0 ) {
+			$build_assets = require_once __DIR__ . '/../build/index.asset.php';
+			wp_enqueue_script( 'jetpack_connection_ui_script', plugin_dir_url( __DIR__ ) . 'build/index.js', $build_assets['dependencies'], $build_assets['version'], true );
+
+			wp_set_script_translations( 'react-jetpack_connection_ui_script', 'jetpack' );
+		}
+	}
+
+	/**
+	 * Render UI.
+	 */
+	public function render_ui() {
+		?>
+		<div id="jetpack-connection-ui-container"></div>
+		<?php
+	}
+
+}

projects/packages/connection-ui/webpack.config.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' );
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+const path = require( 'path' );
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+const baseConfig = getBaseWebpackConfig(
+	{ WP: false },
+	{
+		entry: {}, // We'll override later
+		'output-filename': '[name].js',
+		'output-path': path.join( __dirname, './build' ),
+	}
+);
+
+module.exports = [
+	{
+		...baseConfig,
+		resolve: {
+			...baseConfig.resolve,
+			modules: [ 'node_modules' ],
+		},
+		devtool: isDevelopment ? 'source-map' : false,
+		entry: { index: path.join( __dirname, './_inc/admin.jsx' ) },
+		plugins: [
+			...baseConfig.plugins,
+			new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
+		],
+	},
+];