Add dashboard wincher connect #20107

KaisZaoualiWincher · 2023-04-03T16:59:15Z

Context

Display the Wincher performance report component on the dashboard even for not logged-in users, and add a reconnect button and fake table data.

Summary

This PR can be summarized in the following changelog entry:

Display the Wincher performance report component for not logged-in users, on the dashboard.
Add connect button.
Add fake table data.
Add table description.

Test instructions

Go to the dashboard.
Check "Top performing keyphrases on your site" section (i.e. Wincher performance component)

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

With a not connected user, the Wincher performance component should be displayed.
Connect button should invoke login action

Relevant test scenarios

Changes should be tested with the browser console open
Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
Changes should be tested on different editors (Block/Classic/Elementor/other)
Changes should be tested on different browsers
Changes should be tested on multisite

Test instructions for QA when the code is in the RC

QA should use the same steps as above.

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

Wincher performance report component should be able to display data without regression for logged-in users.
Edge cases (e.g. unauthorized to fetch table data, empty data, etc) handling should work without regression.

UI changes

This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

I have written documentation for this change.

Quality assurance

I have tested this code to the best of my abilities.
During testing, I had activated all plugins Yoast SEO provides integrations for.
I have added unit tests to verify the code works as intended.
If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
I have written this PR in accordance with my team's definition of done.

Innovation

No innovation project is applicable for this PR.
This PR falls under an innovation project. I have attached the innovation label and noted the work hours.

Fixes #

skrivanos · 2023-04-12T13:15:45Z

packages/js/src/components/WincherPerformanceReport.js

+    -moz-filter: blur(2px);
+    -o-filter: blur(2px);
+    -ms-filter: blur(2px);
+    filter: blur(2px);


IMO we should have a bit more blur here. Like 4-5px

skrivanos · 2023-04-12T13:17:21Z

packages/js/src/components/WincherPerformanceReport.js

