Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve URL Listing view #1397

Merged
merged 63 commits into from
Sep 16, 2018
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
63 commits
Select commit Hold shift + click to select a range
0131c71
Start with listing view design improvements.
miina Aug 30, 2018
1e2dccf
Merge remote-tracking branch 'origin/develop' into 1362-improved_url_…
miina Sep 4, 2018
fd51be5
Add icons. Add tooltip skeleton. Fix sources.
miina Sep 4, 2018
8ab7166
Conform to validation error data model.
kienstra Sep 6, 2018
b31d123
Merge in develop, resolve conflict.
kienstra Sep 6, 2018
99a35b8
Update status names to latest design
kienstra Sep 6, 2018
e263b55
Use dashicons for tooltip icon
jacobschweitzer Sep 6, 2018
9e99f1a
Add admin-tables.css file
jacobschweitzer Sep 6, 2018
273cccf
Hide tooltip
jacobschweitzer Sep 6, 2018
df68ed8
Target class instead of id and add color to icon
jacobschweitzer Sep 6, 2018
54ae458
Change Plug-In to Plugin
jacobschweitzer Sep 6, 2018
4075cb0
Fix variable typo
jacobschweitzer Sep 6, 2018
9094366
Add plugin icon with color from design
jacobschweitzer Sep 6, 2018
604c4b9
Add theme icon with color
jacobschweitzer Sep 6, 2018
90b4920
Remove extra linebreaks
jacobschweitzer Sep 6, 2018
0be3a56
Add containers around sources for styling
jacobschweitzer Sep 6, 2018
1cb3da7
Add margins around sources containers
jacobschweitzer Sep 6, 2018
49ca0d8
Add color to WP icon
jacobschweitzer Sep 6, 2018
6d7f35b
Change wording - found to removed
jacobschweitzer Sep 6, 2018
f6a0878
Add icons to status column
jacobschweitzer Sep 6, 2018
c71addb
Add amp logo icon class
jacobschweitzer Sep 6, 2018
ca2e7d2
Add error-status class
jacobschweitzer Sep 6, 2018
36564fd
Style error statuses
jacobschweitzer Sep 6, 2018
736b2f2
Add closing span tag
jacobschweitzer Sep 6, 2018
7af56d6
Add color to removed elements column text
jacobschweitzer Sep 6, 2018
25ab2b3
Add class to warning icons for styling
jacobschweitzer Sep 6, 2018
139883e
Add color to identified and rejected icons
jacobschweitzer Sep 6, 2018
2583e44
Fix translation functions, switch to esc_html__
jacobschweitzer Sep 6, 2018
8649b91
Add plugins icon when there is multiple plugins
jacobschweitzer Sep 7, 2018
53021cc
Hide invalid sources if more than 1 and add icon
jacobschweitzer Sep 10, 2018
e87cca2
Only enqueue stylesheet on its post type screens
jacobschweitzer Sep 10, 2018
8aebc0c
Add common container class for sources
jacobschweitzer Sep 10, 2018
9ae7e58
Add JS for admin tables expand and collapse
jacobschweitzer Sep 10, 2018
ffb3fdc
Add margin after source container
jacobschweitzer Sep 10, 2018
ab73ddf
Merge branch 'develop' into 1362-improved_url_listing_view
jacobschweitzer Sep 10, 2018
4f14433
Remove todo
jacobschweitzer Sep 10, 2018
bda4140
Change wording: Removed to Invalid
jacobschweitzer Sep 10, 2018
c5ad3e6
Wrap in <code> and add brackets for attributes
jacobschweitzer Sep 10, 2018
4ea9638
Fix translation function reference
jacobschweitzer Sep 10, 2018
392ee24
Add double arrow to Sources column
jacobschweitzer Sep 10, 2018
163908e
Add hide all sources functionality and styles
jacobschweitzer Sep 10, 2018
0ad0cf6
Change new status icons based on AMP options
jacobschweitzer Sep 11, 2018
d4b586f
Combine duplicated post_row_actions filters; ensure only relevant lin…
westonruter Sep 11, 2018
1ab6bd3
Re-use AMP_Validation_Manager::is_sanitization_forcibly_accepted()
westonruter Sep 11, 2018
7eafdc6
Add view errors by type title link button
jacobschweitzer Sep 11, 2018
5b9b243
Change title of page and highlight word URL
jacobschweitzer Sep 11, 2018
52babee
Bolder font weight for page title action link keyword
jacobschweitzer Sep 11, 2018
8f88d0c
ESLint fixes
jacobschweitzer Sep 11, 2018
1d95cae
Fix PHP 5.3 compatibility issues
jacobschweitzer Sep 12, 2018
a4bdee9
Update tests to reflect changes
jacobschweitzer Sep 12, 2018
fe7e4de
Update to tests and add an error check
jacobschweitzer Sep 12, 2018
6936f05
Address unit test errors
kienstra Sep 13, 2018
4cbee48
Merge branch 'develop' into 1362-improved_url_listing_view
kienstra Sep 13, 2018
2ce2e5e
Addres PHPCS warning by aligning =
kienstra Sep 13, 2018
74feb85
Get full plugin names and fix theme source output
jacobschweitzer Sep 13, 2018
5baae3f
Code review changes and text changes
jacobschweitzer Sep 13, 2018
6911305
Unify JS for text expansion and update styles
jacobschweitzer Sep 14, 2018
56915da
Implement workaround to fix JS not loading issue
jacobschweitzer Sep 14, 2018
6488c05
Update unit tests based on latest changes
jacobschweitzer Sep 15, 2018
88e7b7e
Merge branch 'develop' into 1362-improved_url_listing_view
jacobschweitzer Sep 15, 2018
145a9ef
Fix test listing amp plugin
jacobschweitzer Sep 15, 2018
6624e68
Fix unit tests
jacobschweitzer Sep 15, 2018
716a869
Apply remaining changes from code review
westonruter Sep 16, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions assets/images/amp-logo-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions assets/images/baseline-error-blue.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions assets/images/baseline-error.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/images/editor-help.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
130 changes: 83 additions & 47 deletions includes/validation/class-amp-invalid-url-post-type.php
Original file line number Diff line number Diff line change
Expand Up @@ -85,13 +85,13 @@ public static function register() {
self::POST_TYPE_SLUG,
array(
'labels' => array(
'name' => _x( 'Invalid AMP Pages (URLs)', 'post type general name', 'amp' ),
'menu_name' => __( 'Invalid Pages', 'amp' ),
'singular_name' => __( 'Invalid AMP Page (URL)', 'amp' ),
'not_found' => __( 'No invalid AMP pages found', 'amp' ),
'not_found_in_trash' => __( 'No invalid AMP pages in trash', 'amp' ),
'search_items' => __( 'Search invalid AMP pages', 'amp' ),
'edit_item' => __( 'Invalid AMP Page (URL)', 'amp' ),
'name' => _x( 'Errors by URL', 'post type general name', 'amp' ),
'menu_name' => __( 'Errors by URL', 'amp' ),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's change these to “Invalid URLs” throughout. As part of this, we can remove code related to bolding the “URLs” string.

'singular_name' => __( 'Errors by URL', 'amp' ),
'not_found' => __( 'No errors by URL found', 'amp' ),
'not_found_in_trash' => __( 'No errors by URL in trash', 'amp' ),
'search_items' => __( 'Search errors by URL', 'amp' ),
'edit_item' => __( 'Errors by URL', 'amp' ),
),
'supports' => false,
'public' => false,
Expand Down Expand Up @@ -126,6 +126,8 @@ public static function should_show_in_menu() {
* Add admin hooks.
*/
public static function add_admin_hooks() {
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_admin_assets' ) );

add_filter( 'dashboard_glance_items', array( __CLASS__, 'filter_dashboard_glance_items' ) );
add_action( 'rightnow_end', array( __CLASS__, 'print_dashboard_glance_styles' ) );
add_action( 'add_meta_boxes', array( __CLASS__, 'add_meta_boxes' ) );
Expand Down Expand Up @@ -162,6 +164,19 @@ public static function add_admin_hooks() {
} );
}

/**
* Enqueue style.
*/
public static function enqueue_admin_assets() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See also #1414 where an enqueue_edit_post_screen_scripts method is introduced.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this name be made more specific? There is enqueue_edit_post_screen_scripts. So should it be enqueue_post_list_screen_scripts?

// Styles.
wp_enqueue_style(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should only be enqueued for the post list screen for this specific post type

'amp-admin-tables',
amp_get_asset_url( 'css/admin-tables.css' ),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this CSS file not committed?

false,
AMP__VERSION
);
}

/**
* Add count of how many validation error posts there are to the admin menu.
*/
Expand Down Expand Up @@ -277,27 +292,31 @@ public static function display_invalid_url_validation_error_counts_summary( $pos
}
}

