Event Trigger Example Payload: Fix unsetting icon, and Use fallback icon in case of invalid icon-name. (#576)

* fix: unset event-trigger example icon

* fix: use fallback icon when an invalid icon is used (example payload page)

Author: hmacr

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.test/route.tsx

@@ -35,6 +35,7 @@ import { TestJobService } from "~/services/jobs/testJob.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
 import { Handle } from "~/utils/handle";
+import { isValidIcon } from "~/utils/icon";
 import { JobParamsSchema, jobRunDashboardPath, trimTrailingSlash } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderArgs) => {
@@ -228,7 +229,7 @@ export default function Page() {
                       }}
                     >
                       <DetailCell
-                        leadingIcon={example.icon ?? CodeBracketIcon}
+                        leadingIcon={isValidIcon(example.icon) ? example.icon : CodeBracketIcon}
                         leadingIconClassName="text-blue-500"
                         label={example.name}
                         trailingIcon={example.id === selectedCodeSampleId ? "check" : "plus"}

apps/webapp/app/services/jobs/registerJob.server.ts

@@ -222,7 +222,7 @@ export class RegisterJobService {
           },
           update: {
             name: example.name,
-            icon: example.icon,
+            icon: example.icon ?? null,
             payload: example.payload,
           },
         });

apps/webapp/app/utils/icon.ts

@@ -0,0 +1,9 @@
+import { hasIcon } from "@trigger.dev/companyicons";
+import { iconNames as namedIcons } from "~/components/primitives/NamedIcon";
+
+export const isValidIcon = (icon?: string): boolean => {
+  if (!icon) {
+    return false;
+  }
+  return namedIcons.includes(icon) || hasIcon(icon);
+};