initial
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
@import "@wordpress/base-styles/colors.native"; // stylelint-disable-line scss/at-import-partial-extension
|
||||
@import "@wordpress/base-styles/breakpoints";
|
||||
|
||||
.page-title-actions {
|
||||
list-style: none;
|
||||
display: inline-flex;
|
||||
padding: 0 0 4px;
|
||||
margin: 0;
|
||||
gap: 1ch;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vrts-page-title-action {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
min-height: 32px;
|
||||
line-height: 2.30769231;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.vrts_tests_page_wp_link {
|
||||
|
||||
@media (max-width: $break-mobile) {
|
||||
margin-top: -250px !important;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
.link-url-field,
|
||||
.link-search-field {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.link-search-wrapper {
|
||||
position: relative;
|
||||
|
||||
.spinner {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 4px;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vrts-tests--active {
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#link-options {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#wplink-link-existing-content {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
#wp-link .query-results {
|
||||
top: 80px;
|
||||
max-height: calc(100% - 90px);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
&-permalink {
|
||||
font-size: 0.66rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vrts-list-table-page {
|
||||
|
||||
.quick-edit-row-test {
|
||||
|
||||
label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inline-edit-col {
|
||||
max-width: 485px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<?php
|
||||
|
||||
switch ( $data['action'] ) {
|
||||
default:
|
||||
$template = __DIR__ . '/views/tests-page-list.php';
|
||||
break;
|
||||
}
|
||||
|
||||
if ( file_exists( $template ) ) {
|
||||
include $template;
|
||||
}
|
||||
@@ -0,0 +1,333 @@
|
||||
/* global jQuery, ajaxurl, inlineEditTest */
|
||||
|
||||
document
|
||||
.getElementById( 'show-modal-add-new' )
|
||||
?.addEventListener( 'click', () => {
|
||||
window.wpLink.open( 'input_hidden_internal_url' );
|
||||
} );
|
||||
|
||||
window.wp = window.wp || {};
|
||||
( function ( $, wp ) {
|
||||
window.inlineEditTest = {
|
||||
/**
|
||||
* Initializes the inline and bulk post editor.
|
||||
*
|
||||
* Binds event handlers to the Escape key to close the inline editor
|
||||
* and to the save and close buttons. Changes DOM to be ready for inline
|
||||
* editing. Adds event handler to bulk edit.
|
||||
*
|
||||
* @since 2.7.0
|
||||
*
|
||||
* @memberof inlineEditTest
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
init() {
|
||||
const t = this,
|
||||
qeRow = $( '#inline-edit' );
|
||||
|
||||
t.type = 'test';
|
||||
// Test ID prefix.
|
||||
t.what = '#test-';
|
||||
|
||||
/**
|
||||
* Binds the Escape key to revert the changes and close the quick editor.
|
||||
*
|
||||
* @return {boolean} The result of revert.
|
||||
*/
|
||||
qeRow.on( 'keyup', function ( e ) {
|
||||
// Revert changes if Escape key is pressed.
|
||||
if ( e.which === 27 ) {
|
||||
return inlineEditTest.revert();
|
||||
}
|
||||
} );
|
||||
|
||||
/**
|
||||
* Reverts changes and close the quick editor if the cancel button is clicked.
|
||||
*
|
||||
* @return {boolean} The result of revert.
|
||||
*/
|
||||
$( '.cancel', qeRow ).on( 'click', function () {
|
||||
return inlineEditTest.revert();
|
||||
} );
|
||||
|
||||
/**
|
||||
* Saves changes in the quick editor if the save(named: update) button is clicked.
|
||||
*
|
||||
* @return {boolean} The result of save.
|
||||
*/
|
||||
$( '.save', qeRow ).on( 'click', function () {
|
||||
return inlineEditTest.save( this );
|
||||
} );
|
||||
|
||||
/**
|
||||
* If Enter is pressed, and the target is not the cancel button, save the post.
|
||||
*
|
||||
* @return {boolean} The result of save.
|
||||
*/
|
||||
$( 'td', qeRow ).on( 'keydown', function ( e ) {
|
||||
if (
|
||||
e.which === 13 &&
|
||||
! e.shiftKey &&
|
||||
! $( e.target ).hasClass( 'cancel' )
|
||||
) {
|
||||
return inlineEditTest.save( this );
|
||||
}
|
||||
} );
|
||||
|
||||
/**
|
||||
* Binds click event to the .editinline button which opens the quick editor.
|
||||
*/
|
||||
$( '#the-list' ).on( 'click', '.editinline', function () {
|
||||
$( this ).attr( 'aria-expanded', 'true' );
|
||||
inlineEditTest.edit( this );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Adds onclick events to the apply buttons.
|
||||
*/
|
||||
$( '#doaction' ).on( 'click', function ( e ) {
|
||||
t.whichBulkButtonId = $( this ).attr( 'id' );
|
||||
const n = t.whichBulkButtonId.substr( 2 );
|
||||
|
||||
if ( 'edit' === $( 'select[name="' + n + '"]' ).val() ) {
|
||||
e.preventDefault();
|
||||
} else if (
|
||||
$( 'form#posts-filter tr.inline-editor' ).length > 0
|
||||
) {
|
||||
t.revert();
|
||||
}
|
||||
} );
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggles the quick edit window, hiding it when it's active and showing it when
|
||||
* inactive.
|
||||
*
|
||||
* @since 2.7.0
|
||||
*
|
||||
* @memberof inlineEditTest
|
||||
*
|
||||
* @param {Object} el Element within a post table row.
|
||||
*/
|
||||
toggle( el ) {
|
||||
const t = this;
|
||||
// eslint-disable-next-line
|
||||
$( t.what + t.getId( el ) ).css( 'display' ) === 'none'
|
||||
? t.revert()
|
||||
: t.edit( el );
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates a quick edit window for the post that has been clicked.
|
||||
*
|
||||
* @since 2.7.0
|
||||
*
|
||||
* @memberof inlineEditTest
|
||||
*
|
||||
* @param {number|Object} id The ID of the clicked post or an element within a post
|
||||
* table row.
|
||||
* @return {boolean} Always returns false at the end of execution.
|
||||
*/
|
||||
edit( id ) {
|
||||
const t = this;
|
||||
t.revert();
|
||||
|
||||
if ( typeof id === 'object' ) {
|
||||
id = t.getId( id );
|
||||
}
|
||||
|
||||
// Add the new edit row with an extra blank row underneath to maintain zebra striping.
|
||||
const editRow = $( '#inline-edit' ).clone( true );
|
||||
$( 'td', editRow ).attr(
|
||||
'colspan',
|
||||
$( 'th:visible, td:visible', '.widefat:first thead' ).length
|
||||
);
|
||||
|
||||
// Remove the ID from the copied row and let the `for` attribute reference the hidden ID.
|
||||
$( 'td', editRow ).find( '#quick-edit-legend' ).removeAttr( 'id' );
|
||||
$( 'td', editRow )
|
||||
.find( 'p[id^="quick-edit-"]' )
|
||||
.removeAttr( 'id' );
|
||||
|
||||
$( t.what + id )
|
||||
.removeClass( 'is-expanded' )
|
||||
.hide()
|
||||
.after( editRow )
|
||||
.after( '<tr class="hidden"></tr>' );
|
||||
|
||||
// Populate fields in the quick edit window.
|
||||
const rowData = $( '#inline_' + id );
|
||||
const hideInputSelectorsText = $(
|
||||
'.hide_css_selectors',
|
||||
rowData
|
||||
).text();
|
||||
$( ':input[name="hide_css_selectors"]', editRow ).val(
|
||||
hideInputSelectorsText
|
||||
);
|
||||
|
||||
$( editRow )
|
||||
.attr( 'id', 'edit-' + id )
|
||||
.addClass( 'inline-editor' )
|
||||
.show();
|
||||
$( ':input[name="hide_css_selectors"]', editRow ).trigger(
|
||||
'focus'
|
||||
);
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Saves the changes made in the quick edit window to the post.
|
||||
* Ajax saving is only for Quick Edit and not for bulk edit.
|
||||
*
|
||||
* @since 2.7.0
|
||||
*
|
||||
* @param {number} id The ID for the post that has been changed.
|
||||
* @return {boolean} False, so the form does not submit when pressing
|
||||
* Enter on a focused field.
|
||||
*/
|
||||
save( id ) {
|
||||
if ( typeof id === 'object' ) {
|
||||
id = this.getId( id );
|
||||
}
|
||||
|
||||
$( 'table.widefat .spinner' ).addClass( 'is-active' );
|
||||
|
||||
const params = {
|
||||
action: 'vrts_test_quick_edit_save',
|
||||
test_id: id,
|
||||
hide_css_selectors: $(
|
||||
'#edit-' + id + ' [name="hide_css_selectors"]'
|
||||
).val(),
|
||||
nonce: $( '#_vrts_test_quick_edit_nonce' ).val(),
|
||||
};
|
||||
|
||||
// Make Ajax request
|
||||
$.post(
|
||||
ajaxurl,
|
||||
params,
|
||||
function ( response ) {
|
||||
$( 'table.widefat .spinner' ).removeClass( 'is-active' );
|
||||
|
||||
// Work with the response.
|
||||
response = $.parseJSON( response );
|
||||
|
||||
if ( ! response.success ) {
|
||||
const $errorNotice = $(
|
||||
'#edit-' + id + ' .inline-edit-save .notice-error'
|
||||
);
|
||||
$errorNotice.removeClass( 'hidden' );
|
||||
$errorNotice.text( response.message );
|
||||
wp.a11y.speak( response.message );
|
||||
return;
|
||||
}
|
||||
|
||||
$( '#inline_' + id + ' .hide_css_selectors' ).text(
|
||||
response.hide_css_selectors
|
||||
);
|
||||
|
||||
// Hide the quick edit window.
|
||||
const $tableWideFat = $( '.widefat' );
|
||||
id = $( '.inline-editor', $tableWideFat ).attr( 'id' );
|
||||
|
||||
if ( id ) {
|
||||
$( '.spinner', $tableWideFat ).removeClass(
|
||||
'is-active'
|
||||
);
|
||||
|
||||
// Remove both the inline-editor and its hidden tr siblings.
|
||||
$( '#' + id )
|
||||
.siblings( 'tr.hidden' )
|
||||
.addBack()
|
||||
.remove();
|
||||
id = id.substr( id.lastIndexOf( '-' ) + 1 );
|
||||
|
||||
// Show the post row and move focus back to the Quick Edit button.
|
||||
$( '#test-' + id )
|
||||
.fadeIn( 400 )
|
||||
.find( '.editinline' )
|
||||
.attr( 'aria-expanded', 'false' )
|
||||
.trigger( 'focus' );
|
||||
}
|
||||
|
||||
wp.a11y.speak( response.message );
|
||||
|
||||
// Update the snapshot column in the table and set the status of the snapshot.
|
||||
const snapshotStatus = response.snapshot_status;
|
||||
const $snapshotColumn = $(
|
||||
'#test-' + id + ' .base_screenshot_date'
|
||||
);
|
||||
if (
|
||||
null !== snapshotStatus &&
|
||||
undefined !== snapshotStatus &&
|
||||
'' !== snapshotStatus
|
||||
) {
|
||||
$snapshotColumn.text( snapshotStatus );
|
||||
}
|
||||
},
|
||||
'html'
|
||||
);
|
||||
|
||||
// Prevent submitting the form when pressing Enter on a focused field.
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Hides and empties the Quick Edit and/or Bulk Edit windows.
|
||||
*
|
||||
* @since 2.7.0
|
||||
*
|
||||
* @memberof inlineEditTest
|
||||
*
|
||||
* @return {boolean} Always returns false.
|
||||
*/
|
||||
revert() {
|
||||
const $tableWideFat = $( '.widefat' );
|
||||
let id = $( '.inline-editor', $tableWideFat ).attr( 'id' );
|
||||
|
||||
if ( id ) {
|
||||
$( '.spinner', $tableWideFat ).removeClass( 'is-active' );
|
||||
|
||||
// Remove both the inline-editor and its hidden tr siblings.
|
||||
$( '#' + id )
|
||||
.siblings( 'tr.hidden' )
|
||||
.addBack()
|
||||
.remove();
|
||||
id = id.substr( id.lastIndexOf( '-' ) + 1 );
|
||||
|
||||
// Show the post row and move focus back to the Quick Edit button.
|
||||
$( this.what + id )
|
||||
.show()
|
||||
.find( '.editinline' )
|
||||
.attr( 'aria-expanded', 'false' )
|
||||
.trigger( 'focus' );
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the ID for a the post that you want to quick edit from the row in the quick
|
||||
* edit table.
|
||||
*
|
||||
* @since 2.7.0
|
||||
*
|
||||
* @memberof inlineEditTest
|
||||
*
|
||||
* @param {Object} o DOM row object to get the ID for.
|
||||
* @return {string} The post ID extracted from the table row in the object.
|
||||
*/
|
||||
getId( o ) {
|
||||
const id = $( o ).closest( 'tr' ).attr( 'id' ),
|
||||
parts = id.split( '-' );
|
||||
return parts[ parts.length - 1 ];
|
||||
},
|
||||
};
|
||||
|
||||
$( function () {
|
||||
if ( $( '.vrts-list-table-page' ).length ) {
|
||||
inlineEditTest.init();
|
||||
}
|
||||
} );
|
||||
} )( jQuery, window.wp );
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
<?php
|
||||
|
||||
use Vrts\Features\Admin_Notices;
|
||||
use Vrts\Features\Subscription;
|
||||
use Vrts\Services\Manual_Test_Service;
|
||||
|
||||
?>
|
||||
|
||||
<div class="wrap vrts-list-table-page">
|
||||
<h1 class="wp-heading-inline">
|
||||
<?php esc_html_e( 'Tests', 'visual-regression-tests' ); ?>
|
||||
</h1>
|
||||
|
||||
<menu class="page-title-actions">
|
||||
<li>
|
||||
<button type="button" class="vrts-page-title-action button-primary"
|
||||
id="<?php echo ( ! $data['is_connected'] || intval( $data['remaining_tests'] ) === 0 ) ? 'modal-add-new-disabled' : 'show-modal-add-new'; ?>"
|
||||
<?php echo ( ! $data['is_connected'] || intval( $data['remaining_tests'] ) === 0 ) ? ' disabled' : ''; ?>>
|
||||
<?php esc_html_e( 'Add New', 'visual-regression-tests' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<?php if ( Subscription::get_subscription_status() ) : ?>
|
||||
<li>
|
||||
<form method="post" id="form-run-manual-tests">
|
||||
<?php wp_nonce_field( 'submit_run_manual_tests', '_wpnonce' ); ?>
|
||||
<input type="submit" name="submit_run_manual_tests" value="<?php esc_attr_e( 'Run All Tests', 'visual-regression-tests' ); ?>"
|
||||
class="vrts-page-title-action button-secondary"
|
||||
id="<?php echo ( ! $data['is_connected'] || ! $data['running_tests_count'] ) ? 'run-manual-tests-disabled' : 'run-manual-tests'; ?>"
|
||||
<?php echo ( ! $data['is_connected'] || ! $data['running_tests_count'] ) ? ' disabled' : ''; ?>
|
||||
>
|
||||
</form>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
</menu>
|
||||
|
||||
<?php if ( isset( $data['search_query'] ) && '' !== $data['search_query'] ) { ?>
|
||||
<span class="subtitle">
|
||||
<?php
|
||||
printf(
|
||||
/* translators: %s: search query. */
|
||||
esc_html__( 'Search results for: %s', 'visual-regression-tests' ),
|
||||
'<strong>' . esc_html( $data['search_query'] ) . '</strong>'
|
||||
);
|
||||
?>
|
||||
</span>
|
||||
<?php } ?>
|
||||
|
||||
<hr class="wp-header-end">
|
||||
|
||||
<form method="post">
|
||||
<input type="hidden" name="page" value="vrts-tests_list_table">
|
||||
|
||||
<?php
|
||||
$list_table = $data['list_table'];
|
||||
$list_table->prepare_items();
|
||||
$list_table->views();
|
||||
$list_table->search_box( esc_attr__( 'Search', 'visual-regression-tests' ), 'search_id' );
|
||||
$list_table->display();
|
||||
|
||||
if ( $list_table->has_items() ) {
|
||||
$list_table->inline_edit();
|
||||
}
|
||||
|
||||
$vrts_manual_test_service = new Manual_Test_Service();
|
||||
$test_status = $vrts_manual_test_service->get_option();
|
||||
if ( $test_status ) {
|
||||
$vrts_manual_test_service->delete_option();
|
||||
if ( '1' === $test_status ) {
|
||||
Admin_Notices::render_notification( 'test_started', false, [] );
|
||||
} elseif ( '2' === $test_status ) {
|
||||
Admin_Notices::render_notification( 'test_failed', false, [] );
|
||||
}
|
||||
}
|
||||
?>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="wp-link-backdrop" style="display: none"></div>
|
||||
<div id="wp-link-wrap" class="wp-core-ui vrts_tests_page_wp_link" style="display: none" role="dialog" aria-labelledby="link-modal-title">
|
||||
<form id="wp-link" tabindex="-1" method="post">
|
||||
<?php wp_nonce_field( 'internal-linking', '_ajax_linking_nonce', false ); ?>
|
||||
<?php wp_nonce_field( 'vrts_page_tests_nonce' ); ?>
|
||||
<h1 id="link-modal-title"><?php esc_html_e( 'Add New Test', 'visual-regression-tests' ); ?></h1>
|
||||
<button type="button" id="wp-link-close"><span class="screen-reader-text"><?php esc_html_e( 'Close', 'visual-regression-tests' ); ?></span></button>
|
||||
<div id="link-selector">
|
||||
<div id="link-options">
|
||||
<p class="howto" id="wplink-enter-url"><?php esc_html_e( 'Destination URL', 'visual-regression-tests' ); ?></p>
|
||||
<div>
|
||||
<input id="wp-link-url" class="link-url-field" type="text" aria-describedby="wplink-enter-url" name="internal_url" readonly />
|
||||
<input id="wp-link-id" type="hidden" name="post_id" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="howto" id="wplink-link-existing-content"><?php esc_html_e( 'Search', 'visual-regression-tests' ); ?></p>
|
||||
<div id="search-panel">
|
||||
<div class="link-search-wrapper">
|
||||
<input type="search" id="wp-link-search" class="link-search-field" autocomplete="off" aria-describedby="wplink-link-existing-content" />
|
||||
<span class="spinner"></span>
|
||||
</div>
|
||||
<div id="search-results" class="query-results" tabindex="0">
|
||||
<ul></ul>
|
||||
<div class="river-waiting">
|
||||
<span class="spinner"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="most-recent-results" class="query-results" tabindex="0">
|
||||
<div class="query-notice" id="query-notice-message">
|
||||
<em class="query-notice-default"><?php esc_html_e( 'No search term specified. Showing recent items.', 'visual-regression-tests' ); ?></em>
|
||||
<em class="query-notice-hint screen-reader-text"><?php esc_html_e( 'Search or use up and down arrow keys to select an item.', 'visual-regression-tests' ); ?></em>
|
||||
</div>
|
||||
<ul></ul>
|
||||
<div class="river-waiting">
|
||||
<span class="spinner"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submitbox">
|
||||
<div id="wp-link-cancel">
|
||||
<button type="button" class="button"><?php esc_html_e( 'Cancel', 'visual-regression-tests' ); ?></button>
|
||||
</div>
|
||||
<div id="wp-link-update">
|
||||
<?php
|
||||
submit_button(
|
||||
__( 'Add New Test', 'visual-regression-tests' ),
|
||||
'button button-primary',
|
||||
'submit_add_new_test',
|
||||
false,
|
||||
[ 'id' => 'wp-link-submit' ]
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
Reference in New Issue
Block a user