Add/richer titan navigation #48781

daledupreez · 2021-01-11T23:28:12Z

Changes proposed in this Pull Request

This PR introduces a vertical nav to show three links for managing a Titan account:
- A link to the embedded console (if that feature is enabled with the titan/iframe-control-panel flag) OR the external Titan console (when the feature is not enabled)
- A link to manage the subscription (if we have the subscription ID)
- A link to pay for more mailboxes

This PR also introduces a standalone component at titan/manage to wrap the embedded control panel, as we need a way to signal when we are loading the dedicated management path.
As a final change, this PR tweaks the way the "Back" button in the Email Management screen determines where it should go back to, as the changes result in additional paths being possible

Note: For now, I haven't added any styles, as I want some feedback on the core approach first.

Testing instructions

Note 1: The nav section of this feature is currently behind the titan/phase-2 feature flag, but the new titan/manage path is not protected by that feature flag, as it's highly unlikely anyone gets to that URL, and it doesn't expose any new functionality anyway.
Note 2: The PR takes into account the titan/iframe-control-panel feature flag as well:

If both this flag and the titan/phase-2 flags are enabled, the clicking on the Titan nav option for "Manage your email settings and accounts" should load the new titan/manage page and show the embedded management console.
If the titan/iframe-control-panel flag is disabled, but the titan/phase-2 flag is enabled, clicking on "Manage your email settings and accounts" should immediately launch the external control panel.

Ensure that you're working against a sandboxed back end that has Store Sandbox enabled and has the update from D55163-code.
If you don't have a domain where you have purchased Titan:
a. Enable the titan/phase-2 feature flag in the UI by adding ?flags=titan/phase-2 to the URL you're using (either locally or on calypso.live).
b. Purchase Titan for a domain you own.
Ensure the titan/phase-2 and titan/iframe-control-panel flags are enabled.
For the domain above, navigate to the domain management screen and click on the "Manage your email accounts" option.
Verify that you see a list containing three links, one for management/configuration, one for billing, and one for adding accounts.
Confirm that clicking on all three links works and takes you to the correct page. Ensure that clicking the Back button works correctly in all three cases. (Note that you should see the iframed control panel.)
Disable the titan/iframe-control-panel flag and keep the titan/phase-2 flag enabled. (You can do this by adding ?flags=titan/phase-2,-titan/iframe-control-panel to the URL.)
Repeat steps 4-6, and verify that you're launched into the full management console for that link.
Disable both flags. (You can add ?flags=-titan/phase-2,-titan/iframe-control-panel to the URL to make this happen.)
Repeat step 4.
You should be taken to a page showing a basic description and a button to log into the control panel.
Enable titan/iframe-control-panel and disable titan/phase-2.
Repeat step 4.
You should be taken to a page that loads the embedded management console.

And then repeat these steps (especially those involving navigation) starting from the all domains view.

matticbot · 2021-01-11T23:28:13Z

Test live: https://calypso.live/?branch=add/richer-titan-navigation

matticbot · 2021-01-11T23:28:48Z

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

App Entrypoints (~6 bytes added 📈 [gzipped])

name        parsed_size           gzip_size
entry-main        +88 B  (+0.0%)       +6 B  (+0.0%)

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

Sections (~932 bytes added 📈 [gzipped])

name   parsed_size           gzip_size
email      +5024 B  (+1.4%)     +932 B  (+1.0%)

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

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.

daledupreez · 2021-01-12T08:10:10Z

client/my-sites/email/email-management/titan-management-nav/index.jsx

+		if ( ! externalManagementUrl || isFetchingExternalManagementUrl ) {
+			return <VerticalNavItem isPlaceholder={ true } />;
+		}
+		return <VerticalNavItem path={ externalManagementUrl }>{ linkTitle }</VerticalNavItem>;


We may want to have the external attribute set to true here so the item clearly indicates it is an external link. (Though it then opens in a new window, which is a change in behaviour from what we have now.)

stephanethomas · 2021-01-12T09:06:09Z

Just passing by, and wanted to note that we usually don't embed a list of actions inside a card. Here is an example:

eltongo · 2021-01-12T11:04:38Z

client/my-sites/email/email-management/gsuite-users-card/index.jsx

