Declarative schedules

.changeset/thirty-hotels-raise.md

@@ -0,0 +1,6 @@
+---
+"@trigger.dev/sdk": patch
+"@trigger.dev/core": patch
+---
+
+Added declarative cron schedules

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

@@ -1,6 +1,6 @@
 import { XMarkIcon } from "@heroicons/react/20/solid";
 import { useNavigate } from "@remix-run/react";
-import { RuntimeEnvironment } from "@trigger.dev/database";
+import { type RuntimeEnvironment } from "@trigger.dev/database";
 import { useCallback } from "react";
 import { z } from "zod";
 import { Input } from "~/components/primitives/Input";
@@ -17,6 +17,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../primitives/SimpleSelect";
+import { ScheduleTypeCombo } from "./ScheduleType";
 
 export const ScheduleListFilters = z.object({
   page: z.coerce.number().default(1),
@@ -28,6 +29,7 @@ export const ScheduleListFilters = z.object({
     .string()
     .optional()
     .transform((value) => (value ? value.split(",") : undefined)),
+  type: z.union([z.literal("declarative"), z.literal("imperative")]).optional(),
   search: z.string().optional(),
 });
 
@@ -48,7 +50,7 @@ export function ScheduleFilters({ possibleEnvironments, possibleTasks }: Schedul
   const navigate = useNavigate();
   const location = useOptimisticLocation();
   const searchParams = new URLSearchParams(location.search);
-  const { environments, tasks, page, search } = ScheduleListFilters.parse(
+  const { environments, tasks, page, search, type } = ScheduleListFilters.parse(
     Object.fromEntries(searchParams.entries())
   );
 
@@ -73,6 +75,10 @@ export function ScheduleFilters({ possibleEnvironments, possibleTasks }: Schedul
     handleFilterChange("environments", value === "ALL" ? undefined : value);
   }, []);
 
+  const handleTypeChange = useCallback((value: string | typeof All) => {
+    handleFilterChange("type", value === "ALL" ? undefined : value);
+  }, []);
+
   const handleSearchChange = useThrottle((value: string) => {
     handleFilterChange("search", value.length === 0 ? undefined : value);
   }, 300);
@@ -97,6 +103,30 @@ export function ScheduleFilters({ possibleEnvironments, possibleTasks }: Schedul
         defaultValue={search}
         onChange={(e) => handleSearchChange(e.target.value)}
       />
+      <SelectGroup>
+        <Select name="type" value={type ?? "ALL"} onValueChange={handleTypeChange}>
+          <SelectTrigger size="minimal" width="full">
+            <SelectValue placeholder={"Select type"} className="ml-2 whitespace-nowrap p-0" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={"ALL"}>
+              <Paragraph
+                variant="extra-small"
+                className="whitespace-nowrap pl-0.5 transition group-hover:text-text-bright"
+              >
+                All types
+              </Paragraph>
+            </SelectItem>
+            <SelectItem value={"declarative"}>
+              <ScheduleTypeCombo type="DECLARATIVE" className="text-xs text-text-dimmed" />
+            </SelectItem>
+            <SelectItem value={"imperative"}>
+              <ScheduleTypeCombo type="IMPERATIVE" className="text-xs text-text-dimmed" />
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </SelectGroup>
+
       <SelectGroup>
         <Select
           name="environment"

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

@@ -0,0 +1,29 @@
+import { ArchiveBoxIcon, ArrowsRightLeftIcon } from "@heroicons/react/20/solid";
+import type { ScheduleType } from "@trigger.dev/database";
+import { cn } from "~/utils/cn";
+
+export function ScheduleTypeCombo({ type, className }: { type: ScheduleType; className?: string }) {
+  return (
+    <div className={cn("flex items-center space-x-1", className)}>
+      <ScheduleTypeIcon type={type} />
+      <span>{scheduleTypeName(type)}</span>
+    </div>
+  );
+}
+
+export function ScheduleTypeIcon({ type, className }: { type: ScheduleType; className?: string }) {
+  switch (type) {
+    case "IMPERATIVE":
+      return <ArrowsRightLeftIcon className={cn("size-4", className)} />;
+    case "DECLARATIVE":
+      return <ArchiveBoxIcon className={cn("size-4", className)} />;
+  }
+}
+export function scheduleTypeName(type: ScheduleType) {
+  switch (type) {
+    case "IMPERATIVE":
+      return "Imperative";
+    case "DECLARATIVE":
+      return "Declarative";
+  }
+}

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

@@ -230,8 +230,12 @@ export function TaskRunsTable({
                       formatDuration(new Date(run.createdAt), new Date(run.startedAt), {
                         style: "short",
                       })
-                    ) : (
+                    ) : run.isCancellable ? (
                       <LiveTimer startTime={new Date(run.createdAt)} />
+                    ) : (
+                      formatDuration(new Date(run.createdAt), new Date(run.updatedAt), {
+                        style: "short",
+                      })
                     )}
                   </div>
                 </TableCell>

apps/webapp/app/presenters/v3/EditSchedulePresenter.server.ts

@@ -88,6 +88,7 @@ export class EditSchedulePresenter {
     const schedule = await this.#prismaClient.taskSchedule.findFirst({
       select: {
         id: true,
+        type: true,
         friendlyId: true,
         generatorExpression: true,
         externalId: true,

apps/webapp/app/presenters/v3/ScheduleListPresenter.server.ts

@@ -1,4 +1,4 @@
-import { Prisma, RuntimeEnvironmentType } from "@trigger.dev/database";
+import { Prisma, RuntimeEnvironmentType, ScheduleType } from "@trigger.dev/database";
 import { ScheduleListFilters } from "~/components/runs/v3/ScheduleFilters";
 import { sqlDatabaseSchema } from "~/db.server";
 import { displayableEnvironment } from "~/models/runtimeEnvironment.server";
@@ -16,6 +16,7 @@ const DEFAULT_PAGE_SIZE = 20;
 
 export type ScheduleListItem = {
   id: string;
+  type: ScheduleType;
   friendlyId: string;
   taskIdentifier: string;
   deduplicationKey: string | null;
@@ -44,10 +45,17 @@ export class ScheduleListPresenter extends BasePresenter {
     environments,
     search,
     page,
+    type,
     pageSize = DEFAULT_PAGE_SIZE,
   }: ScheduleListOptions) {
     const hasFilters =
-      tasks !== undefined || environments !== undefined || (search !== undefined && search !== "");
+      type !== undefined ||
+      tasks !== undefined ||
+      environments !== undefined ||
+      (search !== undefined && search !== "");
+
+    const filterType =
+      type === "declarative" ? "DECLARATIVE" : type === "imperative" ? "IMPERATIVE" : undefined;
 
     // Find the project scoped to the organization
     const project = await this._replica.project.findFirstOrThrow({
@@ -105,6 +113,7 @@ export class ScheduleListPresenter extends BasePresenter {
             environmentId: environments ? { in: environments } : undefined,
           },
         },
+        type: filterType,
         AND: search
           ? {
               OR: [
@@ -141,6 +150,7 @@ export class ScheduleListPresenter extends BasePresenter {
     const rawSchedules = await this._replica.taskSchedule.findMany({
       select: {
         id: true,
+        type: true,
         friendlyId: true,
         taskIdentifier: true,
         deduplicationKey: true,
@@ -166,6 +176,7 @@ export class ScheduleListPresenter extends BasePresenter {
               },
             }
           : undefined,
+        type: filterType,
         AND: search
           ? {
               OR: [
@@ -215,11 +226,12 @@ export class ScheduleListPresenter extends BasePresenter {
     ON t."scheduleId" = r."scheduleId" AND t."createdAt" = r."LatestRun";`
         : [];
 
-    const schedules = rawSchedules.map((schedule) => {
+    const schedules: ScheduleListItem[] = rawSchedules.map((schedule) => {
       const latestRun = latestRuns.find((r) => r.scheduleId === schedule.id);
 
       return {
         id: schedule.id,
+        type: schedule.type,
         friendlyId: schedule.friendlyId,
         taskIdentifier: schedule.taskIdentifier,
         deduplicationKey: schedule.deduplicationKey,

apps/webapp/app/presenters/v3/ViewSchedulePresenter.server.ts

@@ -21,6 +21,7 @@ export class ViewSchedulePresenter {
     const schedule = await this.#prismaClient.taskSchedule.findFirst({
       select: {
         id: true,
+        type: true,
         friendlyId: true,
         generatorExpression: true,
         generatorDescription: true,
@@ -99,6 +100,7 @@ export class ViewSchedulePresenter {
   public toJSONResponse(result: NonNullable<Awaited<ReturnType<ViewSchedulePresenter["call"]>>>) {
     const response: ScheduleObject = {
       id: result.schedule.friendlyId,
+      type: result.schedule.type,
       task: result.schedule.taskIdentifier,
       active: result.schedule.active,
       nextRun: result.schedule.nextRuns[0],