Skip to content

Commit 5bef67c

Browse files
josephfuscojosephfusco
committed
Improve response notification
1 parent 8623cf3 commit 5bef67c

File tree

4 files changed

+154
-106
lines changed

4 files changed

+154
-106
lines changed

‎plugins/wp-graphql-headless-webhooks/src/Admin/WebhooksAdmin.php‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -289,16 +289,16 @@ public function handle_test_webhook(): void {
289289
$response_code = wp_remote_retrieve_response_code( $response );
290290
$response_body = wp_remote_retrieve_body( $response );
291291

292-
// Strip HTML tags from response body to remove any links
292+
// Strip HTML tags and decode entities from response body
293293
$response_body = wp_strip_all_tags( $response_body );
294-
295-
$message = sprintf(
296-
__( 'Webhook sent successfully!\n\nResponse Code: %d\nResponse Body: %s', 'wp-graphql-headless-webhooks' ),
297-
$response_code,
298-
substr( $response_body, 0, 200 ) // Limit response body to 200 chars
299-
);
300-
301-
wp_send_json_success( array( 'message' => $message ) );
294+
$response_body = html_entity_decode( $response_body, ENT_QUOTES | ENT_HTML5, 'UTF-8' );
295+
296+
// Send structured response data
297+
wp_send_json_success( array(
298+
'message' => __( 'Webhook sent successfully!', 'wp-graphql-headless-webhooks' ),
299+
'response_code' => $response_code,
300+
'response_body' => substr( $response_body, 0, 200 ) // Limit response body to 200 chars
301+
) );
302302
}
303303

