Partner Portal: Add static license listing UI

[atanas-dev]

Context:

• Project thread: pbtFPC-Um-p2
• i4 designs: pbtFPC-103-p2

Changes proposed in this Pull Request

• Introduce the license listing UI with hardcoded placeholder data.

Testing instructions

• If you do not have a partner key, please contact Infinity for one or you will be unable to view the UI.
• Checkout PR locally, run yarn && yarn start-jetpack-cloud.
• Visit http://jetpack.cloud.localhost:3000/partner-portal and select your partner key, if prompted.
• Confirm the license list UI you are presented with matches designs (minus search, sort, filter, and revoke as they will be added in a separate PR).

Note: Mobile styles were done ad-hoc.
Note: The Partner Portal is only enabled in the development environment for now.

[matticbot]

Test live: https://calypso.live/?branch=add/partner-portal-license-list-view

[matticbot]

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

Webpack Runtime (~42 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
manifest        +95 B  (+0.3%)      +42 B  (+0.3%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

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

name                   parsed_size           gzip_size
entry-main                  +469 B  (+0.0%)      +83 B  (+0.0%)
entry-login                 +105 B  (+0.0%)      +26 B  (+0.0%)
entry-gutenboarding         +105 B  (+0.0%)      +26 B  (+0.0%)
entry-domains-landing       +105 B  (+0.0%)      +26 B  (+0.0%)

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

Sections (~2164 bytes removed 📉 [gzipped])

name                          parsed_size            gzip_size
jetpack-cloud-partner-portal     +17580 B  (+56.6%)    +4994 B  (+55.6%)
jetpack-connect                    +255 B   (+0.0%)     +279 B   (+0.1%)
google-my-business                 +183 B   (+0.1%)    +1027 B   (+1.2%)
marketing                          -126 B   (-0.0%)     +618 B   (+0.4%)
plans                              +103 B   (+0.0%)      +22 B   (+0.0%)
devdocs                             -31 B   (-0.0%)       -3 B   (-0.0%)

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 (~44 bytes removed 📉 [gzipped])

name                                            parsed_size           gzip_size
async-load-design-wordpress-components-gallery        -31 B  (-0.0%)      -44 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.

[rcoll]

I'd love to see the LicenceListItem children abstracted down into their own components somehow, but this can be done in a later PR.

Otherwise this looks fine to ship.

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.