Add customizable dashboard feature flag, and base page. (https://github.com/woocommerce/woocommerce-admin/pull/2052)

plugins/woocommerce-admin/client/dashboard/customizable.js

@@ -0,0 +1,31 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component, Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import DashboardCharts from './dashboard-charts';
+import Leaderboards from './leaderboards';
+import { ReportFilters, H } from '@woocommerce/components';
+import StorePerformance from './store-performance';
+
+// @todo Replace dashboard-charts, leaderboards, and store-performance sections as neccessary with customizable equivalents.
+export default class CustomizableDashboard extends Component {
+	render() {
+		const { query, path } = this.props;
+		return (
+			<Fragment>
+				<H>{ __( 'Customizable Dashboard', 'woocommerce-admin' ) }</H>
+				<ReportFilters query={ query } path={ path } />
+				<StorePerformance query={ query } />
+				<DashboardCharts query={ query } path={ path } />
+				<Leaderboards query={ query } />
+			</Fragment>
+		);
+	}
+}

plugins/woocommerce-admin/client/dashboard/index.js

@@ -9,6 +9,7 @@ import { Component, Fragment } from '@wordpress/element';
  * Internal dependencies
  */
 import './style.scss';
+import CustomizableDashboard from './customizable';
 import DashboardCharts from './dashboard-charts';
 import Header from 'header';
 import Leaderboards from './leaderboards';
@@ -17,23 +18,36 @@ import StorePerformance from './store-performance';
 import TaskList from './task-list';
 
 export default class Dashboard extends Component {
-	render() {
-		const { query, path } = this.props;
+	renderDashboardOutput() {
 		// @todo This should be replaced by a check of tasks from the REST API response from #1897.
 		const requiredTasksComplete = true;
+		if ( window.wcAdminFeatures.onboarding && ! requiredTasksComplete ) {
+			return <TaskList />;
+		}
+
+		const { query, path } = this.props;
+
+		// @todo When the customizable dashboard is ready to be launched, we can pull `CustomizableDashboard`'s render
+		// method into `index.js`, and replace both this feature check, and the existing dashboard below.
+		if ( window.wcAdminFeatures[ 'dashboard/customizable' ] ) {
+			return <CustomizableDashboard query={ query } path={ path } />;
+		}
+
+		return (
+			<Fragment>
+				<ReportFilters query={ query } path={ path } />
+				<StorePerformance query={ query } />
+				<DashboardCharts query={ query } path={ path } />
+				<Leaderboards query={ query } />
+			</Fragment>
+		);
+	}
+
+	render() {
 		return (
 			<Fragment>
 				<Header sections={ [ __( 'Dashboard', 'woocommerce-admin' ) ] } />
-				{ window.wcAdminFeatures.onboarding && ! requiredTasksComplete ? (
-					<TaskList />
-				) : (
-					<Fragment>
-						<ReportFilters query={ query } path={ path } />
-						<StorePerformance query={ query } />
-						<DashboardCharts query={ query } path={ path } />
-						<Leaderboards query={ query } />
-					</Fragment>
-				) }
+				{ this.renderDashboardOutput() }
 			</Fragment>
 		);
 	}

plugins/woocommerce-admin/config/core.json

@@ -3,6 +3,7 @@
 		"activity-panels": false,
 		"analytics": false,
 		"dashboard": false,
+		"dashboard/customizable": false,
 		"devdocs": false,
 		"onboarding": false,
 		"store-alerts": false

plugins/woocommerce-admin/config/development.json

@@ -3,6 +3,7 @@
 		"activity-panels": true,
 		"analytics": true,
 		"dashboard": true,
+		"dashboard/customizable": true,
 		"devdocs": true,
 		"onboarding": true,
 		"store-alerts": true

plugins/woocommerce-admin/config/plugin.json

@@ -3,6 +3,7 @@
 		"activity-panels": true,
 		"analytics": true,
 		"dashboard": true,
+		"dashboard/customizable": false,
 		"devdocs": false,
 		"onboarding": false,
 		"store-alerts": true