@automattic/jetpack-shared-extension-utils 0.12.5 → 0.13.0

package/CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.13.0] - 2023-11-13
+### Added
+- Added a Redux store for Jetpack modules data. [#33397]
+
+## [0.12.6] - 2023-11-08
+### Fixed
+- Mobile: Fix a regression preventing correct block registration on mobile. [#33890]
+
 ## [0.12.5] - 2023-11-03
 ### Changed
 - Update dependencies.
@@ -276,6 +284,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[0.13.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.12.6...0.13.0
+[0.12.6]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.12.5...0.12.6
 [0.12.5]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.12.4...0.12.5
 [0.12.4]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.12.3...0.12.4
 [0.12.3]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.12.2...0.12.3

package/README.md

@@ -8,6 +8,64 @@ of the Jetpack plugin, so that plugins can share it. To begin with, we moving
 the code used by the Publicize editor extension, but the goal is to bring over
 all the shared code.
 
+## Fetching modules data from the store
+The package relies on [controls](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#controls)
+and [resolvers](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#resolvers)
+to pull modules data from the API, and put it into the package's Redux store.
+
+### Basic Usage
+
+In order to have all modules related data synced within different packages, let's use this Redux store as a source of truth, for both, getting and updating the data.
+
+
+Use [`withSelect`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#withselect), `withDispatch` higher-order component to pull the data or [`useSelect`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#useselect) hook to pull the data from the store to pull directly in component. Example:
+
+
+```jsx
+// Imports.
+import { withSelect, withDispatch } from '@wordpress/data';
+import { JETPACK_MODULES_STORE_ID } from '@automattic/jetpack-shared-extension-utils';
+
+const SampleComponent = props => {
+	const { isModuleActive, isLoadingModules, isChangingStatus, updateJetpackModuleStatus } = props;
+
+    if ( isModuleActive ) {
+        return <div>Module is active</div>;
+    }
+
+    if ( isLoadingModules ) {
+        return <div>Loading modules...</div>;
+    }
+    
+    if ( !isModuleActive ) {
+        return <button onClick={ () => updateJetpackModuleStatus( 'contact-form', true ) }>
+            Activate module
+        </button>;
+    }
+
+	return <div>Active contact form module</div>;
+}
+
+// We wrap `SampleComponent` into the composition of `withSelect` and `withDispatch` HOCs,
+// which will pull the data from the store and pass as a parameter into the component.
+// Jetpack modules will be pulled after first selection `isModuleActive`.
+export default compose( [
+	withSelect( ( select, props ) => {
+		const { isModuleActive, areModulesLoading, areModulesUpdating } = select( 'jetpack-modules' );
+		return {
+			isModuleActive: isModuleActive( 'contact-form' ),
+			isLoadingModules: areModulesLoading(),
+			isChangingStatus: areModulesUpdating(),
+		};
+	} ),
+	withDispatch( dispatch => {
+		const { updateJetpackModuleStatus } = dispatch( 'jetpack-modules' );
+		return { updateJetpackModuleStatus };
+	} ),
+] )( ( SampleComponent ) );
+```
+
+
 ## How to install shared-extension-utils
 
 ### Installation From Git Repo

package/index.js

@@ -18,3 +18,5 @@ export { default as useAnalytics } from './src/hooks/use-analytics';
 export { default as useModuleStatus } from './src/hooks/use-module-status';
 export { default as JetpackEditorPanelLogo } from './src/components/jetpack-editor-panel-logo';
 export { getBlockIconComponent, getBlockIconProp } from './src/get-block-icon-from-metadata';
+
+export * from './src/modules-state';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-shared-extension-utils",
-	"version": "0.12.5",
+	"version": "0.13.0",
 	"description": "Utility functions used by the block editor extensions",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/shared-extension-utils/#readme",
 	"bugs": {
@@ -18,10 +18,11 @@
 	},
 	"dependencies": {
 		"@automattic/jetpack-analytics": "^0.1.27",
-		"@automattic/jetpack-components": "^0.44.4",
-		"@automattic/jetpack-connection": "^0.30.5",
+		"@automattic/jetpack-components": "^0.45.0",
+		"@automattic/jetpack-connection": "^0.30.6",
 		"@wordpress/api-fetch": "6.41.0",
 		"@wordpress/compose": "6.21.0",
+		"@wordpress/data": "9.13.0",
 		"@wordpress/element": "5.21.0",
 		"@wordpress/i18n": "4.44.0",
 		"@wordpress/plugins": "6.12.0",

package/src/get-block-icon-from-metadata.native.js

@@ -0,0 +1,37 @@
+/* eslint-disable jsdoc/no-undefined-types */
+import { SvgXml } from '@wordpress/primitives';
+import getIconColor from './get-icon-color';
+
+/**
+ * Generate an icon as a React component from the SVG markup defined in a block.json metadata file.
+ * This prevents us from duplicating the markup in various places.
+ *
+ * Note: using an `img` tag and passing the SVG markup as a data URI doesn't allow us to
+ * dynamically set the icon color later on.
+ *
+ * @param {object} metadata - Block.json content
+ * @returns {JSX.Element|string} Icon component
+ */
+export function getBlockIconComponent( metadata ) {
+	// If the SVG has been passed as a string, use SvgXml to correctly parse it.
+	if ( typeof metadata.icon === 'string' && metadata.icon.startsWith( '<svg' ) ) {
+		return <SvgXml xml={ metadata.icon } />;
+	}
+	return metadata.icon || '';
+}
+
+/**
+ * A block icon needs to be redefined on the front end as a React component, since a string - even
+ * SVG markup - is interpreted as a dashicon. This function returns the object that must be passed
+ * to the `icon` attribute when registering the block in the front end. It also sets the color
+ * of the icon.
+ *
+ * @param {object} metadata - Block.json content
+ * @returns {object} Icon property for client registration
+ */
+export function getBlockIconProp( metadata ) {
+	return {
+		src: getBlockIconComponent( metadata ),
+		foreground: getIconColor(),
+	};
+}

package/src/modules-state/actions.js

@@ -0,0 +1,96 @@
+import { select } from '@wordpress/data';
+import { isSimpleSite } from '../site-type-utils';
+import {
+	fetchJetpackModules,
+	updateJetpackModuleStatus as updateJetpackModuleStatusControl,
+} from './controls';
+import { JETPACK_MODULES_STORE_ID } from '.';
+
+export const SET_JETPACK_MODULES = 'SET_JETPACK_MODULES';
+
+/**
+ * Yield actions to update module status
+ *
+ * @param {object} settings - Jetpack module settings.
+ * @param {string} settings.name - Jetpack module name.
+ * @param {boolean} settings.active - If the module is active or not.
+ * @yields {object} - an action object.
+ * @returns {object} - an action object.
+ */
+export function* updateJetpackModuleStatus( settings ) {
+	try {
+		const originalData = select( JETPACK_MODULES_STORE_ID ).getJetpackModules();
+		yield setIsUpdating( true );
+		if ( originalData.data?.[ settings.name ]?.activated !== settings.active ) {
+			yield setJetpackModules( originalData );
+		}
+		yield updateJetpackModuleStatusControl( settings );
+		const data = yield fetchJetpackModules();
+		yield setJetpackModules( { data } );
+		return true;
+	} catch ( e ) {
+		const oldSettings = select( JETPACK_MODULES_STORE_ID ).getJetpackModules();
+		yield setJetpackModules( oldSettings );
+		return false;
+	} finally {
+		yield setIsUpdating( false );
+	}
+}
+
+/**
+ * Yield actions to update module status
+ * @yields {object} - an action object.
+ * @returns {boolean} - if operation is successful or not.
+ */
+export function* fetchModules() {
+	// We don't fetch modules for Simple Site and aknowledge that all modules are active
+	if ( isSimpleSite() ) {
+		return true;
+	}
+	try {
+		yield setIsLoading( true );
+		const data = yield fetchJetpackModules();
+		yield setJetpackModules( { data } );
+		return true;
+	} catch ( e ) {
+		const oldSettings = select( JETPACK_MODULES_STORE_ID ).getJetpackModules();
+		yield setJetpackModules( oldSettings );
+		return false;
+	} finally {
+		yield setIsLoading( false );
+	}
+}
+
+/**
+ * Set modules as loading action
+ *
+ * @param {boolean} isLoading - If the modules are loading or not.
+ * @returns {object} - an action object.
+ */
+function setIsLoading( isLoading ) {
+	return setJetpackModules( { isLoading } );
+}
+
+/**
+ * Set modules as updating action
+ *
+ * @param {boolean} isUpdating - If the modules are updating or not.
+ * @returns {object} - an action object.
+ */
+function setIsUpdating( isUpdating ) {
+	return setJetpackModules( { isUpdating } );
+}
+
+/**
+ * Set Jetpack module action
+ *
+ * @param {object} options - Jetpack settings.
+ * @param {object} options.modules - Jetpack modules.
+ * @param {boolean} options.isLoading - If the modules are loading or not.
+ * @returns {object} - an action object.
+ */
+export function setJetpackModules( options ) {
+	return { type: SET_JETPACK_MODULES, options };
+}
+
+export default { updateJetpackModuleStatus, setJetpackModules, fetchModules };

package/src/modules-state/controls.js

@@ -0,0 +1,48 @@
+import apiFetch from '@wordpress/api-fetch';
+
+export const FETCH_JETPACK_MODULES = 'FETCH_JETPACK_MODULES';
+export const UPDATE_JETPACK_MODULE_STATUS = 'UPDATE_JETPACK_MODULE_STATUS';
+
+/**
+ * fetchJetpackModules action
+ *
+ * @returns {object} - an action object.
+ */
+export const fetchJetpackModules = () => {
+	return {
+		type: FETCH_JETPACK_MODULES,
+	};
+};
+
+/**
+ * Updating single module status action
+ *
+ * @param settings - Jetpack module settings.
+ * @param {string} settings.name - Jetpack module name.
+ * @param {boolean} settings.active - If the module is active or not.
+ */
+
+export const updateJetpackModuleStatus = settings => {
+	return {
+		type: UPDATE_JETPACK_MODULE_STATUS,
+		settings,
+	};
+};
+
+export default {
+	[ FETCH_JETPACK_MODULES ]: function () {
+		return apiFetch( {
+			path: `/jetpack/v4/module/all`,
+			method: 'GET',
+		} );
+	},
+	[ UPDATE_JETPACK_MODULE_STATUS ]: function ( { settings } ) {
+		return apiFetch( {
+			path: `/jetpack/v4/module/${ settings.name }/active`,
+			method: 'POST',
+			data: {
+				active: settings.active,
+			},
+		} );
+	},
+};

package/src/modules-state/index.js

@@ -0,0 +1,17 @@
+import { createReduxStore, register } from '@wordpress/data';
+import actions from './actions';
+import controls from './controls';
+import reducer from './reducer';
+import resolvers from './resolvers';
+import selectors from './selectors';
+
+export const JETPACK_MODULES_STORE_ID = 'jetpack-modules';
+
+const store = createReduxStore( JETPACK_MODULES_STORE_ID, {
+	reducer,
+	actions,
+	controls,
+	resolvers,
+	selectors,
+} );
+register( store );

package/src/modules-state/reducer.js

@@ -0,0 +1,18 @@
+const defaultState = {
+	isLoading: false,
+	isUpdating: false,
+	data: {},
+};
+
+const setModulesData = ( state = defaultState, action ) => {
+	switch ( action.type ) {
+		case 'SET_JETPACK_MODULES':
+			return {
+				...state,
+				...action.options,
+			};
+	}
+	return state;
+};
+
+export default setModulesData;

package/src/modules-state/resolvers.js

@@ -0,0 +1,30 @@
+import { setJetpackModules, fetchModules } from './actions';
+import { fetchJetpackModules } from './controls';
+
+/**
+ * Yield actions to get the Jetpack modules.
+ *
+ * @yields {object} - an action object.
+ * @returns {object} - an action object.
+ */
+export function* getJetpackModules() {
+	try {
+		const data = yield fetchJetpackModules();
+		if ( data ) {
+			return setJetpackModules( { data } );
+		}
+	} catch ( e ) {
+		console.error( e ); // eslint-disable-line no-console
+	}
+}
+
+/**
+ * When requesting data on particular module
+ * we want to make sure to have the latest state
+ * @returns {boolean} - if action was completed successfully.
+ */
+export function isModuleActive() {
+	return fetchModules();
+}
+
+export default { getJetpackModules, isModuleActive };

package/src/modules-state/selectors.js

@@ -0,0 +1,13 @@
+import { isSimpleSite } from '../site-type-utils';
+
+const jetpackModulesSelectors = {
+	getJetpackModules: state => state.data,
+	// We consider simple sites to have all modules active
+	// TODO: we would remove this when wrapping logic with hooks
+	isModuleActive: ( state, moduleName ) =>
+		isSimpleSite() || ( state?.data?.[ moduleName ]?.activated ?? false ),
+	areModulesLoading: state => state.isLoading ?? false,
+	areModulesUpdating: state => state.isUpdating ?? false,
+};
+
+export default jetpackModulesSelectors;