// @todo Switch icons.
$result = array();
if ( $counts['new'] ) {
$result[] = esc_html( sprintf(
$result[] = sprintf(
/* translators: %s is count */
__( '&#x2753; New: %s', 'amp' ),
__( '<span class="identified">%1$s: %2$s', 'amp' ),
esc_html__( 'Identified', 'amp' ),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can move back to “New”

number_format_i18n( $counts['new'] )
) );
);
}
if ( $counts['accepted'] ) {
$result[] = esc_html( sprintf(
/* translators: %s is count */
__( '&#x2705; Accepted: %s', 'amp' ),
$result[] = sprintf(
/* translators: 1. Title, 2. %s is count */
__( '<span class="suppressed">%1$s: %2$s</span>', 'amp' ),
esc_html__( 'Suppressed', 'amp' ),
number_format_i18n( $counts['accepted'] )
) );
);
}
if ( $counts['rejected'] ) {
$result[] = esc_html( sprintf(
$result[] = sprintf(
/* translators: %s is count */
__( '&#x274C; Rejected: %s', 'amp' ),
__( '<span class="rejected">%1$s: %2$s</span>', 'amp' ),
esc_html__( 'To Fix Later', 'amp' ),
number_format_i18n( $counts['rejected'] )
) );
);
}
echo implode( '<br>', $result ); // WPCS: xss ok.
}
Expand Down Expand Up @@ -554,8 +573,8 @@ public static function filter_views_edit( $views ) {
sprintf(
/* translators: %s: the post count. */
_nx(
'With New Errors <span class="count">(%s)</span>',
'With New Errors <span class="count">(%s)</span>',
'With Identified Errors <span class="count">(%s)</span>',
'With Identified Errors <span class="count">(%s)</span>',
$with_new_query->found_posts,
'posts',
'amp'
Expand All @@ -577,8 +596,8 @@ public static function filter_views_edit( $views ) {
sprintf(
/* translators: %s: the post count. */
_nx(
'With Rejected Errors <span class="count">(%s)</span>',
'With Rejected Errors <span class="count">(%s)</span>',
'With To Fix Later Errors <span class="count">(%s)</span>',
'With To Fix Later Errors <span class="count">(%s)</span>',
$with_rejected_query->found_posts,
'posts',
'amp'
Expand All @@ -600,8 +619,8 @@ public static function filter_views_edit( $views ) {
sprintf(
/* translators: %s: the post count. */
_nx(
'With Accepted Errors <span class="count">(%s)</span>',
'With Accepted Errors <span class="count">(%s)</span>',
'With Suppressed Errors <span class="count">(%s)</span>',
'With Suppressed Errors <span class="count">(%s)</span>',
$with_accepted_query->found_posts,
'posts',
'amp'
Expand All @@ -623,18 +642,20 @@ public static function add_post_columns( $columns ) {
$columns = array_merge(
$columns,
array(
'error_status' => esc_html__( 'Error Status', 'amp' ),
AMP_Validation_Error_Taxonomy::REMOVED_ELEMENTS => esc_html__( 'Removed Elements', 'amp' ),
AMP_Validation_Error_Taxonomy::REMOVED_ATTRIBUTES => esc_html__( 'Removed Attributes', 'amp' ),
AMP_Validation_Error_Taxonomy::SOURCES_INVALID_OUTPUT => esc_html__( 'Incompatible Sources', 'amp' ),
'error_status' => sprintf( '%s<span class="icon-help"></span><div class="tooltip">%s</div>', esc_html( 'Status', 'amp' ), esc_html( 'This is tooltip', 'amp' ) ), // @todo Create actual tooltip.
AMP_Validation_Error_Taxonomy::FOUND_ELEMENTS_AND_ATTRIBUTES => esc_html__( 'Found', 'amp' ),
AMP_Validation_Error_Taxonomy::SOURCES_INVALID_OUTPUT => esc_html__( 'Source', 'amp' ),
)
);

if ( isset( $columns['title'] ) ) {
$columns['title'] = esc_html__( 'URL', 'amp' );
}

// Move date to end.
if ( isset( $columns['date'] ) ) {
$date = $columns['date'];
unset( $columns['date'] );
$columns['date'] = $date;
$columns['date'] = esc_html__( 'Last Checked', 'amp' );
}

return $columns;
Expand Down Expand Up @@ -664,45 +685,60 @@ public static function output_custom_column( $column_name, $post_id ) {
}
self::display_invalid_url_validation_error_counts_summary( $post_id );
break;
case AMP_Validation_Error_Taxonomy::REMOVED_ELEMENTS:
case AMP_Validation_Error_Taxonomy::FOUND_ELEMENTS_AND_ATTRIBUTES:
$items = array();
if ( ! empty( $error_summary[ AMP_Validation_Error_Taxonomy::REMOVED_ELEMENTS ] ) ) {
$items = array();
foreach ( $error_summary[ AMP_Validation_Error_Taxonomy::REMOVED_ELEMENTS ] as $name => $count ) {
if ( 1 === intval( $count ) ) {
$items[] = sprintf( '<code>%s</code>', esc_html( $name ) );
$items[] = sprintf( '<span>%s</span>', esc_html( $name ) );
} else {
$items[] = sprintf( '<code>%s</code> (%d)', esc_html( $name ), $count );
$items[] = sprintf( '<span>%s</span> (%d)', esc_html( $name ), $count );
}
}
echo implode( ', ', $items ); // WPCS: XSS OK.
} else {
esc_html_e( '--', 'amp' );
}
break;
case AMP_Validation_Error_Taxonomy::REMOVED_ATTRIBUTES:
if ( ! empty( $error_summary[ AMP_Validation_Error_Taxonomy::REMOVED_ATTRIBUTES ] ) ) {
$items = array();
foreach ( $error_summary[ AMP_Validation_Error_Taxonomy::REMOVED_ATTRIBUTES ] as $name => $count ) {
if ( 1 === intval( $count ) ) {
$items[] = sprintf( '<code>%s</code>', esc_html( $name ) );
$items[] = sprintf( '<span>%s</span>', esc_html( $name ) );
} else {
$items[] = sprintf( '<code>%s</code> (%d)', esc_html( $name ), $count );
$items[] = sprintf( '<span>%s</span> (%d)', esc_html( $name ), $count );
}
}
echo implode( ', ', $items ); // WPCS: XSS OK.
}
if ( ! empty( $items ) ) {
echo implode( ',<br/>', $items ); // WPCS: XSS OK.
} else {
esc_html_e( '--', 'amp' );
}
break;
case AMP_Validation_Error_Taxonomy::SOURCES_INVALID_OUTPUT:
if ( isset( $error_summary[ AMP_Validation_Error_Taxonomy::SOURCES_INVALID_OUTPUT ] ) ) {
$sources = array();
foreach ( $error_summary[ AMP_Validation_Error_Taxonomy::SOURCES_INVALID_OUTPUT ] as $type => $names ) {
foreach ( array_unique( $names ) as $name ) {
$sources[] = sprintf( '%s: <code>%s</code>', esc_html( $type ), esc_html( $name ) );
$sources = $error_summary[ AMP_Validation_Error_Taxonomy::SOURCES_INVALID_OUTPUT ];
$output = array();

// @todo Add hide/show; Add icons; Get plugin names.
if ( isset( $sources['plugin'] ) ) {
$count = count( array_unique( $sources['plugin'] ) );
if ( 1 === $count ) {
$output[] = sprintf( '<strong>%s</strong>', esc_html( 'Plug-In', 'amp' ) );
} else {
$output[] = sprintf( '<strong>%s (%d)</strong>', esc_html( 'Plug-In', 'amp' ), $count );
}
$output[] = implode( '<br/>', array_unique( $sources['plugin'] ) );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should obtain the actual names of the plugins using get_plugin_data() and getting the Name returned. If the plugin doesn't exist then show the slug (and this result is obviously stale).

}
if ( isset( $sources['core'] ) ) {
$count = count( array_unique( $sources['core'] ) );
if ( 1 === $count ) {
$output[] = sprintf( '<strong>%s</strong>', esc_html( 'Other', 'amp' ) );
} else {
$output[] = sprintf( '<strong>%s (%d)</strong>', esc_html( 'Other', 'amp' ), $count );
}
$output[] = implode( '<br/>', array_unique( $sources['core'] ) );
}
if ( isset( $soures['theme'] ) ) {
$output[] = sprintf( '<strong>%s</strong>', esc_html( $soures['theme']['name'] ) );
}
echo implode( ', ', $sources ); // WPCS: XSS ok.
echo implode( '<br/>', $output ); // WPCS: XSS ok.
}
break;
}
Expand Down
15 changes: 12 additions & 3 deletions includes/validation/class-amp-validation-error-taxonomy.php
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,13 @@ class AMP_Validation_Error_Taxonomy {
*/
const REMOVED_ELEMENTS = 'removed_elements';

/**
* The key for found elements and attributes.
*
* @var string
*/
const FOUND_ELEMENTS_AND_ATTRIBUTES = 'found_elements_and_attributes';

/**
* The key for removed attributes.
*
Expand Down Expand Up @@ -439,10 +446,12 @@ public static function summarize_validation_errors( $validation_errors ) {
}

if ( ! empty( $validation_error['sources'] ) ) {
$source = array_shift( $validation_error['sources'] );
$sources = array_shift( $validation_error['sources'] );

if ( isset( $source['type'], $source['name'] ) ) {
$invalid_sources[ $source['type'] ][] = $source['name'];
foreach ( $sources['sources'] as $source ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

^ Changed this since the sources were not properly displaying in the table -- the type and name were never set since the actual structure of $validation_error seems to be like this:
screen shot 2018-09-04 at 5 21 41 pm

Meaning that the type and name would be set in $validation_error['sources']['sources'][0], not in $validation_error['sources'].

However, this change broke the tests since the input data of test is assuming that a validation error looks like this instead:
screen shot 2018-09-04 at 5 43 21 pm

Is the structure of validation error incorrect for some reason and it should be as assumed in the tests? Maybe the fix should be removing the second nested sources instead, or is it like this for some reason? Thoughts?

cc @kienstra @westonruter

Copy link
Contributor

@kienstra kienstra Sep 6, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @miina,
That's interesting. I couldn't reproduce that issue.

It looks like there aren't double-nested 'sources' arrays, like in your first screenshot when I run the develop branch:

name-type-local

Maybe the validation error data model changed.

It might help to delete all validation error posts and terms, and regenerate them (thanks to Weston, though I might not have copied it right):

wp post delete $(wp post list --post_type='amp_invalid_url' --format=ids)
wp term list amp_validation_error --field=term_id | xargs wp term delete amp_validation_error

You might already have some logic to output validation errors, but here's a simple plugin I've used (also partially copied from Weston)

And the WP-CLI script can then regenerate errors:

wp amp validate-site --limit=5

if ( isset( $source['type'], $source['name'] ) ) {
$invalid_sources[ $source['type'] ][] = $source['name'];
}
}
}
}
Expand Down