No Tasks in a Run warning message (#688)

* Card hover state is now grey

* Added a callout warning if you don’t have any tasks

* Conditionally show the no-task warning at the top of the run

* New job to test the no-task warning message

* Created a new example Job for the CLI that uses Tasks

* Updated the Next.js cli joke job

* Updated the Remix app cli job example

* Updated the Astro app cli job example

* Made sure the example job works in remix

* Added changeset

---------

Co-authored-by: Eric Allam <eric@trigger.dev>

.changeset/pretty-adults-admire.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Added new example job which uses Tasks

apps/webapp/app/components/run/RunCard.tsx

@@ -36,7 +36,7 @@ export function RunPanel({
           ? "border-slate-850"
           : "border-slate-900",
         onClick && "cursor-pointer",
-        onClick && !selected && "hover:border-green-500/30",
+        onClick && !selected && "hover:border-slate-500/30",
         className
       )}
       onClick={() => onClick && onClick()}

apps/webapp/app/components/run/RunOverview.tsx

@@ -159,6 +159,16 @@ export function RunOverview({ run, trigger, showRerun, paths }: RunOverviewProps
         <div className="grid h-full grid-cols-2 gap-2">
           <div className="flex flex-col gap-6 overflow-y-auto py-4 pl-4 pr-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
             <div>
+              {(run.tasks.length === 0 || run.tasks.every((t) => t.noop)) && (
+                <Callout
+                  variant={"warning"}
+                  to="https://trigger.dev/docs/documentation/concepts/tasks"
+                  className="mb-4"
+                >
+                  This Run completed but it did not use any Tasks – this can cause unpredictable
+                  results. Read the docs to view the solution.
+                </Callout>
+              )}
               <Header2 className="mb-2">Trigger</Header2>
               <RunPanel
                 selected={selectedId === "trigger"}

apps/webapp/app/presenters/RunPresenter.server.ts

@@ -156,6 +156,7 @@ export class RunPresenter {
             completedAt: true,
             style: true,
             parentId: true,
+            noop: true,
             runConnection: {
               select: {
                 integration: {

packages/cli/src/templates/astro/exampleJob.js

@@ -2,9 +2,9 @@ import { eventTrigger } from "@trigger.dev/sdk";
 import { client } from "${jobsPathPrefix}trigger";
 
 // Your first job
-// This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline
+// This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline.
 client.defineJob({
-  // This is the unique identifier for your Job, it must be unique across all Jobs in your project
+  // This is the unique identifier for your Job, it must be unique across all Jobs in your project.
   id: "example-job",
   name: "Example Job: a joke with a delay",
   version: "0.0.1",
@@ -13,12 +13,29 @@ client.defineJob({
     name: "example.event",
   }),
   run: async (payload, io, ctx) => {
-    // This logs a message to the console
+    // Use a Task to generate a random number. Using a Tasks means it only runs once.
-    await io.logger.info("🧪 Example Job: a joke with a delay");
+    const result = await io.runTask("generate-random-number", async () => {
-    await io.logger.info("How do you comfort a JavaScript bug?");
+      return {
-    // This waits for 5 seconds, the second parameter is the number of seconds to wait, you can add delays of up to a year
+        num: Math.floor(Math.random() * 10000),
+      };
+    });
+
+    // Use the random number in a joke and log it to the console.
+    await io.logger.info(`Why was the number ${result.num} afraid of the number 7?`);
+
+    // Wait for 5 seconds, the second parameter is the number of seconds to wait, you can add delays of up to a year.
     await io.wait("Wait 5 seconds for the punchline...", 5);
-    await io.logger.info("You console it! 🤦");
+
+    // Use a Task to display the answer. Tasks are important to use in all Jobs as they allow your Runs to resume again after e.g. a serverless function timeout. Learn more about Tasks in the docs: https://trigger.dev/docs/documentation/concepts/tasks
+    await io.runTask(
+      "task-example",
+      async () => {
+        return {
+          foo: "bar",
+        };
+      },
+      { name: `Answer: Because 7,8,9! And ${result.num} was next 🤦` }
+    );
     await io.logger.info(
       "✨ Congratulations, You just ran your first successful Trigger.dev Job! ✨"
     );

packages/cli/src/templates/nextjs/exampleJob.js

@@ -2,9 +2,9 @@ import { eventTrigger } from "@trigger.dev/sdk";
 import { client } from "${jobsPathPrefix}trigger";
 
 // Your first job
-// This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline
+// This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline.
 client.defineJob({
-  // This is the unique identifier for your Job, it must be unique across all Jobs in your project
+  // This is the unique identifier for your Job, it must be unique across all Jobs in your project.
   id: "example-job",
   name: "Example Job: a joke with a delay",
   version: "0.0.1",
@@ -13,12 +13,29 @@ client.defineJob({
     name: "example.event",
   }),
   run: async (payload, io, ctx) => {
-    // This logs a message to the console
+    // Use a Task to generate a random number. Using a Tasks means it only runs once.
-    await io.logger.info("🧪 Example Job: a joke with a delay");
+    const result = await io.runTask("generate-random-number", async () => {
-    await io.logger.info("How do you comfort a JavaScript bug?");
+      return {
-    // This waits for 5 seconds, the second parameter is the number of seconds to wait, you can add delays of up to a year
+        num: Math.floor(Math.random() * 10000),
+      };
+    });
+
+    // Use the random number in a joke and log it to the console.
+    await io.logger.info(`Why was the number ${result.num} afraid of the number 7?`);
+
+    // Wait for 5 seconds, the second parameter is the number of seconds to wait, you can add delays of up to a year.
     await io.wait("Wait 5 seconds for the punchline...", 5);
-    await io.logger.info("You console it! 🤦");
+
+    // Use a Task to display the answer. Tasks are important to use in all Jobs as they allow your Runs to resume again after e.g. a serverless function timeout. Learn more about Tasks in the docs: https://trigger.dev/docs/documentation/concepts/tasks
+    await io.runTask(
+      "task-example",
+      async () => {
+        return {
+          foo: "bar",
+        };
+      },
+      { name: `Answer: Because 7,8,9! And ${result.num} was next 🤦` }
+    );
     await io.logger.info(
       "✨ Congratulations, You just ran your first successful Trigger.dev Job! ✨"
     );

packages/cli/src/templates/remix/exampleJob.js

@@ -2,9 +2,9 @@ import { eventTrigger } from "@trigger.dev/sdk";
 import { client } from "${jobsPathPrefix}trigger.server";
 
 // Your first job
-// This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline
+// This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline.
 export const job = client.defineJob({
-  // This is the unique identifier for your Job, it must be unique across all Jobs in your project
+  // This is the unique identifier for your Job, it must be unique across all Jobs in your project.
   id: "example-job",
   name: "Example Job: a joke with a delay",
   version: "0.0.1",
@@ -13,12 +13,29 @@ export const job = client.defineJob({
     name: "example.event",
   }),
   run: async (payload, io, ctx) => {
-    // This logs a message to the console
+    // Use a Task to generate a random number. Using a Tasks means it only runs once.
-    await io.logger.info("🧪 Example Job: a joke with a delay");
+    const result = await io.runTask("generate-random-number", async () => {
-    await io.logger.info("How do you comfort a JavaScript bug?");
+      return {
-    // This waits for 5 seconds, the second parameter is the number of seconds to wait, you can add delays of up to a year
+        num: Math.floor(Math.random() * 10000),
+      };
+    });
+
+    // Use the random number in a joke and log it to the console.
+    await io.logger.info(`Why was the number ${result.num} afraid of the number 7?`);
+
+    // Wait for 5 seconds, the second parameter is the number of seconds to wait, you can add delays of up to a year.
     await io.wait("Wait 5 seconds for the punchline...", 5);
-    await io.logger.info("You console it! 🤦");
+
+    // Use a Task to display the answer. Tasks are important to use in all Jobs as they allow your Runs to resume again after e.g. a serverless function timeout. Learn more about Tasks in the docs: https://trigger.dev/docs/documentation/concepts/tasks
+    await io.runTask(
+      "task-example",
+      async () => {
+        return {
+          foo: "bar",
+        };
+      },
+      { name: `Answer: Because 7,8,9! And ${result.num} was next 🤦` }
+    );
     await io.logger.info(
       "✨ Congratulations, You just ran your first successful Trigger.dev Job! ✨"
     );

references/job-catalog/package.json

@@ -28,6 +28,7 @@
     "replicate": "nodemon --watch src/replicate.ts -r tsconfig-paths/register -r dotenv/config src/replicate.ts",
     "misconfigured": "nodemon --watch src/misconfigured.ts -r tsconfig-paths/register -r dotenv/config src/misconfigured.ts",
     "auto-yield": "nodemon --watch src/auto-yield.ts -r tsconfig-paths/register -r dotenv/config src/auto-yield.ts",
+    "cli-example": "nodemon --watch src/cli-example.ts -r tsconfig-paths/register -r dotenv/config src/cli-example.ts",
     "dev:trigger": "trigger-cli dev --port 8080"
   },
   "dependencies": {

references/job-catalog/src/cli-example.ts

@@ -0,0 +1,54 @@
+import { createExpressServer } from "@trigger.dev/express";
+import { TriggerClient, eventTrigger } from "@trigger.dev/sdk";
+
+export const client = new TriggerClient({
+  id: "job-catalog",
+  apiKey: process.env["TRIGGER_API_KEY"],
+  apiUrl: process.env["TRIGGER_API_URL"],
+  verbose: false,
+  ioLogLocalEnabled: true,
+});
+
+// Your first job
+// This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline.
+client.defineJob({
+  // This is the unique identifier for your Job, it must be unique across all Jobs in your project.
+  id: "example-job",
+  name: "Example Job: a joke with a delay",
+  version: "0.0.1",
+  // This is triggered by an event using eventTrigger. You can also trigger Jobs with webhooks, on schedules, and more: https://trigger.dev/docs/documentation/concepts/triggers/introduction
+  trigger: eventTrigger({
+    name: "example.event",
+  }),
+  run: async (payload, io, ctx) => {
+    // Use a Task to generate a random number. Using a Tasks means it only runs once.
+    const result = await io.runTask("generate-random-number", async () => {
+      return {
+        num: Math.floor(Math.random() * 10000),
+      };
+    });
+
+    // Use the random number in a joke and log it to the console.
+    await io.logger.info(`Why was the number ${result.num} afraid of the number 7?`);
+
+    // Wait for 5 seconds, the second parameter is the number of seconds to wait, you can add delays of up to a year.
+    await io.wait("Wait 5 seconds for the punchline...", 5);
+
+    // Use a Task to display the answer. Tasks are important to use in all Jobs as they allow your Runs to resume again after e.g. a serverless function timeout. Learn more about Tasks in the docs: https://trigger.dev/docs/documentation/concepts/tasks
+    await io.runTask(
+      "task-example",
+      async () => {
+        return {
+          foo: "bar",
+        };
+      },
+      { name: `Answer: Because 7,8,9! And ${result.num} was next 🤦` }
+    );
+    await io.logger.info(
+      "✨ Congratulations, You just ran your first successful Trigger.dev Job! ✨"
+    );
+    // To learn how to write much more complex (and probably funnier) Jobs, check out our docs: https://trigger.dev/docs/documentation/guides/create-a-job
+  },
+});
+
+createExpressServer(client);

references/job-catalog/src/events.ts

@@ -77,6 +77,28 @@ client.defineJob({
   },
 });
 
+client.defineJob({
+  id: "no-real-task",
+  name: "No real Task",
+  version: "0.0.1",
+  trigger: eventTrigger({
+    name: "no.real.task",
+    schema: z.object({
+      userId: z.string(),
+    }),
+  }),
+  run: async (payload, io, ctx) => {
+    await io.logger.info("Hello World", { ctx, payload });
+    await io.wait("Wait 1 sec", 1);
+    //this is a real task
+    // await io.runTask("task-example-1", async () => {
+    //   return {
+    //     message: "Hello World",
+    //   };
+    // });
+  }
+});
+
 client.defineJob({
   id: "cancel-runs-example",
   name: "Cancel Runs Example",