Skip to content

PCI Sidebar: Fix multiple contact messages #4097

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
acicovic merged 7 commits into from
Mar 30, 2026
Merged

PCI Sidebar: Fix multiple contact messages #4097

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bb8b681
PCI Sidebar: Fix multiple contact messages
acicovic Mar 26, 2026
e7c9bc2
Initial plan
Copilot Mar 26, 2026
2eea2c2
Fix E2E tests: update selectors for tab-level VerifyCredentials message
Copilot Mar 26, 2026
e601df3
Attempt to fix failing E2E tests
acicovic Mar 26, 2026
2175222
Fix typo
acicovic Mar 26, 2026
1fd45ce
Merge pull request #4098 from Parsely/copilot/sub-pr-4097
acicovic Mar 26, 2026
b395fdf
getSidebarPanelOrTabMessage(): Avoid timeout-based state fallback
acicovic Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion build/content-helper/editor-sidebar.asset.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url', 'wp-wordcount'), 'version' => 'b3915e4d8c96c21e0c53');
<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url', 'wp-wordcount'), 'version' => 'c9080d57a24fb01fef39');
2 changes: 1 addition & 1 deletion build/content-helper/editor-sidebar.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/content-helper/common/verify-credentials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
* @since 3.9.0
*/
interface VerifyCredentialsProps {
children: React.JSX.Element|JSX.Element[];
children: React.ReactNode;
}

