Social | Initial State: Migrate URLs on Social admin page (#39797)

* Pass the URLs from backend * Install dependency * Update URLs on Social admin page * Add changelog * Update pnpm-lock.yaml * Clean up
Automattic · Oct 18, 2024 · 91ee294 · 91ee294
1 parent 2545c7d
commit 91ee294
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 24 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/...s/publicize-components/changelog/update-social-initial-state-migrate-urls-on-social-admin b/...s/publicize-components/changelog/update-social-initial-state-migrate-urls-on-social-admin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Initial State: Migrated URLs to script data
diff --git a/projects/js-packages/publicize-components/src/types/types.ts b/projects/js-packages/publicize-components/src/types/types.ts
@@ -1,3 +1,7 @@
+export interface SocialUrls {
+	connectionsManagementPage: string;
+}
+
 export type SharesData = {
 	to_be_publicized_count: number;
 	publicized_count: number;
@@ -31,6 +35,7 @@ export interface SocialScriptData {
 	feature_flags: FeatureFlags;
 	supported_services: Array< ConnectionService >;
 	shares_data: SharesData;
+	urls: SocialUrls;
 }
 
 type JetpackSettingsSelectors = {

diff --git a/projects/js-packages/publicize-components/src/utils/index.js b/projects/js-packages/publicize-components/src/utils/index.js
@@ -2,3 +2,4 @@ export * from './get-share-message-max-length';
 export * from './get-supported-additional-connections';
 export * from './request-external-access';
 export * from './types';
+export * from './script-data';
diff --git a/...cts/packages/publicize/changelog/update-social-initial-state-migrate-urls-on-social-admin b/...cts/packages/publicize/changelog/update-social-initial-state-migrate-urls-on-social-admin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Initial State: Migrated URLs to script data
diff --git a/projects/packages/publicize/src/class-publicize-script-data.php b/projects/packages/publicize/src/class-publicize-script-data.php
@@ -86,6 +86,7 @@ public static function get_admin_script_data() {
 			'feature_flags'        => self::get_feature_flags(),
 			'supported_services'   => array(),
 			'shares_data'          => array(),
+			'urls'                 => array(),
 		);
 
 		if ( ! Utils::is_publicize_active() ) {
@@ -105,9 +106,9 @@ public static function get_admin_script_data() {
 				'api_paths'          => self::get_api_paths(),
 				'supported_services' => self::get_supported_services(),
 				'shares_data'        => self::get_shares_data(),
+				'urls'               => self::get_urls(),
 				/**
 				 * 'store'       => self::get_store_script_data(),
-				 * 'urls'        => self::get_urls(),
 				 */
 			)
 		);
@@ -216,4 +217,23 @@ public static function get_api_paths() {
 			'resharePost'        => '/jetpack/v4/publicize/{postId}',
 		);
 	}
+
+	/**
+	 * Get the URLs.
+	 *
+	 * @return array
+	 */
+	public static function get_urls() {
+
+		$urls = array(
+			'connectionsManagementPage' => self::publicize()->publicize_connections_url(
+				'jetpack-social-connections-admin-page'
+			),
+		);
+
+		// Escape the URLs.
+		array_walk( $urls, 'esc_url_raw' );
+
+		return $urls;
+	}
 }
diff --git a/projects/plugins/social/changelog/update-social-initial-state-migrate-urls-on-social-admin b/projects/plugins/social/changelog/update-social-initial-state-migrate-urls-on-social-admin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Initial State: Migrated URLs to script data
diff --git a/projects/plugins/social/package.json b/projects/plugins/social/package.json
@@ -30,6 +30,7 @@
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",
 		"@automattic/jetpack-publicize-components": "workspace:*",
+		"@automattic/jetpack-script-data": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@wordpress/api-fetch": "7.9.0",
 		"@wordpress/components": "28.9.0",

diff --git a/projects/plugins/social/src/js/components/admin-page/header/index.jsx b/projects/plugins/social/src/js/components/admin-page/header/index.jsx
@@ -1,19 +1,20 @@
 import { SOCIAL_STORE_ID } from '@automattic/jetpack-publicize-components';
+import { getMyJetpackUrl } from '@automattic/jetpack-script-data';
 import { useSelect } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import Logo from './../../logo';
 import styles from './styles.module.scss';
 
 const AdminPageHeader = () => {
-	const { showPricingPage, activateLicenseUrl } = useSelect( select => {
+	const { showPricingPage } = useSelect( select => {
 		const store = select( SOCIAL_STORE_ID );
 
 		return {
 			showPricingPage: store.showPricingPage(),
-			activateLicenseUrl: `${ store.getAdminUrl() }admin.php?page=my-jetpack#/add-license`,
 		};
 	} );
+	const activateLicenseUrl = getMyJetpackUrl( '#/add-license' );
 
 	return (
 		<div className={ styles.header }>

diff --git a/projects/plugins/social/src/js/components/header/index.js b/projects/plugins/social/src/js/components/header/index.js
@@ -13,31 +13,25 @@ import {
 	getSharedPostsCount,
 	store as socialStore,
 } from '@automattic/jetpack-publicize-components';
+import { getAdminUrl } from '@automattic/jetpack-script-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Icon, postList } from '@wordpress/icons';
 import StatCards from '../stat-cards';
 import styles from './styles.module.scss';
 
 const Header = () => {
-	const connectionData = window.jetpackSocialInitialState.connectionData ?? {};
-	const {
-		// TODO - Replace some of these with data from initial state
-		connectionsAdminUrl,
-		hasConnections,
-		isModuleEnabled,
-		newPostUrl,
-	} = useSelect( select => {
+	const { hasConnections, isModuleEnabled } = useSelect( select => {
 		const store = select( socialStore );
 		return {
-			connectionsAdminUrl: connectionData.adminUrl,
 			hasConnections: store.getConnections().length > 0,
 			isModuleEnabled: store.isModuleEnabled(),
-			newPostUrl: `${ store.getAdminUrl() }post-new.php`,
 		};
 	} );
 
-	const { useAdminUiV1 } = getSocialScriptData().feature_flags;
+	const { urls, feature_flags } = getSocialScriptData();
+
+	const useAdminUiV1 = feature_flags.useAdminUiV1;
 
 	const { hasConnectionError } = useConnectionErrorNotice();
 
@@ -71,13 +65,16 @@ const Header = () => {
 										{ __( 'Connect accounts', 'jetpack-social' ) }
 									</Button>
 								) : (
-									<Button href={ connectionsAdminUrl } isExternalLink={ true }>
+									<Button href={ urls.connectionsManagementPage } isExternalLink={ true }>
 										{ __( 'Connect accounts', 'jetpack-social' ) }
 									</Button>
 								) }
 							</>
 						) }
-						<Button href={ newPostUrl } variant={ hasConnections ? 'primary' : 'secondary' }>
+						<Button
+							href={ getAdminUrl( 'post-new.php' ) }
+							variant={ hasConnections ? 'primary' : 'secondary' }
+						>
 							{ __( 'Write a post', 'jetpack-social' ) }
 						</Button>
 					</div>

diff --git a/projects/plugins/social/src/js/components/social-module-toggle/index.tsx b/projects/plugins/social/src/js/components/social-module-toggle/index.tsx
@@ -22,7 +22,6 @@ import styles from './styles.module.scss';
 const SocialModuleToggle: React.FC = () => {
 	const {
 		// TODO - replace some of these with values from initial state
-		connectionsAdminUrl,
 		isModuleEnabled,
 		isUpdating,
 		siteSuffix,
@@ -33,14 +32,15 @@ const SocialModuleToggle: React.FC = () => {
 		return {
 			isModuleEnabled: store.isModuleEnabled(),
 			isUpdating: store.isUpdatingJetpackSettings(),
-			connectionsAdminUrl: store.getConnectionsAdminUrl(),
 			siteSuffix: store.getSiteSuffix(),
 			blogID: store.getBlogID(),
 			hasPaidFeatures: store.hasPaidFeatures(),
 		};
 	}, [] );
 
-	const { useAdminUiV1 } = getSocialScriptData().feature_flags;
+	const { urls, feature_flags } = getSocialScriptData();
+
+	const useAdminUiV1 = feature_flags.useAdminUiV1;
 
 	const updateOptions = useDispatch( SOCIAL_STORE_ID ).updateJetpackSettings;
 
@@ -65,13 +65,13 @@ const SocialModuleToggle: React.FC = () => {
 			) : null;
 		}
 
-		return connectionsAdminUrl ? (
+		return urls.connectionsManagementPage ? (
 			<Button
 				fullWidth={ isSmall }
 				className={ styles.button }
 				variant="secondary"
 				isExternalLink={ true }
-				href={ connectionsAdminUrl }
+				href={ urls.connectionsManagementPage }
 				disabled={ isUpdating || ! isModuleEnabled }
 				target="_blank"
 			>

diff --git a/projects/plugins/social/src/js/components/social-notes-toggle/index.tsx b/projects/plugins/social/src/js/components/social-notes-toggle/index.tsx
@@ -1,5 +1,6 @@
 import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { store as socialStore } from '@automattic/jetpack-publicize-components';
+import { getAdminUrl } from '@automattic/jetpack-script-data';
 import { ExternalLink, SelectControl, ToggleControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
@@ -29,17 +30,18 @@ const handleStateUpdating = ( updateFunction, updatingStateSetter, ...args ) =>
 };
 
 const SocialNotesToggle: React.FC< SocialNotesToggleProps > = ( { disabled } ) => {
-	const { isEnabled, notesConfig, newNoteUrl } = useSelect( select => {
+	const { isEnabled, notesConfig } = useSelect( select => {
 		const store = select( socialStore );
 		return {
 			isEnabled: store.isSocialNotesEnabled(),
 			notesConfig: store.getSocialNotesConfig(),
-			newNoteUrl: `${ store.getAdminUrl() }post-new.php?post_type=jetpack-social-note`,
 			// Temporarily we disable forever after action to wait for the page to reload.
 			// isUpdating: store.isSocialNotesSettingsUpdating(),
 		};
 	}, [] );
 
+	const newNoteUrl = getAdminUrl( 'post-new.php?post_type=jetpack-social-note' );
+
 	const [ isUpdating, setIsUpdating ] = useState( false );
 	const [ isAppendLinkToggleUpdating, setIsAppendLinkToggleUpdating ] = useState( false );
 	const [ isLinkFormatUpdating, setIsLinkFormatUpdating ] = useState( false );

diff --git a/projects/plugins/social/src/js/components/types/types.ts b/projects/plugins/social/src/js/components/types/types.ts
@@ -13,7 +13,6 @@ type JetpackSettingsSelectors = {
 
 type ConnectionDataSelectors = {
 	getConnections: () => Array< object >;
-	getConnectionsAdminUrl: () => string;
 	hasConnections: () => boolean;
 };