Nav Redesign: Add notifications pointer #90495

mmtr · 2024-05-09T13:06:40Z

Follow-up of #90429

Proposed Changes

Adds a pointer to indicate that notifications have been moved to the bottom (as of #90429) since users might be confused trying to find it in the previous location (see p1715182058030399-slack-C9EJ7KSGH).

The pointer has been designed to only be visible for users registered before we moved the notifications and will remain only visible for two weeks. In a follow-up, we'll need to remove this code.

Testing Instructions

Use the Calypso link below
Go to /sites
Make sure the pointer shows up
Make sure it is hidden when the sidebar is collapsed (e.g. after selecting a site)
Dismiss it
Make sure the pointer no longer shows up

github-actions · 2024-05-09T13:06:52Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-107029

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-107029&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-107029&env=a8c-for-agencies

matticbot · 2024-05-09T13:13:08Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~155 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-stepper               -276 B  (-0.0%)     -155 B  (-0.0%)
entry-subscriptions         -258 B  (-0.0%)     -137 B  (-0.0%)
entry-login                 -258 B  (-0.0%)     -137 B  (-0.0%)
entry-domains-landing       -258 B  (-0.0%)     -137 B  (-0.1%)
entry-browsehappy           -258 B  (-0.2%)     -137 B  (-0.3%)
entry-main                  -248 B  (-0.0%)     -108 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~2091 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
gutenberg-editor                       +1922 B  (+0.3%)     +551 B  (+0.3%)
settings-discussion                    +1864 B  (+0.4%)     +793 B  (+0.6%)
woocommerce-installation               +1849 B  (+0.5%)     +520 B  (+0.4%)
woocommerce                            +1849 B  (+0.5%)     +520 B  (+0.5%)
subscribers                            +1849 B  (+0.3%)     +520 B  (+0.2%)
site-blocks                            +1849 B  (+0.2%)     +520 B  (+0.2%)
settings-reading                       +1849 B  (+0.4%)     +520 B  (+0.4%)
settings-jetpack                       +1849 B  (+0.3%)     +520 B  (+0.3%)
security                               +1849 B  (+0.2%)     +520 B  (+0.2%)
scan                                   +1849 B  (+0.2%)     +520 B  (+0.2%)
promote-post-i2                        +1849 B  (+0.4%)     +520 B  (+0.4%)
privacy                                +1849 B  (+0.2%)     +520 B  (+0.2%)
notification-settings                  +1849 B  (+0.2%)     +520 B  (+0.2%)
migrate                                +1849 B  (+0.5%)     +520 B  (+0.4%)
me                                     +1849 B  (+0.2%)     +520 B  (+0.2%)
marketplace                            +1849 B  (+0.2%)     +520 B  (+0.2%)
jetpack-social                         +1849 B  (+0.4%)     +381 B  (+0.3%)
jetpack-search                         +1849 B  (+0.3%)     +520 B  (+0.3%)
jetpack-connect                        +1849 B  (+0.2%)     +520 B  (+0.2%)
jetpack-cloud-settings                 +1849 B  (+0.3%)     +520 B  (+0.3%)
jetpack-cloud-pricing                  +1849 B  (+0.2%)     +520 B  (+0.2%)
jetpack-cloud-overview                 +1849 B  (+0.4%)     +520 B  (+0.4%)
jetpack-cloud-features-comparison      +1849 B  (+0.3%)     +520 B  (+0.3%)
jetpack-cloud                          +1849 B  (+0.5%)     +520 B  (+0.4%)
import                                 +1849 B  (+0.4%)     +520 B  (+0.3%)
help                                   +1849 B  (+0.2%)     +520 B  (+0.2%)
google-my-business                     +1849 B  (+0.4%)     +520 B  (+0.3%)
export                                 +1849 B  (+0.5%)     +520 B  (+0.5%)
developer                              +1849 B  (+0.2%)     +520 B  (+0.2%)
customize                              +1849 B  (+0.5%)     +520 B  (+0.5%)
concierge                              +1849 B  (+0.3%)     +520 B  (+0.3%)
comments                               +1849 B  (+0.2%)     +520 B  (+0.2%)
add-ons                                +1849 B  (+0.5%)     +520 B  (+0.4%)
account-close                          +1849 B  (+0.2%)     +520 B  (+0.2%)
account                                +1849 B  (+0.2%)     +520 B  (+0.2%)
settings-writing                       +1843 B  (+0.3%)     +349 B  (+0.2%)
settings-newsletter                    +1843 B  (+0.4%)     +442 B  (+0.3%)
preview                                +1814 B  (+0.5%)     +514 B  (+0.5%)
pages                                  +1814 B  (+0.3%)     +491 B  (+0.3%)
checkout                               +1812 B  (+0.1%)     +508 B  (+0.1%)
home                                   +1772 B  (+0.1%)     +509 B  (+0.1%)
media                                   +937 B  (+0.1%)    +1186 B  (+0.3%)
settings-podcast                        +931 B  (+0.2%)    +1123 B  (+0.7%)
plans                                   +799 B  (+0.1%)     +265 B  (+0.1%)
activity                                +799 B  (+0.1%)     +259 B  (+0.1%)
sites-dashboard                         +771 B  (+0.1%)     +246 B  (+0.1%)
site-monitoring                         +771 B  (+0.1%)     +246 B  (+0.1%)
plugins                                 +771 B  (+0.0%)     +254 B  (+0.0%)
jetpack-cloud-plugin-management         +771 B  (+0.1%)     +228 B  (+0.1%)
hosting                                 +771 B  (+0.1%)     +238 B  (+0.1%)
github-deployments                      +771 B  (+0.1%)     +246 B  (+0.1%)
dev-tools-promo                         +771 B  (+0.1%)     +246 B  (+0.1%)
backup                                  +771 B  (+0.1%)     +217 B  (+0.1%)
email                                   +769 B  (+0.1%)     +250 B  (+0.1%)
stats                                   +756 B  (+0.1%)     +241 B  (+0.1%)
site-purchases                          +741 B  (+0.0%)     +235 B  (+0.1%)
settings                                +741 B  (+0.1%)     -144 B  (-0.1%)
purchases                               +741 B  (+0.0%)     +235 B  (+0.0%)
earn                                    +741 B  (+0.1%)     +263 B  (+0.1%)
domains                                 +741 B  (+0.0%)     +235 B  (+0.0%)
themes                                  +736 B  (+0.1%)     +184 B  (+0.1%)
settings-security                       +728 B  (+0.1%)     +240 B  (+0.2%)
settings-performance                    +728 B  (+0.1%)     +220 B  (+0.1%)
theme                                   +706 B  (+0.1%)     +235 B  (+0.1%)
posts-custom                            +706 B  (+0.1%)     +261 B  (+0.1%)
posts                                   +706 B  (+0.1%)     +261 B  (+0.1%)
people                                  +545 B  (+0.1%)     -872 B  (-0.4%)
marketing                               +508 B  (+0.1%)     -918 B  (-0.5%)
update-design-flow                      -120 B  (-0.0%)       -6 B  (-0.0%)
signup                                  -120 B  (-0.0%)       -6 B  (-0.0%)
link-in-bio-tld-flow                    -120 B  (-0.0%)       -6 B  (-0.0%)
devdocs                                 +102 B  (+0.1%)      +39 B  (+0.1%)
reader                                   -35 B  (-0.0%)       -9 B  (-0.0%)
sensei-flow                              +28 B  (+0.0%)     +272 B  (+0.2%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~17837 bytes added 📈 [gzipped])

name                                                         parsed_size           gzip_size
async-load-calypso-my-sites-current-site-notice                  -1201 B  (-2.2%)    -1180 B  (-6.2%)
async-load-calypso-components-web-preview-component              -1201 B  (-0.3%)     -971 B  (-0.7%)
async-load-calypso-post-editor-editor-media-modal                -1005 B  (-0.1%)     -547 B  (-0.2%)
async-load-calypso-reader-sidebar                                 +648 B  (+0.3%)     -602 B  (-1.0%)
async-load-design-blocks                                          +160 B  (+0.0%)     +510 B  (+0.1%)
async-load-signup-steps-domains                                   -123 B  (-0.0%)     -486 B  (-0.3%)
async-load-calypso-blocks-jitm-templates-sidebar-banner           -123 B  (-0.3%)     -711 B  (-5.0%)
async-load-calypso-blocks-jitm-templates-notice                   -123 B  (-0.3%)     -693 B  (-4.8%)
async-load-calypso-blocks-jitm-templates-default                  -123 B  (-0.3%)     -702 B  (-4.9%)
async-load-calypso-blocks-jitm                                    -105 B  (-1.0%)      -18 B  (-0.5%)
async-load-calypso-my-sites-sidebar                                -70 B  (-0.2%)      -18 B  (-0.2%)
async-load-calypso-my-sites-stats-stats-post-detail                -35 B  (-0.1%)       -8 B  (-0.1%)
async-load-calypso-my-sites-site-settings-seo-settings-form        -35 B  (-0.0%)       -8 B  (-0.0%)
async-load-design-playground                                       -30 B  (-0.0%)       -8 B  (-0.0%)
async-load-design                                                  -30 B  (-0.0%)       -8 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

rcrdortiz

Works as advertised.

rcrdortiz · 2024-05-09T13:54:00Z

client/layout/global-sidebar/menu-items/notifications/index.jsx

+			( englishLocales.includes( this.props.locale ) ||
+				hasTranslation( 'Looking for your notifications? They have been moved here.' ) );


Why is it better to hide the message than showing it un-translated? Should we block merging this PR until we have the text translated?

Why is it better to hide the message than showing it un-translated?

Because untranslated content is a pain point for our customers (pxLjZ-5Ir-p2, p58i-8e8-p2)

Should we block merging this PR until we have the text translated?

I think it's better if English users see this change immediately

lucasmendes-design · 2024-05-09T19:09:14Z

Looks great :) Thanks.

