Hosting Panel: Update UI for cards and add clipboard button #36864

jeraldjuice · 2019-10-17T16:23:39Z

Summary

Per design feedback, this PR updates the UI for the cards in the Hosting panel, as well as adding a clipboard button in order to copy user login information.

Screenshots

When no SFTP user is available

When an SFTP user is available

When an SFTP user is created or the password is reset

Testing

Spin up a local Calypso development environment.
Apply D34243-code to your sandbox.
Go to http://calypso.localhost:3000/hosting/your.atomic.site.
Ensure that UI states reflected in the screenshots are visible.
Ensure that 'Copy' buttons work as expected.

matticbot · 2019-10-17T16:23:41Z

Test live: https://calypso.live/?branch=update/hosting-panel-ui-tweaks

matticbot · 2019-10-17T16:31:24Z

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

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

name      parsed_size           gzip_size
manifest       +231 B  (+0.1%)      +75 B  (+0.2%)

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 (~3 bytes added 📈 [gzipped])

name        parsed_size           gzip_size
entry-main        +23 B  (+0.0%)       +3 B  (+0.0%)

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

Sections (~3415 bytes added 📈 [gzipped])

name            parsed_size            gzip_size
hosting            +12687 B  (+12.5%)    +3399 B  (+12.1%)
wp-super-cache        +18 B   (+0.0%)       +8 B   (+0.0%)
plans                 +18 B   (+0.0%)       +5 B   (+0.0%)
marketing             +18 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.

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.

gwwar · 2019-10-17T16:48:10Z

Total aside and this can go into a follow up PR, but @shaunandrews did we have any suggested error states? I suspect a global error notice https://wpcalypso.wordpress.com/devdocs/design/global-notices may make sense, but let us know if you'd prefer something inline.

gwwar · 2019-10-17T18:18:59Z

Looks like the username can still break out of the card at certain breakpoints. I think we can add a max-width with a trailing gradient to hide the extra text. Open to whatever suggestions that @shaunandrews has though if we stopped using that pattern.

gwwar · 2019-10-17T18:25:21Z

client/my-sites/hosting/sftp-card/index.js

