Unify the error statuses into a reusable badge

Author: samejr

apps/webapp/app/components/errors/ErrorStatusBadge.tsx

@@ -0,0 +1,34 @@
+import { type ErrorGroupStatus } from "@trigger.dev/database";
+import { cn } from "~/utils/cn";
+
+const styles: Record<ErrorGroupStatus, string> = {
+  UNRESOLVED: "bg-error/10 text-error",
+  RESOLVED: "bg-success/10 text-success",
+  IGNORED: "bg-charcoal-750 text-text-dimmed",
+};
+
+const labels: Record<ErrorGroupStatus, string> = {
+  UNRESOLVED: "Unresolved",
+  RESOLVED: "Resolved",
+  IGNORED: "Ignored",
+};
+
+export function ErrorStatusBadge({
+  status,
+  className,
+}: {
+  status: ErrorGroupStatus;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded px-2 py-0.5 text-xs font-medium",
+        styles[status],
+        className
+      )}
+    >
+      {labels[status]}
+    </span>
+  );
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx

@@ -3,6 +3,7 @@ import { type MetaFunction, Form, useFetcher, useNavigation, useSubmit } from "@
 import { BellAlertIcon } from "@heroicons/react/20/solid";
 import { parse } from "@conform-to/zod";
 import { z } from "zod";
+import { ErrorStatusBadge } from "~/components/errors/ErrorStatusBadge";
 import { ServiceValidationError } from "~/v3/services/baseService.server";
 import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { requireUser, requireUserId } from "~/services/session.server";
@@ -543,27 +544,6 @@ function ErrorGroupDetail({
   );
 }
 
-const STATUS_BADGE_STYLES = {
-  UNRESOLVED: "bg-error/10 text-error",
-  RESOLVED: "bg-success/10 text-success",
-  IGNORED: "bg-text-dimmed/10 text-text-dimmed",
-} as const;
-
-const STATUS_LABELS = {
-  UNRESOLVED: "Unresolved",
-  RESOLVED: "Resolved",
-  IGNORED: "Ignored",
-} as const;
-
-function StatusBadge({ status }: { status: ErrorGroupState["status"] }) {
-  return (
-    <span
-      className={`inline-flex items-center rounded px-2 py-0.5 text-xs font-medium ${STATUS_BADGE_STYLES[status]}`}
-    >
-      {STATUS_LABELS[status]}
-    </span>
-  );
-}
 
 function IgnoredDetails({
   state,
@@ -665,7 +645,7 @@ function ErrorGroupActionButtons({
   return (
     <>
       <Form className="flex items-center gap-2">
-        <StatusBadge status={state.status} />
+        <ErrorStatusBadge status={state.status} />
 
         {state.status === "UNRESOLVED" && (
           <>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx

@@ -4,6 +4,7 @@ import { Form, type MetaFunction, useRevalidator } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { type ErrorGroupStatus } from "@trigger.dev/database";
 import { IconBugFilled } from "@tabler/icons-react";
+import { ErrorStatusBadge } from "~/components/errors/ErrorStatusBadge";
 import { ErrorId } from "@trigger.dev/core/v3/isomorphic";
 import { Suspense, useCallback, useMemo, type ReactNode } from "react";
 import {
@@ -382,7 +383,7 @@ function ErrorStatusDropdown({
         <SelectList>
           {filtered.map((item) => (
             <SelectItem key={item.value} value={item.value}>
-              {item.label}
+              <ErrorStatusBadge status={item.value} />
             </SelectItem>
           ))}
         </SelectList>
@@ -569,7 +570,7 @@ function ErrorGroupRow({
         {errorGroup.fingerprint.slice(-8)}
       </CopyableTableCell>
       <TableCell to={errorPath}>
-        <ListStatusBadge status={errorGroup.status} />
+        <ErrorStatusBadge status={errorGroup.status} />
       </TableCell>
       <TableCell to={errorPath}>{errorGroup.taskIdentifier}</TableCell>
       <CopyableTableCell to={errorPath} className="font-mono" value={errorMessage}>
@@ -602,26 +603,6 @@ function ErrorGroupRow({
   );
 }
 
-const LIST_STATUS_STYLES = {
-  UNRESOLVED: "text-error",
-  RESOLVED: "text-success",
-  IGNORED: "text-text-dimmed",
-} as const;
-
-const LIST_STATUS_LABELS = {
-  UNRESOLVED: "Unresolved",
-  RESOLVED: "Resolved",
-  IGNORED: "Ignored",
-} as const;
-
-function ListStatusBadge({ status }: { status: string }) {
-  const s = (status as keyof typeof LIST_STATUS_STYLES) ?? "UNRESOLVED";
-  return (
-    <span className={`text-xs ${LIST_STATUS_STYLES[s] ?? LIST_STATUS_STYLES.UNRESOLVED}`}>
-      {LIST_STATUS_LABELS[s] ?? "Unresolved"}
-    </span>
-  );
-}
 
 function ErrorActivityGraph({ activity }: { activity: ErrorOccurrenceActivity }) {
   const maxCount = Math.max(...activity.map((d) => d.count));