taipeicoder

Works as intended!

Nav Redesign: Add notifications pointer

7f2c124

mmtr self-assigned this May 9, 2024

mmtr requested review from shaunandrews, davemart-in, lucasmendes-design and a team May 9, 2024 13:07

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 9, 2024

mmtr added 2 commits May 9, 2024 15:15

Remove unnecessary prop type

1843e2d

Hide pointer if untranslated

c9369ef

rcrdortiz approved these changes May 9, 2024

View reviewed changes

rcrdortiz reviewed May 9, 2024

View reviewed changes

Fix E2E

8495a86

taipeicoder approved these changes May 10, 2024

View reviewed changes

taipeicoder merged commit 5ccd034 into trunk May 10, 2024
11 checks passed

taipeicoder deleted the add/sidebar-notifications-pointer branch May 10, 2024 01:47

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 10, 2024

mmtr mentioned this pull request May 23, 2024

Nav Redesign: Remove notifications pointer #91061

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nav Redesign: Add notifications pointer #90495

Nav Redesign: Add notifications pointer #90495

mmtr commented May 9, 2024 •

edited

Loading

github-actions bot commented May 9, 2024 •

edited by matticbot

Loading

matticbot commented May 9, 2024 •

edited

Loading

rcrdortiz left a comment

rcrdortiz May 9, 2024

mmtr May 9, 2024

lucasmendes-design commented May 9, 2024

taipeicoder left a comment

		( englishLocales.includes( this.props.locale ) \|\|
		hasTranslation( 'Looking for your notifications? They have been moved here.' ) );

Nav Redesign: Add notifications pointer #90495

Nav Redesign: Add notifications pointer #90495

Conversation

mmtr commented May 9, 2024 • edited Loading

Proposed Changes

Testing Instructions

github-actions bot commented May 9, 2024 • edited by matticbot Loading

matticbot commented May 9, 2024 • edited Loading

rcrdortiz left a comment

Choose a reason for hiding this comment

rcrdortiz May 9, 2024

Choose a reason for hiding this comment

mmtr May 9, 2024

Choose a reason for hiding this comment

lucasmendes-design commented May 9, 2024

taipeicoder left a comment

Choose a reason for hiding this comment

mmtr commented May 9, 2024 •

edited

Loading

github-actions bot commented May 9, 2024 •

edited by matticbot

Loading

matticbot commented May 9, 2024 •

edited

Loading