Staging: deprecate staging logic and replace with safe mode and dev s…

…ite (#37023) Co-authored-by: Karen Attfield <[email protected]> Co-authored-by: Sergey Mitroshin <[email protected]>
Automattic · Jun 7, 2024 · 2321a04 · 2321a04
1 parent 91b2516
commit 2321a04
Show file tree

Hide file tree

Showing 115 changed files with 812 additions and 358 deletions.
diff --git a/docs/rest-api.md b/docs/rest-api.md
@@ -191,7 +191,6 @@ Fetch Jetpack's current connection status.
 ```json
 {
 	"isActive": true,
-	"isStaging": false,
 	"offlineMode": {
 		"isActive":false,
 		"constant":false,

diff --git a/projects/js-packages/idc/changelog/add-jetpack-development-mode b/projects/js-packages/idc/changelog/add-jetpack-development-mode
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Safe mode: Added new screen for staging sites.
diff --git a/projects/js-packages/idc/components/card-fresh/index.jsx b/projects/js-packages/idc/components/card-fresh/index.jsx
@@ -35,6 +35,16 @@ const renderError = supportURL => {
 	);
 };
 
+const renderComparisonUrls = ( wpcomHostName, currentHostName ) => {
+	return (
+		<div>
+			<div className="jp-idc__idc-screen__card-action-sitename">{ wpcomHostName }</div>
+			<Dashicon icon="minus" className="jp-idc__idc-screen__card-action-separator" />
+			<div className="jp-idc__idc-screen__card-action-sitename">{ currentHostName }</div>
+		</div>
+	);
+};
+
 /**
  * The "start fresh" card.
  *
@@ -47,6 +57,7 @@ const CardFresh = props => {
 		startFreshCallback = () => {},
 		customContent = {},
 		hasError = false,
+		isDevelopmentSite,
 	} = props;
 
 	const wpcomHostName = extractHostname( props.wpcomHomeUrl );
@@ -72,31 +83,63 @@ const CardFresh = props => {
 				</h4>
 
 				<p>
-					{ createInterpolateElement(
-						customContent.startFreshCardBodyText ||
-							sprintf(
-								/* translators: %1$s: The current site domain name. %2$s: The original site domain name. */
-								__(
-									'<hostname>%1$s</hostname> settings, stats, and subscribers will start fresh. <hostname>%2$s</hostname> will keep its data as is.',
-									'jetpack'
-								),
-								currentHostName,
-								wpcomHostName
-							),
-						{
-							hostname: <strong />,
-							em: <em />,
-							strong: <strong />,
-						}
-					) }
+					{ ! isDevelopmentSite
+						? createInterpolateElement(
+								customContent.startFreshCardBodyText ||
+									sprintf(
+										/* translators: %1$s: The current site domain name. %2$s: The original site domain name. */
+										__(
+											'<hostname>%1$s</hostname> settings, stats, and subscribers will start fresh. <hostname>%2$s</hostname> will keep its data as is.',
+											'jetpack'
+										),
+										currentHostName,
+										wpcomHostName
+									),
+								{
+									hostname: <strong />,
+									em: <em />,
+									strong: <strong />,
+								}
+						  )
+						: createInterpolateElement(
+								customContent.startFreshCardBodyText ||
+									sprintf(
+										/* translators: %1$s: The current site domain name. %2$s: The original site domain name. */
+										__(
+											'<p><strong>Recommended for</strong></p>' +
+												'<list><item>development sites</item><item>sites that need access to all Jetpack features</item></list>' +
+												'<p><strong>Please note</strong> that creating a fresh connection for <hostname>%1$s</hostname> would require restoring the connection on <hostname>%2$s</hostname> if that site is cloned back to production. ' +
+												'<safeModeLink>Learn more</safeModeLink>.</p>',
+											'jetpack'
+										),
+										currentHostName,
+										wpcomHostName
+									),
+								{
+									p: <p />,
+									hostname: <strong />,
+									em: <em />,
+									strong: <strong />,
+									list: <ul />,
+									item: <li />,
+									safeModeLink: (
+										<a
+											href={
+												customContent.supportURL || getRedirectUrl( 'jetpack-support-safe-mode' )
+											}
+											rel="noopener noreferrer"
+											target="_blank"
+										/>
+									),
+								}
+						  ) }
 				</p>
 			</div>
 
 			<div className="jp-idc__idc-screen__card-action-bottom">
-				<div className="jp-idc__idc-screen__card-action-sitename">{ wpcomHostName }</div>
-				<Dashicon icon="minus" className="jp-idc__idc-screen__card-action-separator" />
-				<div className="jp-idc__idc-screen__card-action-sitename">{ currentHostName }</div>
-
+				<div>
+					{ ! isDevelopmentSite ? renderComparisonUrls( wpcomHostName, currentHostName ) : null }
+				</div>
 				<Button
 					className="jp-idc__idc-screen__card-action-button"
 					label={ buttonLabel }
@@ -125,6 +168,8 @@ CardFresh.propTypes = {
 	customContent: PropTypes.shape( customContentShape ),
 	/** Whether the component has an error. */
 	hasError: PropTypes.bool,
+	/** Whether the site is in development mode. */
+	isDevelopmentSite: PropTypes.bool,
 };
 
 export default CardFresh;
diff --git a/projects/js-packages/idc/components/idc-screen/index.jsx b/projects/js-packages/idc/components/idc-screen/index.jsx
@@ -29,6 +29,7 @@ const IDCScreen = props => {
 		tracksEventData,
 		isAdmin,
 		possibleDynamicSiteUrlDetected,
+		isDevelopmentSite,
 	} = props;
 
 	const [ isMigrated, setIsMigrated ] = useState( false );
@@ -85,6 +86,7 @@ const IDCScreen = props => {
 			hasFreshError={ errorType === 'start-fresh' }
 			hasMigrateError={ errorType === 'migrate' }
 			possibleDynamicSiteUrlDetected={ possibleDynamicSiteUrlDetected }
+			isDevelopmentSite={ isDevelopmentSite }
 		/>
 	);
 };
@@ -112,6 +114,8 @@ IDCScreen.propTypes = {
 	isAdmin: PropTypes.bool.isRequired,
 	/** If potentially dynamic HTTP_HOST usage was detected for site URLs in wp-config which can lead to a JP IDC. */
 	possibleDynamicSiteUrlDetected: PropTypes.bool,
+	/** Whether the site is in development mode. */
+	isDevelopmentSite: PropTypes.bool,
 };
 
 export default IDCScreen;
diff --git a/projects/js-packages/idc/components/idc-screen/screen-main.jsx b/projects/js-packages/idc/components/idc-screen/screen-main.jsx
@@ -1,9 +1,10 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import React from 'react';
 import customContentShape from '../../tools/custom-content-shape';
+import extractHostname from '../../tools/extract-hostname';
 import CardFresh from '../card-fresh';
 import CardMigrate from '../card-migrate';
 import SafeMode from '../safe-mode';
@@ -27,7 +28,10 @@ const ScreenMain = props => {
 		hasFreshError = false,
 		hasStaySafeError = false,
 		possibleDynamicSiteUrlDetected = false,
+		isDevelopmentSite,
 	} = props;
+	const wpcomHostName = extractHostname( props.wpcomHomeUrl );
+	const currentHostName = extractHostname( props.currentUrl );
 
 	return (
 		<React.Fragment>
@@ -38,25 +42,56 @@ const ScreenMain = props => {
 			</h2>
 
 			<p>
-				{ createInterpolateElement(
-					customContent.mainBodyText ||
-						__(
-							'Your site is in Safe Mode because you have 2 Jetpack-powered sites that appear to be duplicates. ' +
-								'2 sites that are telling Jetpack they’re the same site. <safeModeLink>Learn more about safe mode.</safeModeLink>',
-							'jetpack'
-						),
-					{
-						safeModeLink: (
-							<a
-								href={ customContent.supportURL || getRedirectUrl( 'jetpack-support-safe-mode' ) }
-								rel="noopener noreferrer"
-								target="_blank"
-							/>
-						),
-						em: <em />,
-						strong: <strong />,
-					}
-				) }
+				{ ! isDevelopmentSite
+					? createInterpolateElement(
+							customContent.mainBodyText ||
+								__(
+									'Your site is in Safe Mode because you have 2 Jetpack-powered sites that appear to be duplicates. ' +
+										'Two sites that are telling Jetpack they’re the same site. <safeModeLink>Learn more about safe mode.</safeModeLink>',
+									'jetpack'
+								),
+							{
+								safeModeLink: (
+									<a
+										href={
+											customContent.supportURL || getRedirectUrl( 'jetpack-support-safe-mode' )
+										}
+										rel="noopener noreferrer"
+										target="_blank"
+									/>
+								),
+								em: <em />,
+								strong: <strong />,
+							}
+					  )
+					: createInterpolateElement(
+							customContent.mainBodyText ||
+								sprintf(
+									/* translators: %1$s: The current site domain name. %2$s: The original site domain name. */
+									__(
+										'<span>Your site is in Safe Mode because <hostname>%1$s</hostname> appears to be a staging or development copy of <hostname>%2$s</hostname>.</span>' +
+											'2 sites that are telling Jetpack they’re the same site. <safeModeLink>Learn more or troubleshoot common Safe mode issues</safeModeLink>.',
+										'jetpack'
+									),
+									currentHostName,
+									wpcomHostName
+								),
+							{
+								span: <span style={ { display: 'block' } } />,
+								hostname: <strong />,
+								em: <em />,
+								strong: <strong />,
+								safeModeLink: (
+									<a
+										href={
+											customContent.supportURL || getRedirectUrl( 'jetpack-support-safe-mode' )
+										}
+										rel="noopener noreferrer"
+										target="_blank"
+									/>
+								),
+							}
+					  ) }
 			</p>
 
 			{ possibleDynamicSiteUrlDetected && (
@@ -95,26 +130,50 @@ const ScreenMain = props => {
 					( hasMigrateError || hasFreshError ? ' jp-idc__idc-screen__cards-error' : '' )
 				}
 			>
-				<CardMigrate
-					wpcomHomeUrl={ wpcomHomeUrl }
-					currentUrl={ currentUrl }
-					isMigrating={ isMigrating }
-					migrateCallback={ migrateCallback }
-					customContent={ customContent }
-					hasError={ hasMigrateError }
-				/>
-				<div className="jp-idc__idc-screen__cards-separator">or</div>
-				<CardFresh
-					wpcomHomeUrl={ wpcomHomeUrl }
-					currentUrl={ currentUrl }
-					isStartingFresh={ isStartingFresh }
-					startFreshCallback={ startFreshCallback }
-					customContent={ customContent }
-					hasError={ hasFreshError }
-				/>
+				{ ! isDevelopmentSite ? (
+					<React.Fragment>
+						<CardMigrate
+							wpcomHomeUrl={ wpcomHomeUrl }
+							currentUrl={ currentUrl }
+							isMigrating={ isMigrating }
+							migrateCallback={ migrateCallback }
+							customContent={ customContent }
+							hasError={ hasMigrateError }
+						/>
+						<div className="jp-idc__idc-screen__cards-separator">or</div>
+						<CardFresh
+							wpcomHomeUrl={ wpcomHomeUrl }
+							currentUrl={ currentUrl }
+							isStartingFresh={ isStartingFresh }
+							startFreshCallback={ startFreshCallback }
+							customContent={ customContent }
+							hasError={ hasFreshError }
+							isDevelopmentSite={ isDevelopmentSite }
+						/>
+					</React.Fragment>
+				) : (
+					<React.Fragment>
+						<CardFresh
+							wpcomHomeUrl={ wpcomHomeUrl }
+							currentUrl={ currentUrl }
+							isStartingFresh={ isStartingFresh }
+							startFreshCallback={ startFreshCallback }
+							customContent={ customContent }
+							hasError={ hasFreshError }
+							isDevelopmentSite={ isDevelopmentSite }
+						/>
+						<div className="jp-idc__idc-screen__cards-separator">or</div>
+						<SafeMode
+							hasError={ hasStaySafeError }
+							customContent={ customContent }
+							isDevelopmentSite={ isDevelopmentSite }
+						/>
+					</React.Fragment>
+				) }
 			</div>
-
-			<SafeMode hasError={ hasStaySafeError } customContent={ customContent } />
+			{ ! isDevelopmentSite ? (
+				<SafeMode hasError={ hasStaySafeError } customContent={ customContent } />
+			) : null }
 		</React.Fragment>
 	);
 };
@@ -142,6 +201,8 @@ ScreenMain.propTypes = {
 	hasStaySafeError: PropTypes.bool,
 	/** If potentially dynamic HTTP_HOST usage was detected for site URLs in wp-config which can lead to a JP IDC. */
 	possibleDynamicSiteUrlDetected: PropTypes.bool,
+	/** Whether the site is in development mode. */
+	isDevelopmentSite: PropTypes.bool,
 };
 
 export default ScreenMain;
diff --git a/projects/js-packages/idc/components/idc-screen/style.scss b/projects/js-packages/idc/components/idc-screen/style.scss
@@ -60,6 +60,13 @@
 
 	a {
 		color: #2C3338;
+		text-decoration-line: underline !important;
+	}
+
+	ul {
+		font-size: 16px;
+		padding-left: 20px;
+		list-style-type: disc;
 	}
 
 	.jp-idc__idc-screen__cards {
@@ -128,14 +135,16 @@
 				display: block;
 			}
 
-			.jp-idc__idc-screen__card-action-button {
+			.jp-idc__idc-screen__card-action-button,
+			.jp-idc__idc-screen__card-action-button-secondary {
 				width: 100%;
 				padding: 8px 24px;
 			}
 		}
 	}
 
-	.jp-idc__idc-screen__card-action-button {
+	.jp-idc__idc-screen__card-action-button,
+	.jp-idc__idc-screen__card-action-button-secondary {
 		margin-top: 24px;
 		padding: 8px;
 		height: auto;
@@ -149,6 +158,12 @@
 		justify-content: center;
 	}
 
+	.jp-idc__idc-screen__card-action-button-secondary {
+		background: var(--jp-white);
+		color: var(--jp-black);
+		box-shadow: inset 0 0 0 1.51px var(--jp-black);
+	}
+
 	.jp-idc__idc-screen__card-action-button-migrated {
 		width: 141px;
 		margin-top: 64px;