Gutenboarding: Add domain categories. #41358

yansern · 2020-04-22T10:58:50Z

Changes proposed in this Pull Request

Introduce domain categories filter.
Styling update to match closer to how domain picker looks in modal view.

Testing instructions

Note: This is hiding under a feature flag so it is only testable locally.

Go to /new.
Click on the Domain Picker Button > More Options to show the domain picker modal.
Click on the various categories and see the list of domains change.

Known issues / Things To Consider

A proper way to load the list of domain categories?
The domains.ts is just a temporary workaround. https://github.com/Automattic/wp-calypso/blob/5ab9ed3cd0df76e879bf863543cdd5aee54f1f64/client/landing/gutenboarding/domains.ts
Avoid tlds prop?
There might not be a need to use the tlds prop in the future if domains API accept domain category param.
How to translate domain category string?
If we find out how the list of domain categories are loaded (item no. 1), we'll find an answer to this one to.
(Semi-related) Quantity for modal should be 10, quantity for popover should be 5.
I was considering introducing the quantity prop to the DomainPicker component when I noticed queryParameters prop is not used. Should queryParameters prop be passed over to useDomainSuggestions()?
Should domain category in popover view reset back to Popular after user changed it in the modal view?
The "Popular" domain category?
What tlds should the "Popular" domain category include? Currently I just simply added .com, .net and .org. Or if "Popular" is chosen, no TLDs should be passed to the API and the API will return popular TLDs?
Mobile view of categories not implemented.
Focus outline seems to be clipped.
Need design input on how category button should look like when hovered & clicked.

Screenshot

Fixes #41081

matticbot · 2020-04-22T10:58:53Z

Test live: https://calypso.live/?branch=add/gutenboarding-domain-categories

matticbot · 2020-04-22T10:59:41Z

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

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

name                 parsed_size           gzip_size
entry-gutenboarding      +5063 B  (+0.3%)    +1968 B  (+0.4%)

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

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.

yansern · 2020-04-22T11:10:15Z

client/landing/gutenboarding/components/domain-picker/index.tsx

