Add a new form to add a new experiment manually

src/experiments/NewExperimentForm.js

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { withDispatch, withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { Button } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_KEY } from './data/constants';
+import './data';
+
+function NewExperimentForm( {} ) {
+	const [ experimentName, setExperimentName ] = useState( null );
+	const [ source, setSource ] = useState( 'frontend' );
+	const [ variation, setVariation ] = useState( 'treatment' );
+
+	const getInputValue = ( event ) => {
+		setExperimentName( event.target.value );
+	};
+
+	const getSourceInput = ( event ) => {
+		setSource( event.target.value );
+	};
+
+	const getVariationInput = ( event ) => {
+		setVariation( event.target.value );
+	};
+
+	const AddNewExperiment = () => {
+		console.log( experimentName, source, variation );
+	};
+
+	return (
+		<div className="manual-input">
+			<div className="description">
+				Don&apos;t see an experiment you want to test? Add it manually.
+			</div>
+			<input type="text" onChange={ getInputValue } />
+			<select value={ source } onChange={ getSourceInput }>
+				<option value="frontend">frontend</option>
+				<option value="backend">backend</option>
+			</select>
+			<select value={ variation } onChange={ getVariationInput }>
+				<option value="treatment">treatment</option>
+				<option value="control">control</option>
+			</select>
+
+			<Button isPrimary onClick={ AddNewExperiment }>
+				Add
+			</Button>
+		</div>
+	);
+}
+
+export default compose(
+	withSelect( ( select ) => {} ),
+	withDispatch( ( dispatch ) => {} )
+)( NewExperimentForm );

src/experiments/index.js

@@ -10,6 +10,7 @@ import { OPTIONS_STORE_NAME } from '@woocommerce/data';
  */
 import { STORE_KEY } from './data/constants';
 import './data';
+import NewExperimentForm from './NewExperimentForm';
 
 function Experiments( {
 	experiments,
@@ -43,6 +44,7 @@ function Experiments( {
 					<b>Allow usage of WooCommerce to be tracked</b>.
 				</p>
 			) }
+			<NewExperimentForm />
 			<table className="experiments wp-list-table striped table-view-list widefat">
 				<thead>
 					<tr>

src/index.scss

@@ -92,6 +92,32 @@
 	}
 }
 
+#wc-admin-test-helper-experiments {
+	.manual-input {
+		margin-bottom: 20px;
+		float: right;
+		.description {
+			text-align: right;
+			margin-bottom: 5px;
+		}
+		button {
+			height: 34px;
+			position: relative;
+			top: -1px;
+		}
+		input {
+			height: 34px;
+			width: 250px;
+		}
+		select {
+			height: 34px;
+			position: relative;
+			top: -2px;
+			margin-right: 2px;
+		}
+	}
+}
+
 #wc-admin-test-helper-rest-api-filters {
 	.btn-new {
 		float: right;