Run tags

.changeset/odd-beds-wonder.md

@@ -0,0 +1,6 @@
+---
+"@trigger.dev/sdk": patch
+"@trigger.dev/core": patch
+---
+
+You can now add tags to runs and list runs using them

apps/webapp/app/components/primitives/Spinner.tsx

@@ -1,32 +1,37 @@
 import { cn } from "~/utils/cn";
 
+type CustomColor = {
+  background: string;
+  foreground: string;
+};
+
 export function Spinner({
   className,
   color = "blue",
 }: {
   className?: string;
-  color?: "blue" | "white" | "muted" | "dark";
+  color?: "blue" | "white" | "muted" | "dark" | CustomColor;
 }) {
   const colors = {
     blue: {
-      light: "rgba(59, 130, 246, 0.4)",
-      dark: "rgba(59, 130, 246)",
+      background: "rgba(59, 130, 246, 0.4)",
+      foreground: "rgba(59, 130, 246)",
     },
     white: {
-      light: "rgba(255, 255, 255, 0.4)",
-      dark: "rgba(255, 255, 255)",
+      background: "rgba(255, 255, 255, 0.4)",
+      foreground: "rgba(255, 255, 255)",
     },
     muted: {
-      light: "#1C2433",
-      dark: "#3C4B62",
+      background: "#1C2433",
+      foreground: "#3C4B62",
     },
     dark: {
-      light: "#15171A",
-      dark: "#272A2E",
+      background: "#15171A",
+      foreground: "#272A2E",
     },
   };
 
-  const currentColor = colors[color];
+  const currentColor = typeof color === "string" ? colors[color] : color;
 
   return (
     <svg
@@ -37,13 +42,33 @@ export function Spinner({
       xmlns="http://www.w3.org/2000/svg"
       className={cn("animate-spin motion-reduce:hidden", className)}
     >
-      <rect x="2" y="2" width="16" height="16" rx="8" stroke={currentColor.light} strokeWidth="3" />
+      <rect
+        x="2"
+        y="2"
+        width="16"
+        height="16"
+        rx="8"
+        stroke={currentColor.background}
+        strokeWidth="3"
+      />
       <path
         d="M10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2"
-        stroke={currentColor.dark}
+        stroke={currentColor.foreground}
         strokeWidth="3"
         strokeLinecap="round"
       />
     </svg>
   );
 }
+
+export function ButtonSpinner() {
+  return (
+    <Spinner
+      className="size-3"
+      color={{
+        foreground: "rgba(0, 0, 0, 1)",
+        background: "rgba(0, 0, 0, 0.25)",
+      }}
+    />
+  );
+}

apps/webapp/app/components/runs/v3/RunFilters.tsx

@@ -4,9 +4,10 @@ import {
   CalendarIcon,
   CpuChipIcon,
   InboxStackIcon,
+  TagIcon,
   XMarkIcon,
 } from "@heroicons/react/20/solid";
-import { Form } from "@remix-run/react";
+import { Form, useFetcher } from "@remix-run/react";
 import type {
   RuntimeEnvironment,
   TaskTriggerSource,
@@ -15,7 +16,7 @@ import type {
 } from "@trigger.dev/database";
 import { ListFilterIcon } from "lucide-react";
 import type { ReactNode } from "react";
-import { startTransition, useCallback, useMemo, useState } from "react";
+import { startTransition, useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
 import { EnvironmentLabel, environmentTitle } from "~/components/environments/EnvironmentLabel";
@@ -51,6 +52,10 @@ import {
 import { TaskTriggerSourceIcon } from "./TaskTriggerSource";
 import { DateTime } from "~/components/primitives/DateTime";
 import { BulkActionStatusCombo } from "./BulkAction";
+import { type loader } from "~/routes/resources.projects.$projectParam.runs.tags";
+import { useProject } from "~/hooks/useProject";
+import { Spinner } from "~/components/primitives/Spinner";
+import { matchSorter } from "match-sorter";
 
 export const TaskAttemptStatus = z.enum(allTaskRunStatuses);
 
@@ -73,6 +78,10 @@ export const TaskRunListSearchFilters = z.object({
     (value) => (typeof value === "string" ? [value] : value),
     TaskAttemptStatus.array().optional()
   ),
+  tags: z.preprocess(
+    (value) => (typeof value === "string" ? [value] : value),
+    z.string().array().optional()
+  ),
   period: z.preprocess((value) => (value === "all" ? undefined : value), z.string().optional()),
   bulkId: z.string().optional(),
   from: z.coerce.number().optional(),
@@ -104,7 +113,8 @@ export function RunsFilters(props: RunFiltersProps) {
     searchParams.has("environments") ||
     searchParams.has("tasks") ||
     searchParams.has("period") ||
-    searchParams.has("bulkId");
+    searchParams.has("bulkId") ||
+    searchParams.has("tags");
 
   return (
     <div className="flex flex-row flex-wrap items-center gap-1">
@@ -133,6 +143,7 @@ const filterTypes = [
   },
   { name: "environments", title: "Environment", icon: <CpuChipIcon className="size-4" /> },
   { name: "tasks", title: "Tasks", icon: <TaskIcon className="size-4" /> },
+  { name: "tags", title: "Tags", icon: <TagIcon className="size-4" /> },
   { name: "created", title: "Created", icon: <CalendarIcon className="size-4" /> },
   { name: "bulk", title: "Bulk action", icon: <InboxStackIcon className="size-4" /> },
 ] as const;
@@ -209,6 +220,7 @@ function AppliedFilters({ possibleEnvironments, possibleTasks, bulkActions }: Ru
       <AppliedStatusFilter />
       <AppliedEnvironmentFilter possibleEnvironments={possibleEnvironments} />
       <AppliedTaskFilter possibleTasks={possibleTasks} />
+      <AppliedTagsFilter />
       <AppliedPeriodFilter />
       <AppliedBulkActionsFilter bulkActions={bulkActions} />
     </>
@@ -237,6 +249,8 @@ function Menu(props: MenuProps) {
       return <CreatedDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "bulk":
       return <BulkActionsDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "tags":
+      return <TagsDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
   }
 }
 
@@ -648,6 +662,124 @@ function AppliedBulkActionsFilter({ bulkActions }: Pick<RunFiltersProps, "bulkAc
   );
 }
 
+function TagsDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+}) {
+  const project = useProject();
+  const { values, replace } = useSearchParams();
+
+  const handleChange = (values: string[]) => {
+    clearSearchValue();
+    replace({
+      tags: values,
+      cursor: undefined,
+      direction: undefined,
+    });
+  };
+
+  const fetcher = useFetcher<typeof loader>();
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams();
+    if (searchValue) {
+      searchParams.set("name", encodeURIComponent(searchValue));
+    }
+    fetcher.load(`/resources/projects/${project.slug}/runs/tags?${searchParams}`);
+  }, [searchValue]);
+
+  const filtered = useMemo(() => {
+    let items: string[] = [];
+    if (searchValue === "") {
+      items = values("tags");
+    }
+
+    if (fetcher.data === undefined) {
+      return matchSorter(items, searchValue);
+    }
+
+    items.push(...fetcher.data.tags.map((t) => t.name));
+
+    return matchSorter(Array.from(new Set(items)), searchValue);
+  }, [searchValue, fetcher.data]);
+
+  return (
+    <SelectProvider value={values("tags")} setValue={handleChange} virtualFocus={true}>
+      {trigger}
+      <SelectPopover
+        className="min-w-0 max-w-[min(240px,var(--popover-available-width))]"
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+
+          return true;
+        }}
+      >
+        <ComboBox
+          value={searchValue}
+          render={(props) => (
+            <div className="flex items-center justify-stretch">
+              <input {...props} placeholder={"Filter by tags..."} />
+              {fetcher.state === "loading" && <Spinner color="muted" />}
+            </div>
+          )}
+        />
+        <SelectList>
+          {filtered.length > 0
+            ? filtered.map((tag, index) => (
+                <SelectItem key={tag} value={tag}>
+                  {tag}
+                </SelectItem>
+              ))
+            : null}
+          {filtered.length === 0 && fetcher.state !== "loading" && (
+            <SelectItem disabled>No tags found</SelectItem>
+          )}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+function AppliedTagsFilter() {
+  const { values, del } = useSearchParams();
+
+  const tags = values("tags");
+
+  if (tags.length === 0) {
+    return null;
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <TagsDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer" />}>
+              <AppliedFilter
+                label="Tags"
+                value={appliedSummary(values("tags"))}
+                onRemove={() => del(["tags", "cursor", "direction"])}
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
 const timePeriods = [
   {
     label: "All periods",

apps/webapp/app/components/runs/v3/RunIcon.tsx

@@ -3,6 +3,7 @@ import {
   HandRaisedIcon,
   InformationCircleIcon,
   Squares2X2Icon,
+  TagIcon,
 } from "@heroicons/react/20/solid";
 import { AttemptIcon } from "~/assets/icons/AttemptIcon";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
@@ -48,6 +49,8 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) {
       return <ClockIcon className={cn(className, "text-teal-500")} />;
     case "trace":
       return <Squares2X2Icon className={cn(className, "text-text-dimmed")} />;
+    case "tag":
+      return <TagIcon className={cn(className, "text-text-dimmed")} />;
     //log levels
     case "debug":
     case "log":

apps/webapp/app/components/runs/v3/RunTag.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from "react";
+import tagLeftPath from "./tag-left.svg";
+
+type Tag = string | { key: string; value: string };
+
+export function RunTag({ tag }: { tag: string }) {
+  const tagResult = useMemo(() => splitTag(tag), [tag]);
+
+  if (typeof tagResult === "string") {
+    return (
+      <span className="flex h-6 items-stretch">
+        <img src={tagLeftPath} alt="" className="block h-full w-[0.5625rem]" />
+        <span className="flex items-center rounded-r-sm border-y border-r border-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed">
+          {tag}
+        </span>
+      </span>
+    );
+  } else {
+    return (
+      <span className="flex h-6 items-stretch">
+        <img src={tagLeftPath} alt="" className="block h-full w-[0.5625rem]" />
+        <span className="flex items-center border-y border-r border-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed">
+          {tagResult.key}
+        </span>
+        <span className="flex items-center rounded-r-sm border-y border-r border-charcoal-700 bg-charcoal-750 px-1.5 text-text-dimmed">
+          {tagResult.value}
+        </span>
+      </span>
+    );
+  }
+}
+
+/** Takes a string and turns it into a tag
+ *
+ * If the string has 12 or fewer alpha characters followed by an underscore or colon then we return an object with a key and value
+ * Otherwise we return the original string
+ */
+function splitTag(tag: string): Tag {
+  if (tag.match(/^[a-zA-Z]{1,12}[_:]/)) {
+    const components = tag.split(/[_:]/);
+    if (components.length !== 2) {
+      return tag;
+    }
+    return { key: components[0], value: components[1] };
+  }
+
+  return tag;
+}