Post List: Add a Copy Link Quick Action (#41305)

* Post List: Add a Copy Link Quick Action

* some feedback

* use external js file

* Update projects/packages/post-list/webpack.config.js

Co-authored-by: Brad Jorsch <anomiex@users.noreply.github.com>

* feedback

* fix php tests

* fix php tests and update composer.lock files

* changelog

* fix package.json

* add copy link in all statuses except trash

* exclude files from published package

* fix composer.lock files

---------

Co-authored-by: Brad Jorsch <anomiex@users.noreply.github.com>

projects/packages/post-list/.gitattributes

@@ -1,16 +1,19 @@
 # Files not needed to be distributed in the package.
-.gitattributes    export-ignore
-.github/          export-ignore
-package.json      export-ignore
-webpack.config.js export-ignore
-phpunit.xml.dist  export-ignore
-.babelrc          export-ignore
+.gitattributes     export-ignore
+.github/           export-ignore
+package.json       export-ignore
+webpack.config.js  export-ignore
+phpunit.xml.dist   export-ignore
+.babelrc           export-ignore
 
 # Files to include in the mirror repo
-/build/**         production-include
+/build/**          production-include
 
 # Files to exclude from the mirror repo
-/changelog/**     production-exclude
-.gitignore        production-exclude
-.phpcs.dir.xml    production-exclude
-_inc/**           production-exclude
+/changelog/**      production-exclude
+.gitignore         production-exclude
+.phpcs.dir.xml     production-exclude
+_inc/**            production-exclude
+/package.json      production-exclude
+/src/**/*.js       production-exclude
+/webpack.config.js production-exclude

projects/packages/post-list/changelog/add-copy-post-link-action-in-posts-list

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Post List: Add a Copy Link Quick Action

projects/packages/post-list/composer.json

@@ -38,6 +38,12 @@
 		],
 		"test-php": [
 			"@composer phpunit"
+		],
+		"build-production": [
+			"pnpm run build-production"
+		],
+		"build-development": [
+			"pnpm run build"
 		]
 	},
 	"minimum-stability": "dev",

projects/packages/post-list/package.json

@@ -0,0 +1,31 @@
+{
+	"private": true,
+	"description": "Enhance the classic view of the Admin section of your WordPress site",
+	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/post-list/#readme",
+	"bugs": {
+		"url": "https://github.com/Automattic/jetpack/labels/[Package] Post List"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Automattic/jetpack.git",
+		"directory": "projects/packages/post-list"
+	},
+	"license": "GPL-2.0-or-later",
+	"author": "Automattic",
+	"scripts": {
+		"build": "pnpm run clean && pnpm run build-js",
+		"build-js": "webpack",
+		"build-production": "pnpm run clean && pnpm run build-production-js && pnpm run validate",
+		"build-production-js": "NODE_ENV=production BABEL_ENV=production pnpm run build-js",
+		"clean": "rm -rf build",
+		"validate": "pnpm exec validate-es build/"
+	},
+	"dependencies": {
+		"@wordpress/i18n": "5.16.0"
+	},
+	"devDependencies": {
+		"@automattic/jetpack-webpack-config": "workspace:*",
+		"webpack": "5.94.0",
+		"webpack-cli": "6.0.1"
+	}
+}

projects/packages/post-list/src/class-post-list.php

@@ -7,6 +7,7 @@
 
 namespace Automattic\Jetpack\Post_List;
 
+use Automattic\Jetpack\Assets;
 use WP_Post;
 use WP_Screen;
 
@@ -91,6 +92,16 @@ public function enqueue_scripts( $hook ) {
 				'rtl',
 				plugin_dir_url( __DIR__ ) . './src/rtl.css'
 			);
+			Assets::register_script(
+				'jetpack_posts_list',
+				'../build/index.js',
+				__FILE__,
+				array(
+					'in_footer'  => true,
+					'enqueue'    => true,
+					'textdomain' => 'jetpack-post-list',
+				)
+			);
 		}
 	}
 