-				{ password && (
-					<div className="sftp-card__callout-box">
-						<p>{ translate( 'Your new password for your sftp user is:' ) }</p>
+				{ errorCode === 404 ? (


For folks 👀 We can further tidy the data pattern in a different PR. Basically we have a default retry policy that will, retry 3 times on any GET requests for a non 2xx status code. In this case the 404 is a clear answer, so we either have a choice of updating the API response or modifying client behavior.

Note that we need to also still need to handle non 404 cases (5xx)

gwwar · 2019-10-17T18:26:37Z

✅ copy buttons work as expected, and overall code changes look good. I'll wait for @shaunandrews to chime in but this has my tentative approval otherwise.

We can follow up with more error cases in another PR.

shaunandrews · 2019-10-17T21:51:00Z

did we have any suggested error states

Do we know what errors might occur?

shaunandrews · 2019-10-17T21:51:42Z

I think we can add a max-width with a trailing gradient to hide the extra text.

That could work, though I'd also be OK with just truncating the text with an ellipsis at the end.

shaunandrews · 2019-10-17T21:52:19Z

just truncating the text with an ellipsis at the end.

Actually, that might hinder copy/paste. Hmm. Maybe we force the username to wrap?

gwwar · 2019-10-17T21:57:01Z

Do we know what errors might occur?

We fail to create an SSH user.
The Password Reset Fails
Database Access Fails for some reason.

glendaviesnz · 2019-10-21T23:37:22Z

We will need to update
https://github.com/Automattic/wp-calypso/blob/master/client/state/data-getters/index.js#L219, https://github.com/Automattic/wp-calypso/blob/master/client/state/data-getters/index.js#L238 & https://github.com/Automattic/wp-calypso/blob/master/client/state/data-getters/index.js#L258
to change path from /ssh to /ssh-user - we added -user to the endpoint name to make its purpose clearer. But this could be done in a separate PR.

glendaviesnz · 2019-10-22T00:22:05Z

Actually, that might hinder copy/paste. Hmm. Maybe we force the username to wrap?

I just tested, and applying

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 95%;

to the username paragraph doesn't affect copy and paste - it still copies the full username - this is a css only change which the copy button doesn't care about.

The width setting above isn't correct though, this still pushes out at some breakpoints - haven't managed to work out why yet - thought it might require a calc() to get a pixel width but that didn't work either.

jeraldjuice · 2019-10-22T01:22:50Z

Force-pushed to handle some merge conflicts.

jeraldjuice · 2019-10-22T01:53:35Z

As @glendaviesnz mentioned, css text wrapping won't affect the copy button. It will, however, make it a bit more difficult to manually copy the text/view it. Here's how it looks with the ellipses wrapping the password/username:

shaunandrews · 2019-10-22T15:34:18Z

did we have any suggested error states? I suspect a global error notice may make sense, but let us know if you'd prefer something inline.

I think a global notice could work if we only have very short messages without any related actions. An inline notice might be slightly more emphatic — and preferred if we end up with larger error messages or related actions.

css text wrapping won't affect the copy button. It will, however, make it a bit more difficult to manually copy the text/view it.

Yea, sorry, I was referring to old fashioned manual copying. I think since we have the button, its not a major concern. It also begs the question of if we even need to show the username or password and force people to use the copy button.

jeraldjuice · 2019-10-22T16:54:04Z

@shaunandrews I'm going to merge this in and open up a new PR for the error states. We can also iterate on the password/username copying there, too.

jeraldjuice added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 17, 2019

jeraldjuice added this to the Hosting Section - Phase 1 milestone Oct 17, 2019

jeraldjuice requested review from shaunandrews and a team October 17, 2019 16:23

jeraldjuice self-assigned this Oct 17, 2019

gwwar reviewed Oct 17, 2019

View reviewed changes

jeraldjuice added 3 commits October 18, 2019 15:12

PMA card design tweaks

b0fb7a3

SFTP card ui tweaks and clipboard button

9f1fbcf

Add loading spinner

dab70cb

Update endpoint to 'ssh-user'

4686d44

jeraldjuice force-pushed the update/hosting-panel-ui-tweaks branch from 9c46b90 to 4686d44 Compare October 22, 2019 01:22

jeraldjuice added 2 commits October 21, 2019 21:28

Smooth over merge changes, update dummy data

5246db1

Update text wrapping styles

48bd65c

jeraldjuice merged commit 11dcffe into master Oct 22, 2019

jeraldjuice deleted the update/hosting-panel-ui-tweaks branch October 22, 2019 17:02

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hosting Panel: Update UI for cards and add clipboard button #36864

Hosting Panel: Update UI for cards and add clipboard button #36864

jeraldjuice commented Oct 17, 2019 •

edited by glendaviesnz

Loading

matticbot commented Oct 17, 2019

matticbot commented Oct 17, 2019 •

edited

Loading

gwwar commented Oct 17, 2019

gwwar commented Oct 17, 2019

gwwar Oct 17, 2019

gwwar commented Oct 17, 2019

shaunandrews commented Oct 17, 2019

shaunandrews commented Oct 17, 2019

shaunandrews commented Oct 17, 2019

gwwar commented Oct 17, 2019

glendaviesnz commented Oct 21, 2019 •

edited

Loading

glendaviesnz commented Oct 22, 2019 •

edited

Loading

jeraldjuice commented Oct 22, 2019

jeraldjuice commented Oct 22, 2019

shaunandrews commented Oct 22, 2019

jeraldjuice commented Oct 22, 2019

Hosting Panel: Update UI for cards and add clipboard button #36864

Hosting Panel: Update UI for cards and add clipboard button #36864

Conversation

jeraldjuice commented Oct 17, 2019 • edited by glendaviesnz Loading

Summary

Screenshots

Testing

matticbot commented Oct 17, 2019

matticbot commented Oct 17, 2019 • edited Loading

gwwar commented Oct 17, 2019

gwwar commented Oct 17, 2019

gwwar Oct 17, 2019

Choose a reason for hiding this comment

gwwar commented Oct 17, 2019

shaunandrews commented Oct 17, 2019

shaunandrews commented Oct 17, 2019

shaunandrews commented Oct 17, 2019

gwwar commented Oct 17, 2019

glendaviesnz commented Oct 21, 2019 • edited Loading

glendaviesnz commented Oct 22, 2019 • edited Loading

jeraldjuice commented Oct 22, 2019

jeraldjuice commented Oct 22, 2019

shaunandrews commented Oct 22, 2019

jeraldjuice commented Oct 22, 2019

jeraldjuice commented Oct 17, 2019 •

edited by glendaviesnz

Loading

matticbot commented Oct 17, 2019 •

edited

Loading

glendaviesnz commented Oct 21, 2019 •

edited

Loading

glendaviesnz commented Oct 22, 2019 •

edited

Loading