feat(tracking) :: accept links (#1576)

Fixes #900

Assisted-By :: Claude Opus 5.5

Author: 81reap

CHANGELOG.md

@@ -12,6 +12,8 @@
 
 - The modal component accepts `close_label` as another name for `close`, which is a reserved word on SQL Server. ([#1070](https://github.com/sqlpage/SQLPage/issues/1070))
 
+- Each item of the tracking component accepts a `link`. ([#900](https://github.com/sqlpage/SQLPage/issues/900))
+
 ## v0.47.0 (2026-10-15)
 - Redesigned the official website homepage with live SQLPage examples, an interactive database sculpture, flowing section transitions, responsive layouts, and direct links to documentation and deployment guides.
 - For sites that store their pages in a database, checking for page updates no longer makes other pages wait when the database is busy. In a test, another page loaded in under 1 ms instead of about 250 ms.

examples/official-site/sqlpage/migrations/28_tracking_component.sql

@@ -78,6 +78,14 @@ VALUES (
         FALSE,
         FALSE
     ),
+    (
+        'tracking',
+        'link',
+        'A URL to open when the user clicks on the tracked item.',
+        'URL',
+        FALSE,
+        TRUE
+    ),
     (
         'tracking',
         'center',

sqlpage/templates/tracking.handlebars

@@ -18,7 +18,11 @@
 		<div class="mt-2">
 			<div class="tracking">
 				{{#each_row}}
-					<div class="tracking-block{{#if color}} bg-{{color}}{{/if}}" data-bs-toggle="tooltip" data-bs-placement="{{default ../placement "top"}}" title="{{title}}"></div>
+					{{#if link}}
+						<a href="{{link}}" class="tracking-block{{#if color}} bg-{{color}}{{/if}}" data-bs-toggle="tooltip" data-bs-placement="{{default ../placement "top"}}" title="{{title}}"></a>
+					{{else}}
+						<div class="tracking-block{{#if color}} bg-{{color}}{{/if}}" data-bs-toggle="tooltip" data-bs-placement="{{default ../placement "top"}}" title="{{title}}"></div>
+					{{/if}}
 				{{/each_row}}
 			</div>
 		</div>

tests/end-to-end/fixtures/tracking/day.sql

@@ -0,0 +1 @@
+SELECT 'text' AS component, 'Details for ' || $day AS contents;

tests/end-to-end/fixtures/tracking/index.sql

@@ -0,0 +1,3 @@
+SELECT 'tracking' AS component, 'Server uptime' AS title;
+SELECT 'Monday: up' AS title, 'success' AS color, 'day.sql?day=Monday' AS link;
+SELECT 'Tuesday: down' AS title, 'danger' AS color;

tests/end-to-end/fixtures/tracking/test.ts

@@ -0,0 +1,26 @@
+import { expect, test } from "../../fixture.ts";
+
+test("tracking block with a link opens it", async ({ page }) => {
+  await page.locator(".tracking-block").first().click();
+  await expect(page).toHaveURL(/\/tracking\/day\.sql\?day=Monday$/);
+  await expect(page.getByText("Details for Monday")).toBeVisible();
+});
+
+test("tracking block without a link is not a link", async ({ page }) => {
+  await expect(page.locator(".tracking-block").nth(1)).not.toHaveAttribute(
+    "href",
+  );
+});
+
+test("tracking block with a link looks like one without", async ({ page }) => {
+  const blocks = page.locator(".tracking-block");
+  const linked = await blocks.nth(0).boundingBox();
+  const plain = await blocks.nth(1).boundingBox();
+  expect(linked?.width).toBe(plain?.width);
+  expect(linked?.height).toBe(plain?.height);
+});
+
+test("tracking block with a link keeps its tooltip", async ({ page }) => {
+  await page.locator(".tracking-block").first().hover();
+  await expect(page.getByRole("tooltip")).toHaveText("Monday: up");
+});