From f1fe71e6fbcd7c521752e4871bf70342e5c6d214 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 12:54:33 +0000 Subject: [PATCH 01/29] =?UTF-8?q?New=20format=20for=20the=20functions=20in?= =?UTF-8?q?stead=20of=20=E2=80=9ConWait()=20task=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/v3/workers/taskExecutor.ts | 67 +++++++++++++++----- 1 file changed, 50 insertions(+), 17 deletions(-) diff --git a/packages/core/src/v3/workers/taskExecutor.ts b/packages/core/src/v3/workers/taskExecutor.ts index 355dbec95c..c63bcf4725 100644 --- a/packages/core/src/v3/workers/taskExecutor.ts +++ b/packages/core/src/v3/workers/taskExecutor.ts @@ -9,7 +9,13 @@ import { sanitizeError, TaskPayloadParsedError, } from "../errors.js"; -import { flattenAttributes, lifecycleHooks, runMetadata, waitUntil } from "../index.js"; +import { + accessoryAttributes, + flattenAttributes, + lifecycleHooks, + runMetadata, + waitUntil, +} from "../index.js"; import { AnyOnMiddlewareHookFunction, RegisteredHookFunction, @@ -314,13 +320,14 @@ export class TaskExecutor { (next, hook) => { return async () => { await this._tracer.startActiveSpan( - hook.name ? `middleware/${hook.name}` : "middleware", + "middleware()", async (span) => { await hook.fn({ payload, ctx, signal, task: this.task.id, next }); }, { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-middleware", + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ); @@ -376,7 +383,7 @@ export class TaskExecutor { return runTimelineMetrics.measureMetric("trigger.dev/execution", "run", async () => { return await this._tracer.startActiveSpan( - "run", + "run()", async (span) => { if (abortPromise) { // Race between the run function and the abort promise @@ -413,7 +420,7 @@ export class TaskExecutor { for (const hook of globalWaitHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `onWait/${hook.name}` : "onWait/global", + "onWait()", async (span) => { await hook.fn({ payload, ctx, signal, task: this.task.id, wait, init: initOutput }); }, @@ -421,6 +428,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onWait", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -434,7 +442,7 @@ export class TaskExecutor { if (taskWaitHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "onWait/task", + "onWait()", async (span) => { await taskWaitHook({ payload, @@ -449,6 +457,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onWait", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -483,7 +492,7 @@ export class TaskExecutor { for (const hook of globalResumeHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `onResume/${hook.name}` : "onResume/global", + "onResume()", async (span) => { await hook.fn({ payload, ctx, signal, task: this.task.id, wait, init: initOutput }); }, @@ -491,6 +500,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onResume", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -504,7 +514,7 @@ export class TaskExecutor { if (taskResumeHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "onResume/task", + "onResume()", async (span) => { await taskResumeHook({ payload, @@ -519,6 +529,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onResume", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -646,7 +657,7 @@ export class TaskExecutor { for (const hook of globalSuccessHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `onSuccess/${hook.name}` : "onSuccess/global", + "onSuccess()", async (span) => { await hook.fn({ payload, @@ -661,6 +672,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onSuccess", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -674,7 +686,7 @@ export class TaskExecutor { if (taskSuccessHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "onSuccess/task", + "onSuccess()", async (span) => { await taskSuccessHook({ payload, @@ -689,6 +701,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onSuccess", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -719,7 +732,7 @@ export class TaskExecutor { for (const hook of globalFailureHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `onFailure/${hook.name}` : "onFailure/global", + "onFailure()", async (span) => { await hook.fn({ payload, @@ -734,6 +747,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onFailure", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -747,7 +761,7 @@ export class TaskExecutor { if (taskFailureHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "onFailure/task", + "onFailure()", async (span) => { await taskFailureHook({ payload, @@ -762,6 +776,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onFailure", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -803,7 +818,7 @@ export class TaskExecutor { for (const hook of globalStartHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `onStart/${hook.name}` : "onStart/global", + "onStart()", async (span) => { await hook.fn({ payload, ctx, signal, task: this.task.id, init: initOutput }); }, @@ -811,6 +826,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onStart", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -824,7 +840,7 @@ export class TaskExecutor { if (taskStartHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "onStart/task", + "onStart()", async (span) => { await taskStartHook({ payload, @@ -838,6 +854,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onStart", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -877,7 +894,7 @@ export class TaskExecutor { for (const hook of globalCleanupHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `cleanup/${hook.name}` : "cleanup/global", + "cleanup()", async (span) => { await hook.fn({ payload, @@ -891,6 +908,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-cleanup", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -904,7 +922,7 @@ export class TaskExecutor { if (taskCleanupHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "cleanup/task", + "cleanup()", async (span) => { await taskCleanupHook({ payload, @@ -918,6 +936,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-cleanup", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -1134,7 +1153,7 @@ export class TaskExecutor { for (const hook of globalCompleteHooks) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `onComplete/${hook.name}` : "onComplete/global", + "onComplete()", async (span) => { await hook.fn({ payload, @@ -1149,6 +1168,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onComplete", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) @@ -1162,7 +1182,7 @@ export class TaskExecutor { if (taskCompleteHook) { const [hookError] = await tryCatch( this._tracer.startActiveSpan( - "onComplete/task", + "onComplete()", async (span) => { await taskCompleteHook({ payload, @@ -1177,6 +1197,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onComplete", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) @@ -1206,4 +1227,16 @@ export class TaskExecutor { }, } satisfies TaskRunExecutionResult; } + + #lifecycleHookAccessoryAttributes(name?: string) { + return accessoryAttributes({ + items: [ + { + text: name ?? "global", + variant: "normal", + }, + ], + style: "codepath", + }); + } } From 226ddfa500b981d68913540a32490c0e2885a026 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 12:55:32 +0000 Subject: [PATCH 02/29] Make the icon sizes match the hero icons --- .../route.tsx | 4 ++-- .../route.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx index ce57978112..cbd2875206 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx @@ -631,11 +631,11 @@ function TasksTreeView({
-
+
{node.data.isRoot && !rootRun && Root} diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx index 046596e819..095bcbde17 100644 --- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx +++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx @@ -197,7 +197,7 @@ function SpanBody({ @@ -331,7 +331,7 @@ function RunBody({ From e93d9cb73f33dd837a67588e22b9a84d1e2a8acb Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 12:56:15 +0000 Subject: [PATCH 03/29] Updating icons for the new task hooks --- apps/webapp/app/assets/icons/AttemptIcon.tsx | 28 ++++++----------- .../app/assets/icons/MiddlewareIcon.tsx | 21 +++++++++++++ apps/webapp/app/assets/icons/PauseIcon.tsx | 11 +++++-- .../app/assets/icons/RunFunctionIcon.tsx | 21 +++++++++++++ apps/webapp/app/assets/icons/TaskIcon.tsx | 31 +++++-------------- .../webapp/app/components/runs/v3/RunIcon.tsx | 14 +++++---- 6 files changed, 75 insertions(+), 51 deletions(-) create mode 100644 apps/webapp/app/assets/icons/MiddlewareIcon.tsx create mode 100644 apps/webapp/app/assets/icons/RunFunctionIcon.tsx diff --git a/apps/webapp/app/assets/icons/AttemptIcon.tsx b/apps/webapp/app/assets/icons/AttemptIcon.tsx index 9fd9d7f6eb..fc176ea201 100644 --- a/apps/webapp/app/assets/icons/AttemptIcon.tsx +++ b/apps/webapp/app/assets/icons/AttemptIcon.tsx @@ -2,28 +2,18 @@ export function AttemptIcon({ className }: { className?: string }) { return ( - - - - - - - - + ); } diff --git a/apps/webapp/app/assets/icons/MiddlewareIcon.tsx b/apps/webapp/app/assets/icons/MiddlewareIcon.tsx new file mode 100644 index 0000000000..cbf044439f --- /dev/null +++ b/apps/webapp/app/assets/icons/MiddlewareIcon.tsx @@ -0,0 +1,21 @@ +export function MiddlewareIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/assets/icons/PauseIcon.tsx b/apps/webapp/app/assets/icons/PauseIcon.tsx index ccbc1d9a4d..9da4b7f885 100644 --- a/apps/webapp/app/assets/icons/PauseIcon.tsx +++ b/apps/webapp/app/assets/icons/PauseIcon.tsx @@ -1,10 +1,17 @@ export function PauseIcon({ className }: { className?: string }) { return ( - + diff --git a/apps/webapp/app/assets/icons/RunFunctionIcon.tsx b/apps/webapp/app/assets/icons/RunFunctionIcon.tsx new file mode 100644 index 0000000000..712825ca10 --- /dev/null +++ b/apps/webapp/app/assets/icons/RunFunctionIcon.tsx @@ -0,0 +1,21 @@ +export function RunFunctionIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/assets/icons/TaskIcon.tsx b/apps/webapp/app/assets/icons/TaskIcon.tsx index 48d9c4181d..049c491e92 100644 --- a/apps/webapp/app/assets/icons/TaskIcon.tsx +++ b/apps/webapp/app/assets/icons/TaskIcon.tsx @@ -1,29 +1,12 @@ export function TaskIcon({ className }: { className?: string }) { return ( - - - - - - - - - + + ); } diff --git a/apps/webapp/app/components/runs/v3/RunIcon.tsx b/apps/webapp/app/components/runs/v3/RunIcon.tsx index 7c43fcfae6..371b0cff9c 100644 --- a/apps/webapp/app/components/runs/v3/RunIcon.tsx +++ b/apps/webapp/app/components/runs/v3/RunIcon.tsx @@ -13,6 +13,8 @@ import { tablerIcons } from "~/utils/tablerIcons"; import tablerSpritePath from "~/components/primitives/tabler-sprite.svg"; import { TaskCachedIcon } from "~/assets/icons/TaskCachedIcon"; import { PauseIcon } from "~/assets/icons/PauseIcon"; +import { RunFunctionIcon } from "~/assets/icons/RunFunctionIcon"; +import { MiddlewareIcon } from "~/assets/icons/MiddlewareIcon"; type TaskIconProps = { name: string | undefined; @@ -73,13 +75,13 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) { case "warn": return ; case "error": - return ; + return ; case "fatal": - return ; + return ; case "task-middleware": - return ; + return ; case "task-fn-run": - return ; + return ; case "task-hook-init": return ; case "task-hook-onStart": @@ -87,7 +89,7 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) { case "task-hook-onSuccess": return ; case "task-hook-onFailure": - return ; + return ; case "task-hook-onComplete": return ; case "task-hook-onWait": @@ -95,7 +97,7 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) { case "task-hook-onResume": return ; case "task-hook-catchError": - return ; + return ; case "task-hook-cleanup": return ; } From d12c7411cd6c46d25b6c18ebf514a8c501e73c66 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 14:05:36 +0000 Subject: [PATCH 04/29] Adds new icons to the RunIcon.tsx component --- .../app/assets/icons/MiddlewareIcon.tsx | 2 +- .../app/assets/icons/RunFunctionIcon.tsx | 2 +- .../app/assets/icons/WebhookTaskIcon.tsx | 21 +++++++++++++++++++ .../webapp/app/components/runs/v3/RunIcon.tsx | 19 +++++++++-------- 4 files changed, 33 insertions(+), 11 deletions(-) create mode 100644 apps/webapp/app/assets/icons/WebhookTaskIcon.tsx diff --git a/apps/webapp/app/assets/icons/MiddlewareIcon.tsx b/apps/webapp/app/assets/icons/MiddlewareIcon.tsx index cbf044439f..a3f4a0523b 100644 --- a/apps/webapp/app/assets/icons/MiddlewareIcon.tsx +++ b/apps/webapp/app/assets/icons/MiddlewareIcon.tsx @@ -13,7 +13,7 @@ export function MiddlewareIcon({ className }: { className?: string }) { diff --git a/apps/webapp/app/assets/icons/RunFunctionIcon.tsx b/apps/webapp/app/assets/icons/RunFunctionIcon.tsx index 712825ca10..9c5b04aff6 100644 --- a/apps/webapp/app/assets/icons/RunFunctionIcon.tsx +++ b/apps/webapp/app/assets/icons/RunFunctionIcon.tsx @@ -13,7 +13,7 @@ export function RunFunctionIcon({ className }: { className?: string }) { diff --git a/apps/webapp/app/assets/icons/WebhookTaskIcon.tsx b/apps/webapp/app/assets/icons/WebhookTaskIcon.tsx new file mode 100644 index 0000000000..ef1f7c12de --- /dev/null +++ b/apps/webapp/app/assets/icons/WebhookTaskIcon.tsx @@ -0,0 +1,21 @@ +export function WebhookTaskIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/components/runs/v3/RunIcon.tsx b/apps/webapp/app/components/runs/v3/RunIcon.tsx index 371b0cff9c..5ecd9c48d7 100644 --- a/apps/webapp/app/components/runs/v3/RunIcon.tsx +++ b/apps/webapp/app/components/runs/v3/RunIcon.tsx @@ -15,6 +15,7 @@ import { TaskCachedIcon } from "~/assets/icons/TaskCachedIcon"; import { PauseIcon } from "~/assets/icons/PauseIcon"; import { RunFunctionIcon } from "~/assets/icons/RunFunctionIcon"; import { MiddlewareIcon } from "~/assets/icons/MiddlewareIcon"; +import { WebhookTaskIcon } from "~/assets/icons/WebhookTaskIcon"; type TaskIconProps = { name: string | undefined; @@ -83,23 +84,23 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) { case "task-fn-run": return ; case "task-hook-init": - return ; + return ; case "task-hook-onStart": - return ; + return ; case "task-hook-onSuccess": - return ; + return ; case "task-hook-onFailure": - return ; + return ; case "task-hook-onComplete": - return ; + return ; case "task-hook-onWait": - return ; + return ; case "task-hook-onResume": - return ; + return ; case "task-hook-catchError": - return ; + return ; case "task-hook-cleanup": - return ; + return ; } return ; From f63a87e20476aae79821c576e256904abb70f6dd Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 15:15:18 +0000 Subject: [PATCH 05/29] Improves the size of the menu icons --- apps/webapp/app/components/primitives/Buttons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx index c5244171f8..6b5f22c385 100644 --- a/apps/webapp/app/components/primitives/Buttons.tsx +++ b/apps/webapp/app/components/primitives/Buttons.tsx @@ -142,7 +142,7 @@ const variant = { textColor: "text-text-bright", button: "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-charcoal-750", - icon: "h-4", + icon: "h-[1.125rem]", iconSpacing: "gap-x-1.5", shortcutVariant: undefined, shortcut: undefined, From 84684a31e150afa533e6f836bb23e1993189814c Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 15:16:15 +0000 Subject: [PATCH 06/29] Fixes the missaligned environment dropdown and dev connected button --- .../app/components/navigation/SideMenu.tsx | 50 +++++++++---------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx index 20c95b7e4e..be0170e600 100644 --- a/apps/webapp/app/components/navigation/SideMenu.tsx +++ b/apps/webapp/app/components/navigation/SideMenu.tsx @@ -512,32 +512,30 @@ export function DevConnection() { return ( -
- - - -
- -
- - - {isConnected ? "Your dev server is connected" : "Your dev server is not connected"} - - - -
+ + + +
+ +
+ + + {isConnected ? "Your dev server is connected" : "Your dev server is not connected"} + + + {isConnected ? "Your dev server is connected" : "Your dev server is not connected"} From 6b5e31bfbd287bf384f1e4bb8046603f5869c865 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 15:16:54 +0000 Subject: [PATCH 07/29] Changes the button colours so they are all unique --- .../app/components/navigation/SideMenu.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx index be0170e600..78bf6afe78 100644 --- a/apps/webapp/app/components/navigation/SideMenu.tsx +++ b/apps/webapp/app/components/navigation/SideMenu.tsx @@ -22,7 +22,7 @@ import { useEffect, useRef, useState, type ReactNode } from "react"; import simplur from "simplur"; import { ConnectedIcon, DisconnectedIcon } from "~/assets/icons/ConnectionIcons"; import { RunsIcon } from "~/assets/icons/RunsIcon"; -import { TaskIcon } from "~/assets/icons/TaskIcon"; +import { TaskIconSmall } from "~/assets/icons/TaskIcon"; import { Avatar } from "~/components/primitives/Avatar"; import { type MatchedEnvironment } from "~/hooks/useEnvironment"; import { type MatchedOrganization } from "~/hooks/useOrganizations"; @@ -150,7 +150,7 @@ export function SideMenu({
-
+
From 91efae80ca4cc742b219e1ed5e0679ff4effe166 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 15:17:23 +0000 Subject: [PATCH 08/29] More icon updates --- .../app/assets/icons/ConnectionIcons.tsx | 23 ++++++++----------- apps/webapp/app/assets/icons/RunsIcon.tsx | 12 +++++----- apps/webapp/app/assets/icons/TaskIcon.tsx | 13 +++++++++++ 3 files changed, 28 insertions(+), 20 deletions(-) diff --git a/apps/webapp/app/assets/icons/ConnectionIcons.tsx b/apps/webapp/app/assets/icons/ConnectionIcons.tsx index 74f1ee5458..1ec227091b 100644 --- a/apps/webapp/app/assets/icons/ConnectionIcons.tsx +++ b/apps/webapp/app/assets/icons/ConnectionIcons.tsx @@ -1,23 +1,23 @@ export function ConnectedIcon({ className }: { className?: string }) { return ( - + + - + ); } diff --git a/apps/webapp/app/assets/icons/RunsIcon.tsx b/apps/webapp/app/assets/icons/RunsIcon.tsx index 8688058a67..0ae55d435b 100644 --- a/apps/webapp/app/assets/icons/RunsIcon.tsx +++ b/apps/webapp/app/assets/icons/RunsIcon.tsx @@ -2,15 +2,15 @@ export function RunsIcon({ className }: { className?: string }) { return ( - diff --git a/apps/webapp/app/assets/icons/TaskIcon.tsx b/apps/webapp/app/assets/icons/TaskIcon.tsx index 049c491e92..9c31a0957f 100644 --- a/apps/webapp/app/assets/icons/TaskIcon.tsx +++ b/apps/webapp/app/assets/icons/TaskIcon.tsx @@ -10,3 +10,16 @@ export function TaskIcon({ className }: { className?: string }) { ); } + +export function TaskIconSmall({ className }: { className?: string }) { + return ( + + + + ); +} From 3228ddda72bf5ff8940134b6a21d2f1777d29110 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 16:10:03 +0000 Subject: [PATCH 09/29] Adds new variables for main page icons --- apps/webapp/tailwind.config.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js index 43200351bc..3e13306f28 100644 --- a/apps/webapp/tailwind.config.js +++ b/apps/webapp/tailwind.config.js @@ -151,6 +151,20 @@ const devEnv = colors.pink[500]; const stagingEnv = colors.amber[400]; const prodEnv = mint[500]; +/** Icon colors */ +const tasks = colors.blue[500]; +const runs = colors.indigo[500]; +const batches = colors.pink[500]; +const schedules = colors.yellow[500]; +const queues = colors.purple[500]; +const deployments = colors.green[500]; +const tests = colors.lime[500]; +const apiKeys = colors.amber[500]; +const environmentVariables = colors.pink[500]; +const alerts = colors.red[500]; +const projectSettings = charcoal[200]; +const docs = colors.blue[500]; + /** Other variables */ const radius = "0.5rem"; @@ -211,6 +225,18 @@ module.exports = { dev: devEnv, staging: stagingEnv, prod: prodEnv, + tasks, + runs, + batches, + schedules, + queues, + deployments, + tests, + apiKeys, + environmentVariables, + alerts, + projectSettings, + docs, }, focusStyles: { outline: "1px solid", From 1d6266394f90bcafba262af82d3d9d275d08895c Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 16:10:47 +0000 Subject: [PATCH 10/29] Improves icons sizes --- .../app/components/runs/v3/TaskTriggerSource.tsx | 12 ++++-------- .../route.tsx | 2 +- .../route.tsx | 10 +++++----- 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx b/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx index 3ef7dac7b8..23948508b0 100644 --- a/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx +++ b/apps/webapp/app/components/runs/v3/TaskTriggerSource.tsx @@ -1,6 +1,6 @@ import { ClockIcon } from "@heroicons/react/20/solid"; -import { TaskTriggerSource } from "@trigger.dev/database"; -import { TaskIcon } from "~/assets/icons/TaskIcon"; +import { type TaskTriggerSource } from "@trigger.dev/database"; +import { TaskIconSmall } from "~/assets/icons/TaskIcon"; import { cn } from "~/utils/cn"; export function TaskTriggerSourceIcon({ @@ -12,14 +12,10 @@ export function TaskTriggerSourceIcon({ }) { switch (source) { case "STANDARD": { - return ( -
- -
- ); + return ; } case "SCHEDULED": { - return ; + return ; } } } diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx index fbfcee5274..74981b2756 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx @@ -659,7 +659,7 @@ function HelpfulInfoHasTasks({ onClose }: { onClose: () => void }) { />
- + Example tasks
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx index c3f64d8743..472fb01b69 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx @@ -13,9 +13,10 @@ import { type RuntimeEnvironmentType } from "@trigger.dev/database"; import { useEffect, useState } from "react"; import { typedjson, useTypedLoaderData } from "remix-typedjson"; import { z } from "zod"; -import { TaskIcon } from "~/assets/icons/TaskIcon"; +import { TaskIconSmall } from "~/assets/icons/TaskIcon"; import upgradeForQueuesPath from "~/assets/images/queues-dashboard.png"; import { AdminDebugTooltip } from "~/components/admin/debugTooltip"; +import { QueuesHasNoTasks } from "~/components/BlankStatePanels"; import { environmentFullTitle } from "~/components/environments/EnvironmentLabel"; import { Feedback } from "~/components/Feedback"; import { PageBody, PageContainer } from "~/components/layout/AppLayout"; @@ -60,7 +61,6 @@ import { docsPath, EnvironmentParamSchema, v3BillingPath } from "~/utils/pathBui import { PauseEnvironmentService } from "~/v3/services/pauseEnvironment.server"; import { PauseQueueService } from "~/v3/services/pauseQueue.server"; import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route"; -import { QueuesHasNoTasks } from "~/components/BlankStatePanels"; const SearchParamsSchema = z.object({ page: z.coerce.number().min(1).default(1), @@ -336,9 +336,9 @@ export default function Page() { {queue.type === "task" ? ( @@ -350,7 +350,7 @@ export default function Page() { button={ From 6463cc6eaa018cfe3c13229c36d64b2ccf6d3044 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 16:11:23 +0000 Subject: [PATCH 11/29] Using new color variables in the side menu and blank states --- .../app/components/BlankStatePanels.tsx | 22 +++++++++---------- .../app/components/navigation/SideMenu.tsx | 22 +++++++++---------- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/apps/webapp/app/components/BlankStatePanels.tsx b/apps/webapp/app/components/BlankStatePanels.tsx index c730c797c1..eec80f1e72 100644 --- a/apps/webapp/app/components/BlankStatePanels.tsx +++ b/apps/webapp/app/components/BlankStatePanels.tsx @@ -80,7 +80,7 @@ export function HasNoTasksDeployed({ environment }: { environment: MinimumEnviro @@ -148,7 +148,7 @@ export function SchedulesNoneAttached() { variant="secondary/medium" LeadingIcon={RectangleGroupIcon} className="inline-flex" - leadingIconClassName="text-sun-500" + leadingIconClassName="text-blue-500" > Use the dashboard @@ -170,7 +170,7 @@ export function BatchesNone() { @@ -194,7 +194,7 @@ export function TestHasNoTasks() { @@ -267,7 +267,7 @@ export function DeploymentsNoneDev() {
@@ -313,7 +313,7 @@ export function AlertsNoneDev() {
@@ -349,7 +349,7 @@ export function AlertsNoneDeployed() {
@@ -390,7 +390,7 @@ export function QueuesHasNoTasks() { @@ -215,28 +215,28 @@ export function SideMenu({ From ce1b964c4f507cadf6ba6161e7ab0eb734d6daf3 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 17:11:16 +0000 Subject: [PATCH 12/29] Adds preview environment color variable --- apps/webapp/tailwind.config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js index 3e13306f28..14ec03e461 100644 --- a/apps/webapp/tailwind.config.js +++ b/apps/webapp/tailwind.config.js @@ -149,6 +149,7 @@ const warning = colors.amber[500]; const error = colors.rose[600]; const devEnv = colors.pink[500]; const stagingEnv = colors.amber[400]; +const previewEnv = colors.amber[400]; const prodEnv = mint[500]; /** Icon colors */ @@ -162,7 +163,7 @@ const tests = colors.lime[500]; const apiKeys = colors.amber[500]; const environmentVariables = colors.pink[500]; const alerts = colors.red[500]; -const projectSettings = charcoal[200]; +const projectSettings = colors.indigo[500]; const docs = colors.blue[500]; /** Other variables */ @@ -225,6 +226,7 @@ module.exports = { dev: devEnv, staging: stagingEnv, prod: prodEnv, + preview: previewEnv, tasks, runs, batches, From 9be5afb842b6c54311fc0a4468f3334ec8e59a68 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 17:11:36 +0000 Subject: [PATCH 13/29] Align the env icon in the menu --- apps/webapp/app/components/navigation/EnvironmentSelector.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx index c2c0e520a0..a56d0ec8ab 100644 --- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx +++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx @@ -43,7 +43,7 @@ export function EnvironmentSelector({ isOpen={isMenuOpen} overflowHidden fullWidth - className={cn("h-7 overflow-hidden py-1 pl-2", className)} + className={cn("h-7 overflow-hidden py-1 pl-1.5", className)} > From 7694b3b75e6bad4f307bc68c887752425d2f4ed9 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 17:14:04 +0000 Subject: [PATCH 14/29] Updates the env icons to be the correct size and padding to match hero icons --- .../app/assets/icons/EnvironmentIcons.tsx | 191 ++++++++++++------ 1 file changed, 126 insertions(+), 65 deletions(-) diff --git a/apps/webapp/app/assets/icons/EnvironmentIcons.tsx b/apps/webapp/app/assets/icons/EnvironmentIcons.tsx index d8d8a7b66b..02fa27c546 100644 --- a/apps/webapp/app/assets/icons/EnvironmentIcons.tsx +++ b/apps/webapp/app/assets/icons/EnvironmentIcons.tsx @@ -1,92 +1,153 @@ export function DevEnvironmentIcon({ className }: { className?: string }) { return ( - - - - - - - - - - - - - + + + + + + + + ); +} + +export function DevEnvironmentIconSmall({ className }: { className?: string }) { + return ( + + + + + + ); } export function ProdEnvironmentIcon({ className }: { className?: string }) { return ( - + + - - - - - - - - + + ); +} + +export function ProdEnvironmentIconSmall({ className }: { className?: string }) { + return ( + + + ); } export function DeployedEnvironmentIcon({ className }: { className?: string }) { return ( - + + + + + ); +} + +export function DeployedEnvironmentIconSmall({ className }: { className?: string }) { + return ( + + - ); } From c14644a36d65cdfa2a86307df5fa08122791ac43 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 17:22:46 +0000 Subject: [PATCH 15/29] Label uses new colors, removes unused cases and new env icons --- .../environments/EnvironmentLabel.tsx | 71 +++++-------------- 1 file changed, 17 insertions(+), 54 deletions(-) diff --git a/apps/webapp/app/components/environments/EnvironmentLabel.tsx b/apps/webapp/app/components/environments/EnvironmentLabel.tsx index 31a346e192..9d3d3bb8b0 100644 --- a/apps/webapp/app/components/environments/EnvironmentLabel.tsx +++ b/apps/webapp/app/components/environments/EnvironmentLabel.tsx @@ -1,12 +1,10 @@ -import type { RuntimeEnvironment } from "~/models/runtimeEnvironment.server"; -import { cn } from "~/utils/cn"; -import { sortEnvironments } from "~/utils/environmentSort"; -import { SimpleTooltip } from "../primitives/Tooltip"; import { - DeployedEnvironmentIcon, - DevEnvironmentIcon, - ProdEnvironmentIcon, + DeployedEnvironmentIconSmall, + DevEnvironmentIconSmall, + ProdEnvironmentIconSmall, } from "~/assets/icons/EnvironmentIcons"; +import type { RuntimeEnvironment } from "~/models/runtimeEnvironment.server"; +import { cn } from "~/utils/cn"; type Environment = Pick; @@ -20,16 +18,20 @@ export function EnvironmentIcon({ switch (environment.type) { case "DEVELOPMENT": return ( - + ); case "PRODUCTION": return ( - + ); case "STAGING": case "PREVIEW": return ( - + ); } } @@ -43,7 +45,7 @@ export function EnvironmentCombo({ }) { return ( - + ); @@ -89,54 +91,15 @@ export function environmentFullTitle(environment: Environment) { } } -export function environmentTypeTitle(environment: Environment) { - switch (environment.type) { - case "PRODUCTION": - return "Prod"; - case "STAGING": - return "Staging"; - case "DEVELOPMENT": - return "Dev"; - case "PREVIEW": - return "Preview"; - } -} - -export function environmentColorClassName(environment: Environment) { - switch (environment.type) { - case "PRODUCTION": - return "bg-green-500"; - case "STAGING": - return "bg-amber-500"; - case "DEVELOPMENT": - return "bg-pink-500"; - case "PREVIEW": - return "bg-yellow-500"; - } -} - -export function environmentBorderClassName(environment: Environment) { - switch (environment.type) { - case "PRODUCTION": - return "border-green-500/50"; - case "STAGING": - return "border-amber-500/50"; - case "DEVELOPMENT": - return "border-pink-500/50"; - case "PREVIEW": - return "border-yellow-500/50"; - } -} - export function environmentTextClassName(environment: Environment) { switch (environment.type) { case "PRODUCTION": - return "text-green-500"; + return "text-prod"; case "STAGING": - return "text-amber-500"; + return "text-staging"; case "DEVELOPMENT": - return "text-pink-500"; + return "text-dev"; case "PREVIEW": - return "text-yellow-500"; + return "text-preview"; } } From 0fd1336d05093b6e68e9d5162a77130374b57c64 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 17:23:09 +0000 Subject: [PATCH 16/29] Lower case env label --- .../app/components/environments/RegenerateApiKeyModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx index ff94af7b01..c041683e04 100644 --- a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx +++ b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx @@ -39,7 +39,7 @@ export function RegenerateApiKeyModal({ id, title }: ModalProps) { - {`Regenerate ${title.toUpperCase()} environment key`} + {`Regenerate ${title} environment key`} Date: Wed, 26 Mar 2025 17:23:37 +0000 Subject: [PATCH 17/29] Removes unused code --- .../app/components/runs/v3/SharedFilters.tsx | 98 ------------------- 1 file changed, 98 deletions(-) diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx index 7e00bec892..dc417473e9 100644 --- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx +++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx @@ -2,7 +2,6 @@ import * as Ariakit from "@ariakit/react"; import type { RuntimeEnvironment } from "@trigger.dev/database"; import type { ReactNode } from "react"; import { startTransition, useCallback, useMemo, useState } from "react"; -import { EnvironmentLabel, environmentTitle } from "~/components/environments/EnvironmentLabel"; import { AppliedFilter } from "~/components/primitives/AppliedFilter"; import { DateField } from "~/components/primitives/DateField"; import { DateTime } from "~/components/primitives/DateTime"; @@ -14,7 +13,6 @@ import { SelectList, SelectPopover, SelectProvider, - shortcutFromIndex, } from "~/components/primitives/Select"; import { useSearchParams } from "~/hooks/useSearchParam"; import { Button } from "../../primitives/Buttons"; @@ -51,102 +49,6 @@ export function FilterMenuProvider({ ); } -export function EnvironmentsDropdown({ - trigger, - clearSearchValue, - searchValue, - onClose, - possibleEnvironments, -}: { - trigger: ReactNode; - clearSearchValue: () => void; - searchValue: string; - onClose?: () => void; - possibleEnvironments: DisplayableEnvironment[]; -}) { - const { values, replace } = useSearchParams(); - - const handleChange = (values: string[]) => { - clearSearchValue(); - replace({ environments: values, cursor: undefined, direction: undefined }); - }; - - const filtered = useMemo(() => { - return possibleEnvironments.filter((item) => { - const title = environmentTitle(item, item.userName); - return title.toLowerCase().includes(searchValue.toLowerCase()); - }); - }, [searchValue, possibleEnvironments]); - - return ( - - {trigger} - { - if (onClose) { - onClose(); - return false; - } - - return true; - }} - > - - - {filtered.map((item, index) => ( - - - - ))} - - - - ); -} - -export function AppliedEnvironmentFilter({ - possibleEnvironments, -}: { - possibleEnvironments: DisplayableEnvironment[]; -}) { - const { values, del } = useSearchParams(); - - if (values("environments").length === 0) { - return null; - } - - return ( - - {(search, setSearch) => ( - }> - { - const environment = possibleEnvironments.find((env) => env.id === v); - return environment ? environmentTitle(environment, environment.userName) : v; - }) - )} - onRemove={() => del(["environments", "cursor", "direction"])} - /> - - } - searchValue={search} - clearSearchValue={() => setSearch("")} - possibleEnvironments={possibleEnvironments} - /> - )} - - ); -} - const timePeriods = [ { label: "Last 5 mins", From eaa501281e733a2f0fb5adb77001582ff7d83071 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 17:23:56 +0000 Subject: [PATCH 18/29] Use full env title --- .../route.tsx | 4 ++-- ...urces.environments.$environmentId.regenerate-api-key.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx index b98f959bbd..cedac5ec02 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx @@ -3,7 +3,7 @@ import { type MetaFunction } from "@remix-run/react"; import { type LoaderFunctionArgs } from "@remix-run/server-runtime"; import { typedjson, useTypedLoaderData } from "remix-typedjson"; import { AdminDebugTooltip } from "~/components/admin/debugTooltip"; -import { EnvironmentCombo, environmentTitle } from "~/components/environments/EnvironmentLabel"; +import { EnvironmentCombo, environmentFullTitle } from "~/components/environments/EnvironmentLabel"; import { RegenerateApiKeyModal } from "~/components/environments/RegenerateApiKeyModal"; import { PageBody, PageContainer } from "~/components/layout/AppLayout"; import { LinkButton } from "~/components/primitives/Buttons"; @@ -124,7 +124,7 @@ export default function Page() { popoverContent={ } > diff --git a/apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx b/apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx index ea79616a4e..7ad6b1c6c5 100644 --- a/apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx +++ b/apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx @@ -1,9 +1,9 @@ import type { ActionFunctionArgs } from "@remix-run/server-runtime"; import { z } from "zod"; +import { environmentFullTitle } from "~/components/environments/EnvironmentLabel"; import { regenerateApiKey } from "~/models/api-key.server"; -import { requireUserId } from "~/services/session.server"; import { jsonWithErrorMessage, jsonWithSuccessMessage } from "~/models/message.server"; -import { environmentTitle } from "~/components/environments/EnvironmentLabel"; +import { requireUserId } from "~/services/session.server"; const ParamsSchema = z.object({ environmentId: z.string(), @@ -25,7 +25,7 @@ export async function action({ request, params }: ActionFunctionArgs) { return jsonWithSuccessMessage( { ok: true }, request, - `API keys regenerated for ${environmentTitle(updatedEnvironment)} environment` + `API keys regenerated for ${environmentFullTitle(updatedEnvironment)} environment` ); } catch (error) { const message = error instanceof Error ? error.message : "Unknown error"; From 0af52c42e62388aedae4627882102473c838d088 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 17:24:02 +0000 Subject: [PATCH 19/29] Organize imports --- .../route.tsx | 27 ++++++++----------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx index 0fc0a7b5b1..00bb1f0736 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx @@ -10,15 +10,11 @@ import { parse } from "@conform-to/zod"; import { LockClosedIcon, LockOpenIcon, PlusIcon, XMarkIcon } from "@heroicons/react/20/solid"; import { Form, useActionData, useNavigate, useNavigation } from "@remix-run/react"; import { ActionFunctionArgs, LoaderFunctionArgs, json } from "@remix-run/server-runtime"; +import dotenv from "dotenv"; import { RefObject, useCallback, useEffect, useRef, useState } from "react"; import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson"; import { z } from "zod"; -import { - environmentTextClassName, - environmentTitle, - EnvironmentCombo, - EnvironmentLabel, -} from "~/components/environments/EnvironmentLabel"; +import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel"; import { Button, LinkButton } from "~/components/primitives/Buttons"; import { CheckboxWithLabel } from "~/components/primitives/Checkbox"; import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog"; @@ -29,8 +25,17 @@ import { Hint } from "~/components/primitives/Hint"; import { Input } from "~/components/primitives/Input"; import { InputGroup } from "~/components/primitives/InputGroup"; import { Label } from "~/components/primitives/Label"; +import { Paragraph } from "~/components/primitives/Paragraph"; import { Switch } from "~/components/primitives/Switch"; +import { TextLink } from "~/components/primitives/TextLink"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "~/components/primitives/Tooltip"; import { prisma } from "~/db.server"; +import { useEnvironment } from "~/hooks/useEnvironment"; import { useList } from "~/hooks/useList"; import { useOrganization } from "~/hooks/useOrganizations"; import { useProject } from "~/hooks/useProject"; @@ -45,16 +50,6 @@ import { } from "~/utils/pathBuilder"; import { EnvironmentVariablesRepository } from "~/v3/environmentVariables/environmentVariablesRepository.server"; import { EnvironmentVariableKey } from "~/v3/environmentVariables/repository"; -import dotenv from "dotenv"; -import { Paragraph } from "~/components/primitives/Paragraph"; -import { TextLink } from "~/components/primitives/TextLink"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "~/components/primitives/Tooltip"; -import { useEnvironment } from "~/hooks/useEnvironment"; export const loader = async ({ request, params }: LoaderFunctionArgs) => { const userId = await requireUserId(request); From 4f78d9c04aec46f042762621fd32e66aebce317c Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 17:50:32 +0000 Subject: [PATCH 20/29] More variants of the runs icon to work at smaller sizes --- apps/webapp/app/assets/icons/RunsIcon.tsx | 38 +++++++++++++++++++ .../app/components/navigation/SideMenu.tsx | 4 +- 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/assets/icons/RunsIcon.tsx b/apps/webapp/app/assets/icons/RunsIcon.tsx index 0ae55d435b..a481a041ab 100644 --- a/apps/webapp/app/assets/icons/RunsIcon.tsx +++ b/apps/webapp/app/assets/icons/RunsIcon.tsx @@ -16,3 +16,41 @@ export function RunsIcon({ className }: { className?: string }) { ); } + +export function RunsIconSmall({ className }: { className?: string }) { + return ( + + + + + ); +} + +export function RunsIconExtraSmall({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx index c2ca373827..80b34e59c1 100644 --- a/apps/webapp/app/components/navigation/SideMenu.tsx +++ b/apps/webapp/app/components/navigation/SideMenu.tsx @@ -21,7 +21,7 @@ import { useNavigation } from "@remix-run/react"; import { useEffect, useRef, useState, type ReactNode } from "react"; import simplur from "simplur"; import { ConnectedIcon, DisconnectedIcon } from "~/assets/icons/ConnectionIcons"; -import { RunsIcon } from "~/assets/icons/RunsIcon"; +import { RunsIconExtraSmall, RunsIconSmall } from "~/assets/icons/RunsIcon"; import { TaskIconSmall } from "~/assets/icons/TaskIcon"; import { Avatar } from "~/components/primitives/Avatar"; import { type MatchedEnvironment } from "~/hooks/useEnvironment"; @@ -170,7 +170,7 @@ export function SideMenu({ /> From 2346c4258c23da5793c5412e76e2f8afa6d0b392 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 17:59:02 +0000 Subject: [PATCH 21/29] small padding adjustment --- apps/webapp/app/components/navigation/SideMenuSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx index 274ebfc582..af37003575 100644 --- a/apps/webapp/app/components/navigation/SideMenuSection.tsx +++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx @@ -29,7 +29,7 @@ export function SideMenuSection({ return (

{title}

From 14cadc6df50c34cab63533668c5b5e3e0f3893f6 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 17:59:10 +0000 Subject: [PATCH 22/29] reformat init function span --- packages/core/src/v3/workers/taskExecutor.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/src/v3/workers/taskExecutor.ts b/packages/core/src/v3/workers/taskExecutor.ts index c63bcf4725..f7d38022a7 100644 --- a/packages/core/src/v3/workers/taskExecutor.ts +++ b/packages/core/src/v3/workers/taskExecutor.ts @@ -560,7 +560,7 @@ export class TaskExecutor { for (const hook of globalInitHooks) { const [hookError, result] = await tryCatch( this._tracer.startActiveSpan( - hook.name ? `init/${hook.name}` : "init/global", + "init()", async (span) => { const result = await hook.fn({ payload, ctx, signal, task: this.task.id }); @@ -575,6 +575,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-init", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes(hook.name), }, } ) From b28feda8cc5fa3d288ad3998bbeefd63e2bcb037 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 18:30:13 +0000 Subject: [PATCH 23/29] Fix last init formatting --- packages/core/src/v3/workers/taskExecutor.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/src/v3/workers/taskExecutor.ts b/packages/core/src/v3/workers/taskExecutor.ts index f7d38022a7..98e6b1e575 100644 --- a/packages/core/src/v3/workers/taskExecutor.ts +++ b/packages/core/src/v3/workers/taskExecutor.ts @@ -596,7 +596,7 @@ export class TaskExecutor { if (taskInitHook) { const [hookError, taskResult] = await tryCatch( this._tracer.startActiveSpan( - "init/task", + "init()", async (span) => { const result = await taskInitHook({ payload, ctx, signal, task: this.task.id }); @@ -611,6 +611,7 @@ export class TaskExecutor { attributes: { [SemanticInternalAttributes.STYLE_ICON]: "task-hook-init", [SemanticInternalAttributes.COLLAPSED]: true, + ...this.#lifecycleHookAccessoryAttributes("task"), }, } ) From 121dae61c352b4ed76c84887b5e92a51ab15dc02 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 18:30:20 +0000 Subject: [PATCH 24/29] New colour for settings --- apps/webapp/tailwind.config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js index 14ec03e461..db62f107f0 100644 --- a/apps/webapp/tailwind.config.js +++ b/apps/webapp/tailwind.config.js @@ -163,7 +163,8 @@ const tests = colors.lime[500]; const apiKeys = colors.amber[500]; const environmentVariables = colors.pink[500]; const alerts = colors.red[500]; -const projectSettings = colors.indigo[500]; +const projectSettings = colors.blue[500]; +const orgSettings = colors.blue[500]; const docs = colors.blue[500]; /** Other variables */ @@ -238,6 +239,7 @@ module.exports = { environmentVariables, alerts, projectSettings, + orgSettings, docs, }, focusStyles: { From 5ff36c62c07441632efad24441a69d5c4a25d079 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 18:30:36 +0000 Subject: [PATCH 25/29] Organize switch statement for icons nicely --- apps/webapp/app/components/runs/v3/RunIcon.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/apps/webapp/app/components/runs/v3/RunIcon.tsx b/apps/webapp/app/components/runs/v3/RunIcon.tsx index 5ecd9c48d7..763071fc19 100644 --- a/apps/webapp/app/components/runs/v3/RunIcon.tsx +++ b/apps/webapp/app/components/runs/v3/RunIcon.tsx @@ -84,23 +84,16 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) { case "task-fn-run": return ; case "task-hook-init": - return ; case "task-hook-onStart": - return ; case "task-hook-onSuccess": - return ; - case "task-hook-onFailure": - return ; - case "task-hook-onComplete": - return ; case "task-hook-onWait": - return ; case "task-hook-onResume": + case "task-hook-onComplete": + case "task-hook-cleanup": return ; + case "task-hook-onFailure": case "task-hook-catchError": return ; - case "task-hook-cleanup": - return ; } return ; From 7ad2bf56b05e2808e216dd8d9cf0be8b32076b08 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 18:30:59 +0000 Subject: [PATCH 26/29] Use new color variable --- .../navigation/OrganizationSettingsSideMenu.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx b/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx index 31a7c8abf2..f4d67bfac4 100644 --- a/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx +++ b/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx @@ -50,8 +50,10 @@ export function OrganizationSettingsSideMenu({
-
- +
+
+ +
From d179f8c1f86ba27c32f13fd362eac71cb1759433 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 18:31:06 +0000 Subject: [PATCH 27/29] Update icon svgs --- apps/webapp/app/assets/icons/ConnectionIcons.tsx | 2 +- apps/webapp/app/assets/icons/MiddlewareIcon.tsx | 4 ++-- apps/webapp/app/assets/icons/RunFunctionIcon.tsx | 4 ++-- apps/webapp/app/assets/icons/WebhookTaskIcon.tsx | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/webapp/app/assets/icons/ConnectionIcons.tsx b/apps/webapp/app/assets/icons/ConnectionIcons.tsx index 1ec227091b..5ca22f1ac0 100644 --- a/apps/webapp/app/assets/icons/ConnectionIcons.tsx +++ b/apps/webapp/app/assets/icons/ConnectionIcons.tsx @@ -11,7 +11,7 @@ export function ConnectedIcon({ className }: { className?: string }) { stroke="#878C99" /> diff --git a/apps/webapp/app/assets/icons/RunFunctionIcon.tsx b/apps/webapp/app/assets/icons/RunFunctionIcon.tsx index 9c5b04aff6..d2866c234d 100644 --- a/apps/webapp/app/assets/icons/RunFunctionIcon.tsx +++ b/apps/webapp/app/assets/icons/RunFunctionIcon.tsx @@ -8,12 +8,12 @@ export function RunFunctionIcon({ className }: { className?: string }) { height="19" rx="2.5" stroke="currentColor" - strokeOpacity="0.5" + strokeOpacity={0.5} /> diff --git a/apps/webapp/app/assets/icons/WebhookTaskIcon.tsx b/apps/webapp/app/assets/icons/WebhookTaskIcon.tsx index ef1f7c12de..5c431974bb 100644 --- a/apps/webapp/app/assets/icons/WebhookTaskIcon.tsx +++ b/apps/webapp/app/assets/icons/WebhookTaskIcon.tsx @@ -8,12 +8,12 @@ export function WebhookTaskIcon({ className }: { className?: string }) { height="19" rx="2.5" stroke="currentColor" - strokeOpacity="0.5" + strokeOpacity={0.5} /> From b1acd1a7b496c8a7507b217996a0753fa5c0fdda Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 18:42:52 +0000 Subject: [PATCH 28/29] Renamed lifecycle hook icon to Function icon --- apps/webapp/app/assets/icons/WebhookTaskIcon.tsx | 2 +- apps/webapp/app/components/runs/v3/RunIcon.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/webapp/app/assets/icons/WebhookTaskIcon.tsx b/apps/webapp/app/assets/icons/WebhookTaskIcon.tsx index 5c431974bb..6016322428 100644 --- a/apps/webapp/app/assets/icons/WebhookTaskIcon.tsx +++ b/apps/webapp/app/assets/icons/WebhookTaskIcon.tsx @@ -1,4 +1,4 @@ -export function WebhookTaskIcon({ className }: { className?: string }) { +export function FunctionIcon({ className }: { className?: string }) { return ( ; + return ; case "task-hook-onFailure": case "task-hook-catchError": - return ; + return ; } return ; From da94d142eff4c5e6e9bd699af645b7ed48997858 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 26 Mar 2025 19:10:51 +0000 Subject: [PATCH 29/29] Renamed function icon file name --- .../app/assets/icons/{WebhookTaskIcon.tsx => FunctionIcon.tsx} | 0 apps/webapp/app/components/runs/v3/RunIcon.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename apps/webapp/app/assets/icons/{WebhookTaskIcon.tsx => FunctionIcon.tsx} (100%) diff --git a/apps/webapp/app/assets/icons/WebhookTaskIcon.tsx b/apps/webapp/app/assets/icons/FunctionIcon.tsx similarity index 100% rename from apps/webapp/app/assets/icons/WebhookTaskIcon.tsx rename to apps/webapp/app/assets/icons/FunctionIcon.tsx diff --git a/apps/webapp/app/components/runs/v3/RunIcon.tsx b/apps/webapp/app/components/runs/v3/RunIcon.tsx index 21cf138f9f..f482c5a700 100644 --- a/apps/webapp/app/components/runs/v3/RunIcon.tsx +++ b/apps/webapp/app/components/runs/v3/RunIcon.tsx @@ -15,7 +15,7 @@ import { TaskCachedIcon } from "~/assets/icons/TaskCachedIcon"; import { PauseIcon } from "~/assets/icons/PauseIcon"; import { RunFunctionIcon } from "~/assets/icons/RunFunctionIcon"; import { MiddlewareIcon } from "~/assets/icons/MiddlewareIcon"; -import { FunctionIcon } from "~/assets/icons/WebhookTaskIcon"; +import { FunctionIcon } from "~/assets/icons/FunctionIcon"; import { TriggerIcon } from "~/assets/icons/TriggerIcon"; type TaskIconProps = {