+			if ( isEnabled( 'titan/phase-2' ) ) {
+				return <TitanManagementNav domain={ domain } key={ domainKey } />;
+			}
+			return <TitanControlPanelLoginCard domain={ domain } key={ domainKey } />;


Also worth keeping in mind that this will be rendered both in the domain specific view, as well as the site specific view where we list all domains that have email. Maybe we want to have a check in place to see if we're listing all domains or just one?

Same goes for the TitanControlPanelLoginCard component now. If we enable the iframe flag, and we have 2 domains with Titan, we render both iframes if we go to /email/<site_slug>, which is not ideal.

The TitanControlPanelLoginCard component with the iframe has this problem already when it displays the iframe. I'm happy to just replace that with the dedicated nav moving forward.

RE showing multiple email management for a site -- does the nav take up too much space? I tried to keep it relatively small, as I noticed the logic supports showing details for multiple domains.

does the nav take up too much space?

I don't think so, it should be fine IMO.

Also, just to be clear, once we flip the titan/phase-2 feature flag, the new page that's supposed to show the embedded control panel is only visible when a specific domain is selected.

olaseni · 2021-01-12T14:16:42Z

client/my-sites/email/email-management/titan-management-nav/index.jsx

+					domain.titanMailSubscription.subscriptionId
+				) }
+			>
+				{ translate( 'Update your billing and payment settings' ) }


The navigation doesn't work 'as expected' when one navigates to 'Update your billing and payment settings'. It returns to a page that lists all subscriptions.

I'll queue this up for a later card.

olaseni

Save some minor, non-blocking comments - Looks good!

a8ci18n · 2021-01-12T19:17:30Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/5433841

Thank you @daledupreez for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2021-01-22T09:28:38Z

Translation for this Pull Request has now been finished.

daledupreez added 6 commits January 11, 2021 19:35

Push Titan URL retrieval into reusable functions

fa7d758

Build top-level component to wrap iframe/control panel link

61a8b71

Create new titan/manage sub-path that shows the embedded iframe

7ed7977

Use a list of links when managing Titan

ec25da6

Fix Back button when the previous page was not the domains page

380f279

Keep new nav behind titan/phase-2 feature flag

7af1e54

daledupreez requested a review from a team January 11, 2021 23:28

daledupreez self-assigned this Jan 11, 2021

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

daledupreez commented Jan 12, 2021

View reviewed changes

eltongo reviewed Jan 12, 2021

View reviewed changes

olaseni reviewed Jan 12, 2021

View reviewed changes

olaseni approved these changes Jan 12, 2021

View reviewed changes

daledupreez merged commit f56d645 into trunk Jan 12, 2021

daledupreez deleted the add/richer-titan-navigation branch January 12, 2021 18:52

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 12, 2021

daledupreez mentioned this pull request Jan 12, 2021

Fix Titan navigation styles #48828

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add/richer titan navigation #48781

Add/richer titan navigation #48781

daledupreez commented Jan 11, 2021

matticbot commented Jan 11, 2021

matticbot commented Jan 11, 2021

daledupreez Jan 12, 2021

stephanethomas commented Jan 12, 2021

eltongo Jan 12, 2021

daledupreez Jan 12, 2021

eltongo Jan 12, 2021

daledupreez Jan 12, 2021

olaseni Jan 12, 2021

daledupreez Jan 12, 2021

olaseni left a comment

a8ci18n commented Jan 12, 2021

a8ci18n commented Jan 22, 2021

Add/richer titan navigation #48781

Add/richer titan navigation #48781

Conversation

daledupreez commented Jan 11, 2021

Changes proposed in this Pull Request

Testing instructions

matticbot commented Jan 11, 2021

matticbot commented Jan 11, 2021

daledupreez Jan 12, 2021

Choose a reason for hiding this comment

stephanethomas commented Jan 12, 2021

eltongo Jan 12, 2021

Choose a reason for hiding this comment

daledupreez Jan 12, 2021

Choose a reason for hiding this comment

eltongo Jan 12, 2021

Choose a reason for hiding this comment

daledupreez Jan 12, 2021

Choose a reason for hiding this comment

olaseni Jan 12, 2021

Choose a reason for hiding this comment

daledupreez Jan 12, 2021

Choose a reason for hiding this comment

olaseni left a comment

Choose a reason for hiding this comment

a8ci18n commented Jan 12, 2021

a8ci18n commented Jan 22, 2021