From c82adbddcf7f44d71e7e1a7e39a56ad00a193838 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 18 Oct 2024 02:25:18 -0700 Subject: [PATCH] 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 --- ...ocial-initial-state-migrate-urls-in-editor | 4 ++++ .../form/broken-connections-notice.tsx | 4 ++-- .../src/components/form/connection-notice.tsx | 5 +++-- .../src/components/form/settings-button.tsx | 4 ++-- .../form/unsupported-connections-notice.tsx | 4 ++-- .../src/hooks/use-publicize-config/index.js | 22 +++++-------------- .../src/social-store/reducer/index.js | 1 - .../social-store/selectors/connection-data.js | 9 -------- .../src/social-store/selectors/index.js | 1 - .../src/social-store/selectors/site-data.js | 1 - .../selectors/test/connection-data.test.js | 13 ----------- .../publicize-components/src/types/types.ts | 1 - ...ocial-initial-state-migrate-urls-in-editor | 4 ++++ .../blocks/subscriptions/test/controls.js | 7 ++++++ 14 files changed, 30 insertions(+), 50 deletions(-) create mode 100644 projects/js-packages/publicize-components/changelog/update-social-initial-state-migrate-urls-in-editor create mode 100644 projects/plugins/jetpack/changelog/update-social-initial-state-migrate-urls-in-editor diff --git a/projects/js-packages/publicize-components/changelog/update-social-initial-state-migrate-urls-in-editor b/projects/js-packages/publicize-components/changelog/update-social-initial-state-migrate-urls-in-editor new file mode 100644 index 0000000000000..71f7bcb2beb79 --- /dev/null +++ b/projects/js-packages/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 index de9db8ac52020..371b847fac919 100644 --- 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' ] } /> ) : ( - + ); 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 index f4bedf6763ccb..3d91d085372bb 100644 --- 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' ) }   - { __( 'Connect now', 'jetpack' ) } + { __( 'Connect now', 'jetpack' ) }

); 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 index ec3a8d8ccd617..7527379232f5f 100644 --- 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 } ) : ( - + { text } ); diff --git a/projects/js-packages/publicize-components/src/components/form/unsupported-connections-notice.tsx b/projects/js-packages/publicize-components/src/components/form/unsupported-connections-notice.tsx index 4118e69964eae..a3ef2edfffd64 100644 --- a/projects/js-packages/publicize-components/src/components/form/unsupported-connections-notice.tsx +++ b/projects/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: , + moreInfo: , } ) } 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 index e958ef3a199f7..0b093fb1100a1 100644 --- 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 index 9f8d335a59bbc..502e34d256f73 100644 --- 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 index 7cf7db17aba76..1a324a65d3cd7 100644 --- 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 index 66d134aee2229..9841e282af43e 100644 --- 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 index 5f1d726f3082d..3b4ab1d22a8b4 100644 --- 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/projects/js-packages/publicize-components/src/social-store/selectors/test/connection-data.test.js b/projects/js-packages/publicize-components/src/social-store/selectors/test/connection-data.test.js index 61c92970b9325..b73f4d62f1c49 100644 --- a/projects/js-packages/publicize-components/src/social-store/selectors/test/connection-data.test.js +++ b/projects/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 index b2d7cd344ef90..8264d46782842 100644 --- 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 new file mode 100644 index 0000000000000..5601b77a6a611 --- /dev/null +++ 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 index 4116dae5cfc67..324fca66dd059 100644 --- 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( );