/**
Expand Down
120 changes: 56 additions & 64 deletions src/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@ export const SidebarToolsTab = (

return (
<Panel>
{ permissions.TitleSuggestions &&
<VerifyCredentials>
{ permissions.TitleSuggestions &&
<PanelBody
title={ __( 'Title Suggestions', 'wp-parsely' ) }
initialOpen={ settings.TitleSuggestions.Open }
Expand All @@ -71,36 +72,32 @@ export const SidebarToolsTab = (
trackToggle( 'title_suggestions', next );
} }
>
<VerifyCredentials>
<TitleSuggestionsPanel />
</VerifyCredentials>
<TitleSuggestionsPanel />
</PanelBody>
}
}

{
permissions.ExcerptSuggestions &&
<PostTypeSupportCheck supportKeys="excerpt">
<PanelBody
title={ __( 'Excerpt Suggestions', 'wp-parsely' ) }
initialOpen={ settings.ExcerptSuggestions.Open }
onToggle={ ( next ) => {
setSettings( {
ExcerptSuggestions: {
...settings.ExcerptSuggestions,
Open: next,
},
} );
trackToggle( 'excerpt_suggestions', next );
} }
>
<VerifyCredentials>
{
permissions.ExcerptSuggestions &&
<PostTypeSupportCheck supportKeys="excerpt">
<PanelBody
title={ __( 'Excerpt Suggestions', 'wp-parsely' ) }
initialOpen={ settings.ExcerptSuggestions.Open }
onToggle={ ( next ) => {
setSettings( {
ExcerptSuggestions: {
...settings.ExcerptSuggestions,
Open: next,
},
} );
trackToggle( 'excerpt_suggestions', next );
} }
>
<PostExcerptSuggestions />
</VerifyCredentials>
</PanelBody>
</PostTypeSupportCheck>
}
</PanelBody>
</PostTypeSupportCheck>
}

{ permissions.SmartLinking &&
{ permissions.SmartLinking &&
<PanelBody
title={ __( 'Smart Linking', 'wp-parsely' ) }
initialOpen={ settings.SmartLinking.Open }
Expand All @@ -114,47 +111,42 @@ export const SidebarToolsTab = (
trackToggle( 'smart_linking', next );
} }
>
<VerifyCredentials>
<SmartLinkingPanel
context={ SmartLinkingPanelContext.ContentHelperSidebar }
permissions={ permissions }
/>
</VerifyCredentials>
<SmartLinkingPanel
context={ SmartLinkingPanelContext.ContentHelperSidebar }
permissions={ permissions }
/>
</PanelBody>
}

<PanelBody
title={ __( 'Related Posts', 'wp-parsely' ) }
initialOpen={ settings.RelatedPosts.Open }
onToggle={ ( next ) => {
setSettings( {
RelatedPosts: {
...settings.RelatedPosts,
Open: next,
},
} );
trackToggle( 'related_top_posts', next );
} }
>
{
<VerifyCredentials>
<RelatedPostsPanel />
</VerifyCredentials>
}
</PanelBody>

{ postId > 0 && isPostTrackable && permissions.TrafficBoost &&
<Button
className="boost-engagement"
href={ `/wp-admin/admin.php?page=parsely-dashboard-page#/engagement-boost/${ postId }` }
rel="noopener"
target="_blank"
variant="secondary"
<PanelBody
title={ __( 'Related Posts', 'wp-parsely' ) }
initialOpen={ settings.RelatedPosts.Open }
onToggle={ ( next ) => {
setSettings( {
RelatedPosts: {
...settings.RelatedPosts,
Open: next,
},
} );
trackToggle( 'related_top_posts', next );
} }
>
{ __( 'Boost Engagement', 'wp-parsely' ) }
<Icon icon={ external } size={ 18 } className="parsely-external-link-icon" />
</Button>
}
<RelatedPostsPanel />
</PanelBody>

{ postId > 0 && isPostTrackable && permissions.TrafficBoost &&
<Button
className="boost-engagement"
href={ `/wp-admin/admin.php?page=parsely-dashboard-page#/engagement-boost/${ postId }` }
rel="noopener"
target="_blank"
variant="secondary"
>
{ __( 'Boost Engagement', 'wp-parsely' ) }
<Icon icon={ external } size={ 18 } className="parsely-external-link-icon" />
</Button>
}
</VerifyCredentials>
</Panel>
);
};
9 changes: 3 additions & 6 deletions tests/e2e/specs/content-helper/top-bar-icon.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
import {
VALID_API_SECRET,
VALID_SITE_ID,
setSidebarPanelExpanded,
getSidebarPanelOrTabMessage,
setSiteKeys,
} from '../../utils';

Expand Down Expand Up @@ -152,13 +152,10 @@ class Utils {
await setSiteKeys( page, siteId, apiSecret );
await this.admin.createNewPost();

// Click the top bar icon and // Expand the Related Posts panel.
// Click the top bar icon.
await page.getByRole( 'button', { name: 'Parse.ly' } ).click();
setSidebarPanelExpanded( page, 'Related Posts', true );

return await page.locator(
'.wp-parsely-content-helper div.components-panel__body.is-opened ' + selector
).textContent() ?? '';
return getSidebarPanelOrTabMessage( page, selector );
}

/**
Expand Down
49 changes: 45 additions & 4 deletions tests/e2e/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,56 @@
admin: Admin, selector: string = '.content-helper-error-message'
): Promise<string> => {
const page = admin.page;
const contentHelperMessageSelector = '.wp-parsely-content-helper div.components-panel__body.is-opened ' + selector;

await admin.createNewPost();

// Show the Content Intelligence Sidebar and expand the Related Posts panel.
// Show the Content Intelligence Sidebar.
await page.getByRole( 'button', { name: 'Parse.ly' } ).click();
await setSidebarPanelExpanded( page, 'Related Posts', true );

return await page.locator( contentHelperMessageSelector ).textContent() ?? '';
return getSidebarPanelOrTabMessage( page, selector );
};

/**
* Gets a message from the PCI Editor Sidebar, expanding the Related Posts
* panel when available, or reading the message from the tab level otherwise.
*
* When credentials are present, the Related Posts panel is visible and the
* message is found inside the opened panel body. When credentials are absent,
* the Related Posts panel is not rendered and the message appears at the tab
* level instead.
*
* @since 3.22.1
*
* @param {Page} page The Page object of the calling function.
* @param {string} selector The selector from which to extract the message.
*
* @return {Promise<string>} The message returned.
*/
export const getSidebarPanelOrTabMessage = async (
page: Page, selector: string = '.content-helper-error-message'
): Promise<string> => {
// Wait for the sidebar content to render.
await page.locator( '.wp-parsely-content-helper' ).waitFor( { state: 'visible' } );

const relatedPostsButton = page.getByRole( 'button', { name: 'Related Posts' } );
const hasRelatedPostsPanel = ( await relatedPostsButton.count() ) > 0;

// When credentials are absent, the Related Posts panel is not shown and
// the message appears at the tab level.
if ( hasRelatedPostsPanel ) {
await setSidebarPanelExpanded( page, 'Related Posts', true );
const panelMessage = page.locator(
'.wp-parsely-content-helper div.components-panel__body.is-opened ' + selector
);
await panelMessage.waitFor( { state: 'visible' } );

Check failure on line 94 in tests/e2e/utils.ts

View workflow job for this annotation

GitHub Actions / E2E against WordPress latest

[chromium] › tests/e2e/specs/content-helper/related-posts-panel-filters.spec.ts:44:6 › PCH Editor Sidebar Related Post panel filters › Should attempt to fetch results when a Site ID and API Secret are provided 

  1) [chromium] › tests/e2e/specs/content-helper/related-posts-panel-filters.spec.ts:44:6 › PCH Editor Sidebar Related Post panel filters › Should attempt to fetch results when a Site ID and API Secret are provided 
    TimeoutError: locator.waitFor: Timeout 10000ms exceeded.
    Call log:
      - waiting for locator('.wp-parsely-content-helper div.components-panel__body.is-opened .related-posts-loading-message') to be visible


       at ../utils.ts:94

      92 | 			'.wp-parsely-content-helper div.components-panel__body.is-opened ' + selector
      93 | 		);
    > 94 | 		await panelMessage.waitFor( { state: 'visible' } );
         | 		                   ^
      95 |
      96 | 		return ( await panelMessage.textContent() ) ?? '';
      97 | 	}
        at getSidebarPanelOrTabMessage (/home/runner/work/wp-parsely/wp-parsely/tests/e2e/utils.ts:94:22)
        at /home/runner/work/wp-parsely/wp-parsely/tests/e2e/specs/content-helper/related-posts-panel-filters.spec.ts:45:11

return ( await panelMessage.textContent() ) ?? '';
}

const tabMessage = page.locator( '.wp-parsely-content-helper ' + selector );
await tabMessage.waitFor( { state: 'visible' } );

return ( await tabMessage.textContent() ) ?? '';
};

/**
Expand Down
Loading