List Views: Add a "Copy Link" menu item for each post and page. (#37049)

Author: kwight

client/components/popover/menu-item-clipboard.jsx

@@ -0,0 +1,48 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { noop } from 'lodash';
+import classNames from 'classnames';
+import Gridicon from 'components/gridicon';
+
+/**
+ * Internal dependencies
+ */
+import ClipboardButton from 'components/forms/clipboard-button';
+
+function PopoverMenuItemClipboard( {
+	children,
+	className,
+	text,
+	onCopy = noop,
+	icon = 'clipboard',
+	...rest
+} ) {
+	return (
+		<ClipboardButton
+			text={ text }
+			onCopy={ onCopy }
+			role="menuitem"
+			tabIndex="-1"
+			className={ classNames( 'popover__menu-item', className ) }
+			{ ...rest }
+		>
+			<Gridicon icon={ icon } size={ 18 } />
+			{ children }
+		</ClipboardButton>
+	);
+}
+
+PopoverMenuItemClipboard.propTypes = {
+	className: PropTypes.string,
+	icon: PropTypes.string,
+	onCopy: PropTypes.func,
+	text: PropTypes.string,
+};
+
+export default PopoverMenuItemClipboard;

client/my-sites/pages/page/index.js

@@ -18,6 +18,7 @@ import CompactCard from 'components/card/compact';
 import Gridicon from 'components/gridicon';
 import EllipsisMenu from 'components/ellipsis-menu';
 import PopoverMenuItem from 'components/popover/menu-item';
+import PopoverMenuItemClipboard from 'components/popover/menu-item-clipboard';
 import Notice from 'components/notice';
 import NoticeAction from 'components/notice/notice-action';
 import SiteIcon from 'blocks/site-icon';
@@ -35,7 +36,7 @@ import { recordGoogleEvent } from 'state/analytics/actions';
 import { setPreviewUrl } from 'state/ui/preview/actions';
 import { setLayoutFocus } from 'state/ui/layout-focus/actions';
 import { savePost, deletePost, trashPost, restorePost } from 'state/posts/actions';
-import { withoutNotice } from 'state/notices/actions';
+import { infoNotice, withoutNotice } from 'state/notices/actions';
 import { shouldRedirectGutenberg } from 'state/selectors/should-redirect-gutenberg';
 import getEditorUrl from 'state/selectors/get-editor-url';
 import { getEditorDuplicatePostPath } from 'state/ui/editor/selectors';
@@ -306,7 +307,7 @@ class Page extends Component {
 		];
 	}
 
