build: prevent loading cached visual regression images

.github/workflows/continuous-integration-secure.yml

@@ -126,8 +126,6 @@ jobs:
           path: dist/screenshots/
           run-id: ${{ github.event.workflow_run.id }}
           github-token: ${{ secrets.GH_ACTIONS_ARTIFACT_DOWNLOAD }}
-      - name: Remove .keep file
-        run: rm dist/screenshots/.keep
 
       - name: Build visual-regression-app
         run: yarn build:visual-regression-app

src/visual-regression-app/src/components/overview/overview.scss

@@ -7,3 +7,9 @@
   gap: 1rem;
   flex-direction: column;
 }
+
+.app-compare-link {
+  @include sbb.mq($from: medium) {
+    margin-inline-start: auto;
+  }
+}

src/visual-regression-app/src/components/overview/overview.ts

@@ -1,12 +1,15 @@
 import { LitElement, html, type TemplateResult, type CSSResultGroup, nothing } from 'lit';
 import { customElement } from 'lit/decorators.js';
+// eslint-disable-next-line import-x/no-unresolved
+import { meta } from 'virtual:meta';
 
 import { screenshots } from '../../screenshots.js';
 
 import style from './overview.scss?lit&inline';
 
 import '@sbb-esta/lyne-elements/accordion.js';
-import '@sbb-esta/lyne-elements/button/secondary-button-link.js';
+import '@sbb-esta/lyne-elements/action-group.js';
+import '@sbb-esta/lyne-elements/button/button-link.js';
 import '@sbb-esta/lyne-elements/card.js';
 import '@sbb-esta/lyne-elements/container.js';
 import '@sbb-esta/lyne-elements/expansion-panel.js';
@@ -28,14 +31,44 @@ export class Overview extends LitElement {
           Lyne visual regression comparison${screenshots.baselineOnly ? ' baseline' : nothing}
         </sbb-title>
         <div class="app-overview">
+          ${screenshots.stats}
           <sbb-card color="milk">
-            ${screenshots.stats}
-            <sbb-secondary-button-link
-              href="/compare/${screenshots.flatTestCases[0]?.path}"
-              size="s"
+            <sbb-action-group
+              align-group="stretch"
+              orientation="vertical"
+              horizontal-from="medium"
+              button-size="s"
+              link-size="s"
             >
-              ${!screenshots.baselineOnly ? `Start comparing` : `Check baselines`}
-            </sbb-secondary-button-link>
+              ${meta.baselineGitSha
+                ? html`<sbb-block-link
+                    icon-name="document-check-small"
+                    href=${meta.baselineCommitUrl || nothing}
+                    ?disabled=${meta.baselineGitSha === 'N/A'}
+                    >Baseline Commit
+                    ${meta.baselineGitSha === 'N/A'
+                      ? meta.baselineGitSha
+                      : `#${meta.baselineGitSha.substring(0, 7)}`}</sbb-block-link
+                  >`
+                : nothing}
+              ${meta.gitSha
+                ? html`<sbb-block-link
+                    icon-name="arrow-change-horizontal-small"
+                    href=${meta.commitUrl || nothing}
+                    ?disabled=${meta.gitSha === 'local'}
+                    >Compare Commit
+                    ${meta.gitSha === 'local'
+                      ? meta.gitSha
+                      : `#${meta.gitSha.substring(0, 7)}`}</sbb-block-link
+                  >`
+                : nothing}
+              <sbb-button-link
+                class="app-compare-link"
+                href="/compare/${screenshots.flatTestCases[0]?.path}"
+              >
+                ${!screenshots.baselineOnly ? `Start comparing` : `Check baselines`}
+              </sbb-button-link>
+            </sbb-action-group>
           </sbb-card>
           <sbb-accordion>
             ${screenshots.components.map(

src/visual-regression-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.ts

@@ -1,5 +1,7 @@
 import { LitElement, html, type TemplateResult, type CSSResultGroup, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+// eslint-disable-next-line import-x/no-unresolved
+import { meta } from 'virtual:meta';
 
 import type { ScreenshotFiles } from '../../../../interfaces.js';
 
@@ -47,7 +49,11 @@ export class FullscreenDiff extends LitElement {
           : nothing}
       </sbb-radio-button-group>
       <div class="app-scroll-container">
-        <img class="app-image" .src="./${this.screenshotFiles?.[this.selectedFile]}" alt="" />
+        <img
+          class="app-image"
+          .src=${`./${this.screenshotFiles?.[this.selectedFile]}?commit=${this.selectedFile === 'baselineFile' ? meta.baselineGitSha : meta.gitSha}`}
+          alt=""
+        />
       </div>`;
   }
 }

