Social | Initial State: Migrate URLs in the editor (#39799)

* Install dependency * Update pnpm-lock.yaml * Update usePublicizeConfig hook * Update connections management URL for broken connection * Update connections management URL for Manage connections button in the editor * Update connections management URL for unsupported connections in the editor * Update the URL for user connection * Clean up * Add changelog * Fix unit tests in Jetpack
Automattic · Oct 18, 2024 · c82adbd · c82adbd
1 parent 31b3f07
commit c82adbd
Show file tree

Hide file tree

Showing 14 changed files with 30 additions and 50 deletions.
diff --git a/...ackages/publicize-components/changelog/update-social-initial-state-migrate-urls-in-editor b/...ackages/publicize-components/changelog/update-social-initial-state-migrate-urls-in-editor
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Initial state: Migrated URLs in the editor to the new script data
diff --git a/projects/js-packages/publicize-components/src/components/form/broken-connections-notice.tsx b/projects/js-packages/publicize-components/src/components/form/broken-connections-notice.tsx
@@ -26,7 +26,7 @@ export const BrokenConnectionsNotice: React.FC = () => {
 		);
 	} );
 
-	const { connectionsAdminUrl } = usePublicizeConfig();
+	const { connectionsPageUrl } = usePublicizeConfig();
 
 	const { useAdminUiV1 } = getSocialScriptData().feature_flags;
 
@@ -39,7 +39,7 @@ export const BrokenConnectionsNotice: React.FC = () => {
 			className={ styles[ 'broken-connection-btn' ] }
 		/>
 	) : (
-		<ExternalLink href={ connectionsAdminUrl } />
+		<ExternalLink href={ connectionsPageUrl } />
 	);
 
 	const getServiceLabel = useServiceLabel();

diff --git a/projects/js-packages/publicize-components/src/components/form/connection-notice.tsx b/projects/js-packages/publicize-components/src/components/form/connection-notice.tsx
@@ -1,3 +1,4 @@
+import { getMyJetpackUrl } from '@automattic/jetpack-script-data';
 import { PanelRow } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import usePublicizeConfig from '../../hooks/use-publicize-config';
@@ -7,7 +8,7 @@ import styles from './styles.module.scss';
 
 export const ConnectionNotice: React.FC = () => {
 	const { hasConnections } = useSocialMediaConnections();
-	const { needsUserConnection, userConnectionUrl } = usePublicizeConfig();
+	const { needsUserConnection } = usePublicizeConfig();
 
 	if ( needsUserConnection ) {
 		return (
@@ -18,7 +19,7 @@ export const ConnectionNotice: React.FC = () => {
 						'jetpack'
 					) }
 					&nbsp;
-					<a href={ userConnectionUrl }>{ __( 'Connect now', 'jetpack' ) }</a>
+					<a href={ getMyJetpackUrl( '#/connection' ) }>{ __( 'Connect now', 'jetpack' ) }</a>
 				</p>
 			</PanelRow>
 		);

diff --git a/projects/js-packages/publicize-components/src/components/form/settings-button.tsx b/projects/js-packages/publicize-components/src/components/form/settings-button.tsx
@@ -33,7 +33,7 @@ export function SettingsButton( { label, variant = 'primary' }: SettingsButtonPr
 		};
 	}, [] );
 	const { openConnectionsModal } = useDispatch( store );
-	const { connectionsAdminUrl } = usePublicizeConfig();
+	const { connectionsPageUrl } = usePublicizeConfig();
 
 	const text = label || __( 'Manage connections', 'jetpack' );
 	const hasConnections = connections.length > 0;
@@ -48,7 +48,7 @@ export function SettingsButton( { label, variant = 'primary' }: SettingsButtonPr
 			{ text }
 		</Button>
 	) : (
-		<ExternalLink className={ styles[ 'settings-button' ] } href={ connectionsAdminUrl }>
+		<ExternalLink className={ styles[ 'settings-button' ] } href={ connectionsPageUrl }>
 			{ text }
 		</ExternalLink>
 	);