-	getCopyItem() {
+	getCopyPageItem() {
 		const { wpAdminGutenberg, page: post, duplicateUrl } = this.props;
 		if (
 			! includes( [ 'draft', 'future', 'pending', 'private', 'publish' ], post.status ) ||
@@ -318,11 +319,20 @@ class Page extends Component {
 		return (
 			<PopoverMenuItem onClick={ this.copyPage } href={ duplicateUrl }>
 				<Gridicon icon="clipboard" size={ 18 } />
-				{ this.props.translate( 'Copy' ) }
+				{ this.props.translate( 'Copy Page' ) }
 			</PopoverMenuItem>
 		);
 	}
 
+	getCopyLinkItem() {
+		const { page, translate } = this.props;
+		return (
+			<PopoverMenuItemClipboard text={ page.URL } onCopy={ this.copyPageLink } icon={ 'link' }>
+				{ translate( 'Copy Link' ) }
+			</PopoverMenuItemClipboard>
+		);
+	}
+
 	getRestoreItem() {
 		if ( this.props.page.status !== 'trash' || ! utils.userCan( 'delete_post', this.props.page ) ) {
 			return null;
@@ -421,7 +431,8 @@ class Page extends Component {
 		const postsPageItem = this.getPostsPageItem();
 		const restoreItem = this.getRestoreItem();
 		const sendToTrashItem = this.getSendToTrashItem();
-		const copyItem = this.getCopyItem();
+		const copyPageItem = this.getCopyPageItem();
+		const copyLinkItem = this.getCopyLinkItem();
 		const statsItem = this.getStatsItem();
 		const moreInfoItem = this.popoverMoreInfo();
 		const hasMenuItems =
@@ -444,7 +455,8 @@ class Page extends Component {
 				{ publishItem }
 				{ viewItem }
 				{ statsItem }
-				{ copyItem }
+				{ copyPageItem }
+				{ copyLinkItem }
 				{ restoreItem }
 				{ frontPageItem }
 				{ postsPageItem }
@@ -653,6 +665,13 @@ class Page extends Component {
 		this.props.recordEvent( 'Clicked Copy Page' );
 	};
 
+	copyPageLink = () => {
+		this.props.infoNotice( this.props.translate( 'Link copied to clipboard.' ), {
+			duration: 3000,
+		} );
+		this.props.recordEvent( 'Clicked Copy Page Link' );
+	};
+
 	handleMenuToggle = isVisible => {
 		if ( isVisible ) {
 			// record a GA event when the menu is opened
@@ -688,6 +707,7 @@ const mapState = ( state, props ) => {
 };
 
 const mapDispatch = {
+	infoNotice,
 	savePost: withoutNotice( savePost ),
 	deletePost: withoutNotice( deletePost ),
 	trashPost: withoutNotice( trashPost ),

client/my-sites/post-type-list/post-actions-ellipsis-menu/copy-link.jsx

@@ -0,0 +1,62 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { localize, translate } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import PopoverMenuItemClipboard from 'components/popover/menu-item-clipboard';
+import { getPost } from 'state/posts/selectors';
+import { bumpStat, recordTracksEvent } from 'state/analytics/actions';
+import { bumpStatGenerator } from './utils';
+import { infoNotice } from 'state/notices/actions';
+
+function PostActionsEllipsisMenuCopyLink( { onCopyLinkClick, copyLink } ) {
+	return (
+		<PopoverMenuItemClipboard text={ copyLink } onCopy={ onCopyLinkClick } icon={ 'link' }>
+			{ translate( 'Copy Link' ) }
+		</PopoverMenuItemClipboard>
+	);
+}
+
+PostActionsEllipsisMenuCopyLink.propTypes = {
+	onCopyLinkClick: PropTypes.func,
+	copyLink: PropTypes.string,
+	translate: PropTypes.func,
+};
+
+const mapStateToProps = ( state, { globalId } ) => {
+	const post = getPost( state, globalId );
+	if ( ! post ) {
+		return {};
+	}
+
+	return {
+		copyLink: post.URL,
+		type: post.type,
+	};
+};
+
+const mapDispatchToProps = { bumpStat, infoNotice, recordTracksEvent };
+
+const mergeProps = ( stateProps, dispatchProps, ownProps ) => {
+	const bumpCopyLinkStat = bumpStatGenerator( stateProps.type, 'copy_link', dispatchProps.bumpStat );
+	const onCopyLinkClick = () => {
+		dispatchProps.infoNotice( translate( 'Link copied to clipboard.' ), { duration: 3000 } );
+		bumpCopyLinkStat();
+		dispatchProps.recordTracksEvent( 'calypso_post_type_list_copy_link' );
+	};
+	return Object.assign( {}, ownProps, stateProps, dispatchProps, { onCopyLinkClick } );
+};
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps,
+	mergeProps
+)( localize( PostActionsEllipsisMenuCopyLink ) );

client/my-sites/post-type-list/post-actions-ellipsis-menu/duplicate.jsx

@@ -41,7 +41,7 @@ function PostActionsEllipsisMenuDuplicate( {
 	return (
 		<PopoverMenuItem href={ duplicateUrl } onClick={ onDuplicateClick } icon="clipboard">
 			<QueryJetpackModules siteId={ siteId } />
-			{ translate( 'Copy', { context: 'verb' } ) }
+			{ translate( 'Copy Post' ) }
 		</PopoverMenuItem>
 	);
 }

client/my-sites/post-type-list/post-actions-ellipsis-menu/index.jsx

@@ -20,6 +20,7 @@ import PostActionsEllipsisMenuTrash from './trash';
 import PostActionsEllipsisMenuView from './view';
 import PostActionsEllipsisMenuRestore from './restore';
 import PostActionsEllipsisMenuDuplicate from './duplicate';
+import PostActionsEllipsisMenuCopyLink from './copy-link';
 
 /**
  * Style dependencies
@@ -39,6 +40,7 @@ export default function PostActionsEllipsisMenu( { globalId, includeDefaultActio
 			<PostActionsEllipsisMenuShare key="share" />,
 			<PostActionsEllipsisMenuRestore key="restore" />,
 			<PostActionsEllipsisMenuDuplicate key="duplicate" />,
+			<PostActionsEllipsisMenuCopyLink key="copyLink" />,
 			<PostActionsEllipsisMenuTrash key="trash" />
 		);
 	}

client/my-sites/post-type-list/post-actions-ellipsis-menu/style.scss

@@ -12,3 +12,8 @@
 		margin-right: -16px;
 	}
 }
+
+.ellipsis-menu__menu .button .gridicon {
+	top: inherit;
+	margin-top: inherit;
+}