From 578f659dfb4e8d5fd72c0145c3d0eb1fad8719e7 Mon Sep 17 00:00:00 2001
From: Moulik Aggarwal <qwertymoulik@gmail.com>
Date: Fri, 19 Dec 2025 00:49:36 +0530
Subject: [PATCH]  Make entry badges linkable (#1646)

* Updated cell badge for Notifications, Status Reports and Private Locations

Signed-off-by: Moulik Aggarwal <qwertymoulik@gmail.com>

* ci: apply automated fixes

* Table Cell Badge to add <Link href instead of using on click navigate

* Removed pointer css

---------

Signed-off-by: Moulik Aggarwal <qwertymoulik@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../src/components/data-table/notifications/columns.tsx   | 5 ++++-
 .../components/data-table/private-locations/columns.tsx   | 5 ++++-
 .../src/components/data-table/status-reports/columns.tsx  | 8 +++++---
 .../src/components/data-table/table-cell-badge.tsx        | 1 -
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/dashboard/src/components/data-table/notifications/columns.tsx b/apps/dashboard/src/components/data-table/notifications/columns.tsx
index d5ed03736..0f435ff98 100644
--- a/apps/dashboard/src/components/data-table/notifications/columns.tsx
+++ b/apps/dashboard/src/components/data-table/notifications/columns.tsx
@@ -5,6 +5,7 @@ import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-col
 import { type NotifierProvider, config } from "@/data/notifications.client";
 import type { RouterOutputs } from "@openstatus/api";
 import type { ColumnDef } from "@tanstack/react-table";
+import Link from "next/link";
 import { TableCellBadge } from "../table-cell-badge";
 import { DataTableRowActions } from "./data-table-row-actions";
 
@@ -45,7 +46,9 @@ export const columns: ColumnDef<Notifier>[] = [
         return (
           <div className="flex flex-wrap gap-1">
             {value.map((m) => (
-              <TableCellBadge key={m.id} value={m.name} />
+              <Link href={`/monitors/${m.id}`} key={m.id}>
+                <TableCellBadge value={m.name} />
+              </Link>
             ))}
           </div>
         );
diff --git a/apps/dashboard/src/components/data-table/private-locations/columns.tsx b/apps/dashboard/src/components/data-table/private-locations/columns.tsx
index d56113033..465131868 100644
--- a/apps/dashboard/src/components/data-table/private-locations/columns.tsx
+++ b/apps/dashboard/src/components/data-table/private-locations/columns.tsx
@@ -3,6 +3,7 @@
 import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header";
 import type { RouterOutputs } from "@openstatus/api";
 import type { ColumnDef } from "@tanstack/react-table";
+import Link from "next/link";
 import { TableCellBadge } from "../table-cell-badge";
 import { TableCellDate } from "../table-cell-date";
 import { DataTableRowActions } from "./data-table-row-actions";
@@ -40,7 +41,9 @@ export const columns: ColumnDef<PrivateLocation>[] = [
         return (
           <div className="flex flex-wrap gap-1">
             {value.map((m) => (
-              <TableCellBadge key={m.id} value={m.name} />
+              <Link href={`/monitors/${m.id}`} key={m.id}>
+                <TableCellBadge value={m.name} />
+              </Link>
             ))}
           </div>
         );
diff --git a/apps/dashboard/src/components/data-table/status-reports/columns.tsx b/apps/dashboard/src/components/data-table/status-reports/columns.tsx
index 1f6462461..f0afeb004 100644
--- a/apps/dashboard/src/components/data-table/status-reports/columns.tsx
+++ b/apps/dashboard/src/components/data-table/status-reports/columns.tsx
@@ -7,12 +7,12 @@ import { Button } from "@/components/ui/button";
 import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header";
 import { colors } from "@/data/status-report-updates.client";
 import { cn } from "@/lib/utils";
+import type { RouterOutputs } from "@openstatus/api";
 import type { ColumnDef } from "@tanstack/react-table";
 import { ChevronDown, ChevronUp } from "lucide-react";
+import Link from "next/link";
 import { DataTableRowActions } from "./data-table-row-actions";
 
-import type { RouterOutputs } from "@openstatus/api";
-
 type StatusReport = RouterOutputs["statusReport"]["list"][number];
 
 export const columns: ColumnDef<StatusReport>[] = [
@@ -95,7 +95,9 @@ export const columns: ColumnDef<StatusReport>[] = [
         return (
           <div className="flex flex-wrap gap-1">
             {value.map((m) => (
-              <TableCellBadge key={m.id} value={m.name} />
+              <Link href={`/monitors/${m.id}`} key={m.id}>
+                <TableCellBadge value={m.name} />
+              </Link>
             ))}
           </div>
         );
diff --git a/apps/dashboard/src/components/data-table/table-cell-badge.tsx b/apps/dashboard/src/components/data-table/table-cell-badge.tsx
index f28d7fa93..177e8ceba 100644
--- a/apps/dashboard/src/components/data-table/table-cell-badge.tsx
+++ b/apps/dashboard/src/components/data-table/table-cell-badge.tsx
@@ -38,7 +38,6 @@ export function TableCellBadge({
         {isTruncated ? (
           <Tooltip open={open} onOpenChange={setOpen}>
             <TooltipTrigger
-              onClick={(event) => event.preventDefault()}
               onPointerDown={(event) => event.preventDefault()}
               asChild
             >
-- 
2.54.0