Merge pull request #5550 from Automattic/add/external-url-to-webpreview

WebPreview: Allow externalUrl to be set for the external link button

client/components/web-preview/index.jsx

@@ -33,6 +33,8 @@ const WebPreview = React.createClass( {
 		showDeviceSwitcher: React.PropTypes.bool,
 		// The URL that should be displayed in the iframe
 		previewUrl: React.PropTypes.string,
+		// The URL for the external link button
+		externalUrl: React.PropTypes.string,
 		// The markup to display in the iframe
 		previewMarkup: React.PropTypes.string,
 		// The viewport device to show initially
@@ -61,7 +63,7 @@ const WebPreview = React.createClass( {
 			previewMarkup: null,
 			onLoad: noop,
 			onClose: noop,
-		}
+		};
 	},
 
 	getInitialState() {

client/components/web-preview/toolbar.jsx

@@ -61,7 +61,7 @@ const PreviewToolbar = React.createClass( {
 					</button>
 				}
 				{ this.props.showExternal &&
-					<a className="web-preview__external" href={ this.props.previewUrl } target="_blank">
+					<a className="web-preview__external" href={ this.props.externalUrl || this.props.previewUrl } target="_blank">
 						<Gridicon icon="external" />
 					</a>
 				}

client/my-sites/design-preview/index.js

@@ -194,6 +194,7 @@ const DesignPreview = React.createClass( {
 			<WebPreview
 				className={ this.props.className }
 				previewUrl={ useEndpoint ? null : this.getPreviewUrl( this.props.selectedSite ) }
+				externalUrl={ this.props.selectedSite ? this.props.selectedSite.URL : null }
 				showExternal={ true }
 				showClose={ this.props.showClose }
 				showPreview={ this.props.showPreview }

client/post-editor/editor-preview/index.jsx

@@ -1,13 +1,14 @@
 /**
  * External dependencies
  */
-const React = require( 'react' ),
-	url = require( 'url' );
+import React from 'react';
+import url from 'url';
+import omit from 'lodash/omit';
 
 /**
  * Internal dependencies
  */
-const WebPreview = require( 'components/web-preview' );
+import WebPreview from 'components/web-preview';
 
 const EditorPreview = React.createClass( {
 
@@ -79,13 +80,24 @@ const EditorPreview = React.createClass( {
 		return url.format( parsed );
 	},
 
+	cleanExternalUrl( externalUrl ) {
+		if ( ! externalUrl ) {
+			return null;
+		}
+		const parsed = url.parse( externalUrl, true );
+		parsed.query = omit( parsed.query, 'preview', 'iframe', 'frame-nonce' );
+		delete parsed.search;
+		return url.format( parsed );
+	},
+
 	render() {
 		return (
 			<WebPreview
 				showPreview={ this.props.showPreview }
 				defaultViewportDevice="tablet"
 				onClose={ this.props.onClose }
 				previewUrl={ this.state.iframeUrl }
+				externalUrl={ this.cleanExternalUrl( this.props.externalUrl ) }
 				loadingMessage="Beep beep boop…"
 			/>
 		);

client/post-editor/post-editor.jsx

@@ -355,6 +355,7 @@ const PostEditor = React.createClass( {
 								isSaving={ this.state.isSaving || this.state.isAutosaving }
 								isLoading={ this.state.isLoading }
 								previewUrl={ this.state.previewUrl }
+								externalUrl={ this.state.previewUrl }
 							/>
 							: null }
 					</div>