304304
/**

‎plugins/wp-graphql-headless-webhooks/src/Admin/assets/admin.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,53 @@
7676
max-width: 100%;
7777
}
7878

79+
/* Empty state */
80+
.webhooks-empty-state {
81+
text-align: center;
82+
padding: 50px 20px;
83+
}
84+
85+
.webhooks-empty-state h2 {
86+
font-size: 24px;
87+
font-weight: 400;
88+
margin: 0 0 10px;
89+
}
90+
91+
.webhooks-empty-state p {
92+
font-size: 16px;
93+
color: #646970;
94+
margin: 0 0 20px;
95+
}
96+
97+
/* Webhook test response styling */
98+
.webhook-test-details {
99+
margin: 0;
100+
}
101+
102+
.webhook-test-details p {
103+
margin: 0.5em 0;
104+
}
105+
106+
.webhook-test-details .notice-message-body {
107+
margin-top: 1em;
108+
}
109+
110+
.webhook-test-details pre.webhook-response-body {
111+
background: #f6f7f7;
112+
border: 1px solid #c3c4c7;
113+
border-radius: 4px;
114+
padding: 12px;
115+
margin: 0.5em 0 0;
116+
overflow-x: auto;
117+
white-space: pre-wrap;
118+
word-wrap: break-word;
119+
font-family: Consolas, Monaco, monospace;
120+
font-size: 13px;
121+
line-height: 1.5;
122+
max-height: 200px;
123+
overflow-y: auto;
124+
}
125+
79126
/* Responsive adjustments */
80127
@media screen and (max-width: 782px) {
81128
.webhook-header-row {

‎plugins/wp-graphql-headless-webhooks/src/Admin/assets/admin.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,101 @@
4242
}
4343
}
4444
);
45+
46+
// Handle test webhook clicks using event delegation
47+
$( document ).on(
48+
'click',
49+
'.test-webhook',
50+
function (e) {
51+
e.preventDefault();
52+
53+
var $link = $( this );
54+
var webhookId = $link.data( 'webhook-id' );
55+
var originalText = $link.text();
56+
57+
// Prevent multiple clicks
58+
if ($link.hasClass( 'testing' )) {
59+
return false;
60+
}
61+
62+
// Generate unique ID for this test result
63+
var resultId = 'webhook-test-result-' + webhookId + '-' + Date.now();
64+
65+
// Update UI to show testing
66+
$link.text( 'Testing...' ).addClass( 'testing' ).css( 'pointer-events', 'none' );
67+
68+
// Send test request
69+
$.ajax({
70+
url: wpGraphQLWebhooks.ajaxUrl,
71+
type: 'POST',
72+
data: {
73+
action: 'test_webhook',
74+
webhook_id: webhookId,
75+
nonce: wpGraphQLWebhooks.nonce
76+
},
77+
success: function(response) {
78+
if (response.success) {
79+
$link.text( 'Success' );
80+
if (response.data && response.data.message) {
81+
var $row = $link.closest( 'tr' );
82+
var colspan = $row.find( 'td' ).length;
83+
var message = response.data.message;
84+
if (response.data.response_code) {
85+
message += ' (Response: ' + response.data.response_code + ')';
86+
}
87+
var $resultRow = $( '<tr id="' + resultId + '" class="webhook-test-result"><td colspan="' + colspan + '"><div class="notice notice-success inline"><p>' + message + '</p></div></td></tr>' );
88+
$row.after( $resultRow );
89+
90+
// Remove this specific message after 7 seconds
91+
setTimeout(function() {
92+
$( '#' + resultId ).fadeOut(function() {
93+
$( this ).remove();
94+
});
95+
}, 7000);
96+
}
97+
} else {
98+
$link.text( 'Failed' );
99+
var error = response.data || 'Unknown error';
100+
var $row = $link.closest( 'tr' );
101+
var colspan = $row.find( 'td' ).length;
102+
var $resultRow = $( '<tr id="' + resultId + '" class="webhook-test-result"><td colspan="' + colspan + '"><div class="notice notice-error inline"><p>Test failed: ' + error + '</p></div></td></tr>' );
103+
$row.after( $resultRow );
104+
105+
// Remove this specific message after 7 seconds
106+
setTimeout(function() {
107+
$( '#' + resultId ).fadeOut(function() {
108+
$( this ).remove();
109+
});
110+
}, 7000);
111+
}
112+
113+
// Reset button after 3 seconds
114+
setTimeout(function() {
115+
$link.text( originalText ).removeClass( 'testing' ).css( 'pointer-events', 'auto' );
116+
}, 3000);
117+
},
118+
error: function(xhr, status, error) {
119+
$link.text( 'Error' );
120+
var $row = $link.closest( 'tr' );
121+
var colspan = $row.find( 'td' ).length;
122+
var $resultRow = $( '<tr id="' + resultId + '" class="webhook-test-result"><td colspan="' + colspan + '"><div class="notice notice-error inline"><p>Test error: ' + error + '</p></div></td></tr>' );
123+
$row.after( $resultRow );
124+
125+
// Remove this specific message after 7 seconds
126+
setTimeout(function() {
127+
$( '#' + resultId ).fadeOut(function() {
128+
$( this ).remove();
129+
});
130+
}, 7000);
131+
132+
// Reset button after 3 seconds
133+
setTimeout(function() {
134+
$link.text( originalText ).removeClass( 'testing' ).css( 'pointer-events', 'auto' );
135+
}, 3000);
136+
}
137+
});
138+
}
139+
);
45140
}
46141
);
47142

‎plugins/wp-graphql-headless-webhooks/src/Admin/views/webhooks-list.php‎

