diff --git a/src/index.scss b/src/index.scss
index dfba22273c9..d01d3740f1f 100644
--- a/src/index.scss
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/src/tools/commands.js b/src/tools/commands.js
new file mode 100644
index 00000000000..6b443b64590
--- /dev/null
+++ b/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',
+ },
+];
diff --git a/src/tools/data/action-types.js b/src/tools/data/action-types.js
new file mode 100644
index 00000000000..fa8cd96caf5
--- /dev/null
+++ b/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;
diff --git a/src/tools/data/actions.js b/src/tools/data/actions.js
new file mode 100644
index 00000000000..0027520c878
--- /dev/null
+++ b/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' );
+ }
+}
diff --git a/src/tools/data/constants.js b/src/tools/data/constants.js
new file mode 100644
index 00000000000..c7599691985
--- /dev/null
+++ b/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';
diff --git a/src/tools/data/index.js b/src/tools/data/index.js
new file mode 100644
index 00000000000..968fffd7b4c
--- /dev/null
+++ b/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,
+} );
diff --git a/src/tools/data/reducer.js b/src/tools/data/reducer.js
new file mode 100644
index 00000000000..56f9a1a052e
--- /dev/null
+++ b/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;
diff --git a/src/tools/data/reducers.js b/src/tools/data/reducers.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/tools/data/selectors.js b/src/tools/data/selectors.js
new file mode 100644
index 00000000000..3cda1c6747a
--- /dev/null
+++ b/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;
+}
diff --git a/src/tools/index.js b/src/tools/index.js
index ff35c53303c..5bae1759f71 100644
--- a/src/tools/index.js
+++ b/src/tools/index.js
@@ -1 +1 @@
-export { Tools } from './tools';
+export { default as Tools } from './tools';
diff --git a/src/tools/tools.js b/src/tools/tools.js
index ab1cce472f9..e3a6d2da95b 100644
--- a/src/tools/tools.js
+++ b/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 (
- <>
+
);
-};
+}
+
+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 );
diff --git a/src/tools/trigger-woocommerce-admin-install.js b/src/tools/trigger-woocommerce-admin-install.js
deleted file mode 100644
index 3ca7fa86012..00000000000
--- a/src/tools/trigger-woocommerce-admin-install.js
+++ /dev/null
@@ -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 (
- <>
- Trigger WooCommerce Admin install
-
- 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.
-
- Trigger WCA install
-
-
- { isInstalling && 'Running install, please wait' }
- { hasInstalled && 'Install completed' }
- { errorMessage && (
- <>
- Error: { errorMessage }
-
- ) }
-
-
-
- );
-};