feat(TestRun): adjust new test run highlight

bleech · Oct 16, 2024 · b89273b · b89273b
1 parent c881de6
commit b89273b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 49 deletions.
diff --git a/components/test-runs-page/_style.scss b/components/test-runs-page/_style.scss
@@ -101,11 +101,7 @@
 		}
 
 		&.test-run-highlighted {
-			animation: vrts-color-highlight 3s ease;
-
-			.check-column .dashicons {
-				animation: vrts-scale-up-down 3s;
-			}
+			animation: vrts-color-highlight 2s ease;
 		}
 
 		&:hover {

diff --git a/components/test-runs-page/script.js b/components/test-runs-page/script.js
@@ -1,18 +1,3 @@
-// document
-// 	.querySelectorAll( '.vrts-show-test-run-details' )
-// 	.forEach( ( element ) => {
-// 		element.addEventListener( 'click', ( e ) => {
-// 			e.preventDefault();
-// 			const $row = element.closest( 'tr' );
-// 			const isHidden =
-// 				$row.getAttribute( 'data-vrts-test-run-details' ) === 'hidden';
-// 			$row.setAttribute(
-// 				'data-vrts-test-run-details',
-// 				isHidden ? 'visible' : 'hidden'
-// 			);
-// 		} );
-// 	} );
-
 /**
  * @param {HTMLTableElement} table
  */
@@ -21,46 +6,35 @@ function highlightNewTestRuns( table ) {
 		return;
 	}
 	const { localStorage } = window;
-	const testRunIds = JSON.parse(
-		localStorage.getItem( 'vrtsQueuedTestIds' ) || '[]'
+	const testRunIds = new Set(
+		JSON.parse( localStorage.getItem( 'vrtsNewTestRuns' ) || '[]' )
 	);
 	const rows = table.querySelectorAll( 'tr[data-test-run-id]' );
-	let i = 0;
-	rows.forEach( ( row ) => {
-		const testRunId = row.getAttribute( 'data-test-run-id' );
-		if ( testRunIds.includes( testRunId ) ) {
-			setTimeout( () => {
-				row.classList.add( 'test-run-highlighted' );
-			}, i * 200 );
-			i += 1;
-		}
-	} );
-}
 
-/**
- * @param {HTMLTableElement} table
- */
-function saveQueuedTestIds( table ) {
-	if ( ! table ) {
-		return;
-	}
-	const { localStorage } = window;
+	let staggerTimeout = 0;
 
-	const rows = table.querySelectorAll( 'tr[data-test-run-id]' );
-	const newTestRunIds = [];
 	rows.forEach( ( row ) => {
 		const testRunId = row.getAttribute( 'data-test-run-id' );
-		newTestRunIds.push( testRunId );
+
+		if ( row.getAttribute( 'data-test-run-new' ) === 'true' ) {
+			if ( ! testRunIds.has( testRunId ) ) {
+				testRunIds.add( testRunId );
+				setTimeout( () => {
+					row.classList.add( 'test-run-highlighted' );
+				}, staggerTimeout );
+				staggerTimeout += 200;
+			}
+		} else if ( testRunIds.has( testRunId ) ) {
+			testRunIds.delete( testRunId );
+		}
 	} );
+
 	localStorage.setItem(
-		'vrtsQueuedTestIds',
-		JSON.stringify( newTestRunIds )
+		'vrtsNewTestRuns',
+		JSON.stringify( [ ...testRunIds ] )
 	);
 }
 
 highlightNewTestRuns(
 	document.querySelector( 'form .vrts-test-runs-list-table' )
 );
-saveQueuedTestIds(
-	document.querySelector( '.vrts-test-runs-list-queue-table' )
-);
diff --git a/includes/list-tables/class-test-runs-list-table.php b/includes/list-tables/class-test-runs-list-table.php
@@ -189,11 +189,15 @@ public function prepare_items() {
 	 */
 	public function single_row( $item ) {
 		$classes = 'iedit test-run-row';
+		$current_time = time();
+		$finished_at = strtotime( $item->finished_at );
+		$is_new_run = $current_time - $finished_at < 20 * MINUTE_IN_SECONDS;
 		?>
 		<tr
 			id="test-<?php echo esc_attr( $item->id ); ?>"
 			class="<?php echo esc_attr( $classes ); ?>"
 			data-test-run-id="<?php echo esc_attr( $item->id ); ?>"
+			data-test-run-new="<?php echo esc_attr( $is_new_run ? 'true' : 'false' ); ?>"
 			<?php echo $item->alerts_count > 0 ? 'data-has-alerts' : ''; ?>
 		>
 			<?php $this->single_row_columns( $item ); ?>