Social | Partially revert #41456 to use existing settings endpoints (#…

…41461)

* Revert changes to settings endpoint

* Update the param name in social endpoint

* Pass the API path based on active plugin

* Make the front-end changes to use the dynamic endpoint for settings

* Ensure to return module state from Jetpack endpoint

* Add changelog

* Fix unit tests

projects/js-packages/publicize-components/changelog/update-social-to-use-unified-settings-endpoint

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update the settings endppoint to use existing endpoints

projects/js-packages/publicize-components/src/components/admin-page/header/index.js

@@ -22,7 +22,7 @@ const Header = () => {
 		const store = select( socialStore );
 		return {
 			hasConnections: store.getConnections().length > 0,
-			isModuleEnabled: select( socialStore ).getSocialPluginSettings().publicize_active,
+			isModuleEnabled: select( socialStore ).getSocialModuleSettings().publicize,
 		};
 	} );
 

projects/js-packages/publicize-components/src/components/admin-page/index.tsx

@@ -33,12 +33,12 @@ export const SocialAdminPage = () => {
 
 	const { isModuleEnabled, showPricingPage, isUpdatingJetpackSettings } = useSelect( select => {
 		const store = select( socialStore );
-		const settings = store.getSocialPluginSettings();
+		const settings = store.getSocialModuleSettings();
 
 		return {
-			isModuleEnabled: settings.publicize_active,
+			isModuleEnabled: settings.publicize,
 			showPricingPage: store.getSocialSettings().showPricingPage,
-			isUpdatingJetpackSettings: store.isSavingSocialPluginSettings(),
+			isUpdatingJetpackSettings: store.isSavingSocialModuleSettings(),
 		};
 	}, [] );
 

projects/js-packages/publicize-components/src/components/admin-page/test/index.test.jsx

@@ -13,6 +13,7 @@ describe( 'load the app', () => {
 	beforeEach( () => {
 		window.JetpackScriptData = {
 			social: {
+				api_paths: {},
 				plugin_info: {
 					social: {
 						version,

projects/js-packages/publicize-components/src/components/admin-page/toggles/social-module-toggle/index.tsx

@@ -21,11 +21,11 @@ const SocialModuleToggle: React.FC = () => {
 	const { isModuleEnabled, isUpdating } = useSelect( select => {
 		const store = select( socialStore );
 
-		const settings = store.getSocialPluginSettings();
+		const settings = store.getSocialModuleSettings();
 
 		return {
-			isModuleEnabled: settings.publicize_active,
-			isUpdating: store.isSavingSocialPluginSettings(),
+			isModuleEnabled: settings.publicize,
+			isUpdating: store.isSavingSocialModuleSettings(),
 		};
 	}, [] );
 
@@ -36,19 +36,19 @@ const SocialModuleToggle: React.FC = () => {
 
 	const useAdminUiV1 = feature_flags.useAdminUiV1;
 
-	const { updateSocialPluginSettings } = useDispatch( socialStore );
+	const { updateSocialModuleSettings } = useDispatch( socialStore );
 
 	const toggleModule = useCallback( async () => {
 		const newOption = {
-			publicize_active: ! isModuleEnabled,
+			publicize: ! isModuleEnabled,
 		};
-		await updateSocialPluginSettings( newOption );
+		await updateSocialModuleSettings( newOption );
 
 		// If the module was enabled, we need to refresh the connection list
-		if ( newOption.publicize_active && ! getSocialScriptData().is_publicize_enabled ) {
+		if ( newOption.publicize && ! getSocialScriptData().is_publicize_enabled ) {
 			window.location.reload();
 		}
-	}, [ isModuleEnabled, updateSocialPluginSettings ] );
+	}, [ isModuleEnabled, updateSocialModuleSettings ] );
 
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
 

projects/js-packages/publicize-components/src/social-store/actions/index.ts

@@ -2,8 +2,8 @@ import * as connectionData from './connection-data';
 import * as pricingPageSettings from './pricing-page';
 import * as shareStatus from './share-status';
 import * as sigActions from './social-image-generator';
+import * as socialModuleSettings from './social-module-settings';
 import * as socialNoteSettings from './social-notes';
-import * as socialPluginSettings from './social-plugin-settings';
 import * as utmActions from './utm-settings';
 
 const actions = {
@@ -13,7 +13,7 @@ const actions = {
 	...utmActions,
 	...socialNoteSettings,
 	...pricingPageSettings,
-	...socialPluginSettings,
+	...socialModuleSettings,
 };
 
 export default actions;

projects/js-packages/publicize-components/src/social-store/actions/social-module-settings.ts

@@ -0,0 +1,20 @@
+import { store as coreStore } from '@wordpress/core-data';
+import { getSocialScriptData } from '../../utils';
+import { SocialModuleSettings } from '../types';
+
+/**
+ * Saves the Social module settings.
+ *
+ * @param data - The data to save.
+ *
+ * @return A thunk.
+ */
+export function updateSocialModuleSettings( data: Partial< SocialModuleSettings > ) {
+	return async function ( { registry } ) {
+		const { socialToggleBase } = getSocialScriptData().api_paths;
+
+		const { saveEntityRecord } = registry.dispatch( coreStore );
+
+		await saveEntityRecord( 'jetpack/v4', socialToggleBase, data );
+	};
+}

projects/js-packages/publicize-components/src/social-store/resolvers.ts

@@ -78,20 +78,22 @@ export function getPostShareStatus( _postId ) {
 }
 
 /**
- * Resolves the social plugin settings to ensure the core-data entities are registered.
+ * Resolves the social module settings to ensure the core-data entities are registered.
  *
  * @return {Function} Resolver
  */
-export function getSocialPluginSettings() {
+export function getSocialModuleSettings() {
 	return async ( { registry } ) => {
+		const { socialToggleBase } = getSocialScriptData().api_paths;
+
 		const jetpackEntities = registry.select( coreStore ).getEntitiesConfig( 'jetpack/v4' );
 
-		if ( ! jetpackEntities.some( ( { name } ) => name === 'social/settings' ) ) {
+		if ( ! jetpackEntities.some( ( { name } ) => name === socialToggleBase ) ) {
 			await registry.dispatch( coreStore ).addEntities( [
 				{
 					kind: 'jetpack/v4',
-					name: 'social/settings',
-					baseURL: '/jetpack/v4/social/settings',
+					name: socialToggleBase,
+					baseURL: `/jetpack/v4/${ socialToggleBase }`,
 					label: __( 'Social Settings', 'jetpack-publicize-components' ),
 				},
 			] );
@@ -102,5 +104,5 @@ export function getSocialPluginSettings() {
 export default {
 	getConnections,
 	getPostShareStatus,
-	getSocialPluginSettings,
+	getSocialModuleSettings,
 };

projects/js-packages/publicize-components/src/social-store/selectors/index.ts

@@ -1,12 +1,12 @@
 import * as connectionDataSelectors from './connection-data';
 import * as shareStatusSelectors from './share-status';
-import * as socialPluginSelectors from './social-plugin-settings';
+import * as socialModuleSelectors from './social-module-settings';
 import * as socialSettingsSelectors from './social-settings';
 
 const selectors = {
 	...connectionDataSelectors,
 	...shareStatusSelectors,
-	...socialPluginSelectors,
+	...socialModuleSelectors,
 	...socialSettingsSelectors,
 };
 

projects/js-packages/publicize-components/src/social-store/selectors/social-module-settings.ts

@@ -0,0 +1,26 @@
+import { store as coreStore } from '@wordpress/core-data';
+import { createRegistrySelector } from '@wordpress/data';
+import { getSocialScriptData } from '../../utils';
+import { SocialModuleSettings } from '../types';
+
+/**
+ * Returns the Social module settings.
+ */
+export const getSocialModuleSettings = createRegistrySelector( select => () => {
+	const { socialToggleBase } = getSocialScriptData().api_paths;
+
+	const data = select( coreStore ).getEntityRecord( 'jetpack/v4', socialToggleBase, undefined );
+
+	return ( data ?? {
+		publicize: getSocialScriptData().is_publicize_enabled,
+	} ) as SocialModuleSettings;
+} );
+
+/**
+ * Returns whether the Social module settings are being saved
+ */
+export const isSavingSocialModuleSettings = createRegistrySelector( select => () => {
+	const { socialToggleBase } = getSocialScriptData().api_paths;
+
+	return select( coreStore ).isSavingEntityRecord( 'jetpack/v4', socialToggleBase, undefined );
+} );

projects/js-packages/publicize-components/src/social-store/types.ts

@@ -142,8 +142,8 @@ export type SocialNotesSettings = {
 	config: SocialNotesConfig;
 };
 
-export type SocialPluginSettings = {
-	publicize_active: boolean;
+export type SocialModuleSettings = {
+	publicize: boolean;
 };
 
 export type SocialSettingsFields = {

projects/js-packages/publicize-components/src/types.ts

@@ -34,6 +34,7 @@ export type ConnectionService = {
 export interface ApiPaths {
 	refreshConnections: string;
 	resharePost: string;
+	socialToggleBase: 'settings' | 'social/settings';
 }
 
 export type SocialSettings = {

projects/packages/publicize/changelog/update-social-to-use-unified-settings-endpoint

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update the settings endppoint to use existing endpoints

projects/packages/publicize/src/class-publicize-script-data.php

@@ -117,7 +117,7 @@ public static function get_admin_script_data() {
 		}
 
 		$basic_data = array(
-			'api_paths'            => array(),
+			'api_paths'            => self::get_api_paths(),
 			'is_publicize_enabled' => Utils::is_publicize_active(),
 			'feature_flags'        => self::get_feature_flags(),
 			'supported_services'   => array(),
@@ -141,7 +141,6 @@ public static function get_admin_script_data() {
 		return array_merge(
 			$basic_data,
 			array(
-				'api_paths'           => self::get_api_paths(),
 				'supported_services'  => self::get_supported_services(),
 				'shares_data'         => self::get_shares_data(),
 				'urls'                => self::get_urls(),
@@ -306,6 +305,8 @@ public static function get_api_paths() {
 
 		$commom_paths = array(
 			'refreshConnections' => '/wpcom/v2/publicize/connections?test_connections=1',
+			// The complete path will be like `/jetpack/v4/social/settings`.
+			'socialToggleBase'   => class_exists( 'Jetpack' ) ? 'settings' : 'social/settings',
 		);
 
 		$specific_paths = array();

projects/packages/publicize/src/class-publicize-setup.php

@@ -51,9 +51,6 @@ public static function pre_initialization() {
 			}
 		}
 
-		// This doesn't need to be active on WPCOM.
-		new REST_API\Settings_Controller();
-
 		Social_Admin_Page::init();
 	}