Add Organic Sessions widget #22073

igorschoester · 2025-02-25T16:00:21Z

Context

Summary

This PR can be summarized in the following changelog entry:

Adds the Organic Sessions widget to the dashboard.

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Make sure you have an environment with site kit configured with analytics.
Make sure site kit is not connected to yoast.
Connect to site kit and check you see the organic sessions widget with data.
Check the space between the ticks and the chart match the design.
Check the font weight and sizes are matching the design.
Check the error message is not duplicated if it's the same for both change and daily data. You can do that by opening the network tab in the devtools and change connection to offline. Change the tab to Alert center and go back to the Dashboard.
Check the widget title is "Organic sessions"
Check the tooltip has the text: "The number of organic sessions that began on your website. "
Check the learn more link is "https://yoa.st/dashboard-organic-sessions-learn-more" with link params.
Check the info icon is aligned to the title.
Check the tooltip arrow is aligned to the i icon.
Check the chart has gradient color.
Mock no data by changing the respone to empty array in src/dashboard/user-interface/time-based-seo-metrics/time-based-seo-metrics-route.php, line 207:

return new WP_REST_Response(
			[],
			200
		);

Check you get only once the message "No data to display: Your site hasn't received any visitors yet."

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 (Default Block/Gutenberg/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.

QA can test this PR by following these steps:

Impact check

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

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. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

I have tested this code to the best of my abilities.
During testing, I had activated all plugins that 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.
I have checked that the base branch is correctly set.

Innovation

No innovation project is applicable for this PR.
This PR falls under an innovation project. I have attached the innovation label.
I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/reserved-tasks/issues/411

coveralls · 2025-02-25T16:15:51Z

Pull Request Test Coverage Report for Build 7df84ae28a5f78d3bb0730712ce6aeadd7b6fa84

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

For more information on this, see Tracking coverage changes with pull request builds.
To avoid this issue with future PRs, see these Recommended CI Configurations.
For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

58 of 68 (85.29%) changed or added relevant lines in 6 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage increased (+0.07%) to 57.977%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/js/src/dashboard/services/data-formatter.js	3	5	60.0%
packages/js/src/dashboard/widgets/organic-sessions/daily.js	24	32	75.0%

Totals
Change from base Build 7cbd66303be34423496ddf03e68a394b9457f322:	0.07%
Covered Lines:	13755
Relevant Lines:	23363

💛 - Coveralls

github-actions · 2025-02-26T14:36:48Z

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

…c-sessions-graph

fix title fix title remove console.log

change the skeleton and chart size

In there is no daily data there wouldn't be change data.

gradient size

thijsoo

CR 🚧 some questions and feedback

thijsoo · 2025-02-28T07:39:57Z

packages/js/src/dashboard/services/widget-factory.js

@@ -98,6 +100,16 @@ export class WidgetFactory {
 					remoteDataProvider={ this.#remoteDataProvider }
 					dataFormatter={ this.#dataFormatter }
 				/>;
+			case WidgetFactory.types.organicSessions:
+				if ( ! isFeatureEnabled || ! isConnected ) {


This needs to be a GA 4 connected check as well not just connected. It should be in the script data as isGAConnected

thijsoo · 2025-02-28T10:56:00Z

packages/js/src/dashboard/widgets/organic-sessions/change.js

+	const current = data?.current?.sessions || 0;
+	const previous = data?.previous?.sessions || 0;
+	// Delta / average.
+	const difference = Math.abs( current - previous ) / ( ( current + previous ) / 2 );


Would it make sense to have an early return here if both current && previous end up 0?

thijsoo · 2025-02-28T10:57:39Z

packages/js/src/dashboard/widgets/organic-sessions/change.js

+ * @param {DataFormatter} dataFormatter The data formatter.
+ * @returns {{data: *, error: Error, isPending: boolean}} The remote data info.
+ */
+export const useOrganicSessionsChange = ( dataProvider, remoteDataProvider, dataFormatter ) => {


I think this might need a bit of a comment describing what happens here, because to me it seems a lot is happening here.

thijsoo · 2025-02-28T10:57:58Z

packages/js/src/dashboard/widgets/organic-sessions/change.js

+ * @param {DataProvider} dataProvider The data provider.
+ * @param {RemoteDataProvider} remoteDataProvider The remote data provider.
+ * @param {DataFormatter} dataFormatter The data formatter.
+ * @returns {{data: *, error: Error, isPending: boolean}} The remote data info.


Shoud data: * not be data: our defined response?

thijsoo · 2025-02-28T10:59:31Z

packages/js/src/dashboard/widgets/organic-sessions/change.js

+ * @returns {function(?RawOrganicSessionsChangeData[]): OrganicSessionsChangeData} Function to format the organic sessions change data.
+ */
+// eslint-disable-next-line complexity -- Fallbacks to zero, easy enough to read.
+export const createOrganicSessionsChangeFormatter = ( dataFormatter ) => ( [ data ] ) => {


I see the word Change everywhere and in the Back-end we use Compare everywhere for these different comparisons between a previous period and the current one. Lets choose one and stick to it.

thijsoo · 2025-02-28T11:35:06Z

packages/js/src/dashboard/widgets/organic-sessions/daily.js

+ * @param {DataFormatter} dataFormatter The data formatter.
+ * @returns {function(?OrganicSessionsDailyData[]): OrganicSessionsDailyData[]} Function to format the organic sessions daily data.
+ */
+export const createOrganicSessionsDailyFormatter = ( dataFormatter ) => ( data = [] ) => data.map( ( item ) => ( {


Is this export needed?

thijsoo · 2025-02-28T11:35:36Z

packages/js/src/dashboard/widgets/organic-sessions/change.js

+ * @returns {function(?RawOrganicSessionsChangeData[]): OrganicSessionsChangeData} Function to format the organic sessions change data.
+ */
+// eslint-disable-next-line complexity -- Fallbacks to zero, easy enough to read.
+export const createOrganicSessionsChangeFormatter = ( dataFormatter ) => ( [ data ] ) => {


Is the export needed?

thijsoo · 2025-02-28T11:36:20Z

packages/js/src/dashboard/widgets/organic-sessions/daily.js

+ * @param {DataFormatter} dataFormatter The data formatter.
+ * @returns {{data: *, error: Error, isPending: boolean}} The remote data info.
+ */
+export const useOrganicSessionsDaily = ( dataProvider, remoteDataProvider, dataFormatter ) => {


Same comments as with the other method might benefit from a little explanation what this all does?

thijsoo · 2025-02-28T11:36:54Z

packages/js/src/dashboard/widgets/organic-sessions/daily.js

+	 */
+	const getOrganicSessionsDaily = useCallback( ( options ) => {
+		return remoteDataProvider.fetchJson(
+			dataProvider.getEndpoint( "timeBasedSeoMetrics" ),


We might want to also define all endpoints as a constant somewhere since we have quite a few random strings all over the place

Add Organic Sessions widget

2d4e5da

igorschoester added the changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog label Feb 25, 2025

github-actions bot added the merge conflict label Feb 26, 2025

vraja-pro added 4 commits February 26, 2025 17:00

Merge remote-tracking branch 'origin/trunk' into 411-implement-organi…

e24b710

…c-sessions-graph

use dashboard error alert

a293a3f

fix chart height

7e2b332

fix fonts size and weight

a7c62d5

github-actions bot removed the merge conflict label Feb 26, 2025

vraja-pro added 2 commits February 26, 2025 18:33

adjust chart label styling and size

ea51682

align y ticks to the title

cb87370

vraja-pro marked this pull request as ready for review February 26, 2025 16:38

vraja-pro added 12 commits February 27, 2025 11:49

fix widget title

4cf9ecd

fix title fix title remove console.log

tests: OrganicSessionsChange

b3cd14b

add tests to daily organic sessions

43bac68

fix info tooltip location

33adf85

dd condition to organic sessions in the widget factory

50b6a4c

mock canvas for daily chart

ceae3bb

move the no data message one layer up

33a151b

change the skeleton and chart size

when pending there is no data

d2ca2ef

In there is no daily data there wouldn't be change data.

change the gradient to match the graph size

25c5492

gradient size

refactor tests

b5f564d

wip tests

3f4d58e

remove uncompleted test

fc51eab

thijsoo requested changes Feb 28, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Organic Sessions widget #22073

Add Organic Sessions widget #22073

igorschoester commented Feb 25, 2025 •

edited by vraja-pro

Loading

coveralls commented Feb 25, 2025 •

edited

Loading

github-actions bot commented Feb 26, 2025

thijsoo left a comment

thijsoo Feb 28, 2025

thijsoo Feb 28, 2025

thijsoo Feb 28, 2025

thijsoo Feb 28, 2025

thijsoo Feb 28, 2025

thijsoo Feb 28, 2025

thijsoo Feb 28, 2025

thijsoo Feb 28, 2025

thijsoo Feb 28, 2025

Add Organic Sessions widget #22073

Are you sure you want to change the base?

Add Organic Sessions widget #22073

Conversation

igorschoester commented Feb 25, 2025 • edited by vraja-pro Loading

Context

Summary

Relevant technical choices:

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

coveralls commented Feb 25, 2025 • edited Loading

Pull Request Test Coverage Report for Build 7df84ae28a5f78d3bb0730712ce6aeadd7b6fa84

Warning: This coverage report may be inaccurate.

Details

💛 - Coveralls

github-actions bot commented Feb 26, 2025

thijsoo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

igorschoester commented Feb 25, 2025 •

edited by vraja-pro

Loading

coveralls commented Feb 25, 2025 •

edited

Loading