Continuous testing

assets/admin.scss

@@ -2,7 +2,11 @@
 
 .vrts_list_table_page {
 
-	.testing-status {
+	.vrts-testing-status {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		margin: 0;
 
 		&--paused {
 			color: $alert-red;
@@ -76,3 +80,61 @@
 		margin-bottom: 0;
 	}
 }
+
+.vrts-tooltip {
+	position: relative;
+
+	&-icon {
+		color: $blue-50;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&::before {
+			font-size: 1rem;
+		}
+
+		svg {
+			fill: currentcolor;
+		}
+	}
+
+	&-content {
+		display: block;
+		position: absolute;
+		visibility: hidden;
+		padding: 0.5rem;
+		width: 240px;
+		z-index: 1000002;
+		top: -10px;
+		right: 20px;
+	}
+
+	&-content-inner {
+		display: block;
+		background: #000;
+		border-radius: 2px;
+		color: #f0f0f0;
+		font-size: 12px;
+		line-height: 1.4;
+		padding: 0.725rem;
+
+		a {
+			color: #fff;
+		}
+	}
+
+	&:hover &-content {
+		visibility: visible;
+	}
+}
+
+.vrts-testing-toogle {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+
+	.vrts-tooltip {
+		margin-left: auto;
+	}
+}

assets/editor.scss

@@ -13,42 +13,8 @@
 		}
 	}
 
-	.testing-status {
-		display: flex;
-		justify-content: space-between;
-		gap: 1rem;
-		margin-bottom: 0;
-
-		&--paused {
-			color: $alert-red;
-		}
-
-		&--running {
-			color: $alert-green;
-		}
-
-		&-wrapper {
-			margin: 1.5rem 0;
-
-			> :first-child {
-				margin-top: 0;
-			}
-
-			> :last-child {
-				margin-bottom: 0;
-			}
-
-			.howto {
-				margin-top: 0.25rem;
-				font-size: 0.75rem;
-				color: $gray-700;
-			}
-		}
-	}
-
 	.figure {
 		margin: 0;
-		aspect-ratio: 16/9;
 
 		&-link {
 			outline: none;
@@ -60,6 +26,7 @@
 		}
 
 		&-image {
+			aspect-ratio: 16/9;
 			border: solid 1px #bfbfbf;
 			width: 100%;
 			height: 100%;
@@ -77,6 +44,10 @@
 
 		&-title {
 			margin-bottom: 0.5rem;
+			display: flex;
+			gap: 0.5rem;
+			justify-content: space-between;
+			align-items: center;
 		}
 
 		label {
@@ -91,3 +62,50 @@
 		}
 	}
 }
+
+.vrts-testing-status {
+	position: relative;
+	display: flex;
+	justify-content: space-between;
+	gap: 1rem;
+	margin-bottom: 0;
+
+	&--paused {
+		color: $alert-red;
+	}
+
+	&--waiting {
+		color: $alert-yellow;
+	}
+
+	&--running {
+		color: $alert-green;
+	}
+
+	&-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		margin: 1.5rem 0;
+
+		> :first-child {
+			margin-top: 0;
+		}
+
+		> :last-child {
+			margin-bottom: 0;
+		}
+
+		.dashicons {
+			display: none;
+		}
+	}
+
+	&-info {
+		display: flex;
+		justify-content: space-between;
+		gap: 5px;
+		font-size: 0.75rem;
+		color: $gray-700;
+	}
+}

assets/scripts/onboarding.js