-			{ isLoggedIn && data && ! isEmpty( data ) && ! isEmpty( data.results ) && <Fragment>
-				<TableExplanation />
+			{ data && ! isEmpty( data ) && ! isEmpty( data.results ) && <Fragment>
+				<TableExplanation isLoggedIn={ isLoggedIn } />

 				<WincherSEOPerformanceTableWrapper>
 					<table className="yoast yoast-table">


I think we ought to disable pointer events and user select on the table (not wrapper) if it's blurred:

pointer-events: none; user-select: none;

oksanayoast · 2023-04-13T07:00:11Z

Hi @KaisZaoualiWincher I have several questions:

Could you please provide screenshots for each user case you are mentioning in the description:
- when the user is logged out from Wincher and fake data is displayed
- you mentioned the "reconnect button": is it a separate case?
Should we display a success/error message after the connection is performed?
Where should it be displayed? Screenshots would also help here.
Example in post editor screen: You have successfully connected to Wincher! You can now track the SEO performance for the keyphrase(s) of this page.
After the successful connection - will the whole page reload to get the new data, or just the widget or its section will be refreshed via AJAX?
What happens when the Wincher integration is switched off?

KaisZaoualiWincher · 2023-04-13T11:52:36Z

Hi @KaisZaoualiWincher I have several questions:

Could you please provide screenshots for each user case you are mentioning in the description:

when the user is logged out from Wincher and fake data is displayed

you mentioned the "reconnect button": is it a separate case?

Should we display a success/error message after the connection is performed?
Where should it be displayed? Screenshots would also help here.
Example in post editor screen: You have successfully connected to Wincher! You can now track the SEO performance for the keyphrase(s) of this page.

After the successful connection - will the whole page reload to get the new data, or just the widget or its section will be refreshed via AJAX?

What happens when the Wincher integration is switched off?

Hi @oksanayoast!

No, it's the same use case i.e. when a user is logged out, now we display a blurred table with fake data, and a "connect with Wincher" button. Previously we were not displaying the Wincher SEO performance report on the dashboard page if the user is logged out.
- Before:
- After:
We need to have a custom success alert. I will add it.
No reload, the component is already mounted.
The Wincher SEO performance report component will not be displayed. This has not been impacted by the current PR.

KaisZaoualiWincher · 2023-04-13T15:04:57Z

Two success alerts are now added to the Wincher connect action:

Successful connect + user already tracking keyphrases:

Successful connect + user has not tracked keyphrases yet:

leonidasmi · 2023-04-19T11:25:18Z

Use a shortlink instead, for the Get More Insights... link
A new shortlink for the Connect with Wincher to get started link
Do we want to link to our integration card, so that we prompt users to deactivate it if they want?
Check with UX, in general and with Oksana about the above.

pls78 · 2023-04-27T12:31:50Z

Hey @KaisZaoualiWincher 👋 thanks for addressing the first two items on the list above, we forgot to specify that it was meant as a reminder for us! 🙂

BobBreukhoven · 2023-04-28T08:47:37Z

@KaisZaoualiWincher can you come up with a suggestion, on how we can show the user, that they can toggle the Wincher integration "off", in our "integration settings". We should tell the users where they can deactivate it. Something like this

CC: @uxkai @manuelaugustin
FYI: @jonoalderson

jonoalderson · 2023-04-28T08:49:45Z

But the integration isn't active at this point, right?
And, nobody looking at this will have any idea what a Wincher is 😆

uxkai · 2023-04-28T08:56:02Z

@jonoalderson As I understand it, the Wincher integration is active (enabled on the 'Integrations' page), but the user is not currently logged in or connected to Wincher.

jonoalderson · 2023-04-28T09:03:18Z

Ah, catching up; all good! :)

KaisZaoualiWincher · 2023-05-01T15:59:14Z

The Wincher performance report is moved to its own widget on the dashboard:

The Wincher performance report widget can be disabled via the screen options separately from the Yoast widget.
Integration can be disabled from the integrations page.
Unnecessary Wincher integration code has been removed from the Yoast widget

pls78 · 2023-05-02T08:03:15Z

Hey @KaisZaoualiWincher 👋 in the error management could you please also take into account the case the user goes offline? For example, if I now turn the network off and click the Connect to Wincher button I get an uncaught error ( WincherDashboardWidget::onConnect method tries to build the url anyway) 🙏

KaisZaoualiWincher · 2023-05-02T16:26:59Z

Hey @KaisZaoualiWincher 👋 in the error management could you please also take into account the case the user goes offline? For example, if I now turn the network off and click the Connect to Wincher button I get an uncaught error ( WincherDashboardWidget::onConnect method tries to build the url anyway) 🙏

Hi @pls78 👋
For the network disconnection issue related to onConnect shall we display an alert, or a notification, or only handle the exception?

BobBreukhoven · 2023-05-03T06:42:05Z

@KaisZaoualiWincher please see our "Storybook": https://ui-library.yoast.com/?path=/docs/1-elements-alert--variants#variants

There we have different variants of "Alerts" that we use in our App, and if it is an error, we use the "error alert".

CC: @uxkai @pls78

pls78 · 2023-05-05T07:11:29Z

Hello @KaisZaoualiWincher! As @BobBreukhoven said, we take care of error states by catching them and showing an alert 👍

KaisZaoualiWincher · 2023-05-05T09:46:21Z

Hi @BobBreukhoven and @pls78! Thank you for the link. I will add an error alert to handle the network disconnection error.

KaisZaoualiWincher · 2023-05-05T21:44:14Z

Hey @KaisZaoualiWincher 👋 in the error management could you please also take into account the case the user goes offline? For example, if I now turn the network off and click the Connect to Wincher button I get an uncaught error ( WincherDashboardWidget::onConnect method tries to build the url anyway) 🙏

Hi @pls78!

Network errors should be handled now:

uxkai · 2023-05-09T07:42:50Z

Hi @KaisZaoualiWincher, would it be possible to decrease the margin below the error alert slightly, so it matches with the margin below "Connect with Wincher to get started."? 😄

KaisZaoualiWincher · 2023-05-09T16:08:55Z

Hi @KaisZaoualiWincher, would it be possible to decrease the margin below the error alert slightly, so it matches with the margin below "Connect with Wincher to get started."? 😄

Should be fixed, for all the user message alerts inside the Wincher performance report in the dashboard.

vraja-pro · 2023-05-15T14:26:08Z

I'm getting errors in the console when I'm on Dashboard with no connection:

vraja-pro · 2023-05-15T14:31:06Z

packages/js/src/components/WincherPerformanceReport.js

+};
+
+WincherSEOPerformanceTable.propTypes = {
+	isBlurred: PropTypes.object,


Suggested change

isBlurred: PropTypes.object,

isBlurred: PropTypes.bool,

vraja-pro · 2023-05-15T14:32:05Z

packages/js/src/components/WincherPerformanceReport.js

+
+Cell.propTypes = {
+	isBlurred: PropTypes.bool,
+	children: PropTypes.object,


Suggested change

children: PropTypes.object,

children: PropTypes.oneOfType([

PropTypes.string,

PropTypes.number,

PropTypes.object

]),

pls78 · 2023-05-16T11:54:47Z

Hi @KaisZaoualiWincher 👋 Can you take a look at the errors in the screenshot provided by @vraja-pro ? 🙏

KaisZaouali · 2023-05-17T07:46:43Z

Hi @KaisZaoualiWincher 👋 Can you take a look at the errors in the screenshot provided by @vraja-pro ? 🙏

Hi @pls78 👋 Errors should be fixed.

Hi @vraja-pro 👋 Thank you for the good catches. It's strange that no error is thrown for me, and I couldn't even reproduce it. Anyway, it should be fixed by now.

Display wincher performance report if user not logged in

02ebf18

yoastbot added the community-patch label Apr 3, 2023

KaisZaoualiWincher force-pushed the feature/add-dashboard-wincher-connect branch from b6ffbfc to b4ee40d Compare April 3, 2023 23:11

This was referenced Apr 12, 2023

Feature/wincher upgrade callouts #20144

Closed

Feature/wincher upgrade callouts wincher-ab/wordpress-seo#1

Closed

skrivanos suggested changes Apr 12, 2023

View reviewed changes

KaisZaoualiWincher added 3 commits April 13, 2023 03:32

Replace wincher connect explanation by connect button

44667d2

Change wincher table explanation in dashboard

82c22e5

Disable wincher view link for not logged in users

4514836

KaisZaoualiWincher force-pushed the feature/add-dashboard-wincher-connect branch from b4ee40d to 4514836 Compare April 13, 2023 02:37

Add wincher connect success alerts in dashboard

eb8fd55

KaisZaoualiWincher added 2 commits April 24, 2023 14:04

Use a shortlink for wincher login

087b7de

Use a new shortlink for dashboard-about-wincher link

7f8bfa9

pls78 self-assigned this Apr 27, 2023

Move Wincher SEO performance report to its own widget on dashboard

5361f37

KaisZaoualiWincher force-pushed the feature/add-dashboard-wincher-connect branch from d2d7936 to 5361f37 Compare May 1, 2023 14:06

manuelaugustin mentioned this pull request May 3, 2023

Add Wincher upgrade callouts #20239

Closed

16 tasks

Add network error handling on Wincher connect

2c9ba39

Fix Wincher performance alerts' margin bottom

178c028

jeroenrotty added the enhancement label May 12, 2023

vraja-pro assigned vraja-pro and unassigned pls78 May 15, 2023

vraja-pro mentioned this pull request May 15, 2023

Add dashboard wincher connect #20320

Closed

vraja-pro removed their assignment May 15, 2023

vraja-pro reviewed May 15, 2023

View reviewed changes

Fix WincherPerformanceReport warnings

2b266db

vraja-pro merged commit ac2f096 into Yoast:trunk May 17, 2023

leonidasmi added this to the 20.9 milestone May 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add dashboard wincher connect #20107

Add dashboard wincher connect #20107

KaisZaoualiWincher commented Apr 3, 2023 •

edited

Loading

skrivanos Apr 12, 2023

skrivanos Apr 12, 2023

oksanayoast commented Apr 13, 2023 •

edited

Loading

KaisZaoualiWincher commented Apr 13, 2023 •

edited

Loading

KaisZaoualiWincher commented Apr 13, 2023

leonidasmi commented Apr 19, 2023 •

edited by pls78

Loading

pls78 commented Apr 27, 2023

BobBreukhoven commented Apr 28, 2023

jonoalderson commented Apr 28, 2023

uxkai commented Apr 28, 2023

jonoalderson commented Apr 28, 2023

KaisZaoualiWincher commented May 1, 2023

pls78 commented May 2, 2023

KaisZaoualiWincher commented May 2, 2023

BobBreukhoven commented May 3, 2023

pls78 commented May 5, 2023

KaisZaoualiWincher commented May 5, 2023

KaisZaoualiWincher commented May 5, 2023

uxkai commented May 9, 2023 •

edited

Loading

KaisZaoualiWincher commented May 9, 2023

vraja-pro commented May 15, 2023

vraja-pro May 15, 2023

vraja-pro May 15, 2023

pls78 commented May 16, 2023

KaisZaouali commented May 17, 2023

-	children: PropTypes.object,
+	children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.object
+  ]),

