Social | Avoid calling the settings endpoint on Social admin page if not relevant (#42102)

* Social | Avoid calling the settings endpoint on Social admin page if not relevant

* Use receiveEntityRecords for jetpack/v4 settings selector

* Fix unit tests

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/13632678056

Upstream-Ref: Automattic/jetpack@cdb0e41

Author: pablinos

CHANGELOG.md

@@ -22,6 +22,7 @@ This is an alpha version! The changes listed here are not final.
 
 ### Fixed
 - Clean up Social admin page unit tests
+- Social | Avoid calling the settings endpoint on Social admin page if not relevant
 
 ## [0.79.0] - 2025-02-24
 ### Added

src/components/admin-page/test/social-admin-page.test.jsx

@@ -81,8 +81,10 @@ describe( 'SocialAdminPage', () => {
 
 		describe( 'Social Notes toggle', () => {
 			it( 'should show when plugin is active and module is enabled', () => {
+				mockScriptData();
 				render( <SocialAdminPage /> );
 				expect( screen.getByText( 'Enable Social Notes' ) ).toBeInTheDocument();
+				clearMockedScriptData();
 			} );
 
 			it( 'should not show when plugin is not active', () => {
@@ -107,7 +109,7 @@ describe( 'SocialAdminPage', () => {
 					},
 				} );
 				render( <SocialAdminPage /> );
-				expect( screen.queryByTestId( 'social-notes-toggle' ) ).not.toBeInTheDocument();
+				expect( screen.queryByText( 'Enable Social Notes' ) ).not.toBeInTheDocument();
 				clearMockedScriptData();
 			} );
 		} );

src/components/admin-page/toggles/social-module-toggle/index.tsx

@@ -5,18 +5,15 @@ import {
 	getRedirectUrl,
 	useBreakpointMatch,
 } from '@automattic/jetpack-components';
-import {
-	getScriptData,
-	isWpcomPlatformSite,
-	currentUserCan,
-} from '@automattic/jetpack-script-data';
+import { getScriptData, isWpcomPlatformSite } from '@automattic/jetpack-script-data';
 import { ExternalLink } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React, { useCallback } from 'react';
 import { store as socialStore } from '../../../../social-store';
 import { getSocialScriptData, hasSocialPaidFeatures } from '../../../../utils';
+import { canToggleSocialModule } from '../../../../utils/misc';
 import ConnectionManagement from '../../../connection-management';
 import ToggleSection from '../toggle-section';
 import styles from './styles.module.scss';
@@ -81,7 +78,7 @@ const SocialModuleToggle: React.FC = () => {
 		) : null;
 	};
 
-	const hideToggle = is_wpcom || ! currentUserCan( 'manage_modules' );
+	const hideToggle = ! canToggleSocialModule();
 	return (
 		<ToggleSection
 			hideToggle={ hideToggle }

src/social-store/hydrate-stores.ts

@@ -7,16 +7,40 @@ import { getSocialScriptData } from '../utils';
  * Hydrate the data stores
  */
 export async function hydrateStores() {
+	const {
+		addEntities,
+		receiveEntityRecords,
+		// @ts-expect-error finishResolution exists but it's not typed
+		finishResolution,
+	} = dispatch( coreStore );
+
+	const socialToggleBase = getSocialScriptData()?.api_paths?.socialToggleBase;
+
+	const jetpackEntities = select( coreStore ).getEntitiesConfig( 'jetpack/v4' );
+	if ( ! jetpackEntities.some( ( { name } ) => name === socialToggleBase ) ) {
+		await addEntities( [
+			{
+				kind: 'jetpack/v4',
+				name: socialToggleBase,
+				baseURL: `/jetpack/v4/${ socialToggleBase }`,
+				label: __( 'Social Settings', 'jetpack-publicize-components' ),
+			},
+		] );
+
+		// @ts-expect-error Only 3 arguments are required, rest are optional but types expect 7
+		await receiveEntityRecords(
+			'jetpack/v4',
+			socialToggleBase,
+			{ publicize: getSocialScriptData()?.is_publicize_enabled },
+			true
+		);
+
+		await finishResolution( 'getEntityRecord', [ 'jetpack/v4', socialToggleBase ] );
+	}
+
 	const wpcomEntities = select( coreStore ).getEntitiesConfig( 'wpcom/v2' );
 
 	if ( ! wpcomEntities.some( ( { name } ) => name === 'publicize/services' ) ) {
-		const {
-			addEntities,
-			receiveEntityRecords,
-			// @ts-expect-error finishResolution exists but it's not typed
-			finishResolution,
-		} = dispatch( coreStore );
-
 		await addEntities( [
 			{
 				kind: 'wpcom/v2',

src/social-store/resolvers.ts

@@ -1,7 +1,5 @@
 import apiFetch from '@wordpress/api-fetch';
-import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
-import { __ } from '@wordpress/i18n';
 import { getSocialScriptData } from '../utils/script-data';
 import { normalizeShareStatus } from '../utils/share-status';
 import { setConnections } from './actions/connection-data';
@@ -77,32 +75,7 @@ export function getPostShareStatus( _postId ) {
 	};
 }
 
-/**
- * Resolves the social module settings to ensure the core-data entities are registered.
- *
- * @return {Function} Resolver
- */
-export function getSocialModuleSettings() {
-	return async ( { registry } ) => {
-		const { socialToggleBase } = getSocialScriptData().api_paths;
-
-		const jetpackEntities = registry.select( coreStore ).getEntitiesConfig( 'jetpack/v4' );
-
-		if ( ! jetpackEntities.some( ( { name } ) => name === socialToggleBase ) ) {
-			await registry.dispatch( coreStore ).addEntities( [
-				{
-					kind: 'jetpack/v4',
-					name: socialToggleBase,
-					baseURL: `/jetpack/v4/${ socialToggleBase }`,
-					label: __( 'Social Settings', 'jetpack-publicize-components' ),
-				},
-			] );
-		}
-	};
-}
-
 export default {
 	getConnections,
 	getPostShareStatus,
-	getSocialModuleSettings,
 };

src/social-store/selectors/social-module-settings.ts

@@ -6,15 +6,18 @@ import { SocialModuleSettings } from '../types';
 /**
  * Returns the Social module settings.
  */
-export const getSocialModuleSettings = createRegistrySelector( select => () => {
-	const { socialToggleBase } = getSocialScriptData().api_paths;
+export const getSocialModuleSettings = createRegistrySelector(
+	select => (): SocialModuleSettings => {
+		const { api_paths, is_publicize_enabled } = getSocialScriptData();
 
-	const data = select( coreStore ).getEntityRecord( 'jetpack/v4', socialToggleBase, undefined );
+		const data = select( coreStore ).getEntityRecord< SocialModuleSettings >(
+			'jetpack/v4',
+			api_paths.socialToggleBase
+		);
 
-	return ( data ?? {
-		publicize: getSocialScriptData().is_publicize_enabled,
-	} ) as SocialModuleSettings;
-} );
+		return data ?? { publicize: is_publicize_enabled };
+	}
+);
 
 /**
  * Returns whether the Social module settings are being saved

src/social-store/selectors/social-settings.ts

@@ -1,3 +1,4 @@
+import { currentUserCan } from '@automattic/jetpack-script-data';
 import { store as coreStore } from '@wordpress/core-data';
 import { createRegistrySelector } from '@wordpress/data';
 import { SocialSettings } from '../../types';
@@ -15,7 +16,9 @@ export const isSavingSiteSettings = createRegistrySelector( select => () => {
  * Returns the social settings.
  */
 export const getSocialSettings = createRegistrySelector( select => () => {
-	const data = select( coreStore ).getEntityRecord< SocialSettingsFields >( 'root', 'site' );
+	const data = currentUserCan( 'manage_options' )
+		? select( coreStore ).getEntityRecord< SocialSettingsFields >( 'root', 'site' )
+		: null;
 
 	const { settings } = getSocialScriptData();
 

src/utils/misc.ts

@@ -0,0 +1,12 @@
+import { currentUserCan, getScriptData } from '@automattic/jetpack-script-data';
+
+/**
+ * Check if the social module can be toggled.
+ *
+ * @return Whether the social module can be toggled.
+ */
+export function canToggleSocialModule() {
+	const is_wpcom = getScriptData().site.host === 'wpcom';
+
+	return ! is_wpcom && currentUserCan( 'manage_modules' );
+}