From 5308e5149faa9a063db7e84e7f5538ca64efa1cb Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Thu, 19 Dec 2024 13:57:27 +0530 Subject: [PATCH 01/18] Update connect-form.tsx --- .../src/components/services/connect-form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/publicize-components/src/components/services/connect-form.tsx b/projects/js-packages/publicize-components/src/components/services/connect-form.tsx index a700da6a8514a..a530834148449 100644 --- a/projects/js-packages/publicize-components/src/components/services/connect-form.tsx +++ b/projects/js-packages/publicize-components/src/components/services/connect-form.tsx @@ -24,7 +24,7 @@ type ConnectFormProps = { * * @param {ConnectFormProps} props - Component props * - * @return {import('react').ReactNode} Connect form component + * @return Connect form component */ export function ConnectForm( { service, From 33936fafe1e9a03817f4594e7ac379df5f50b7a4 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Thu, 19 Dec 2024 10:49:59 +0530 Subject: [PATCH 02/18] Create connections class for caching --- .../publicize/src/class-connections.php | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 projects/packages/publicize/src/class-connections.php diff --git a/projects/packages/publicize/src/class-connections.php b/projects/packages/publicize/src/class-connections.php new file mode 100644 index 0000000000000..36de3b630cdf8 --- /dev/null +++ b/projects/packages/publicize/src/class-connections.php @@ -0,0 +1,78 @@ +is_wpcom_simple(); + + if ( $is_wpcom ) { + // We don't need to cache connections for simple sites. + return Connections_Controller::get_connections( $run_tests ); + } + + $clear_cache = $args['clear_cache'] ?? false; + + if ( $clear_cache || $run_tests ) { + self::clear_transient(); + } + + $connections = get_transient( self::CONNECTIONS_TRANSIENT ); + + // This can be an empty array, so we need to check for false. + if ( false === $connections ) { + $connections = self::fetch_and_cache_connections( $run_tests ); + } + + return $connections; + } + + /** + * Fetch connections from the REST API and cache them. + * + * @param bool $run_tests Whether to run connection tests. + * + * @return array + */ + public static function fetch_and_cache_connections( $run_tests = false ) { + $connections = Connections_Controller::get_connections( $run_tests ); + + if ( is_array( $connections ) ) { + set_transient( self::CONNECTIONS_TRANSIENT, $connections, HOUR_IN_SECONDS * 4 ); + } + + return $connections; + } + + /** + * Delete the transient. + */ + public static function clear_transient() { + delete_transient( self::CONNECTIONS_TRANSIENT ); + } +} From 6a63224664cb481792a3283a654d2276ec9cbb63 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Thu, 19 Dec 2024 10:50:22 +0530 Subject: [PATCH 03/18] Update script data to use connections from the REST endpoint --- .../src/class-publicize-script-data.php | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/projects/packages/publicize/src/class-publicize-script-data.php b/projects/packages/publicize/src/class-publicize-script-data.php index b4e7dded6b62d..63ca3c726944a 100644 --- a/projects/packages/publicize/src/class-publicize-script-data.php +++ b/projects/packages/publicize/src/class-publicize-script-data.php @@ -21,8 +21,6 @@ */ class Publicize_Script_Data { - const SERVICES_TRANSIENT = 'jetpack_social_services_list'; - /** * Get the publicize instance - properly typed * @@ -160,8 +158,7 @@ public static function get_store_initial_state() { return array( 'connectionData' => array( - // We do not have this method on WPCOM Publicize class yet. - 'connections' => ! $is_wpcom ? self::publicize()->get_all_connections_for_user() : array(), + 'connections' => Connections::get_all(), ), 'shareStatus' => $share_status, ); @@ -238,17 +235,24 @@ public static function get_api_paths() { $is_simple_site = ( new Host() )->is_wpcom_simple(); + $commom_paths = array( + 'refreshConnections' => '/wpcom/v2/publicize/connections?test_connections=1', + ); + + $specific_paths = array(); + if ( $is_simple_site ) { - return array( - 'refreshConnections' => '/wpcom/v2/publicize/connection-test-results', - 'resharePost' => '/wpcom/v2/posts/{postId}/publicize', + + $specific_paths = array( + 'resharePost' => '/wpcom/v2/posts/{postId}/publicize', + ); + } else { + $specific_paths = array( + 'resharePost' => '/jetpack/v4/publicize/{postId}', ); } - return array( - 'refreshConnections' => '/jetpack/v4/publicize/connections?test_connections=1', - 'resharePost' => '/jetpack/v4/publicize/{postId}', - ); + return array_merge( $commom_paths, $specific_paths ); } /** From d1762a992b796e1500f0bbe16b711e0f18871edc Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Thu, 19 Dec 2024 10:51:16 +0530 Subject: [PATCH 04/18] changelog --- .../changelog/update-unify-social-connections-schema | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/publicize/changelog/update-unify-social-connections-schema diff --git a/projects/packages/publicize/changelog/update-unify-social-connections-schema b/projects/packages/publicize/changelog/update-unify-social-connections-schema new file mode 100644 index 0000000000000..feff6a2e9064f --- /dev/null +++ b/projects/packages/publicize/changelog/update-unify-social-connections-schema @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Social: Use connections REST endpoint for initial state From cf3f9f2962c1ba21dfd659ef4917716f0763c652 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Tue, 10 Dec 2024 17:51:47 +0530 Subject: [PATCH 05/18] Update types for connection object --- .../src/social-store/types.ts | 64 +++++++++++++++---- 1 file changed, 50 insertions(+), 14 deletions(-) diff --git a/projects/js-packages/publicize-components/src/social-store/types.ts b/projects/js-packages/publicize-components/src/social-store/types.ts index fb5701967342a..9a7300e24f304 100644 --- a/projects/js-packages/publicize-components/src/social-store/types.ts +++ b/projects/js-packages/publicize-components/src/social-store/types.ts @@ -1,25 +1,61 @@ export type ConnectionStatus = 'ok' | 'broken'; export type Connection = { - id: string; - service_name: string; - label?: string; + connection_id: string; display_name: string; - external_display?: string; - external_id: string; - external_name?: string; - username: string; enabled: boolean; - done: boolean; - toggleable: boolean; - connection_id: string; - is_healthy?: boolean; - error_code?: string; - can_disconnect: boolean; - profile_picture: string; + external_handle: string; + external_id: string; + id: string; profile_link: string; + profile_picture: string; + service_label: string; + service_name: string; shared: boolean; status: ConnectionStatus; + user_id: number; + + /* DEPRECATED FIELDS */ + /** + * @deprecated + */ + can_disconnect: boolean; + /** + * @deprecated + */ + done: boolean; + /** + * @deprecated Use `status` instead. + */ + error_code?: string; + /** + * @deprecated Use `display_name` instead. + */ + external_display?: string; + /** + * @deprecated Use `external_handle` instead. + */ + external_name?: string; + /** + * @deprecated Use `status` instead. + */ + is_healthy?: boolean; + /** + * @deprecated Use `service_label` instead. + */ + label?: string; + /** + * @deprecated Use `status` instead. + */ + test_success?: boolean; + /** + * @deprecated + */ + toggleable: boolean; + /** + * @deprecated Use `external_handle` instead. + */ + username: string; }; export type ConnectionData = { From b867483734e89a8c87c4c599f5c9c305ae0f9e60 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Tue, 10 Dec 2024 17:52:05 +0530 Subject: [PATCH 06/18] Update connection actions to reflect new types --- .../social-store/actions/connection-data.ts | 72 ++++++++++--------- 1 file changed, 40 insertions(+), 32 deletions(-) diff --git a/projects/js-packages/publicize-components/src/social-store/actions/connection-data.ts b/projects/js-packages/publicize-components/src/social-store/actions/connection-data.ts index 9978276d2fa95..204c7a348a901 100644 --- a/projects/js-packages/publicize-components/src/social-store/actions/connection-data.ts +++ b/projects/js-packages/publicize-components/src/social-store/actions/connection-data.ts @@ -4,7 +4,7 @@ import { dispatch as coreDispatch } from '@wordpress/data'; import { store as editorStore } from '@wordpress/editor'; import { __, sprintf } from '@wordpress/i18n'; import { getSocialScriptData } from '../../utils/script-data'; -import { Connection } from '../types'; +import { Connection, KeyringResult } from '../types'; import { ADD_CONNECTION, DELETE_CONNECTION, @@ -23,10 +23,10 @@ import { /** * Set connections list - * @param {Array} connections - list of connections + * @param {Array} connections - list of connections * @return {object} - an action object. */ -export function setConnections( connections ) { +export function setConnections( connections: Array< Connection > ) { return { type: SET_CONNECTIONS, connections, @@ -36,11 +36,11 @@ export function setConnections( connections ) { /** * Set keyring result * - * @param {import('../types').KeyringResult} [keyringResult] - keyring result + * @param {KeyringResult} [keyringResult] - keyring result * * @return {object} - an action object. */ -export function setKeyringResult( keyringResult ) { +export function setKeyringResult( keyringResult: KeyringResult ) { return { type: SET_KEYRING_RESULT, keyringResult, @@ -49,10 +49,10 @@ export function setKeyringResult( keyringResult ) { /** * Add connection to the list - * @param {import('../types').Connection} connection - connection object + * @param {Partial} connection - connection object * @return {object} - an action object. */ -export function addConnection( connection ) { +export function addConnection( connection: Partial< Connection > ) { return { type: ADD_CONNECTION, connection, @@ -65,7 +65,7 @@ export function addConnection( connection ) { * * @return {object} Switch connection enable-status action. */ -export function toggleConnection( connectionId ) { +export function toggleConnection( connectionId: string ) { return { type: TOGGLE_CONNECTION, connectionId, @@ -74,18 +74,16 @@ export function toggleConnection( connectionId ) { /** * Merge connections with fresh connections. - * @param {Array} freshConnections - list of fresh connections + * @param {Array< Connection >} freshConnections - list of fresh connections * @return {Function} - a function to merge connections. */ -export function mergeConnections( freshConnections ) { +export function mergeConnections( freshConnections: Array< Connection > ) { return function ( { dispatch, select } ) { // Combine current connections with new connections. - const prevConnections = select.getConnections(); + const prevConnections: Array< Connection > = select.getConnections(); const connections = []; const defaults = { - done: false, enabled: true, - toggleable: true, }; /* @@ -103,8 +101,6 @@ export function mergeConnections( freshConnections ) { ...defaults, ...prevConnection, ...freshConnection, - shared: prevConnection?.shared, - is_healthy: freshConnection.test_success, }; connections.push( connection ); } @@ -119,7 +115,7 @@ export function mergeConnections( freshConnections ) { * * @return {object} - an action object. */ -export function createAbortController( abortController, requestType ) { +export function createAbortController( abortController: AbortController, requestType: string ) { return { type: ADD_ABORT_CONTROLLER, requestType, @@ -134,7 +130,7 @@ export function createAbortController( abortController, requestType ) { * * @return {object} - an action object. */ -export function removeAbortControllers( requestType ) { +export function removeAbortControllers( requestType: string ) { return { type: REMOVE_ABORT_CONTROLLERS, requestType, @@ -148,7 +144,7 @@ export function removeAbortControllers( requestType ) { * * @return {Function} - a function to abort a request. */ -export function abortRequest( requestType ) { +export function abortRequest( requestType: string ) { return function ( { dispatch, select } ) { const abortControllers = select.getAbortControllers( requestType ); @@ -194,7 +190,10 @@ export function refreshConnectionTestResults( syncToMeta = false ) { dispatch( createAbortController( abortController, REQUEST_TYPE_REFRESH_CONNECTIONS ) ); // Pass the abort controller signal to the fetch request. - const freshConnections = await apiFetch( { path, signal: abortController.signal } ); + const freshConnections = await apiFetch< Array< Connection > >( { + path, + signal: abortController.signal, + } ); dispatch( mergeConnections( freshConnections ) ); @@ -218,7 +217,7 @@ export function refreshConnectionTestResults( syncToMeta = false ) { */ export function syncConnectionsToPostMeta() { return function ( { registry, select } ) { - const connections = select.getConnections(); + const connections: Array< Connection > = select.getConnections(); // Update post metadata. return registry.dispatch( editorStore ).editPost( { @@ -234,7 +233,7 @@ export function syncConnectionsToPostMeta() { * @param {boolean} syncToMeta - Whether to sync the connection state to the post meta. * @return {object} Switch connection enable-status action. */ -export function toggleConnectionById( connectionId, syncToMeta = true ) { +export function toggleConnectionById( connectionId: string, syncToMeta = true ) { return function ( { dispatch } ) { dispatch( toggleConnection( connectionId ) ); @@ -251,7 +250,7 @@ export function toggleConnectionById( connectionId, syncToMeta = true ) { * * @return {object} Delete connection action. */ -export function deleteConnection( connectionId ) { +export function deleteConnection( connectionId: string ) { return { type: DELETE_CONNECTION, connectionId, @@ -266,7 +265,7 @@ export function deleteConnection( connectionId ) { * * @return {object} Deleting connection action. */ -export function deletingConnection( connectionId, deleting = true ) { +export function deletingConnection( connectionId: string, deleting = true ) { return { type: DELETING_CONNECTION, connectionId, @@ -283,7 +282,13 @@ export function deletingConnection( connectionId, deleting = true ) { * * @return {boolean} Whether the connection was deleted. */ -export function deleteConnectionById( { connectionId, showSuccessNotice = true } ) { +export function deleteConnectionById( { + connectionId, + showSuccessNotice = true, +}: { + connectionId: string; + showSuccessNotice?: boolean; +} ) { return async function ( { registry, dispatch } ) { const { createErrorNotice, createSuccessNotice } = coreDispatch( globalNoticesStore ); @@ -340,7 +345,10 @@ let uniqueId = 1; * @param {Record} optimisticData - Optimistic data for the connection. * @return {void} */ -export function createConnection( data, optimisticData = {} ) { +export function createConnection( + data: Record< string, unknown >, + optimisticData: Partial< Connection > = {} +) { return async function ( { registry, dispatch } ) { const { createErrorNotice, createSuccessNotice } = coreDispatch( globalNoticesStore ); @@ -410,12 +418,12 @@ export function createConnection( data, optimisticData = {} ) { /** * Updates a connection. * - * @param {string} connectionId - Connection ID to update. - * @param {Record} data - The data. + * @param {string} connectionId - Connection ID to update. + * @param {Partial< Connection >} data - The data. * * @return {object} Delete connection action. */ -export function updateConnection( connectionId, data ) { +export function updateConnection( connectionId: string, data: Partial< Connection > ) { return { type: UPDATE_CONNECTION, connectionId, @@ -442,11 +450,11 @@ export function updatingConnection( connectionId, updating = true ) { /** * Sets the reconnecting account. * - * @param {import('../types').Connection} reconnectingAccount - Account being reconnected. + * @param {Connection} reconnectingAccount - Account being reconnected. * * @return {object} Reconnecting account action. */ -export function setReconnectingAccount( reconnectingAccount ) { +export function setReconnectingAccount( reconnectingAccount: Connection ) { return { type: SET_RECONNECTING_ACCOUNT, reconnectingAccount, @@ -460,7 +468,7 @@ export function setReconnectingAccount( reconnectingAccount ) { * @param {Record} data - The data for API call. * @return {void} */ -export function updateConnectionById( connectionId, data ) { +export function updateConnectionById( connectionId: string, data: Record< string, unknown > ) { return async function ( { dispatch, select } ) { const { createErrorNotice, createSuccessNotice } = coreDispatch( globalNoticesStore ); @@ -512,7 +520,7 @@ export function updateConnectionById( connectionId, data ) { * * @return {object} - An action object. */ -export function toggleConnectionsModal( isOpen ) { +export function toggleConnectionsModal( isOpen: boolean ) { return { type: TOGGLE_CONNECTIONS_MODAL, isOpen, From 92ed41ddb399b5f5836729a73531a7b6af90abb0 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 13 Dec 2024 14:13:28 +0530 Subject: [PATCH 07/18] Mark 'id' as deprecated --- .../publicize-components/src/social-store/types.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/projects/js-packages/publicize-components/src/social-store/types.ts b/projects/js-packages/publicize-components/src/social-store/types.ts index 9a7300e24f304..9f0c6ec9a8e95 100644 --- a/projects/js-packages/publicize-components/src/social-store/types.ts +++ b/projects/js-packages/publicize-components/src/social-store/types.ts @@ -6,7 +6,6 @@ export type Connection = { enabled: boolean; external_handle: string; external_id: string; - id: string; profile_link: string; profile_picture: string; service_label: string; @@ -36,6 +35,10 @@ export type Connection = { * @deprecated Use `external_handle` instead. */ external_name?: string; + /** + * @deprecated Use `connection_id` instead. + */ + id?: string; /** * @deprecated Use `status` instead. */ @@ -51,11 +54,11 @@ export type Connection = { /** * @deprecated */ - toggleable: boolean; + toggleable?: boolean; /** * @deprecated Use `external_handle` instead. */ - username: string; + username?: string; }; export type ConnectionData = { From ea06504d7cf567b97afba147cc466e5e3a321d4f Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 13 Dec 2024 14:14:46 +0530 Subject: [PATCH 08/18] Add changelog --- .../changelog/update-social-schema-front-end-changes | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/js-packages/publicize-components/changelog/update-social-schema-front-end-changes diff --git a/projects/js-packages/publicize-components/changelog/update-social-schema-front-end-changes b/projects/js-packages/publicize-components/changelog/update-social-schema-front-end-changes new file mode 100644 index 0000000000000..e3a61d622179e --- /dev/null +++ b/projects/js-packages/publicize-components/changelog/update-social-schema-front-end-changes @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated the shape of connections object following the schema update From 86395f5a6b82e4cc3d525d75ff6a35175baca298 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 13 Dec 2024 14:18:07 +0530 Subject: [PATCH 09/18] Deprecated fields should be optional --- .../publicize-components/src/social-store/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/js-packages/publicize-components/src/social-store/types.ts b/projects/js-packages/publicize-components/src/social-store/types.ts index 9f0c6ec9a8e95..e74a354fa53e1 100644 --- a/projects/js-packages/publicize-components/src/social-store/types.ts +++ b/projects/js-packages/publicize-components/src/social-store/types.ts @@ -18,11 +18,11 @@ export type Connection = { /** * @deprecated */ - can_disconnect: boolean; + can_disconnect?: boolean; /** * @deprecated */ - done: boolean; + done?: boolean; /** * @deprecated Use `status` instead. */ From 768d3c5c9e8ba01c8a5429c2da39bb69b6882b57 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 13 Dec 2024 14:20:41 +0530 Subject: [PATCH 10/18] Fix TS error --- .../manage-connections-modal/confirmation-form/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx b/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx index f99e92f74e942..a07f892d38a56 100644 --- a/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx +++ b/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx @@ -162,7 +162,7 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir display_name: accountInfo?.label, profile_picture: accountInfo?.profile_picture, service_name: service.ID, - external_id: external_user_ID, + external_id: external_user_ID.toString(), } ); onComplete(); From f8f696c6ed95f26e2747f80c92de83b37c47d02b Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 13 Dec 2024 15:17:07 +0530 Subject: [PATCH 11/18] Update unit tests --- .../actions/test/connection-data.js | 26 +++---------------- .../src/utils/test-utils.js | 12 +++------ 2 files changed, 7 insertions(+), 31 deletions(-) diff --git a/projects/js-packages/publicize-components/src/social-store/actions/test/connection-data.js b/projects/js-packages/publicize-components/src/social-store/actions/test/connection-data.js index 86b84bc27c9b3..2e6efa6235e99 100644 --- a/projects/js-packages/publicize-components/src/social-store/actions/test/connection-data.js +++ b/projects/js-packages/publicize-components/src/social-store/actions/test/connection-data.js @@ -119,22 +119,14 @@ describe( 'Social store actions: connectionData', () => { const freshConnections = connections.map( connection => ( { ...connection, - test_success: false, + status: 'broken', } ) ); registry.dispatch( socialStore ).mergeConnections( freshConnections ); const connectionsAfterMerge = registry.select( socialStore ).getConnections(); - expect( connectionsAfterMerge ).toEqual( - freshConnections.map( connection => ( { - ...connection, - // These 3 are added while merging - done: false, - toggleable: true, - is_healthy: false, - } ) ) - ); + expect( connectionsAfterMerge ).toEqual( freshConnections ); } ); } ); @@ -156,10 +148,7 @@ describe( 'Social store actions: connectionData', () => { if ( path.startsWith( refreshConnections ) ) { return connections.map( connection => ( { ...connection, - can_refresh: false, - refresh_url: '', - test_message: 'Some message', - test_success: true, + status: 'broken', } ) ); } @@ -184,14 +173,7 @@ describe( 'Social store actions: connectionData', () => { expect( connectionsAfterRefresh ).toEqual( connections.map( connection => ( { ...connection, - can_refresh: false, - refresh_url: '', - test_message: 'Some message', - test_success: true, - // These 3 are added while merging - done: false, - toggleable: true, - is_healthy: true, + status: 'broken', } ) ) ); diff --git a/projects/js-packages/publicize-components/src/utils/test-utils.js b/projects/js-packages/publicize-components/src/utils/test-utils.js index fa2f326be7bc6..b502817d8f05c 100644 --- a/projects/js-packages/publicize-components/src/utils/test-utils.js +++ b/projects/js-packages/publicize-components/src/utils/test-utils.js @@ -33,34 +33,28 @@ export const testPost = { export const connections = [ { - id: '123456789', service_name: 'facebook', display_name: 'Some name', profile_picture: 'https://wordpress.com/some-url-of-a-picture', - username: 'username', + external_handle: 'username', enabled: false, connection_id: '987654321', - test_success: true, }, { - id: '234567891', service_name: 'tumblr', display_name: 'Some name', profile_picture: 'https://wordpress.com/some-url-of-another-picture', - username: 'username', + external_handle: 'username', enabled: false, connection_id: '198765432', - test_success: false, }, { - id: '345678912', service_name: 'mastodon', display_name: 'somename', profile_picture: 'https://wordpress.com/some-url-of-one-more-picture', - username: '@somename@mastodon.social', + external_handle: '@somename@mastodon.social', enabled: false, connection_id: '219876543', - test_success: 'must_reauth', }, ]; From a414dc4a0b66eb26fb09ac42b71e965656e0733e Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 13 Dec 2024 15:34:54 +0530 Subject: [PATCH 12/18] Replace/remove deprecated props usage --- .../connection-management/connection-info.tsx | 2 +- .../connection-management/connection-name.tsx | 6 +-- .../connection-management/reconnect.tsx | 2 +- .../form/broken-connections-notice.tsx | 40 ++++++------------- .../src/components/form/connections-list.tsx | 9 ++--- .../form/unsupported-connections-notice.tsx | 6 ++- .../components/form/use-connection-state.ts | 9 ++--- .../src/components/services/custom-inputs.tsx | 2 +- .../social-post-modal/post-preview.tsx | 4 +- .../social-post-modal/preview-section.tsx | 2 +- .../social-store/actions/connection-data.ts | 8 ++-- .../social-store/reducer/connection-data.ts | 6 +-- .../social-store/selectors/connection-data.js | 9 +---- 13 files changed, 38 insertions(+), 67 deletions(-) diff --git a/projects/js-packages/publicize-components/src/components/connection-management/connection-info.tsx b/projects/js-packages/publicize-components/src/components/connection-management/connection-info.tsx index ebd65c1ccea8a..8b4f1bf73b6f5 100644 --- a/projects/js-packages/publicize-components/src/components/connection-management/connection-info.tsx +++ b/projects/js-packages/publicize-components/src/components/connection-management/connection-info.tsx @@ -27,7 +27,7 @@ export function ConnectionInfo( { connection, service }: ConnectionInfoProps ) {
diff --git a/projects/js-packages/publicize-components/src/components/connection-management/connection-name.tsx b/projects/js-packages/publicize-components/src/components/connection-management/connection-name.tsx index 7bdd740496e47..d28420646ea29 100644 --- a/projects/js-packages/publicize-components/src/components/connection-management/connection-name.tsx +++ b/projects/js-packages/publicize-components/src/components/connection-management/connection-name.tsx @@ -27,12 +27,10 @@ export function ConnectionName( { connection }: ConnectionNameProps ) { return (
{ ! connection.profile_link ? ( - - { connection.display_name || connection.external_name } - + { connection.display_name } ) : ( - { connection.display_name || connection.external_display || connection.external_name } + { connection.display_name } ) } { isUpdating ? ( diff --git a/projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx b/projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx index 22bf30e2e64d2..889798f31cd9b 100644 --- a/projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx +++ b/projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx @@ -63,7 +63,7 @@ export function Reconnect( { connection, service, variant = 'link' }: ReconnectP const formData = new FormData(); if ( service.ID === 'mastodon' ) { - formData.set( 'instance', connection.external_display ); + formData.set( 'instance', connection.external_handle ); } if ( service.ID === 'bluesky' ) { 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 ffb87494effae..134cfdb94a2c9 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 @@ -1,37 +1,31 @@ import { Button } from '@automattic/jetpack-components'; import { ExternalLink } from '@wordpress/components'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { createInterpolateElement, Fragment } from '@wordpress/element'; import { __, _x } from '@wordpress/i18n'; import usePublicizeConfig from '../../hooks/use-publicize-config'; -import useSocialMediaConnections from '../../hooks/use-social-media-connections'; import { store } from '../../social-store'; import { Connection } from '../../social-store/types'; -import { checkConnectionCode } from '../../utils/connections'; import { getSocialScriptData } from '../../utils/script-data'; import Notice from '../notice'; import { useServiceLabel } from '../services/use-service-label'; import styles from './styles.module.scss'; export const BrokenConnectionsNotice: React.FC = () => { - const { connections } = useSocialMediaConnections(); - - const brokenConnections = connections.filter( connection => { - return ( - connection.status === 'broken' || - // This is a legacy check for connections that are not healthy. - // TODO remove this check when we are sure that all connections have - // the status property (same schema for connections endpoints), e.g. on Simple/Atomic sites - checkConnectionCode( connection, 'broken' ) - ); - } ); + const brokenConnections = useSelect( select => select( store ).getBrokenConnections(), [] ); const { connectionsPageUrl } = usePublicizeConfig(); - const { useAdminUiV1 } = getSocialScriptData().feature_flags; - const { openConnectionsModal } = useDispatch( store ); + const getServiceLabel = useServiceLabel(); + + if ( ! brokenConnections.length ) { + return null; + } + + const { useAdminUiV1 } = getSocialScriptData().feature_flags; + const fixLink = useAdminUiV1 ? (