diff --git a/...s/js-packages/publicize-components/src/components/form/unsupported-connections-notice.tsx b/...s/js-packages/publicize-components/src/components/form/unsupported-connections-notice.tsx
@@ -9,7 +9,7 @@ import Notice from '../notice';
 export const UnsupportedConnectionsNotice: React.FC = () => {
 	const { connections } = useSocialMediaConnections();
 
-	const { connectionsAdminUrl } = usePublicizeConfig();
+	const { connectionsPageUrl } = usePublicizeConfig();
 
 	const unsupportedConnections = connections.filter( connection =>
 		checkConnectionCode( connection, 'unsupported' )
@@ -24,7 +24,7 @@ export const UnsupportedConnectionsNotice: React.FC = () => {
 						'jetpack'
 					),
 					{
-						moreInfo: <ExternalLink href={ connectionsAdminUrl } />,
+						moreInfo: <ExternalLink href={ connectionsPageUrl } />,
 					}
 				) }
 			</Notice>

diff --git a/projects/js-packages/publicize-components/src/hooks/use-publicize-config/index.js b/projects/js-packages/publicize-components/src/hooks/use-publicize-config/index.js
@@ -1,15 +1,14 @@
 import { useConnection } from '@automattic/jetpack-connection';
 import {
-	getJetpackExtensionAvailability,
-	isUpgradable,
 	getJetpackData,
-	getSiteFragment,
-	isSimpleSite,
+	getJetpackExtensionAvailability,
 	isAtomicSite,
+	isSimpleSite,
+	isUpgradable,
 } from '@automattic/jetpack-shared-extension-utils';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { store as socialStore } from '../../social-store';
+import { getSocialScriptData } from '../../utils';
 import { usePostMeta } from '../use-post-meta';
 
 const republicizeFeatureName = 'republicize';