@@ -10,22 +10,29 @@ if ( window.vrts_admin_vars.onboarding ) {
 	const onboarding = driver( {
 		overlayColor: 'rgba(44, 51, 56, 0.35)',
 		stageRadius: 0,
-		animate: false,
-		stagePadding: 10,
+		stagePadding: 0,
 		popoverOffset: 20,
 		allowClose: false,
 		showProgress: ! isHighlight,
+		popoverClass: isHighlight
+			? 'vrts-onboarding-nonblocking'
+			: 'vrts-onboarding',
+		disableActiveInteraction: false,
 		progressText: __(
 			'{{current}} of {{total}}',
 			'visual-regression-tests'
 		),
-		nextBtnText: __( 'Next', 'visual-regression-tests' ),
 		prevBtnText: __( 'Previous', 'visual-regression-tests' ),
+		nextBtnText: __( 'Next', 'visual-regression-tests' ),
 		doneBtnText: __( 'Got it!', 'visual-regression-tests' ),
 		onPopoverRender: ( popover, { config, state } ) => {
 			const steps = config.steps;
 			const hasNextStep = steps[ state.activeIndex + 1 ];
 
+			config.stagePadding =
+				window.vrts_admin_vars.onboarding.steps[ state.activeIndex ]
+					.padding || 0;
+
 			popover.previousButton.classList.add(
 				'button',
 				'button-secondary',
@@ -53,14 +60,12 @@ if ( window.vrts_admin_vars.onboarding ) {
 			const hasNextStep = steps[ state.activeIndex + 1 ];
 
 			if ( ! hasNextStep ) {
-				saveOnboarding();
 				onboarding.destroy();
 			} else {
 				onboarding.moveNext();
 			}
 		},
 		onCloseClick: () => {
-			saveOnboarding();
 			onboarding.destroy();
 		},
 		steps: window.vrts_admin_vars.onboarding.steps.map( ( step ) => {
@@ -77,6 +82,7 @@ if ( window.vrts_admin_vars.onboarding ) {
 	} );
 
 	onboarding.drive();
+	saveOnboarding();
 }
 
 async function saveOnboarding() {

assets/scripts/relative-time-element.js

@@ -0,0 +1,88 @@
+class RelativeTimeElement extends window.HTMLElement {
+	// constructor (element) {
+	// 	this.element = element
+	// 	// get date from utc timestamp
+
+	// 	// this.time = new Date( element.getAttribute( 'time' ) );
+	// 	// this.update();
+	// }
+
+	// observe attribute time
+	static get observedAttributes() {
+		return [ 'time' ];
+	}
+
+	// update time when attribute time changes
+	attributeChangedCallback( name, oldValue, newValue ) {
+		if ( name === 'time' ) {
+			this.time = new Date( newValue );
+			this.update();
+		}
+	}
+
+	// connectedCallback() {
+	// 	this.time = new Date( this.getAttribute( 'time' ) );
+	// 	this.update();
+	// }
+
+	update() {
+		this.innerText = `${ extractDate( this.time ) } at ${ extractTime(
+			this.time
+		) }`;
+	}
+}
+
+window.customElements.define( 'vrts-relative-time', RelativeTimeElement );
+
+function extractDate( inputDate ) {
+	const { __ } = wp.i18n;
+	const today = new Date();
+	// Set the time to midnight for an accurate date comparison
+	today.setHours( 0, 0, 0, 0 );
+
+	// Create a Date object for the input date
+	const comparisonDate = new Date( inputDate );
+	comparisonDate.setHours( 0, 0, 0, 0 );
+
+	// Calculate the difference in days
+	const difference = ( comparisonDate - today ) / ( 1000 * 3600 * 24 );
+
+	// Determine if the date is today, tomorrow, or yesterday
+	if ( difference === 0 ) {
+		return __( 'Today', 'visual-regression-testing' );
+	} else if ( difference === 1 ) {
+		return __( 'Tomorrow', 'visual-regression-testing' );
+	} else if ( difference === -1 ) {
+		return __( 'Yesterday', 'visual-regression-testing' );
+	}
+	return dateFormat( inputDate, 'Y/m/d' );
+}
+
+function extractTime( inputDate ) {
+	return dateFormat( inputDate, 'g:i a' );
+}
+
+// format date like in php date_format
+function dateFormat( date, format ) {
+	const pad = ( number ) => ( number < 10 ? `0${ number }` : number );
+	const d = pad( date.getDate() );
+	const m = pad( date.getMonth() + 1 );
+	const y = date.getFullYear();
+	const Y = date.getFullYear();
+	const H = date.getHours();
+	const i = pad( date.getMinutes() );
+	const s = date.getSeconds();
+	const g = date.getHours() % 12 || 12;
+	const a = date.getHours() >= 12 ? 'pm' : 'am';
+
+	return format
+		.replace( 'd', d )
+		.replace( 'm', m )
+		.replace( 'y', y )
+		.replace( 'Y', Y )
+		.replace( 'H', H )
+		.replace( 'i', i )
+		.replace( 's', s )
+		.replace( 'g', g )
+		.replace( 'a', a );
+}