@@ -153,6 +164,43 @@ public function add_filters_and_actions_for_screen( $current_screen ) {
 
 		$this->maybe_customize_columns( $current_screen->post_type );
 		$this->maybe_add_share_action( $current_screen->post_type );
+		$this->maybe_add_copy_link_action( $current_screen->post_type );
+	}
+
+	/**
+	 * Checks the current post type and adds the Copy link post
+	 * action if it is appropriate to do so.
+	 *
+	 * @param string $post_type The post type associated with the current request.
+	 */
+	public function maybe_add_copy_link_action( $post_type ) {
+		if ( ! is_post_type_viewable( $post_type ) ) {
+			return;
+		}
+		add_filter( 'post_row_actions', array( $this, 'add_copy_link_action' ), 20, 2 );
+		add_filter( 'page_row_actions', array( $this, 'add_copy_link_action' ), 20, 2 );
+	}
+
+	/**
+	 * Adds the Copy link post action which copies the post link to the clipboard.
+	 *
+	 * @param array   $post_actions The current array of post actions.
+	 * @param WP_Post $post The current post in the post list table.
+	 *
+	 * @return array The modified post actions array.
+	 */
+	public function add_copy_link_action( $post_actions, $post ) {
+		if ( $post->post_status === 'trash' ) {
+			return $post_actions;
+		}
+
+		$post_actions['copy-link'] = sprintf(
+			'<a href="%1$s" aria-label="%2$s" class="jetpack-post-list__copy-link-action">%3$s</a>',
+			esc_url( get_permalink( $post ) ),
+			esc_html__( 'Copy link to clipboard', 'jetpack-post-list' ),
+			esc_html__( 'Copy link', 'jetpack-post-list' )
+		);
+		return $post_actions;
 	}
 
 	/**

projects/packages/post-list/src/index.js

@@ -0,0 +1,31 @@
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Closure function to copy the link to the clipboard.
+ *
+ * @return {Function} The click event handler.
+ */
+function copyLinkQuickAction() {
+	let timoutId;
+	/**
+	 * Copy the link to the clipboard.
+	 * @param {object} event - The event object.
+	 */
+	function onClick( event ) {
+		event.preventDefault();
+		clearTimeout( timoutId );
+		window.navigator.clipboard.writeText( event.target.getAttribute( 'href' ) ).then( () => {
+			event.target.textContent = __( 'Copied!', 'jetpack-post-list' );
+			timoutId = setTimeout( () => {
+				event.target.textContent = __( 'Copy link', 'jetpack-post-list' );
+			}, 2000 );
+		} );
+	}
+	return onClick;
+}
+
+document.addEventListener( 'DOMContentLoaded', () => {
+	document.querySelectorAll( '.jetpack-post-list__copy-link-action' ).forEach( node => {
+		node.addEventListener( 'click', copyLinkQuickAction() );
+	} );
+} );

projects/packages/post-list/tests/php/test-post-list.php

@@ -104,8 +104,10 @@ public function test_add_filters_and_actions_for_screen_thumbnail() {
 		$this->assertTrue( has_action( 'manage_posts_custom_column' ) );
 		$this->assertTrue( has_filter( 'manage_pages_columns' ) );
 		$this->assertTrue( has_action( 'manage_pages_custom_column' ) );
-		$this->assertFalse( has_action( 'post_row_actions' ) );
-		$this->assertFalse( has_action( 'page_row_actions' ) );
+		$this->assertFalse( has_action( 'post_row_actions', array( $post_list, 'add_share_action' ) ) );
+		$this->assertFalse( has_action( 'page_row_actions', array( $post_list, 'add_share_action' ) ) );
+		$this->assertNotFalse( has_action( 'post_row_actions', array( $post_list, 'add_copy_link_action' ) ) );
+		$this->assertNotFalse( has_action( 'page_row_actions', array( $post_list, 'add_copy_link_action' ) ) );
 	}
 
 	/**
@@ -197,8 +199,10 @@ public function test_add_filters_and_actions_for_screen_share_flag_disabled() {
 		$this->assertTrue( has_action( 'manage_posts_custom_column' ) );
 		$this->assertTrue( has_filter( 'manage_pages_columns' ) );
 		$this->assertTrue( has_action( 'manage_pages_custom_column' ) );
-		$this->assertFalse( has_action( 'post_row_actions' ) );
-		$this->assertFalse( has_action( 'page_row_actions' ) );
+		$this->assertFalse( has_action( 'post_row_actions', array( $post_list, 'add_share_action' ) ) );
+		$this->assertFalse( has_action( 'page_row_actions', array( $post_list, 'add_share_action' ) ) );
+		$this->assertNotFalse( has_action( 'post_row_actions', array( $post_list, 'add_copy_link_action' ) ) );
+		$this->assertNotFalse( has_action( 'page_row_actions', array( $post_list, 'add_copy_link_action' ) ) );
 	}
 
 	/**

projects/packages/post-list/webpack.config.js

@@ -0,0 +1,33 @@
+const path = require( 'path' );
+const jetpackWebpackConfig = require( '@automattic/jetpack-webpack-config/webpack' );
+
+module.exports = [
+	{
+		entry: {
+			index: './src/index.js',
+		},
+		mode: jetpackWebpackConfig.mode,
+		devtool: jetpackWebpackConfig.devtool,
+		output: {
+			...jetpackWebpackConfig.output,
+			path: path.resolve( './build' ),
+		},
+		optimization: {
+			...jetpackWebpackConfig.optimization,
+		},
+		resolve: {
+			...jetpackWebpackConfig.resolve,
+		},
+		node: false,
+		plugins: [ ...jetpackWebpackConfig.StandardPlugins() ],
+		module: {
+			strictExportPresence: true,
+			rules: [
+				// Transpile JavaScript
+				jetpackWebpackConfig.TranspileRule( {
+					exclude: /node_modules\//,
+				} ),
+			],
+		},
+	},
+];

projects/plugins/jetpack/changelog/add-copy-post-link-action-in-posts-list

@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Post List: Add a Copy Link Quick Action

projects/plugins/social/changelog/add-copy-post-link-action-in-posts-list

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Post List: Add a Copy Link Quick Action

projects/plugins/wpcomsh/changelog/add-copy-post-link-action-in-posts-list

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Post List: Add a Copy Link Quick Action