-						{ paidSuggestions &&
-							( paidSuggestions?.length ? (
-								paidSuggestions.map( ( suggestion, i ) => (
+					<div className="domain-picker__body">


Don't be alarmed by lots of diffs, all the changes in this file is just to nest the divs in an outer div .domain-picker__body, code remains the same.

daledupreez · 2020-04-22T11:16:30Z

As a quick note on fetching the categories, I have a prototype diff for this in D42138-code. You should be aware that from a data structure perspective that we will need both the localized display name and a key/slug to include in the API calls to the domain suggestions end point. (The additional parameter to the end point doesn't exist yet, but I wanted to get feedback on this approach first.)

More discussion in #41081.

client/landing/gutenboarding/components/header/index.tsx

Use stateful shownDomain Ensure button (and modals) are persisted across search

sirreal · 2020-04-28T09:35:41Z

rebased

sirreal · 2020-04-28T10:00:48Z

Known issues / Things To Consider

A proper way to load the list of domain categories?
The domains.ts is just a temporary workaround. https://github.com/Automattic/wp-calypso/blob/5ab9ed3cd0df76e879bf863543cdd5aee54f1f64/client/landing/gutenboarding/domains.ts

Will be handled in #41450 / D42138-code (not yet ready)

Avoid tlds prop?
There might not be a need to use the tlds prop in the future if domains API accept domain category param.

We can iterate on this when and if it becomes a feature of the domains API. It does seem redundant to pass the TLD list back and forth with the client. (cc: @daledupreez)

How to translate domain category string?
If we find out how the list of domain categories are loaded (item no. 1), we'll find an answer to this one to.

Will be handled in #41450 / D42138-code (not yet ready)

(Semi-related) Quantity for modal should be 10, quantity for popover should be 5.
I was considering introducing the quantity prop to the DomainPicker component when I noticed queryParameters prop is not used. Should queryParameters prop be passed over to useDomainSuggestions()?

It seems problematic that we're putting all of the domain search state into the onboarding store (search query/categories). Onboarding store state has also permeated the domain picker, initially we were treating it like a library that should not depend on store state but that has been lost.

I'd like to work to recover the domain-picker as a library, but in the short term we can continue as we are now.

Should domain category in popover view reset back to Popular after user changed it in the modal view?

Popover doesn't have the concept of categories, I don't believe they should be reflected there. The apparent, visible query should be shown.

The "Popular" domain category?
What tlds should the "Popular" domain category include? Currently I just simply added .com, .net and .org. Or if "Popular" is chosen, no TLDs should be passed to the API and the API will return popular TLDs?

Looking at an API query to a /tlds endpoint in /start onboarding, I see a response like this:

["com", "net", "org", "blog", "club", "co", "life", "me", "site", "academy", "accountants", /* … */ ]

That appears to be some preferred domains, followed by an alphabetical list? Maybe ["com", "net", "org", "blog", "club", "co", "life", "me", "site" ] should be the popular TLDs?

I expect #41450 / D42138-code will solve this.

Mobile view of categories not implemented.

Focus outline seems to be clipped.

✅ I think we're good here with recent changes.

Need design input on how category button should look like when hovered & clicked.

I've followed the pattern used elsewhere - hover is like selected state. Focus has extra visual queues with keyboard navigation.

sirreal

This is a big changeset. It's not perfect, but I'd like to get it landed so we can improve it in smaller PRs.

Nice work on the bulk of this @yansern 👍

daledupreez

RE the open issues/questions:

1, 2, 3, and 6 should all be addressed by a combination of:

Gutenboarding: Use domain categories from API. #41450 and D42138-code to get a sortable list of translated category titles and slugs/identifiers
TBD and D42138-code to support the category slug/identifier as a parameter on the suggestions API

We should be able to avoid dealing with the complete list of TLDs.

client/landing/gutenboarding/components/domain-categories/index.tsx

daledupreez · 2020-04-28T11:53:05Z

client/landing/gutenboarding/domains-constants.ts

+ */
+import type { ValuesType } from 'utility-types';
+
+export const domainTldsByCategory = {


It will be very nice to drop this once we land the category API support!

client/landing/gutenboarding/components/domain-categories/index.tsx

yansern added [Feature Group] Emails & Domains Features related to email integrations and domain management. [Goal] New Onboarding previously called Gutenboarding labels Apr 22, 2020

yansern requested a review from a team as a code owner April 22, 2020 10:58

yansern self-assigned this Apr 22, 2020

yansern commented Apr 22, 2020

View reviewed changes

sirreal assigned sirreal and unassigned yansern Apr 23, 2020

sirreal force-pushed the add/gutenboarding-domain-categories branch from 5ab9ed3 to 3b3d39f Compare April 24, 2020 16:34

sirreal reviewed Apr 27, 2020

View reviewed changes

client/landing/gutenboarding/components/header/index.tsx Outdated Show resolved Hide resolved

sirreal requested a review from a team April 27, 2020 16:59

yansern and others added 9 commits April 28, 2020 11:34

Added domain categories + styling update to match figma.

e5d5cbe

Use readonly types

0138f83

Prevent domain button unmount

d0d634d

Use stateful shownDomain Ensure button (and modals) are persisted across search

Clean up picker

a8054cc

Import react namespace

9d001f0

Types ✨

901d741

Add view all and allow undefined category

e70ce43

Simplify category buttons

248e8f4

Simplify domain nonsense

2fa50a8

sirreal force-pushed the add/gutenboarding-domain-categories branch from 4351a5c to 2fa50a8 Compare April 28, 2020 09:35

sirreal added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 28, 2020

sirreal approved these changes Apr 28, 2020

View reviewed changes

daledupreez reviewed Apr 28, 2020

View reviewed changes

sirreal reviewed Apr 28, 2020

View reviewed changes

client/landing/gutenboarding/components/domain-categories/index.tsx Outdated Show resolved Hide resolved

Fix typo in translator comment

6b912c2

yansern merged commit 5efe03d into master Apr 28, 2020

yansern deleted the add/gutenboarding-domain-categories branch April 28, 2020 13:20

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

razvanpapadopol mentioned this pull request Mar 29, 2021

Design Picker: Introduce category descriptions (and starter design descriptions for screen readers) #45038

Open

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gutenboarding: Add domain categories. #41358

Gutenboarding: Add domain categories. #41358

yansern commented Apr 22, 2020 •

edited by sirreal

Loading

matticbot commented Apr 22, 2020

matticbot commented Apr 22, 2020 •

edited

Loading

yansern Apr 22, 2020 •

edited

Loading

daledupreez commented Apr 22, 2020

sirreal commented Apr 28, 2020

sirreal commented Apr 28, 2020

Known issues / Things To Consider

sirreal left a comment

daledupreez left a comment

daledupreez Apr 28, 2020

Gutenboarding: Add domain categories. #41358

Gutenboarding: Add domain categories. #41358

Conversation

yansern commented Apr 22, 2020 • edited by sirreal Loading

Changes proposed in this Pull Request

Testing instructions

Known issues / Things To Consider

Screenshot

matticbot commented Apr 22, 2020

matticbot commented Apr 22, 2020 • edited Loading

yansern Apr 22, 2020 • edited Loading

Choose a reason for hiding this comment

daledupreez commented Apr 22, 2020

sirreal commented Apr 28, 2020

sirreal commented Apr 28, 2020

Known issues / Things To Consider

sirreal left a comment

Choose a reason for hiding this comment

daledupreez left a comment

Choose a reason for hiding this comment

daledupreez Apr 28, 2020

Choose a reason for hiding this comment

yansern commented Apr 22, 2020 •

edited by sirreal

Loading

matticbot commented Apr 22, 2020 •

edited

Loading

yansern Apr 22, 2020 •

edited

Loading