Refactor Tools to add more commands

src/index.scss

@@ -40,4 +40,20 @@
 
 .wca-test-helper-edit-btn-save {
     float: right;
+}
+
+#wc-admin-test-helper-tools {
+    table.tools {
+        thead th {
+            text-align: center;
+        }
+        tbody td {
+            &.command {
+                white-space: nowrap;
+            }
+        }
+    }
+    .components-notice {
+        margin: 0px 0px 10px 0px;
+    }    
 }

src/tools/commands.js

@@ -0,0 +1,10 @@
+export default [
+	{
+		command: 'Trigger WCA Install',
+		description: `This will trigger a WooCommerce Admin install, which usually
+    happens when a new version (or new install) of WooCommerce
+    Admin is installed. Triggering the install manually can
+    run tasks such as removing obsolete admin notes.`,
+		action: 'triggerWcaInstall',
+	},
+];

src/tools/data/action-types.js

@@ -0,0 +1,9 @@
+const TYPES = {
+	ADD_CURRENTLY_RUNNING: 'ADD_CURRENTLY_RUNNING',
+	REMOVE_CURRENTLY_RUNNING: 'REMOVE_CURRENTLY_RUNNING',
+	ADD_MESSAGE: 'ADD_MESSAGE',
+	UPDATE_MESSAGE: 'UPDATE_MESSAGE',
+	REMOVE_MESSAGE: 'REMOVE_MESSAGE',
+};
+
+export default TYPES;

src/tools/data/actions.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { apiFetch } from '@wordpress/data-controls';
+
+/**
+ * Internal dependencies
+ */
+import TYPES from './action-types';
+import { API_NAMESPACE } from './constants';
+
+export function addCurrentlyRunning( command ) {
+	return {
+		type: TYPES.ADD_CURRENTLY_RUNNING,
+		command,
+	};
+}
+
+export function removeCurrentlyRunning( command ) {
+	return {
+		type: TYPES.REMOVE_CURRENTLY_RUNNING,
+		command,
+	};
+}
+
+export function addMessage( source, message ) {
+	return {
+		type: TYPES.ADD_MESSAGE,
+		source,
+		message,
+	};
+}
+
+export function updateMssage( source, message, status ) {
+	return {
+		type: TYPES.ADD_MESSAGE,
+		source,
+		message,
+		status,
+	};
+}
+
+export function removeMessage( source ) {
+	return {
+		type: TYPES.REMOVE_MESSAGE,
+		source,
+	};
+}
+
+export function* triggerWcaInstall() {
+	const id = 'Trigger WCA Install';
+
+	try {
+		yield addCurrentlyRunning( id );
+		yield addMessage( id, 'Installing...' );
+
+		yield apiFetch( {
+			path: API_NAMESPACE + '/tools/trigger-wca-install/v1',
+			method: 'POST',
+		} );
+
+		yield removeCurrentlyRunning( id );
+		yield updateMssage( id, 'Install Completed' );
+	} catch ( ex ) {
+		yield updateMssage( id, ex.message, 'error' );
+	}
+}

src/tools/data/constants.js

@@ -0,0 +1,2 @@
+export const STORE_KEY = 'wc-admin-helper/tools';
+export const API_NAMESPACE = '/wc-admin-test-helper';

src/tools/data/index.js

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { registerStore } from '@wordpress/data';
+import { controls } from '@wordpress/data-controls';
+
+/**
+ * Internal dependencies
+ */
+import * as actions from './actions';
+import * as selectors from './selectors';
+import reducer from './reducer';
+import { STORE_KEY } from './constants';
+
+export default registerStore( STORE_KEY, {
+	actions,
+	selectors,
+	controls,
+	reducer,
+} );

src/tools/data/reducer.js

@@ -0,0 +1,62 @@
+/**
+ * Internal dependencies
+ */
+import TYPES from './action-types';
+
+const DEFAULT_STATE = {
+	currentlyRunning: {},
+	errorMessages: [],
+	messages: {},
+	status: '',
+};
+
+const reducer = ( state = DEFAULT_STATE, action ) => {
+	switch ( action.type ) {
+		case TYPES.ADD_MESSAGE:
+			if ( ! action.status ) {
+				action.status = 'info';
+			}
+			return {
+				...state,
+				messages: {
+					...state.messages,
+					[ action.source ]: {
+						message: action.message,
+						status: action.status,
+					},
+				},
+			};
+		case TYPES.REMOVE_MESSAGE:
+			const messages = { ...state.messages };
+			delete messages[ action.source ];
+			return {
+				...state,
+				messages,
+			};
+		case TYPES.SET_STATUS:
+			return {
+				...state,
+				status: action.status,
+			};
+		case TYPES.ADD_CURRENTLY_RUNNING:
+			return {
+				...state,
+				currentlyRunning: {
+					...state,
+					[ action.command ]: true,
+				},
+			};
+		case TYPES.REMOVE_CURRENTLY_RUNNING:
+			return {
+				...state,
+				currentlyRunning: {
+					...state,
+					[ action.command ]: false,
+				},
+			};
+		default:
+			return state;
+	}
+};
+
+export default reducer;

