Add Delete btn

src/experiments/data/action-types.js

@@ -2,6 +2,7 @@ const TYPES = {
 	TOGGLE_EXPERIMENT: 'TOGGLE_EXPERIMENT',
 	SET_EXPERIMENTS: 'SET_EXPERIMENTS',
 	ADD_EXPERIMENT: 'ADD_EXPERIMENT',
+	DELETE_EXPERIMENT: 'DELETE_EXPERIMENT',
 };
 
 export default TYPES;

src/experiments/data/actions.js

@@ -84,3 +84,22 @@ export function* addExperiment( experimentName, variation ) {
 		variation,
 	};
 }
+
+export function* deleteExperiment( experimentName ) {
+	window.localStorage.removeItem( EXPERIMENT_NAME_PREFIX + experimentName );
+
+	const optionNames = [
+		TRANSIENT_NAME_PREFIX + experimentName,
+		TRANSIENT_TIMEOUT_NAME_PREFIX + experimentName,
+	];
+
+	yield apiFetch( {
+		method: 'DELETE',
+		path: '/wc-admin-test-helper/options/' + optionNames.join( ',' ),
+	} );
+
+	return {
+		type: TYPES.DELETE_EXPERIMENT,
+		experimentName,
+	};
+}

src/experiments/data/reducer.js

@@ -9,6 +9,13 @@ const DEFAULT_STATE = {
 
 const reducer = ( state = DEFAULT_STATE, action ) => {
 	switch ( action.type ) {
+		case TYPES.DELETE_EXPERIMENT:
+			return {
+				...state,
+				experiments: state.experiments.filter( ( experiment ) => {
+					return experiment.name !== action.experimentName;
+				} ),
+			};
 		case TYPES.ADD_EXPERIMENT:
 			const existingExperimentIndex = state.experiments.findIndex(
 				( element ) => {

src/experiments/index.js

@@ -15,6 +15,7 @@ import NewExperimentForm from './NewExperimentForm';
 function Experiments( {
 	experiments,
 	toggleExperiment,
+	deleteExperiment,
 	isTrackingEnabled,
 	isResolving,
 } ) {
@@ -51,7 +52,7 @@ function Experiments( {
 					<tr>
 						<th>Experiment</th>
 						<th>Variation</th>
-						<th>Toggle</th>
+						<th>Actions</th>
 					</tr>
 				</thead>
 				<tbody>
@@ -60,7 +61,7 @@ function Experiments( {
 							<tr key={ index }>
 								<td className="experiment-name">{ name }</td>
 								<td align="center">{ variation }</td>
-								<td align="center">
+								<td className="actions" align="center">
 									<Button
 										onClick={ () => {
 											toggleExperiment( name, variation );
@@ -69,6 +70,14 @@ function Experiments( {
 									>
 										Toggle
 									</Button>
+									<Button
+										onClick={ () => {
+											deleteExperiment( name );
+										} }
+										className="btn btn-danger"
+									>
+										Delete
+									</Button>
 								</td>
 							</tr>
 						);
@@ -91,10 +100,11 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { toggleExperiment } = dispatch( STORE_KEY );
+		const { toggleExperiment, deleteExperiment } = dispatch( STORE_KEY );
 
 		return {
 			toggleExperiment,
+			deleteExperiment,
 		};
 	} )
 )( Experiments );

src/index.scss

@@ -93,6 +93,11 @@
 }
 
 #wc-admin-test-helper-experiments {
+	.actions {
+		button {
+			margin-right: 5px;
+		}
+	}
 	.manual-input {
 		margin-bottom: 20px;
 		float: right;