diff --git a/projects/packages/connection/changelog/add-display-connection-status-users-page b/projects/packages/connection/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..90cab5cd014d8
--- /dev/null
+++ b/projects/packages/connection/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: Display connection status on Users page independent of the SSO module.
diff --git a/projects/packages/connection/src/class-plugin.php b/projects/packages/connection/src/class-plugin.php
index 37ac8bc129787..80cd3df7f9e85 100644
--- a/projects/packages/connection/src/class-plugin.php
+++ b/projects/packages/connection/src/class-plugin.php
@@ -31,6 +31,13 @@ class Plugin {
*/
private $slug;
+ /**
+ * Users Connection Admin instance.
+ *
+ * @var Users_Connection_Admin
+ */
+ private $users_connection_admin;
+
/**
* Initialize the plugin manager.
*
@@ -38,6 +45,9 @@ class Plugin {
*/
public function __construct( $slug ) {
$this->slug = $slug;
+
+ // Initialize Users_Connection_Admin
+ $this->users_connection_admin = new Users_Connection_Admin();
}
/**
diff --git a/projects/packages/connection/src/class-users-connection-admin.php b/projects/packages/connection/src/class-users-connection-admin.php
new file mode 100644
index 0000000000000..2c0551c5bc0fd
--- /dev/null
+++ b/projects/packages/connection/src/class-users-connection-admin.php
@@ -0,0 +1,174 @@
+
+ %1$s
+
+ ',
+ esc_html__( 'WordPress.com account', 'jetpack-connection' ),
+ esc_attr__( 'Tooltip', 'jetpack-connection' )
+ );
+ return $columns;
+ }
+
+ /**
+ * Render the connection column content.
+ *
+ * @param string $output Custom column output.
+ * @param string $column_name Column name.
+ * @param int $user_id ID of the currently-listed user.
+ * @return string
+ */
+ public function render_connection_column( $output, $column_name, $user_id ) {
+ if ( self::COLUMN_ID !== $column_name ) {
+ return $output;
+ }
+
+ if ( ( new Manager() )->is_user_connected( $user_id ) ) {
+ return sprintf(
+ '%2$s',
+ esc_attr__( 'This user has connected their WordPress.com account.', 'jetpack-connection' ),
+ esc_html__( 'Connected', 'jetpack-connection' )
+ );
+ }
+
+ return $output;
+ }
+
+ /**
+ * Enqueue scripts and styles.
+ *
+ * @param string $hook The current admin page.
+ */
+ public function enqueue_scripts( $hook ) {
+ if ( 'users.php' !== $hook ) {
+ return;
+ }
+
+ Assets::register_script(
+ 'jetpack-users-connection',
+ '../dist/jetpack-users-connection.js',
+ __FILE__,
+ array(
+ 'strategy' => 'defer',
+ 'in_footer' => true,
+ 'enqueue' => true,
+ 'version' => Package_Version::PACKAGE_VERSION,
+ 'deps' => array( 'wp-i18n' ),
+
+ )
+ );
+
+ wp_localize_script(
+ 'jetpack-users-connection',
+ 'jetpackConnectionTooltips',
+ array(
+ 'columnTooltip' => esc_html__( 'Connecting a WordPress.com account unlocks Jetpackās full suite of features including secure logins.', 'jetpack-connection' ),
+ )
+ );
+ }
+
+ /**
+ * Add styles for the connection column.
+ */
+ public function add_connection_column_styles() {
+ ?>
+
+ 'defer',
- 'in_footer' => true,
- 'enqueue' => true,
- 'version' => Package_Version::PACKAGE_VERSION,
- )
- );
-
- $tooltip_string = esc_attr__( 'Jetpack SSO allows a seamless and secure experience on WordPress.com. Join millions of WordPress users who trust us to keep their accounts safe.', 'jetpack-connection' );
-
- wp_add_inline_script(
- 'jetpack-sso-users',
- "var Jetpack_SSOTooltip = { 'tooltipString': '{$tooltip_string}' }",
- 'before'
- );
-
- $columns['user_jetpack'] = sprintf(
- '%2$s',
- $tooltip_string,
- esc_html__( 'SSO Status', 'jetpack-connection' ),
- esc_attr__( 'Tooltip', 'jetpack-connection' )
- );
+ _deprecated_function( __METHOD__, 'package-$$next-version$$' );
return $columns;
}
@@ -1179,59 +1156,58 @@ private static function delete_external_contributor( $user_id ) {
* @param string $val HTML for the column.
* @param string $col User list table column.
* @param int $user_id User ID.
- *
- * @return string
+ * @return string Modified column content.
*/
public function jetpack_show_connection_status( $val, $col, $user_id ) {
- if ( 'user_jetpack' === $col ) {
- if ( ( new Manager() )->is_user_connected( $user_id ) ) {
- $connection_html = sprintf(
- '%2$s',
- esc_attr__( 'This user is connected and can log-in to this site.', 'jetpack-connection' ),
- esc_html__( 'Connected', 'jetpack-connection' )
- );
- return $connection_html;
- } else {
- $has_pending_invite = self::has_pending_wpcom_invite( $user_id );
- if ( $has_pending_invite ) {
- $connection_html = sprintf(
- '%2$s',
- esc_attr__( 'This user didn’t accept the invitation to join this site yet.', 'jetpack-connection' ),
- esc_html__( 'Pending invite', 'jetpack-connection' )
- );
- return $connection_html;
- }
- $nonce = wp_create_nonce( 'jetpack-sso-invite-user' );
- $connection_html = sprintf(
- // Using formmethod and formaction because we can't nest forms and have to submit using the main form.
- '
- %2$s
-
- %3$s
-
- ',
- add_query_arg(
- array(
- 'user_id' => $user_id,
- 'invite_nonce' => $nonce,
- 'action' => 'jetpack_invite_user_to_wpcom',
- ),
- admin_url( 'admin-post.php' )
- ),
- esc_html__( 'Send invite', 'jetpack-connection' ),
- esc_attr__( 'This user doesn’t have an SSO connection to WordPress.com. Invite them to the site to increase security and improve their experience.', 'jetpack-connection' ),
- esc_attr__( 'Tooltip', 'jetpack-connection' )
+ if ( 'user_jetpack' !== $col ) {
+ return $val;
+ }
+
+ // Get base connection status from parent
+ $connection_status = parent::render_connection_column( '', $col, $user_id );
+
+ // If user is not connected, check for pending invite
+ if ( ! $connection_status ) {
+ $has_pending_invite = self::has_pending_wpcom_invite( $user_id );
+ if ( $has_pending_invite ) {
+ return sprintf(
+ '%2$s',
+ esc_attr__( 'This user didn’t accept the invitation to join this site yet.', 'jetpack-connection' ),
+ esc_html__( 'Pending invite', 'jetpack-connection' )
);
- return $connection_html;
}
+
+ // Show invite button for non-connected users
+ $nonce = wp_create_nonce( 'jetpack-sso-invite-user' );
+ return sprintf(
+ '
+ %2$s
+
+ %3$s
+
+ ',
+ add_query_arg(
+ array(
+ 'user_id' => $user_id,
+ 'invite_nonce' => $nonce,
+ 'action' => 'jetpack_invite_user_to_wpcom',
+ ),
+ admin_url( 'admin-post.php' )
+ ),
+ esc_html__( 'Send invite', 'jetpack-connection' ),
+ esc_attr__( 'This user doesn’t have a Jetpack SSO connection to WordPress.com. Invite them to the site to increase security and improve their experience.', 'jetpack-connection' ),
+ esc_attr__( 'Tooltip', 'jetpack-connection' )
+ );
}
- return $val;
+
+ return $connection_status;
}
/**
* Creates error notices and redirects the user to the previous page.
*
* @param array $query_params - query parameters added to redirection URL.
+ * @phan-suppress PhanPluginNeverReturnMethod
*/
public function create_error_notice_and_redirect( $query_params ) {
$ref = wp_get_referer();
@@ -1243,7 +1219,8 @@ public function create_error_notice_and_redirect( $query_params ) {
$query_params,
$ref
);
- return wp_safe_redirect( $url );
+ wp_safe_redirect( $url );
+ exit;
}
/**
@@ -1258,9 +1235,6 @@ public function jetpack_user_table_styles() {
#the-list tr:has(.sso-pending-invite) {
background: #E9F0F5;
}
- .fixed .column-user_jetpack {
- width: 100px;
- }
.jetpack-sso-invitation {
background: none;
border: none;
@@ -1297,9 +1271,6 @@ public function jetpack_user_table_styles() {
position: relative;
cursor: pointer;
}
- .jetpack-sso-th-tooltip {
- left: -170px;
- }
.jetpack-sso-td-tooltip {
left: -256px;
}
@@ -1323,4 +1294,29 @@ public function jetpack_user_table_styles() {
'defer',
+ 'in_footer' => true,
+ 'enqueue' => true,
+ 'version' => Package_Version::PACKAGE_VERSION,
+ )
+ );
+ }
}
diff --git a/projects/packages/connection/src/sso/jetpack-sso-users.js b/projects/packages/connection/src/sso/jetpack-sso-users.js
index ea36dae308f39..778eab060b2bc 100644
--- a/projects/packages/connection/src/sso/jetpack-sso-users.js
+++ b/projects/packages/connection/src/sso/jetpack-sso-users.js
@@ -5,7 +5,7 @@ document.addEventListener( 'DOMContentLoaded', function () {
tooltip.innerHTML += ' [?]';
const tooltipTextbox = document.createElement( 'span' );
- tooltipTextbox.classList.add( 'jetpack-sso-invitation-tooltip', 'jetpack-sso-th-tooltip' );
+ tooltipTextbox.classList.add( 'jetpack-sso-invitation-tooltip' );
const tooltipString = window.Jetpack_SSOTooltip.tooltipString;
tooltipTextbox.innerHTML += tooltipString;
diff --git a/projects/packages/connection/webpack.config.js b/projects/packages/connection/webpack.config.js
index 27f00aad5d8f1..3ab8f6576e45a 100644
--- a/projects/packages/connection/webpack.config.js
+++ b/projects/packages/connection/webpack.config.js
@@ -77,6 +77,7 @@ module.exports = [
},
},
'identity-crisis': './src/identity-crisis/_inc/admin.jsx',
+ 'jetpack-users-connection': './src/js/jetpack-users-connection.js',
...ssoEntries,
},
plugins: [
diff --git a/projects/plugins/automattic-for-agencies-client/changelog/add-display-connection-status-users-page b/projects/plugins/automattic-for-agencies-client/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..4c2ef3d14ff18
--- /dev/null
+++ b/projects/plugins/automattic-for-agencies-client/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: Display connection status on Users page independent of the SSO module.
diff --git a/projects/plugins/backup/changelog/add-display-connection-status-users-page b/projects/plugins/backup/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..4c2ef3d14ff18
--- /dev/null
+++ b/projects/plugins/backup/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: Display connection status on Users page independent of the SSO module.
diff --git a/projects/plugins/boost/changelog/add-display-connection-status-users-page b/projects/plugins/boost/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..4c2ef3d14ff18
--- /dev/null
+++ b/projects/plugins/boost/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: Display connection status on Users page independent of the SSO module.
diff --git a/projects/plugins/inspect/changelog/add-display-connection-status-users-page b/projects/plugins/inspect/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..4c2ef3d14ff18
--- /dev/null
+++ b/projects/plugins/inspect/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: Display connection status on Users page independent of the SSO module.
diff --git a/projects/plugins/jetpack/changelog/add-display-connection-status-users-page b/projects/plugins/jetpack/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..dd6b5fb994e6a
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Connection: Display connection status on Users page independent of the SSO module.
diff --git a/projects/plugins/mu-wpcom-plugin/changelog/add-display-connection-status-users-page b/projects/plugins/mu-wpcom-plugin/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..4c2ef3d14ff18
--- /dev/null
+++ b/projects/plugins/mu-wpcom-plugin/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: Display connection status on Users page independent of the SSO module.
diff --git a/projects/plugins/protect/changelog/add-display-connection-status-users-page b/projects/plugins/protect/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..4c2ef3d14ff18
--- /dev/null
+++ b/projects/plugins/protect/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: Display connection status on Users page independent of the SSO module.
diff --git a/projects/plugins/search/changelog/add-display-connection-status-users-page b/projects/plugins/search/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..4c2ef3d14ff18
--- /dev/null
+++ b/projects/plugins/search/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: Display connection status on Users page independent of the SSO module.
diff --git a/projects/plugins/social/changelog/add-display-connection-status-users-page b/projects/plugins/social/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..4c2ef3d14ff18
--- /dev/null
+++ b/projects/plugins/social/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: Display connection status on Users page independent of the SSO module.
diff --git a/projects/plugins/starter-plugin/changelog/add-display-connection-status-users-page b/projects/plugins/starter-plugin/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..4c2ef3d14ff18
--- /dev/null
+++ b/projects/plugins/starter-plugin/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: Display connection status on Users page independent of the SSO module.
diff --git a/projects/plugins/videopress/changelog/add-display-connection-status-users-page b/projects/plugins/videopress/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..4c2ef3d14ff18
--- /dev/null
+++ b/projects/plugins/videopress/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: Display connection status on Users page independent of the SSO module.
diff --git a/projects/plugins/wpcomsh/changelog/add-display-connection-status-users-page b/projects/plugins/wpcomsh/changelog/add-display-connection-status-users-page
new file mode 100644
index 0000000000000..4c2ef3d14ff18
--- /dev/null
+++ b/projects/plugins/wpcomsh/changelog/add-display-connection-status-users-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Connection: Display connection status on Users page independent of the SSO module.