Lines changed: 3 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,13 @@
7979
<tr>
8080
<td class="column-name column-primary" data-colname="<?php esc_attr_e( 'Name', 'wp-graphql-headless-webhooks' ); ?>">
8181
<strong>
82-
<a href="<?php echo esc_url( $admin->get_admin_url( array( 'action' => 'edit', 'webhook' => $webhook->id ) ) ); ?>" class="row-title">
82+
<a href="<?php echo esc_url( $admin->get_admin_url( array( 'action' => 'edit', 'webhook_id' => $webhook->id ) ) ); ?>" class="row-title">
8383
<?php echo esc_html( $webhook->name ); ?>
8484
</a>
8585
</strong>
8686
<div class="row-actions">
8787
<span class="edit">
88-
<a href="<?php echo esc_url( $admin->get_admin_url( array( 'action' => 'edit', 'webhook' => $webhook->id ) ) ); ?>">
88+
<a href="<?php echo esc_url( $admin->get_admin_url( array( 'action' => 'edit', 'webhook_id' => $webhook->id ) ) ); ?>">
8989
<?php esc_html_e( 'Edit', 'wp-graphql-headless-webhooks' ); ?>
9090
</a> |
9191
</span>
@@ -95,7 +95,7 @@
9595
</a> |
9696
</span>
9797
<span class="trash">
98-
<a href="<?php echo esc_url( wp_nonce_url( $admin->get_admin_url( array( 'action' => 'delete', 'webhook' => $webhook->id ) ), 'delete_webhook_' . $webhook->id ) ); ?>" class="delete-webhook submitdelete">
98+
<a href="<?php echo esc_url( wp_nonce_url( $admin->get_admin_url( array( 'action' => 'delete', 'webhook_id' => $webhook->id ) ), 'delete_webhook_' . $webhook->id ) ); ?>" class="delete-webhook submitdelete">
9999
<?php esc_html_e( 'Delete', 'wp-graphql-headless-webhooks' ); ?>
100100
</a>
101101
</span>
@@ -169,97 +169,3 @@
169169
</div>
170170
<?php endif; ?>
171171
</div>
172-
173-
<script type="text/javascript">
174-
jQuery(document).ready(function($) {
175-
// Handle test webhook clicks
176-
$('.test-webhook').off('click').on('click', function(e) {
177-
e.preventDefault();
178-
179-
var $link = $(this);
180-
var webhookId = $link.data('webhook-id');
181-
var originalText = $link.text();
182-
183-
// Prevent multiple clicks
184-
if ($link.hasClass('testing')) {
185-
return false;
186-
}
187-
188-
// Update UI to show testing
189-
$link.text('Testing...').addClass('testing').css('pointer-events', 'none');
190-
191-
// Send test request
192-
$.ajax({
193-
url: ajaxurl,
194-
type: 'POST',
195-
data: {
196-
action: 'test_webhook',
197-
webhook_id: webhookId,
198-
nonce: '<?php echo wp_create_nonce( 'wp_rest' ); ?>'
199-
},
200-
success: function(response) {
201-
if (response.success) {
202-
$link.text('✓ Success');
203-
if (response.data && response.data.message) {
204-
// Show inline message using WordPress admin notice
205-
var message = response.data.message.replace(/\n/g, '<br>');
206-
var $row = $link.closest('tr');
207-
var colspan = $row.find('td').length;
208-
$row.after('<tr class="webhook-test-result"><td colspan="' + colspan + '"><div class="notice notice-success inline"><p>' + message + '</p></div></td></tr>');
209-
210-
// Remove message after 5 seconds
211-
setTimeout(function() {
212-
$('.webhook-test-result').fadeOut(function() {
213-
$(this).remove();
214-
});
215-
}, 5000);
216-
}
217-
} else {
218-
$link.text('✗ Failed');
219-
var error = response.data || 'Unknown error';
220-
var $row = $link.closest('tr');
221-
var colspan = $row.find('td').length;
222-
$row.after('<tr class="webhook-test-result"><td colspan="' + colspan + '"><div class="notice notice-error inline"><p><strong>Test failed:</strong> ' + error + '</p></div></td></tr>');
223-
224-
// Remove message after 5 seconds
225-
setTimeout(function() {
226-
$('.webhook-test-result').fadeOut(function() {
227-
$(this).remove();
228-
});
229-
}, 5000);
230-
}
231-
232-
// Reset button after 3 seconds
233-
setTimeout(function() {
234-
$link.text(originalText).removeClass('testing').css('pointer-events', 'auto');
235-
}, 3000);
236-
},
237-
error: function(xhr, status, error) {
238-
$link.text('✗ Error');
239-
var $row = $link.closest('tr');
240-
var colspan = $row.find('td').length;
241-
$row.after('<tr class="webhook-test-result"><td colspan="' + colspan + '"><div class="notice notice-error inline"><p><strong>Test error:</strong> ' + error + '</p></div></td></tr>');
242-
243-
// Remove message after 5 seconds
244-
setTimeout(function() {
245-
$('.webhook-test-result').fadeOut(function() {
246-
$(this).remove();
247-
});
248-
}, 5000);
249-
250-
// Reset button after 3 seconds
251-
setTimeout(function() {
252-
$link.text(originalText).removeClass('testing').css('pointer-events', 'auto');
253-
}, 3000);
254-
}
255-
});
256-
});
257-
258-
// Handle delete confirmation
259-
$('.delete-webhook').on('click', function(e) {
260-
if (!confirm('<?php echo esc_js( __( 'Are you sure you want to delete this webhook?', 'wp-graphql-headless-webhooks' ) ); ?>')) {
261-
e.preventDefault();
262-
}
263-
});
264-
});
265-
</script>

0 commit comments

Comments
 (0)