From 43f9ad7e3dbffd90a330229c2a731d368c95f2cf Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 11 Jan 2022 13:53:10 +0000
Subject: [PATCH] PostLockedModal: Display preview link as part of the text
 (#37852)

* PostLockedModal: Display preview link as part of the text

* Avoid code duplication
---
 .../src/components/post-locked-modal/index.js | 125 ++++++++++--------
 1 file changed, 72 insertions(+), 53 deletions(-)

diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js
index 9ee8283bc5c67..3576dc91dc5dd 100644
--- a/packages/editor/src/components/post-locked-modal/index.js
+++ b/packages/editor/src/components/post-locked-modal/index.js
@@ -7,10 +7,16 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Modal, Button, Flex, FlexItem } from '@wordpress/components';
+import {
+	Modal,
+	Button,
+	ExternalLink,
+	Flex,
+	FlexItem,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
-import { useEffect } from '@wordpress/element';
+import { useEffect, createInterpolateElement } from '@wordpress/element';
 import { addAction, removeAction } from '@wordpress/hooks';
 import { useInstanceId } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
@@ -19,7 +25,6 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { getWPAdminURL } from '../../utils/url';
-import PostPreviewButton from '../post-preview-button';
 import { store as editorStore } from '../../store';
 
 export default function PostLockedModal() {
@@ -34,6 +39,7 @@ export default function PostLockedModal() {
 		postLockUtils,
 		activePostLock,
 		postType,
+		previewLink,
 	} = useSelect( ( select ) => {
 		const {
 			isPostLocked,
@@ -42,6 +48,7 @@ export default function PostLockedModal() {
 			getCurrentPostId,
 			getActivePostLock,
 			getEditedPostAttribute,
+			getEditedPostPreviewLink,
 			getEditorSettings,
 		} = select( editorStore );
 		const { getPostType } = select( coreStore );
@@ -53,6 +60,7 @@ export default function PostLockedModal() {
 			postLockUtils: getEditorSettings().postLockUtils,
 			activePostLock: getActivePostLock(),
 			postType: getPostType( getEditedPostAttribute( 'type' ) ),
+			previewLink: getEditedPostPreviewLink(),
 		};
 	}, [] );
 
@@ -179,66 +187,77 @@ export default function PostLockedModal() {
 					className="editor-post-locked-modal__avatar"
 				/>
 			) }
-			{ !! isTakeover && (
-				<div>
+			<div>
+				{ !! isTakeover && (
 					<p>
-						{ userDisplayName
-							? sprintf(
-									/* translators: %s: user's display name */
-									__(
-										'%s now has editing control of this post. Don’t worry, your changes up to this moment have been saved.'
-									),
-									userDisplayName
-							  )
-							: __(
-									'Another user now has editing control of this post. Don’t worry, your changes up to this moment have been saved.'
-							  ) }
+						{ createInterpolateElement(
+							userDisplayName
+								? sprintf(
+										/* translators: %s: user's display name */
+										__(
+											'<strong>%s</strong> now has editing control of this posts (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
+										),
+										userDisplayName
+								  )
+								: __(
+										'Another user now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
+								  ),
+							{
+								strong: <strong />,
+								PreviewLink: (
+									<ExternalLink href={ previewLink }>
+										{ __( 'preview' ) }
+									</ExternalLink>
+								),
+							}
+						) }
 					</p>
-
-					<div className="editor-post-locked-modal__buttons">
-						<Button variant="primary" href={ allPostsUrl }>
-							{ allPostsLabel }
-						</Button>
-					</div>
-				</div>
-			) }
-			{ ! isTakeover && (
-				<div>
+				) }
+				{ ! isTakeover && (
 					<p>
-						{ userDisplayName
-							? sprintf(
-									/* translators: %s: user's display name */
-									__(
-										'%s is currently working on this post, which means you cannot make changes, unless you take over.'
-									),
-									userDisplayName
-							  )
-							: __(
-									'Another user is currently working on this post, which means you cannot make changes, unless you take over.'
-							  ) }
+						{ createInterpolateElement(
+							userDisplayName
+								? sprintf(
+										/* translators: %s: user's display name */
+										__(
+											'<strong>%s</strong> is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+										),
+										userDisplayName
+								  )
+								: __(
+										'Another user is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+								  ),
+							{
+								strong: <strong />,
+								PreviewLink: (
+									<ExternalLink href={ previewLink }>
+										{ __( 'preview' ) }
+									</ExternalLink>
+								),
+							}
+						) }
 					</p>
+				) }
 
-					<Flex
-						className="editor-post-locked-modal__buttons"
-						justify="flex-end"
-						expanded={ false }
-					>
-						<FlexItem>
-							<PostPreviewButton />
-						</FlexItem>
+				<Flex
+					className="editor-post-locked-modal__buttons"
+					justify="flex-end"
+					expanded={ false }
+				>
+					{ ! isTakeover && (
 						<FlexItem>
 							<Button variant="tertiary" href={ unlockUrl }>
 								{ __( 'Take over' ) }
 							</Button>
 						</FlexItem>
-						<FlexItem>
-							<Button variant="primary" href={ allPostsUrl }>
-								{ allPostsLabel }
-							</Button>
-						</FlexItem>
-					</Flex>
-				</div>
-			) }
+					) }
+					<FlexItem>
+						<Button variant="primary" href={ allPostsUrl }>
+							{ allPostsLabel }
+						</Button>
+					</FlexItem>
+				</Flex>
+			</div>
 		</Modal>
 	);
 }