Add support for Slack notifications

common/php/class-module.php

@@ -296,18 +296,24 @@ function update_user_meta( $user_id, $key, $value, $previous = null ) {
 
 	}
 
-	/**
-	 * Take a status and a message, JSON encode and print
-	 *
-	 * @since 0.7
-	 *
-	 * @param string $status Whether it was a 'success' or an 'error'
-	 */
-	function print_ajax_response( $status, $message = '' ) {
-		header( 'Content-type: application/json;' );
-		echo json_encode( array( 'status' => $status, 'message' => $message ) );
-		exit;
-	}
+		/**
+		 * Take a status and a message, JSON encode and print
+		 *
+		 * @since 0.7
+		 *
+		 * @param string $status Whether it was a 'success' or an 'error'
+		 */
+		protected function print_ajax_response( $status, $message = '', $http_code = 200 ) {
+			header( 'Content-type: application/json;' );
+			http_response_code( $http_code );
+			echo wp_json_encode(
+				array(
+					'status'  => $status,
+					'message' => $message,
+				)
+			);
+			exit;
+		}
 
 	/**
 	 * Whether or not the current page is a user-facing Edit Flow View

modules/editorial-comments/lib/editorial-comments.css

@@ -16,92 +16,95 @@
 	border-top: 1px solid #e5e5e5;
 	background: #eee;
 }
-	#ef-comments li {
-		padding: 5px;
-		margin: 0px 0;
-		border-left: 5px solid #e5e5e5;
-		border-right: 5px solid #e5e5e5;
-		border-bottom: 1px solid #e5e5e5;
-		background: #fff;
-	}
-
-	.row-actions {
-		margin-top: 0;
-	}
-
-	#ef-comments li:hover p.row-actions,
-	#ef-comments li:hover .ef-notification-meta {
-		visibility: visible;
-	}
-
-	#ef-comments li p.row-actions {
-		text-align: right;
-	}
-	
-	#ef-comments ul.children {
-		margin-left: 30px;
-		margin-bottom: 10px;
-	}
-		#ef-comments ul.children li {
-			/*background: #EAF2FA;*/
-			border-left: 5px solid #e5e5e5;
-			border-bottom: 1px solid #e5e5e5;
-		}
-	/*
+#ef-comments li {
+	padding: 5px;
+	margin: 0px 0;
+	border-left: 5px solid #e5e5e5;
+	border-right: 5px solid #e5e5e5;
+	border-bottom: 1px solid #e5e5e5;
+	background: #fff;
+}
+
+.row-actions {
+	margin-top: 0;
+}
+
+#ef-comments li:hover p.row-actions,
+#ef-comments li:hover .ef-notification-meta {
+	visibility: visible;
+}
+
+#ef-comments li p.row-actions {
+	text-align: right;
+}
+
+#ef-comments ul.children {
+	margin-left: 30px;
+	margin-bottom: 10px;
+}
+#ef-comments ul.children li {
+	/*background: #EAF2FA;*/
+	border-left: 5px solid #e5e5e5;
+	border-bottom: 1px solid #e5e5e5;
+}
+/*
 	#ef-comments .even { background: none; }
 	#ef-comments .odd { background: none; }
 */
-	#ef-comments img.avatar {
-		border:1px solid #CCCCCC;
-		float:left;
-		margin-left:2px;
-		margin-right:15px;
-		margin-top:0;	
-	}
-
-	#ef-comments h5 {
-		font-style: normal;
-		font-size:1em;
-		line-height:1.1em;
-		margin-top: 10px;
-		margin-bottom: 10px;
-	}
-
-		#ef-comments h5 span.meta {
-			color:#666666;
-			font-size:0.85em;
-			margin:0 0 1.5em;
-			font-style: normal;
-		}
-
-	#ef-comments .comment-content {
-		margin-left: 67px;
-	}
-
-		#ef-comments .comment-content p {
-			color:#555555;
-			font-size:1em;
-			line-height:1.4em;
-			margin:0.7em 0;
-		}
-
-	#ef-replyrow {
-	}
-		#ef-replyrow #ef-replycontent {
-			width:  100%;
-			height: 100px;
-		}
-		#ef-replyrow #ef-replysubmit {
-			margin: 6px 0;
-		}
-			#ef-replyrow #ef-replysubmit * {
-				margin-left: 3px;
-			}
-			#ef-replyrow #ef-replysubmit .error {
-				margin: 6px 6px 0 0;
-				line-height:1.2em;
-				padding:4px 10px;
-			}
+#ef-comments img.avatar {
+	border: 1px solid #cccccc;
+	float: left;
+	margin-left: 2px;
+	margin-right: 15px;
+	margin-top: 0;
+}
+
+#ef-comments h5 {
+	font-style: normal;
+	font-size: 1em;
+	line-height: 1.1em;
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+#ef-comments h5 span.meta {
+	color: #666666;
+	font-size: 0.85em;
+	margin: 0 0 1.5em;
+	font-style: normal;
+}
+
+#ef-comments .comment-content {
+	margin-left: 67px;
+}
+
+#ef-comments .comment-content p {
+	color: #555555;
+	font-size: 1em;
+	line-height: 1.4em;
+	margin: 0.7em 0;
+}
+
+#ef-replyrow {
+}
+#ef-replyrow #ef-replycontent {
+	width: 100%;
+	height: 100px;
+}
+#ef-replyrow #ef-replysubmit {
+	margin: 6px 0;
+}
+#ef-replyrow #ef-replysubmit * {
+	margin-left: 3px;
+}
+#ef-replyrow #ef-replysubmit .error {
+	background-color: #f4a2a2;
+	border-left: 4px solid #cc1818;
+	display: block;
+	margin: 6px 0 0;
+	line-height: 1.2em;
+	padding: 4px 10px;
+}
 
 .ef-comment {
 	font-size: 14px;
@@ -129,7 +132,7 @@ input[readonly].ef-reply-notifier-message {
 	border-left: 4px solid #46b450;
 }
 
-label[for="ef-reply-notifier"] {
+label[for='ef-reply-notifier'] {
 	margin: 0.75em 0;
 	display: block;
 	cursor: default;

modules/editorial-comments/lib/editorial-comments.js

@@ -233,8 +233,16 @@ editorialCommentReply = {
 			er = r.responseText.replace( /<.[^<>]*?>/g, '' );
 		}
 
+		let message = '';
+		try {
+			er = JSON.parse( er );
+			message = er.message ?? er;
+		} catch ( parseErr ) {
+			message = er;
+		}
+
 		if ( er ) {
-			jQuery( '#ef-replysubmit .error' ).html( er ).show();
+			jQuery( '#ef-replysubmit .error' ).html( message ).show();
 		}
 	},
 };

modules/notifications/lib/notifications.js

@@ -87,4 +87,18 @@ jQuery( document ).ready( function ( $ ) {
 			} );
 		}
 	);
+
+	// TODO: Should change this to _not_ use JQuery
+	const webhookUrl = $( 'input#webhook_url' ).closest( 'tr' );
+	const sendToWebhook = $( 'select#send_to_webhook' );
+	if ( sendToWebhook.val() === 'off' ) {
+		webhookUrl.hide();
+	}
+	sendToWebhook.on( 'change', function () {
+		if ( $( this ).val() === 'off' ) {
+			webhookUrl.hide();
+		} else {
+			webhookUrl.show();
+		}
+	} );
 } );