src/tools/data/selectors.js

@@ -0,0 +1,11 @@
+export function getCurrentlyRunning( state ) {
+	return state.currentlyRunning;
+}
+
+export function getMessages( state ) {
+	return state.messages;
+}
+
+export function getStatus( state ) {
+	return state.status;
+}

src/tools/index.js

@@ -1 +1 @@
-export { Tools } from './tools';
+export { default as Tools } from './tools';

src/tools/tools.js

@@ -1,14 +1,85 @@
 /**
- * Internal dependencies.
+ * External dependencies
  */
-import { TriggerWooCommerceAdminInstall } from './trigger-woocommerce-admin-install';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { Notice, Button } from '@wordpress/components';
 
-export const Tools = () => {
+/**
+ * Internal dependencies
+ */
+import { default as commands } from './commands';
+import { STORE_KEY } from './data/constants';
+import './data';
+
+function Tools( { actions, currentlyRunningCommands, messages } ) {
+	actions = actions();
 	return (
-		<>
+		<div id="wc-admin-test-helper-tools">
 			<h2>Tools</h2>
 			<p>This section contains miscellaneous tools.</p>
-			<TriggerWooCommerceAdminInstall/>
-		</>
+			{ Object.keys( messages ).map( ( key ) => {
+				return (
+					<Notice
+						status={ messages[ key ].status }
+						key={ key }
+						isDismissible={ false }
+					>
+						{ key }: { messages[ key ].message }
+					</Notice>
+				);
+			} ) }
+			<table className="tools wp-list-table striped table-view-list widefat">
+				<thead>
+					<tr>
+						<th>Command</th>
+						<th>Description</th>
+						<th>Run</th>
+					</tr>
+				</thead>
+				<tbody>
+					{ commands.map( ( command, index ) => {
+						return (
+							<tr key={ index }>
+								<td className="command">{ command.command }</td>
+								<td>{ command.description }</td>
+								<td>
+									<Button
+										onClick={ actions[ command.action ] }
+										disabled={
+											currentlyRunningCommands[
+												command.command
+											]
+										}
+										isPrimary
+									>
+										Run
+									</Button>
+								</td>
+							</tr>
+						);
+					} ) }
+				</tbody>
+			</table>
+		</div>
 	);
-};
+}
+
+export default compose(
+	withSelect( ( select ) => {
+		const { getCurrentlyRunning, getMessages } = select( STORE_KEY );
+		return {
+			currentlyRunningCommands: getCurrentlyRunning(),
+			messages: getMessages(),
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const actions = function () {
+			return dispatch( STORE_KEY );
+		};
+
+		return {
+			actions,
+		};
+	} )
+)( Tools );

src/tools/trigger-woocommerce-admin-install.js

@@ -1,63 +0,0 @@
-/**
- * External dependencies.
- */
-import { useState } from '@wordpress/element';
-import { Button } from '@wordpress/components';
-import apiFetch from '@wordpress/api-fetch';
-
-export const TriggerWooCommerceAdminInstall = () => {
-	const [ isInstalling, setIsInstalling ] = useState( false );
-	const [ hasInstalled, setHasInstalled ] = useState( false );
-	const [ errorMessage, setErrorMessage ] = useState( false );
-
-	async function triggerInstall() {
-		if ( ! confirm( 'Are you sure you want to trigger a WCA install?' ) ) {
-			return;
-		}
-
-		setIsInstalling( true );
-		setHasInstalled( false );
-		setErrorMessage( false );
-
-		try {
-			await apiFetch( {
-				path: '/wc-admin-test-helper/tools/trigger-wca-install/v1',
-				method: 'POST',
-			} );
-			setHasInstalled( true );
-		} catch ( ex ) {
-			setErrorMessage( ex.message );
-		}
-
-		setIsInstalling( false );
-	}
-
-	return (
-		<>
-			<p><strong>Trigger WooCommerce Admin install</strong></p>
-			<p>
-				This will trigger a WooCommerce Admin install, which usually
-				happens when a new version (or new install) of WooCommerce
-				Admin is installed. Triggering the install manually can
-				run tasks such as removing obsolete admin notes.
-				<br/>
-				<Button
-					onClick={ triggerInstall }
-					disabled={ isInstalling }
-					isPrimary
-				>
-					Trigger WCA install
-				</Button>
-				<div className="woocommerce-admin-test-helper__action-status">
-					{ isInstalling && 'Running install, please wait' }
-					{ hasInstalled && 'Install completed' }
-					{ errorMessage && (
-						<>
-							<strong>Error:</strong> { errorMessage }
-						</>
-					) }
-				</div>
-			</p>
-		</>
-	);
-};