Social: Update the admin page for use by Editors and Authors (#41859)

* Add the user permissions to script data.

* Allow Editors and Authors to manage Social in Jetpack

* Only register the admin page if the user has permissions

* Only render the module toggle if the user has permission

* Move the module capabilities to the sync package

The Sync package holds the Modules class that handles the actions to
manage the modules. We need the custom capibility to turn the module on
and off on the Social admin page, but it's likely to be generally useful
for other standalone plugins.

* Add changelogs

* Refine the permissions type

* Update the user capabilities script-data utilities

* Implement UserCapabilities interface

* Implement the hideToggle logic for the description

* Remove unused import

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

Upstream-Ref: Automattic/jetpack@e3e42e3

Author: pablinos

CHANGELOG.md

@@ -11,6 +11,7 @@ This is an alpha version! The changes listed here are not final.
 
 ### Added
 - Added support for Bluesky video selection
+- Social: Updated the admin page for use by Editors and Authors
 
 ### Fixed
 - Fixed an issue with unsupported connection showing up

src/components/admin-page/index.tsx

@@ -11,6 +11,7 @@ import {
 	isJetpackSelfHostedSite,
 	isSimpleSite,
 	siteHasFeature,
+	currentUserCan,
 } from '@automattic/jetpack-script-data';
 import { useSelect } from '@wordpress/data';
 import { useState, useCallback } from '@wordpress/element';
@@ -57,6 +58,8 @@ export const SocialAdminPage = () => {
 		? `Jetpack Social ${ social.version }`
 		: `Jetpack ${ jetpack.version }`;
 
+	const canManageOptions = currentUserCan( 'manage_options' );
+
 	if ( showConnectionCard ) {
 		return (
 			<AdminPage moduleName={ moduleName } showHeader={ false } showBackground={ false }>
@@ -92,15 +95,19 @@ export const SocialAdminPage = () => {
 					</AdminSectionHero>
 					<AdminSection>
 						<SocialModuleToggle />
-						{ isModuleEnabled && <UtmToggle /> }
-						{
-							// Only show the Social Notes toggle if Social plugin is active
-							social.version && isModuleEnabled && (
-								<SocialNotesToggle disabled={ isUpdatingJetpackSettings } />
-							)
-						}
-						{ isModuleEnabled && siteHasFeature( features.IMAGE_GENERATOR ) && (
-							<SocialImageGeneratorToggle disabled={ isUpdatingJetpackSettings } />
+						{ canManageOptions && (
+							<>
+								{ isModuleEnabled && <UtmToggle /> }
+								{
+									// Only show the Social Notes toggle if Social plugin is active
+									social.version && isModuleEnabled && (
+										<SocialNotesToggle disabled={ isUpdatingJetpackSettings } />
+									)
+								}
+								{ isModuleEnabled && siteHasFeature( features.IMAGE_GENERATOR ) && (
+									<SocialImageGeneratorToggle disabled={ isUpdatingJetpackSettings } />
+								) }
+							</>
 						) }
 					</AdminSection>
 					<AdminSectionHero>

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

@@ -23,6 +23,11 @@ describe( 'load the app', () => {
 					},
 				},
 			},
+			user: {
+				current_user: {
+					capabilities: {},
+				},
+			},
 		};
 	} );
 

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

@@ -5,7 +5,11 @@ import {
 	getRedirectUrl,
 	useBreakpointMatch,
 } from '@automattic/jetpack-components';
-import { getScriptData, isWpcomPlatformSite } from '@automattic/jetpack-script-data';
+import {
+	getScriptData,
+	isWpcomPlatformSite,
+	currentUserCan,
+} from '@automattic/jetpack-script-data';
 import { ExternalLink } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
@@ -77,9 +81,10 @@ const SocialModuleToggle: React.FC = () => {
 		) : null;
 	};
 
+	const hideToggle = is_wpcom || ! currentUserCan( 'manage_modules' );
 	return (
 		<ToggleSection
-			hideToggle={ is_wpcom }
+			hideToggle={ hideToggle }
 			title={ __(
 				'Automatically share your posts to social networks',
 				'jetpack-publicize-components'
@@ -89,7 +94,7 @@ const SocialModuleToggle: React.FC = () => {
 			onChange={ toggleModule }
 		>
 			<Text className={ styles.text }>
-				{ ! is_wpcom
+				{ ! hideToggle
 					? _x(
 							'When enabled, you’ll be able to connect your social media accounts and send a post’s featured image and content to the selected channels with a single click when the post is published.',
 							'Description of the feature that the toggle enables',