Extract LogLevel component and use in tooltip

Author: matt-aitken

apps/webapp/app/components/LogLevelTooltipInfo.tsx

@@ -1,7 +1,6 @@
-import { BookOpenIcon } from "@heroicons/react/20/solid";
-import { LinkButton } from "./primitives/Buttons";
 import { Header3 } from "./primitives/Headers";
 import { Paragraph } from "./primitives/Paragraph";
+import { LogLevel } from "./logs/LogLevel";
 
 export function LogLevelTooltipInfo() {
   return (
@@ -13,51 +12,37 @@ export function LogLevelTooltipInfo() {
         </Paragraph>
       </div>
       <div>
-        <div className="mb-0.5">
-          <Header3 className="text-blue-400">Info</Header3>
+        <div className="mb-1">
+          <LogLevel level="INFO" />
         </div>
         <Paragraph variant="small" className="text-text-dimmed">
           General informational messages about task execution.
         </Paragraph>
       </div>
       <div>
-        <div className="mb-0.5">
-          <Header3 className="text-warning">Warn</Header3>
+        <div className="mb-1">
+          <LogLevel level="WARN" />
         </div>
         <Paragraph variant="small" className="text-text-dimmed">
           Warning messages indicating potential issues that don't prevent execution.
         </Paragraph>
       </div>
       <div>
-        <div className="mb-0.5">
-          <Header3 className="text-error">Error</Header3>
+        <div className="mb-1">
+          <LogLevel level="ERROR" />
         </div>
         <Paragraph variant="small" className="text-text-dimmed">
           Error messages for failures and exceptions during task execution.
         </Paragraph>
       </div>
       <div>
-        <div className="mb-0.5">
-          <Header3 className="text-charcoal-400">Debug</Header3>
+        <div className="mb-1">
+          <LogLevel level="DEBUG" />
         </div>
         <Paragraph variant="small" className="text-text-dimmed">
           Detailed diagnostic information for development and debugging.
         </Paragraph>
       </div>
-      <div className="border-t border-charcoal-700 pt-4">
-        <Header3>Tracing & Spans</Header3>
-        <Paragraph variant="small" className="text-text-dimmed">
-          Automatically track the flow of your code through task triggers, attempts, and HTTP
-          requests. Create custom traces to monitor specific operations.
-        </Paragraph>
-      </div>
-      <LinkButton
-        to="https://trigger.dev/docs/logging#tracing-and-spans"
-        variant="docs/small"
-        LeadingIcon={BookOpenIcon}
-      >
-        Read docs
-      </LinkButton>
     </div>
   );
 }

apps/webapp/app/components/logs/LogLevel.tsx

@@ -0,0 +1,16 @@
+import { cn } from "~/utils/cn";
+import { getLevelColor } from "~/utils/logUtils";
+import type { LogEntry } from "~/presenters/v3/LogsListPresenter.server";
+
+export function LogLevel({ level }: { level: LogEntry["level"] }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded border px-1 py-0.5 text-xxs font-medium uppercase tracking-wider",
+        getLevelColor(level)
+      )}
+    >
+      {level}
+    </span>
+  );
+}

apps/webapp/app/components/logs/LogsTable.tsx

@@ -7,11 +7,12 @@ import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import type { LogEntry } from "~/presenters/v3/LogsListPresenter.server";
-import { getLevelColor, highlightSearchText } from "~/utils/logUtils";
+import { highlightSearchText } from "~/utils/logUtils";
 import { v3RunSpanPath } from "~/utils/pathBuilder";
 import { DateTimeAccurate } from "../primitives/DateTime";
 import { Paragraph } from "../primitives/Paragraph";
 import { Spinner } from "../primitives/Spinner";
+import { LogLevel } from "./LogLevel";
 import { TruncatedCopyableValue } from "../primitives/TruncatedCopyableValue";
 import { LogLevelTooltipInfo } from "~/components/LogLevelTooltipInfo";
 import {
@@ -169,14 +170,7 @@ export function LogsTable({
                     <span className="font-mono text-xs">{log.taskIdentifier}</span>
                   </TableCell>
                   <TableCell onClick={handleRowClick} hasAction>
-                    <span
-                      className={cn(
-                        "inline-flex items-center rounded border px-1 py-0.5 text-xxs font-medium uppercase tracking-wider",
-                        getLevelColor(log.level)
-                      )}
-                    >
-                      {log.level}
-                    </span>
+                    <LogLevel level={log.level} />
                   </TableCell>
                   <TableCell className="max-w-0 truncate" onClick={handleRowClick} hasAction>
                     <span className="block truncate font-mono text-xs" title={log.message}>