Add a button to the "Activity Bar Utilities"

[josephfusco]

Acceptance Criteria

• registerActivityBarUtility() exists and is callable by 3rd party plugins
• Function handles edge cases & invalid input

Technical Details

const { registerActivityBarUtility } = WPGRAPHQL_IDE;

registerActivityBarUtility( 'my-button', {
  title: 'My Button',
  label: 'My Button does x, y and z',
  icon: () => {}, // name of icon from supported icon library or custom Icon component
  onClick: () => {} // event callback for the button click
} );

If the GraphiQL schema refresh button was built as a plugin, it might look like this:

import { useSelect } from '@wordpress/data';

const { registerActivityBarUtility } = WPGRAPHQL_IDE;

registerActivityBarUtility( 'refresh-schema', {
  title: 'Refresh GraphQL Schema',
  label: 'Refresh the schema from the WPGraphQL endpoint and load it into the IDE',
  icon: () => <RefreshIcon />,
  onClick: () => {
    // access redux store and execute an action (pseudo code)
    useSelect( ( select ) => {
      return select( 'whatever-store-maintains-the-schema' ).fetchSchemaOrWhatever();
    });
  }
});

The list of utilities should be maintained in the Redux store, so registering a utility should modify the list of utilities in the Redux store. Similar when you call registerBlockType in Gutenberg.

Reference

• feat: phase-2 p.o.c: break the app into packages #81