@@ -23,16 +22,12 @@ const republicizeFeatureName = 'republicize';
  */
 export default function usePublicizeConfig() {
 	const isJetpackSite = ! isAtomicSite() && ! isSimpleSite();
-	const blogID = getJetpackData()?.wpcomBlogId;
 	const isRePublicizeFeatureAvailable =
 		isJetpackSite || getJetpackExtensionAvailability( republicizeFeatureName )?.available;
 	const isPostPublished = useSelect( select => select( editorStore ).isCurrentPostPublished(), [] );
 	const currentPostType = useSelect( select => select( editorStore ).getCurrentPostType(), [] );
 	const { isUserConnected } = useConnection();
-
-	const connectionsRootUrl =
-		getJetpackData()?.social?.publicizeConnectionsUrl ??
-		'https://wordpress.com/marketing/connections/';
+	const { urls } = getSocialScriptData();
 
 	/*
 	 * isPublicizeEnabledMeta:
@@ -105,8 +100,6 @@ export default function usePublicizeConfig() {
 
 	const needsUserConnection = ! isUserConnected && ! isSimpleSite();
 
-	const userConnectionUrl = useSelect( select => select( socialStore ).userConnectionUrl(), [] );
-
 	return {
 		isPublicizeEnabledMeta,
 		isPublicizeEnabled,
@@ -121,11 +114,8 @@ export default function usePublicizeConfig() {
 		isSocialImageGeneratorAvailable:
 			!! getJetpackData()?.social?.isSocialImageGeneratorAvailable && ! isJetpackSocialNote,
 		isSocialImageGeneratorEnabled: !! getJetpackData()?.social?.isSocialImageGeneratorEnabled,
-		connectionsAdminUrl: connectionsRootUrl + ( blogID ?? getSiteFragment() ),
-		adminUrl: getJetpackData()?.social?.adminUrl,
-		jetpackSharingSettingsUrl: getJetpackData()?.social?.jetpackSharingSettingsUrl,
+		connectionsPageUrl: urls.connectionsManagementPage,
 		isJetpackSocialNote,
 		needsUserConnection,
-		userConnectionUrl,
 	};
 }
diff --git a/projects/js-packages/publicize-components/src/social-store/reducer/index.js b/projects/js-packages/publicize-components/src/social-store/reducer/index.js
@@ -12,7 +12,6 @@ const reducer = combineReducers( {
 	socialImageGeneratorSettings,
 	shareStatus,
 	hasPaidPlan: ( state = false ) => state,
-	userConnectionUrl: ( state = '' ) => state,
 	hasPaidFeatures: ( state = false ) => state,
 } );
 

diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js b/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js
@@ -54,15 +54,6 @@ export function getConnectionsByService( state, serviceName ) {
 	return getConnections( state ).filter( ( { service_name } ) => service_name === serviceName );
 }
 
-/**
- * Returns the connections admin URL from the store.
- * @param {import("../types").SocialStoreState} state - State object.
- * @return {string|null} The connections admin URL.
- */
-export function getConnectionsAdminUrl( state ) {
-	return state.connectionData?.adminUrl ?? null;
-}
-
 /**
  * Returns whether there are connections in the store.
  * @param {import("../types").SocialStoreState} state - State object.

diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/index.js b/projects/js-packages/publicize-components/src/social-store/selectors/index.js
@@ -10,7 +10,6 @@ const selectors = {
 	...jetpackSettingSelectors,
 	...socialImageGeneratorSettingsSelectors,
 	...shareStatusSelectors,
-	userConnectionUrl: state => state.userConnectionUrl,
 	hasPaidFeatures: state => state.hasPaidFeatures,
 };
 

diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/site-data.js b/projects/js-packages/publicize-components/src/social-store/selectors/site-data.js
@@ -1,5 +1,4 @@
 const siteDataSelectors = {
-	getAdminUrl: state => state.siteData?.adminUrl ?? null,
 	getAPIRootUrl: state => state.siteData?.apiRoot ?? null,
 	getAPINonce: state => state.siteData?.apiNonce ?? null,
 	getRegistrationNonce: state => state.siteData?.registrationNonce ?? null,

diff --git a/.../js-packages/publicize-components/src/social-store/selectors/test/connection-data.test.js b/.../js-packages/publicize-components/src/social-store/selectors/test/connection-data.test.js
@@ -1,6 +1,5 @@
 import {
 	getConnections,
-	getConnectionsAdminUrl,
 	hasConnections,
 	getFailedConnections,
 	getMustReauthConnections,
@@ -11,7 +10,6 @@ import {
 
 const state = {
 	connectionData: {
-		adminUrl: 'https://wordpress.com/some-url',
 		connections: [
 			{
 				id: '123456789',
@@ -64,17 +62,6 @@ describe( 'Social store selectors: connectionData', () => {
 		} );
 	} );
 
-	describe( 'getConnectionsAdminUrl', () => {
-		it( 'should return null if no adminUrl', () => {
-			expect( getConnectionsAdminUrl( {} ) ).toBeNull();
-		} );
-
-		it( 'should return adminUrl', () => {
-			const adminUrl = getConnectionsAdminUrl( state );
-			expect( adminUrl ).toEqual( state.connectionData.adminUrl );
-		} );
-	} );
-
 	describe( 'hasConnections', () => {
 		it( 'should return false if no connections', () => {
 			expect( hasConnections( {} ) ).toBe( false );

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

diff --git a/projects/plugins/jetpack/changelog/update-social-initial-state-migrate-urls-in-editor b/projects/plugins/jetpack/changelog/update-social-initial-state-migrate-urls-in-editor
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Fixed unit tests
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/controls.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/controls.js
@@ -74,6 +74,13 @@ beforeEach( () => {
 } );
 
 describe( 'Inspector controls', () => {
+	beforeEach( () => {
+		window.JetpackScriptData = {
+			social: {
+				urls: {},
+			},
+		};
+	} );
 	describe( 'Gradient settings panel', () => {
 		test( 'displays gradient settings control panel', () => {
 			render( <SubscriptionsInspectorControls { ...defaultProps } /> );