src/visual-regression-app/src/components/test-case/image-diff/image-diff.ts

@@ -1,5 +1,7 @@
 import { LitElement, html, type TemplateResult, type CSSResultGroup, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+// eslint-disable-next-line import-x/no-unresolved
+import { meta } from 'virtual:meta';
 
 import type { ScreenshotFiles } from '../../../interfaces.js';
 
@@ -104,7 +106,7 @@ export class ImageDiff extends LitElement {
               >
                 <img
                   class="app-image"
-                  .src="./${this.screenshotFiles?.baselineFile}"
+                  .src=${`./${this.screenshotFiles?.baselineFile}?commit=${meta.baselineGitSha}`}
                   alt=""
                   @load=${this._setBaselineImageDimension}
                 />
@@ -120,7 +122,11 @@ export class ImageDiff extends LitElement {
                 class="app-image-button"
                 ?hidden=${!this._showDiff || this.screenshotFiles.isNew}
               >
-                <img class="app-image" .src="./${this.screenshotFiles?.diffFile}" alt="" />
+                <img
+                  class="app-image"
+                  .src=${`./${this.screenshotFiles?.diffFile}?commit=${meta.gitSha}`}
+                  alt=""
+                />
               </button>
               <button
                 @click=${() => this._showFullscreen('failedFile')}
@@ -129,7 +135,7 @@ export class ImageDiff extends LitElement {
               >
                 <img
                   class="app-image"
-                  .src="./${this.screenshotFiles?.failedFile}"
+                  .src=${`./${this.screenshotFiles?.failedFile}?commit=${meta.gitSha}`}
                   alt=""
                   @load=${this._setFailedImageDimension}
                 />

src/visual-regression-app/src/interfaces.ts

@@ -9,3 +9,10 @@ export interface ScreenshotFiles {
 }
 
 export type ScreenshotMap = Record<string, Record<string, Record<string, ScreenshotFiles[]>>>;
+
+export interface Meta {
+  gitSha: string;
+  commitUrl: string;
+  baselineGitSha?: string;
+  baselineCommitUrl?: string;
+}

src/visual-regression-app/vite.config.ts

@@ -13,7 +13,7 @@ import {
 import { distDir } from '../../tools/vite/index.js';
 import rootConfig from '../../vite.config.js';
 
-import type { ScreenshotFiles } from './src/interfaces.js';
+import type { ScreenshotFiles, Meta } from './src/interfaces.js';
 
 const packageRoot = new URL('.', import.meta.url);
 const screenshotsDir = new URL(`./screenshots/`, distDir);
@@ -56,21 +56,27 @@ const extractHierarchicalMap = (
 
 function prepareScreenshots(): PluginOption {
   let viteConfig: ResolvedConfig;
-  const virtualModuleId = 'virtual:screenshots';
-  const resolvedVirtualModuleId = '\0' + virtualModuleId;
+  const virtualModuleScreenshotsId = 'virtual:screenshots';
+  const resolvedVirtualModuleScreenshotsId = '\0' + virtualModuleScreenshotsId;
+
+  const virtualModuleMetaId = 'virtual:meta';
+  const resolvedVirtualModuleMetaId = '\0' + virtualModuleMetaId;
 
   return {
     name: 'prepare screenshot',
     configResolved(config) {
       viteConfig = config;
     },
     resolveId(id) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId;
+      if (id === virtualModuleScreenshotsId) {
+        return resolvedVirtualModuleScreenshotsId;
+      }
+      if (id === virtualModuleMetaId) {
+        return resolvedVirtualModuleMetaId;
       }
     },
     load(id) {
-      if (id === resolvedVirtualModuleId) {
+      if (id === resolvedVirtualModuleScreenshotsId) {
         if (!existsSync(screenshotsDir)) {
           return `export const screenshotsRaw = []`;
         }
@@ -205,6 +211,24 @@ function prepareScreenshots(): PluginOption {
           (_key, value) => (value instanceof Map ? Object.fromEntries(Array.from(value)) : value),
         )}`;
       }
+
+      if (id === resolvedVirtualModuleMetaId) {
+        let meta: Pick<Meta, 'gitSha' | 'baselineGitSha'>;
+
+        try {
+          meta = JSON.parse(readFileSync(new URL('./meta.json', screenshotsDir), 'utf8'));
+        } catch {
+          meta = { gitSha: process.env.GITHUB_SHA ?? 'local', baselineGitSha: 'N/A' };
+        }
+
+        const metaToWrite = {
+          ...meta,
+          commitUrl: `https://github.com/sbb-design-systems/lyne-components/commit/${meta.gitSha}`,
+          baselineCommitUrl: `https://github.com/sbb-design-systems/lyne-components/commit/${meta.baselineGitSha}`,
+        } satisfies Meta;
+
+        return `export const meta = ${JSON.stringify(metaToWrite)};`;
+      }
     },
     configureServer(server) {
       server.middlewares.use((req, res, next) => {

src/vite-env.d.ts

@@ -13,3 +13,7 @@ declare module '@custom-elements-manifest/analyzer/cli' {
 declare module 'virtual:screenshots' {
   export const screenshotsRaw: import('./visual-regression-app/src/interfaces').ScreenshotMap;
 }
+
+declare module 'virtual:meta' {
+  export const meta: import('./visual-regression-app/src/interfaces').Meta;
+}

tools/visual-regression-testing/prepare-failed-screenshots-artifact.ts

@@ -1,9 +1,9 @@
-import { cpSync, existsSync, mkdirSync, writeFileSync, type CopySyncOptions } from 'node:fs';
+import { type CopySyncOptions, cpSync, existsSync, mkdirSync } from 'node:fs';
 
 import * as glob from 'glob';
 
 // When visual regression tests have failed, we only want to pack the relevant screenshots
-// into the artifact transfered to the secure workflow, as uploading and downloading the full
+// into the artifact transferred to the secure workflow, as uploading and downloading the full
 // baseline would take far longer.
 // Due to this we copy the necessary screenshots to /dist/screenshots-artifact which will
 // be moved to /dist/screenshots in the secure workflow.
@@ -12,7 +12,8 @@ const screenshotDir = new URL('../../dist/screenshots/', import.meta.url);
 const artifactDir = new URL('../../dist/screenshots-artifact/', import.meta.url);
 const copyOptions: CopySyncOptions = { force: true, recursive: true };
 mkdirSync(artifactDir, { recursive: true });
-writeFileSync(new URL('./.keep', artifactDir), '', 'utf8');
+
+cpSync(new URL('./meta.json', screenshotDir), new URL('./meta.json', artifactDir), copyOptions);
 
 const failedDirs = glob.sync('*/failed/', { cwd: screenshotDir });
 for (const failedDir of failedDirs.map((d) => `./${d}`)) {

tools/web-test-runner/visual-regression-plugin-config.ts

@@ -5,6 +5,9 @@ import { dirname, extname } from 'path';
 
 import type { visualRegressionPlugin } from '@web/test-runner-visual-regression/plugin';
 
+import type { Meta } from '../../src/visual-regression-app/src/interfaces.js';
+
+const metaFileName = 'meta.json';
 const branch =
   process.env.GITHUB_REF_NAME ??
   process.env.BRANCH ??
@@ -13,6 +16,27 @@ const baselineUrl = process.env.GITHUB_ACTIONS
   ? 'http://localhost:8050/'
   : 'https://lyne-visual-regression-baseline.app.sbb.ch/';
 
+// Importing distDir doesn't work
+const screenshotsDir = new URL(`screenshots/`, new URL('../../dist/', import.meta.url));
+
+let meta: Partial<Meta> = {
+  gitSha: process.env.GITHUB_SHA ?? 'local',
+};
+
+let baselineMeta;
+try {
+  const response = await fetch(`${baselineUrl}screenshots/${metaFileName}`);
+  baselineMeta = JSON.parse(await response.text()) satisfies Meta;
+  meta = { ...meta, baselineGitSha: baselineMeta.gitSha ?? 'N/A' };
+} catch (e) {
+  meta = { ...meta, baselineGitSha: 'N/A' };
+}
+
+if (!existsSync(screenshotsDir)) {
+  mkdirSync(screenshotsDir, { recursive: true });
+}
+writeFileSync(new URL(`./${metaFileName}`, screenshotsDir), JSON.stringify(meta), 'utf8');
+
 export const visualRegressionConfig = {
   baseDir: 'dist/screenshots',
   async getBaseline({ filePath, name }) {