Code Coverage
 
Lines
Functions and Methods
Classes and Traits
Total
1.05%
1 / 95
14.29%
1 / 7
 CRAP
0.00%
0 / 1
Users_Connection_Admin
1.05%
1 / 95
14.29%
1 / 7
 176.72
0.00%
0 / 1
 __construct
100.00%
1 / 1
100.00%
1 / 1
 1
 init
0.00%
0 / 6
0.00%
0 / 1
 20
 add_connection_column
0.00%
0 / 7
0.00%
0 / 1
 2
 render_connection_column
0.00%
0 / 11
0.00%
0 / 1
 12
 enqueue_scripts
0.00%
0 / 21
0.00%
0 / 1
 6
 add_connection_column_styles
0.00%
0 / 48
0.00%
0 / 1
 2
 get_column_id
0.00%
0 / 1
0.00%
0 / 1
 2
1<?php
2/**
3 * Handles the WordPress.com account column in the users list table.
4 *
5 * @package automattic/jetpack-connection
6 */
7
8namespace Automattic\Jetpack\Connection;
9
10use Automattic\Jetpack\Assets;
11use Automattic\Jetpack\Status\Host;
12
13/**
14 * Class Users_Connection_Admin
15 */
16class Users_Connection_Admin {
17    /**
18     * The column ID used for the WordPress.com account column.
19     *
20     * @var string
21     */
22    const COLUMN_ID = 'user_jetpack';
23
24    /**
25     * Constructor.
26     */
27    public function __construct() {
28        // Only set up hooks if we're in the admin area and user has proper permissions
29        add_action( 'init', array( $this, 'init' ) );
30    }
31
32    /**
33     * Initialize the admin functionality if conditions are met.
34     */
35    public function init() {
36        if ( ! is_admin() || ! current_user_can( 'manage_options' ) || ( new Host() )->is_wpcom_simple() ) {
37            return;
38        }
39
40        add_filter( 'manage_users_columns', array( $this, 'add_connection_column' ) );
41        add_filter( 'manage_users_custom_column', array( $this, 'render_connection_column' ), 9, 3 ); // Priority 9 to run before SSO
42        add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
43        add_action( 'admin_print_styles-users.php', array( $this, 'add_connection_column_styles' ) );
44    }
45
46    /**
47     * Add the connection column to the users list table.
48     *
49     * @param array $columns The current columns.
50     * @return array Modified columns.
51     */
52    public function add_connection_column( $columns ) {
53        $columns[ self::COLUMN_ID ] = sprintf(
54            '<span class="jetpack-connection-tooltip-icon" role="tooltip" tabindex="0" aria-label="%2$s: %1$s">
55                %1$s
56                <span class="jetpack-connection-tooltip"></span>
57            </span>',
58            esc_html__( 'WordPress.com account', 'jetpack-connection' ),
59            esc_attr__( 'Tooltip', 'jetpack-connection' )
60        );
61        return $columns;
62    }
63
64    /**
65     * Render the connection column content.
66     *
67     * @param string $output      Custom column output.
68     * @param string $column_name Column name.
69     * @param int    $user_id     ID of the currently-listed user.
70     * @return string
71     */
72    public function render_connection_column( $output, $column_name, $user_id ) {
73        if ( self::COLUMN_ID !== $column_name ) {
74            return $output;
75        }
76
77        if ( ( new Manager() )->is_user_connected( $user_id ) ) {
78            $logo_url = plugins_url( 'connectors/images/jetpack-icon.svg', __FILE__ );
79
80            return sprintf(
81                '<span title="%1$s" class="jetpack-connection-status"><img src="%2$s" alt="" class="jetpack-connection-status__logo" width="16" height="16" decoding="async" loading="lazy" />%3$s</span>',
82                esc_attr__( 'This user has connected their WordPress.com account.', 'jetpack-connection' ),
83                esc_url( $logo_url ),
84                esc_html__( 'Connected', 'jetpack-connection' )
85            );
86        }
87
88        return $output;
89    }
90
91    /**
92     * Enqueue scripts and styles.
93     *
94     * @param string $hook The current admin page.
95     */
96    public function enqueue_scripts( $hook ) {
97        if ( 'users.php' !== $hook ) {
98            return;
99        }
100
101        Assets::register_script(
102            'jetpack-users-connection',
103            '../dist/jetpack-users-connection.js',
104            __FILE__,
105            array(
106                'strategy'  => 'defer',
107                'in_footer' => true,
108                'enqueue'   => true,
109                'version'   => Package_Version::PACKAGE_VERSION,
110                'deps'      => array( 'wp-i18n' ),
111
112            )
113        );
114
115        wp_localize_script(
116            'jetpack-users-connection',
117            'jetpackConnectionTooltips',
118            array(
119                'columnTooltip' => esc_html__( 'Connecting a WordPress.com account unlocks Jetpack’s full suite of features including secure logins.', 'jetpack-connection' ),
120            )
121        );
122    }
123
124    /**
125     * Add styles for the connection column.
126     */
127    public function add_connection_column_styles() {
128        ?>
129        <style>
130            .jetpack-connection-tooltip-icon {
131                position: relative;
132                cursor: pointer;
133            }
134            /* Add [?] icon using pseudo-element, only in column header */
135            th.manage-column .jetpack-connection-tooltip-icon::after {
136                content: '[?]';
137                color: #3c434a;
138                font-size: 1em;
139                margin-left: 4px;
140            }
141            .jetpack-connection-tooltip {
142                position: absolute;
143                background: #f6f7f7;
144                top: -85px;
145                width: 250px;
146                padding: 7px;
147                color: #3c434a;
148                font-size: .75rem;
149                line-height: 17px;
150                text-align: left;
151                margin: 0;
152                display: none;
153                border-radius: 4px;
154                font-family: sans-serif;
155                box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.1);
156                left: -170px;
157            }
158            .column-user_jetpack {
159                width: 140px;
160            }
161            .jetpack-connection-status {
162                display: inline-flex;
163                align-items: center;
164                column-gap: 6px;
165            }
166            .jetpack-connection-status__logo {
167                flex-shrink: 0;
168                display: block;
169            }
170            /* Show tooltip on hover and focus */
171            .jetpack-connection-tooltip-icon:hover .jetpack-connection-tooltip,
172            .jetpack-connection-tooltip-icon:focus-within .jetpack-connection-tooltip {
173                display: block;
174            }
175        </style>
176        <?php
177    }
178
179    /**
180     * Get the column ID. Allows other classes to reference the same column.
181     *
182     * @return string
183     */
184    public static function get_column_id() {
185        return self::COLUMN_ID;
186    }
187}