Add admin notes helper, stuck on using @woocommerce/data

package.json

@@ -20,12 +20,15 @@
 		"test:unit": "wp-scripts test-unit-js"
 	},
 	"devDependencies": {
-		"@wordpress/scripts": "^12.2.1",
+		"@woocommerce/dependency-extraction-webpack-plugin": "1.4.0",
 		"@woocommerce/eslint-plugin": "1.1.0",
-		"@woocommerce/dependency-extraction-webpack-plugin": "1.4.0"
+		"@wordpress/scripts": "^13.0.3"
 	},
 	"dependencies": {
+		"@woocommerce/data": "^1.1.1",
+		"@wordpress/api-fetch": "^3.21.5",
 		"@wordpress/components": "^12.0.7",
+		"@wordpress/data": "^4.26.7",
 		"@wordpress/element": "^2.19.1"
 	}
 }

plugin.php

@@ -10,3 +10,5 @@ add_action( 'admin_menu', function() {
 		}
 	);
 } );
+
+// add API.. want to be able to do this via a filter as well...

src/App/app.js

@@ -9,7 +9,7 @@ import { TabPanel } from '@wordpress/components';
 // TODO replace this with the actual controls
 // import { Options } from '../Options';
 const Options = () => <h2>Options</h2>;
-const AdminNotes = () => <h2>Admin notes</h2>;
+import { AdminNotes } from '../admin-notes';
 
 const tabs = [
     {
@@ -34,7 +34,7 @@ export function App() {
                 tabs={ tabs }
                 initialTabName={ tabs[0].name }
             >
-                { ( tab ) => <p>{ tab.content }</p> }
+                { ( tab ) => tab.content }
             </TabPanel>
         </div>
     );

src/admin-notes/admin-notes.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies.
+ */
+import { DeleteAllNotes } from './delete-all-notes';
+
+export const AdminNotes = () => {
+    return (
+        <>
+            <h2>Admin notes</h2>
+            <p>This section contains tools for managing admin notes.</p>
+            <DeleteAllNotes/>
+        </>
+    );
+};

src/admin-notes/delete-all-notes.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies.
+ */
+import { useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import apiFetch from '@wordpress/api-fetch';
+import { WC_ADMIN_NAMESPACE } from '@woocommerce/data';
+import { SETTINGS_STORE_NAME } from '@woocommerce/data';
+
+export const DeleteAllNotes = () => {
+    const [ isDeleting, setIsDeleting ] = useState( false );
+    const [ deleteStatus, setDeleteStatus ] = useState( false );
+    const [ errorMessage, setErrorMessage ] = useState( false );
+    
+    async function triggerDeleteAllNotes() {
+        setIsDeleting( true );
+
+        try {
+            const response = await apiFetch( {
+                path: `${ WC_ADMIN_NAMESPACE }/nothing-to-see-here`,
+                method: 'POST',
+            } );
+
+            console.log({x: response});
+            setErrorMessage( false );
+            //setDeleteStatus(...);
+        } catch ( ex ) {
+            setErrorMessage( ex.message );
+        }
+
+        setIsDeleting( false );
+    }
+
+    return (
+        <>
+            <p><strong>Delete all admin notes</strong></p>
+            <p>
+                This will delete all notes from the <code>wp_wc_admin_notes</code>
+                table, and actions from the <code>wp_wc_admin_note_actions</code>
+                table.
+                <br/>
+                <Button
+                    onClick={ triggerDeleteAllNotes }
+                    disabled={ isDeleting }
+                    isPrimary
+                >
+                    Delete all notes
+                </Button>
+                <br/>
+                <span className="woocommerce-admin-test-helper__action-status">
+                    { isDeleting && 'Deleting, please wait.' }
+                    { deleteStatus && (
+                        <>
+                            Deleted{ ' ' }
+                            <strong>{ deleteStatus.deleted_note_count }</strong>{ ' ' }
+                            admin notes and{ ' ' }
+                            <strong>{ deleteStatus.deleted_action_count }</strong>{ ' ' }
+                            actions.
+                        </>
+                    ) }
+                    { errorMessage && (
+                        <>
+                            <strong>Error: </strong>
+                            { errorMessage }
+                        </>
+                    ) }
+                </span>
+            </p>
+        </>
+    );
+};

src/admin-notes/index.js

@@ -0,0 +1 @@
+export { AdminNotes } from './admin-notes.js';

src/index.js

@@ -6,7 +6,7 @@ import { render } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { App } from './App';
+import { App } from './app';
 import './index.scss';
 
 const appRoot = document.getElementById( 'woocommerce-admin-test-helper-app-root' );

src/index.scss

@@ -4,3 +4,9 @@
         box-shadow: inset 0 1.5px var(--wp-admin-theme-color);
     }
 }
+
+.woocommerce-admin-test-helper__action-status {
+    color: #007cba;
+    color: var(--wp-admin-theme-color);
+    font-family: monospace;
+}

woocommerce-admin-test-helper.php

@@ -10,6 +10,8 @@
  * @package WooCommerce\Admin\TestHelper
  */
 
+define( 'WC_ADMIN_TEST_HELPER_PLUGIN_FILE', 'woocommerce-admin-test-helper/woocommerce-admin-test-helper.php' );
+
 /**
  * Register the JS.
  */
@@ -28,18 +30,26 @@ function add_extension_register_script() {
 		$script_asset['version'],
 		true
 	);
+	wp_enqueue_script( 'woocommerce-admin-test-helper' );
+
+	$css_file_version = filemtime( dirname( __FILE__ ) . '/build/index.css' );
+
+	wp_register_style(
+		'wp-components',
+		plugins_url( 'dist/components/style.css', WC_ADMIN_TEST_HELPER_PLUGIN_FILE ),
+		array(),
+		$css_file_version
+	);
 
 	wp_register_style(
 		'woocommerce-admin-test-helper',
 		plugins_url( '/build/index.css', __FILE__ ),
 		// Add any dependencies styles may have, such as wp-components.
 		array(
-			'wp-components',
+			'wp-components'
 		),
-		filemtime( dirname( __FILE__ ) . '/build/index.css' )
+		$css_file_version
 	);
-
-	wp_enqueue_script( 'woocommerce-admin-test-helper' );
 	wp_enqueue_style( 'woocommerce-admin-test-helper' );
 }