Add dashboard wincher connect #20107

Add dashboard wincher connect #20107

Conversation

KaisZaoualiWincher commented Apr 3, 2023 • edited Loading

Context

Summary

Test instructions

Test instructions for the acceptance test before the PR gets merged

Relevant test scenarios

Test instructions for QA when the code is in the RC

Impact check

UI changes

Other environments

Documentation

Quality assurance

Innovation

skrivanos Apr 12, 2023

Choose a reason for hiding this comment

skrivanos Apr 12, 2023

Choose a reason for hiding this comment

oksanayoast commented Apr 13, 2023 • edited Loading

KaisZaoualiWincher commented Apr 13, 2023 • edited Loading

KaisZaoualiWincher commented Apr 13, 2023

leonidasmi commented Apr 19, 2023 • edited by pls78 Loading

pls78 commented Apr 27, 2023

BobBreukhoven commented Apr 28, 2023

jonoalderson commented Apr 28, 2023

uxkai commented Apr 28, 2023

jonoalderson commented Apr 28, 2023

KaisZaoualiWincher commented May 1, 2023

pls78 commented May 2, 2023

KaisZaoualiWincher commented May 2, 2023

BobBreukhoven commented May 3, 2023

pls78 commented May 5, 2023

KaisZaoualiWincher commented May 5, 2023

KaisZaoualiWincher commented May 5, 2023

uxkai commented May 9, 2023 • edited Loading

KaisZaoualiWincher commented May 9, 2023

vraja-pro commented May 15, 2023

vraja-pro May 15, 2023

Choose a reason for hiding this comment

vraja-pro May 15, 2023

Choose a reason for hiding this comment

pls78 commented May 16, 2023

KaisZaouali commented May 17, 2023

KaisZaoualiWincher commented Apr 3, 2023 •

edited

Loading

oksanayoast commented Apr 13, 2023 •

edited

Loading

KaisZaoualiWincher commented Apr 13, 2023 •

edited

Loading

leonidasmi commented Apr 19, 2023 •

edited by pls78

Loading

uxkai commented May 9, 2023 •

edited

Loading