feat(TestRun): adjust action depening if there are unread alerts

components/alert-actions/script.js

@@ -74,7 +74,7 @@ class VrtsAlertActions extends window.HTMLElement {
 				if ( $alert ) {
 					if ( 'false-positive' === action ) {
 						$alert.setAttribute(
-							'data-vrts-false-positiv',
+							'data-vrts-false-positive',
 							shouldSetAction ? 'true' : 'false'
 						);
 					}

components/test-run-alerts/_style.scss

@@ -111,7 +111,7 @@
 			left: 10px;
 			visibility: hidden;
 
-			[data-vrts-false-positiv="true"] & {
+			[data-vrts-false-positive="true"] & {
 				visibility: visible;
 			}
 		}

components/test-run-alerts/index.php

@@ -41,10 +41,10 @@
 					id="vrts-alert-<?php echo esc_attr( $alert->id ); ?>"
 					href="<?php echo esc_url( $alert_link ); ?>"
 					class="vrts-test-run-alerts__card"
-					data-vrts-alert
+					data-vrts-alert="<?php echo esc_attr( $alert->id ); ?>"
 					data-vrts-current="<?php echo esc_attr( $data['alert']->id === $alert->id ? 'true' : 'false' ); ?>"
 					data-vrts-state="<?php echo esc_attr( intval( $alert->alert_state ) === 0 ? 'unread' : 'read' ); ?>"
-					data-vrts-false-positiv="<?php echo esc_attr( $alert->is_false_positive ? 'true' : 'false' ); ?>">
+					data-vrts-false-positive="<?php echo esc_attr( $alert->is_false_positive ? 'true' : 'false' ); ?>">
 					<figure class="vrts-test-run-alerts__card-figure">
 						<img class="vrts-test-run-alerts__card-image" src="<?php echo esc_url( $alert->comparison_screenshot_url ); ?>" alt="<?php esc_attr_e( 'Comparison Screenshot', 'visual-regression-tests' ); ?>">
 						<span class="vrts-test-run-alerts__card-flag"><?php vrts()->icon( 'flag' ); ?></span>

components/test-run-alerts/script.js

@@ -4,6 +4,7 @@ class VrtsTestRunAlerts extends window.HTMLElement {
 		this.resolveElements();
 		this.bindFunctions();
 		this.bindEvents();
+		this.unreadAlerts = new Set();
 	}
 
 	resolveElements() {
@@ -31,6 +32,15 @@ class VrtsTestRunAlerts extends window.HTMLElement {
 	connectedCallback() {
 		this.setCurrentAlertReadStatus();
 		this.checkHeadingSticky();
+		this.checkReadStatusChange();
+
+		this.$alerts.forEach( ( item ) => {
+			const isUnread =
+				item.getAttribute( 'data-vrts-state' ) === 'unread';
+			if ( isUnread ) {
+				this.unreadAlerts.add( item.getAttribute( 'data-vrts-alert' ) );
+			}
+		} );
 	}
 
 	setCurrentAlertReadStatus() {
@@ -61,6 +71,41 @@ class VrtsTestRunAlerts extends window.HTMLElement {
 		observer.observe( this.$heading );
 	}
 
+	checkReadStatusChange() {
+		const observer = new window.MutationObserver( ( mutations ) => {
+			mutations.forEach( ( mutation ) => {
+				if (
+					mutation.type === 'attributes' &&
+					mutation.attributeName === 'data-vrts-state'
+				) {
+					const id =
+						mutation.target.getAttribute( 'data-vrts-alert' );
+					const state =
+						mutation.target.getAttribute( 'data-vrts-state' );
+
+					if ( 'unread' === state ) {
+						this.unreadAlerts.add( id );
+					} else {
+						this.unreadAlerts.delete( id );
+					}
+
+					this.querySelector(
+						'[data-vrts-test-run-action="read-status"]'
+					).setAttribute(
+						'data-vrts-action-state',
+						this.unreadAlerts.size > 0 ? 'primary' : 'secondary'
+					);
+				}
+			} );
+		} );
+
+		this.$alerts.forEach( ( item ) => {
+			observer.observe( item, {
+				attributes: true,
+			} );
+		} );
+	}
+
 	handleAlertClick( e ) {
 		e.preventDefault();
 		const $el = e.currentTarget;