Staging Sites: Add Staging Sites UI in Hosting Configuration #73709

wojtekn · 2023-02-23T08:24:12Z

Related to 1696-gh-Automattic/dotcom-forge

Proposed Changes

In this PR, I propose to add an initial UI that allows adding a staging site.

Testing Instructions

Open the Atomic site
Navigate to Hosting Configuration
Confirm that the "Staging site" card is displayed
Click "Create staging site" to add a new staging site
Confirm that when the site is created, the UI changes and allows navigating to staging site

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

github-actions · 2023-02-23T08:24:24Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

wojtekn

@Automattic/yolo please review the PR.

I would also appreciate looking at rendering, as I think that component still renders too often when I unfocus/focus the browser. I suspect I'm still missing something there. Or maybe I'm trying to do premature optimization?

wojtekn · 2023-02-23T13:44:15Z

client/my-sites/hosting/staging-site-card/use-check-staging-site-status.ts

+		let transferInterval: NodeJS.Timeout;
+
+		if ( ! isFetchingTransferStatus ) {
+			transferInterval = setInterval(


Initially, I tried to do it using waitFor like it's done in another component:

wp-calypso/client/my-sites/checkout/checkout-thank-you/marketplace/marketplace-thank-you.tsx

Line 118 in f8823ab

waitFor( 2 ).then( () => dispatch( fetchAutomatedTransferStatus( siteId ) ) );

Unfortunately, it was sending tens of requests to the server. Do you have any thoughts on what could cause it? Does waitFor also need a way to cancel the effect?

During my testint, the setInterval worked great. It waited 5-6 seconds between each request, and it only made 3 requests.

sejas

It works great, I was able to create my staging site without errors. Love it! Great work! 🥳
I had to sandbox the API D102075-code

Some suggestions for future follow-ups/discussions related to the UI:

We could set a minimum height to the staging-site-card so the card linking won't break the scrolling.
Both buttons Create staging site and Manage staging site are too similar, which can confuse the user. We could change the text, or use the secondary button style for manage the site, or add some icons.
Currently there is no easy way to "remove/refresh" the staging site.

sejas · 2023-02-23T21:27:44Z

client/my-sites/hosting/staging-site-card/index.js

+
+	return (
+		<Card className="staging-site-card">
+			<MaterialIcon icon="build" size={ 24 } />


This icon is conflicting with Web server settings

Good catch! I tried to re-use an icon we already have in the codebase and missed that we use this one on this page. Would you have any thoughts on a good fit?

CC @javierarce

We could also use Gutenberg icons: https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library

Some suggestions:

We also have the Gridicons: https://automattic.github.io/gridicons/

Going with the Share icon for now:

I created a follow up issue to explore further https://github.com/Automattic/dotcom-forge/issues/1856

config/stage.json

wojtekn · 2023-02-24T09:41:01Z

Some suggestions for future follow-ups/discussions related to the UI:

We could set a minimum height to the staging-site-card so the card linking won't break the scrolling.

Both buttons Create staging site and Manage staging site are too similar, which can confuse the user. We could change the text, or use the secondary button style for manage the site, or add some icons.

Currently there is no easy way to "remove/refresh" the staging site.

Thanks @sejas , those are good suggestions. I've already added a ticket for the last one: 1757-gh-Automattic/dotcom-forge and added another one for card height 1840-gh-Automattic/dotcom-forge

wojtekn · 2023-02-24T09:50:53Z

Both buttons Create staging site and Manage staging site are too similar, which can confuse the user. We could change the text, or use the secondary button style for manage the site, or add some icons.

@javierarce any thoughts on this? Note that the "Manage staging site" button will be accompanied by "Delete staging site" button

danielbachhuber

This is pretty great, @wojtekn. Nice work!

client/my-sites/hosting/main.js

danielbachhuber · 2023-02-24T14:01:39Z

client/my-sites/hosting/staging-site-card/index.js

+		},
+		onSuccess: () => {
+			dispatch( recordTracksEvent( 'calypso_hosting_configuration_staging_site_add_success' ) );
+			dispatch( successNotice( __( 'Staging site was added.' ), noticeOptions ) );


Suggested change

dispatch( successNotice( __( 'Staging site was added.' ), noticeOptions ) );

dispatch( successNotice( __( 'Staging site added.' ), noticeOptions ) );

This notice disappeared really quickly for me (much quicker than 3 seconds). Maybe we should make it always present?

Actually, now I see we don't need this notice. We display it when the simple site is added, but we still need to wait and poll for the transfer status. What if we remove it completely and solve it under 1767-gh-Automattic/dotcom-forge ?

@wojtekn I think a notice would be nice. Can we have it displayed after the staging site is fully created?

Moved with 6ef8d1e

config/stage.json

matticbot · 2023-02-27T14:53:05Z

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

Sections (~693 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
hosting      +3103 B  (+0.5%)     +693 B  (+0.4%)

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.

danielbachhuber

Nice work on this, @wojtekn !

a8ci18n · 2023-02-27T17:17:54Z

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

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

a8ci18n · 2023-03-09T12:29:52Z

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

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

a8ci18n · 2023-03-30T12:29:45Z

Translation for this Pull Request has now been finished.

wojtekn added 2 commits February 23, 2023 09:10

Add staging sites configuration flag

60c1bad

Add Staging Sites UI in Hosting Configuration

319373e

wojtekn self-assigned this Feb 23, 2023

wojtekn added 2 commits February 23, 2023 12:26

Enable refetch on focus but add 10s stale time

f20207f

Clean up code, change waitFor to setInterval

cd00fba

wojtekn changed the title ~~Add Staging Sites UI in Hosting Configuration~~ Staging Sites: Add Staging Sites UI in Hosting Configuration Feb 23, 2023

wojtekn requested a review from a team February 23, 2023 13:38

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

wojtekn marked this pull request as ready for review February 23, 2023 13:39

wojtekn commented Feb 23, 2023

View reviewed changes

sejas approved these changes Feb 23, 2023

View reviewed changes

sejas reviewed Feb 23, 2023

View reviewed changes

config/stage.json Outdated Show resolved Hide resolved

Disable staging sites on staging environment for now

fc726aa

danielbachhuber reviewed Feb 24, 2023

View reviewed changes

wojtekn and others added 3 commits February 24, 2023 16:27

Move staging sites card down

d48273e

Remove not needed configuration flag entry

d0b3c99

Merge branch 'trunk' into add/staging-sites-hosting-configuration

22f5d04

danielbachhuber added 4 commits February 27, 2023 07:05

Copy tweaks

59ffb74

Display a sticky success notice after the transfer is complete

6ef8d1e

Fire calypso_hosting_configuration_staging_site_add_click

856f85b

Switch to the Share icon for now

eae7979

danielbachhuber approved these changes Feb 27, 2023

View reviewed changes

danielbachhuber merged commit 440704b into trunk Feb 27, 2023

danielbachhuber deleted the add/staging-sites-hosting-configuration branch February 27, 2023 15:53

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 Feb 27, 2023

danielbachhuber added the Staging Sites i1 label Feb 27, 2023

This was referenced Feb 27, 2023

Staging Sites: Remove Tracks event for staging site add success #73844

Merged

Staging Sites: Prevent added notice from appearing on mount #73870

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Staging Sites: Add Staging Sites UI in Hosting Configuration #73709

Staging Sites: Add Staging Sites UI in Hosting Configuration #73709

wojtekn commented Feb 23, 2023 •

edited

Loading

github-actions bot commented Feb 23, 2023 •

edited by matticbot

Loading

wojtekn left a comment

wojtekn Feb 23, 2023

sejas Feb 23, 2023

sejas left a comment •

edited

Loading

sejas Feb 23, 2023

wojtekn Feb 24, 2023

wojtekn Feb 24, 2023

sejas Feb 27, 2023 •

edited

Loading

danielbachhuber Feb 27, 2023

wojtekn commented Feb 24, 2023 •

edited

Loading

wojtekn commented Feb 24, 2023

danielbachhuber left a comment

danielbachhuber Feb 24, 2023

wojtekn Feb 24, 2023

danielbachhuber Feb 24, 2023

danielbachhuber Feb 27, 2023

matticbot commented Feb 27, 2023 •

edited

Loading

danielbachhuber left a comment

a8ci18n commented Feb 27, 2023

a8ci18n commented Mar 9, 2023 •

edited

Loading

a8ci18n commented Mar 30, 2023

	dispatch( successNotice( __( 'Staging site was added.' ), noticeOptions ) );
	dispatch( successNotice( __( 'Staging site added.' ), noticeOptions ) );

Staging Sites: Add Staging Sites UI in Hosting Configuration #73709

Staging Sites: Add Staging Sites UI in Hosting Configuration #73709

Conversation

wojtekn commented Feb 23, 2023 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Feb 23, 2023 • edited by matticbot Loading

wojtekn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sejas left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sejas Feb 27, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wojtekn commented Feb 24, 2023 • edited Loading

wojtekn commented Feb 24, 2023

danielbachhuber left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matticbot commented Feb 27, 2023 • edited Loading

danielbachhuber left a comment

Choose a reason for hiding this comment

a8ci18n commented Feb 27, 2023

a8ci18n commented Mar 9, 2023 • edited Loading

a8ci18n commented Mar 30, 2023

wojtekn commented Feb 23, 2023 •

edited

Loading

github-actions bot commented Feb 23, 2023 •

edited by matticbot

Loading

sejas left a comment •

edited

Loading

sejas Feb 27, 2023 •

edited

Loading

wojtekn commented Feb 24, 2023 •

edited

Loading

matticbot commented Feb 27, 2023 •

edited

Loading

a8ci18n commented Mar 9, 2023 •

edited

Loading