initial

wp-content/plugins/visual-regression-tests/components/test-run-info/_style.scss

@@ -0,0 +1,44 @@
+@import "@wordpress/base-styles/colors.native"; // stylelint-disable-line scss/at-import-partial-extension
+
+.vrts-test-run-info {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+
+	@media (max-width: 700px) {
+		flex-wrap: wrap;
+	}
+
+	> * {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-width: 0;
+		flex-shrink: 0;
+
+		&:not(:last-child)::after {
+			content: "";
+			display: block;
+			width: 1px;
+			height: 1rem;
+			background: $gray-10;
+		}
+	}
+
+	&__trigger {
+		flex-shrink: 1;
+	}
+
+	.vrts-test-run-trigger-notes {
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
+		display: -webkit-box;
+		color: $gray-40;
+		font-size: 13px;
+		line-height: 1.4;
+		max-block-size: calc(13px * 1.4);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: initial;
+	}
+}

wp-content/plugins/visual-regression-tests/components/test-run-info/index.php

@@ -0,0 +1,27 @@
+<?php
+
+use Vrts\Core\Utilities\Date_Time_Helpers;
+use Vrts\Models\Test_Run;
+
+$trigger_note = Test_Run::get_trigger_note( $data );
+
+?>
+<div class="vrts-test-run-info">
+	<strong>
+		<?php
+			// translators: %s: the run number.
+			printf( esc_html__( 'Run #%s', 'visual-regression-tests' ), esc_html( $data->id ) );
+		?>
+	</strong>
+	<?php echo wp_kses( Date_Time_Helpers::get_formatted_relative_date_time( $data->finished_at ), [ 'time' => [ 'datetime' => true ] ] ); ?>
+	<span class="vrts-test-run-info__trigger">
+		<span class="vrts-test-run-trigger vrts-test-run-trigger--<?php echo esc_attr( $data->trigger ); ?>">
+			<?php echo esc_html( Test_Run::get_trigger_title( $data ) ); ?>
+		</span>
+		<?php if ( ! empty( $trigger_note ) ) : ?>
+			<span class="vrts-test-run-trigger-notes" title="<?php echo esc_attr( $trigger_note ); ?>">
+				<?php echo esc_html( $trigger_note ); ?>
+			</span>
+		<?php endif; ?>
+	</span>
+</div>