openstatus.dev / openstatus
Openstatus www.openstatus.dev
fork atom

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>

authored by

Moulik Aggarwal
autofix-ci[bot] and committed by
GitHub 578f659d fcf51321

+13 -6
+4 -1
apps/dashboard/src/components/data-table/notifications/columns.tsx
··· 5 5 import { type NotifierProvider, config } from "@/data/notifications.client"; 6 6 import type { RouterOutputs } from "@openstatus/api"; 7 7 import type { ColumnDef } from "@tanstack/react-table"; 8 + import Link from "next/link"; 8 9 import { TableCellBadge } from "../table-cell-badge"; 9 10 import { DataTableRowActions } from "./data-table-row-actions"; 10 11 ··· 45 46 return ( 46 47 <div className="flex flex-wrap gap-1"> 47 48 {value.map((m) => ( 48 - <TableCellBadge key={m.id} value={m.name} /> 49 + <Link href={`/monitors/${m.id}`} key={m.id}> 50 + <TableCellBadge value={m.name} /> 51 + </Link> 49 52 ))} 50 53 </div> 51 54 );
+4 -1
apps/dashboard/src/components/data-table/private-locations/columns.tsx
··· 3 3 import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header"; 4 4 import type { RouterOutputs } from "@openstatus/api"; 5 5 import type { ColumnDef } from "@tanstack/react-table"; 6 + import Link from "next/link"; 6 7 import { TableCellBadge } from "../table-cell-badge"; 7 8 import { TableCellDate } from "../table-cell-date"; 8 9 import { DataTableRowActions } from "./data-table-row-actions"; ··· 40 41 return ( 41 42 <div className="flex flex-wrap gap-1"> 42 43 {value.map((m) => ( 43 - <TableCellBadge key={m.id} value={m.name} /> 44 + <Link href={`/monitors/${m.id}`} key={m.id}> 45 + <TableCellBadge value={m.name} /> 46 + </Link> 44 47 ))} 45 48 </div> 46 49 );
+5 -3
apps/dashboard/src/components/data-table/status-reports/columns.tsx
··· 7 7 import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header"; 8 8 import { colors } from "@/data/status-report-updates.client"; 9 9 import { cn } from "@/lib/utils"; 10 + import type { RouterOutputs } from "@openstatus/api"; 10 11 import type { ColumnDef } from "@tanstack/react-table"; 11 12 import { ChevronDown, ChevronUp } from "lucide-react"; 13 + import Link from "next/link"; 12 14 import { DataTableRowActions } from "./data-table-row-actions"; 13 - 14 - import type { RouterOutputs } from "@openstatus/api"; 15 15 16 16 type StatusReport = RouterOutputs["statusReport"]["list"][number]; 17 17 ··· 95 95 return ( 96 96 <div className="flex flex-wrap gap-1"> 97 97 {value.map((m) => ( 98 - <TableCellBadge key={m.id} value={m.name} /> 98 + <Link href={`/monitors/${m.id}`} key={m.id}> 99 + <TableCellBadge value={m.name} /> 100 + </Link> 99 101 ))} 100 102 </div> 101 103 );
-1
apps/dashboard/src/components/data-table/table-cell-badge.tsx
··· 38 38 {isTruncated ? ( 39 39 <Tooltip open={open} onOpenChange={setOpen}> 40 40 <TooltipTrigger 41 - onClick={(event) => event.preventDefault()} 42 41 onPointerDown={(event) => event.preventDefault()} 43 42 asChild 44 43 >