Skip to content

Changes frozen to waiting #1551

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 13, 2024
Merged

Changes frozen to waiting #1551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f683a09
Offset the tooltip in more
samejr Dec 11, 2024
85a4ad1
The Select component’s shortcut has a better hover state
samejr Dec 11, 2024
ec75ae1
“Frozen” changed to “Waiting”
samejr Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion apps/webapp/app/components/primitives/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -482,7 +482,11 @@ export function SelectItem({
<div className="grow truncate">{props.children || props.value}</div>
{checkIcon}
{shortcut && (
<ShortcutKey className={cn("size-4 flex-none")} shortcut={shortcut} variant={"small"} />
<ShortcutKey
className={cn("size-4 flex-none transition duration-0 group-hover:border-charcoal-600")}
shortcut={shortcut}
variant={"small"}
/>
)}
</div>
</Ariakit.SelectItem>
Expand Down
2 changes: 1 addition & 1 deletion apps/webapp/app/components/runs/v3/RunFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ function StatusDropdown({
<TooltipTrigger className="group flex w-full flex-col py-0">
<TaskRunStatusCombo status={item.value} iconClassName="animate-none" />
</TooltipTrigger>
<TooltipContent side="right" sideOffset={9}>
<TooltipContent side="right" sideOffset={50}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Based on the comprehensive analysis of the codebase, I can now provide a final response:

Inconsistent tooltip offset needs standardization

The increased sideOffset={50} in RunFilters.tsx is inconsistent with the identical component structure in BatchFilters.tsx (sideOffset={9}). Both components:

  • Use the same tooltip structure
  • Display status descriptions in the same way
  • Are used in similar dropdown contexts
  • Share similar component hierarchy

This inconsistency should be standardized to maintain UI consistency across similar components.

  • apps/webapp/app/components/runs/v3/RunFilters.tsx: Line 359 - Revert sideOffset to 9 to match BatchFilters
  • apps/webapp/app/components/runs/v3/BatchFilters.tsx: Line 359 - Keep current sideOffset of 9
🔗 Analysis chain

Verify tooltip positioning with the increased offset.

The significant increase in sideOffset from 9 to 50 pixels might cause layout issues on smaller screens or place the tooltip too far from its trigger element.

The search results show an inconsistency in the sideOffset values between similar components. Let me verify if these components are related or if there's a pattern for different offset values.

The context shows that both tooltips are used in similar dropdown components (BatchFilters and RunFilters) to display status descriptions. However, they have significantly different offsets (9px vs 50px) despite having identical structure and purpose. Let me check if there are any UI-specific requirements or recent changes that justify this difference.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for other TooltipContent components to compare offsets
rg "TooltipContent.*sideOffset" -A 1

Length of output: 480

Script:

#!/bin/bash
# Check the context of both tooltip usages to understand their placement and purpose
rg "TooltipContent" -B 5 -A 5 apps/webapp/app/components/runs/v3/RunFilters.tsx apps/webapp/app/components/runs/v3/BatchFilters.tsx

# Search for any design system documentation or constants related to tooltip offsets
fd -e ts -e tsx -e js -e jsx | xargs rg "tooltip.*offset|TOOLTIP.*OFFSET|TooltipContent.*DEFAULT"

Length of output: 4882

Script:

#!/bin/bash
# Check recent changes to these files
git log -p --since="3 months ago" -- apps/webapp/app/components/runs/v3/RunFilters.tsx apps/webapp/app/components/runs/v3/BatchFilters.tsx | grep -A 5 -B 5 "sideOffset"

# Check if there are any related UI components or design system files
fd -e tsx -e ts | xargs rg "TaskRunStatusCombo|BatchStatusCombo" -A 2 -B 2

Length of output: 15001

<Paragraph variant="extra-small">
{descriptionForTaskRunStatus(item.value)}
</Paragraph>
Expand Down
11 changes: 5 additions & 6 deletions apps/webapp/app/components/runs/v3/TaskRunAttemptStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@ import {
CheckCircleIcon,
ClockIcon,
NoSymbolIcon,
PauseCircleIcon,
RectangleStackIcon,
XCircleIcon,
} from "@heroicons/react/20/solid";
import type { TaskRunAttemptStatus as TaskRunAttemptStatusType } from "@trigger.dev/database";
import { TaskRunAttemptStatus } from "~/database-types";
import assertNever from "assert-never";
import { SnowflakeIcon } from "lucide-react";
import { HourglassIcon, SnowflakeIcon } from "lucide-react";
import { Spinner } from "~/components/primitives/Spinner";
import { TaskRunAttemptStatus } from "~/database-types";
import { cn } from "~/utils/cn";

export const allTaskRunAttemptStatuses = Object.values(
Expand Down Expand Up @@ -65,7 +64,7 @@ export function TaskRunAttemptStatusIcon({
case "EXECUTING":
return <Spinner className={cn(runAttemptStatusClassNameColor(status), className)} />;
case "PAUSED":
return <SnowflakeIcon className={cn(runAttemptStatusClassNameColor(status), className)} />;
return <HourglassIcon className={cn(runAttemptStatusClassNameColor(status), className)} />;
case "FAILED":
return <XCircleIcon className={cn(runAttemptStatusClassNameColor(status), className)} />;
case "CANCELED":
Expand All @@ -91,7 +90,7 @@ export function runAttemptStatusClassNameColor(status: ExtendedTaskAttemptStatus
case "EXECUTING":
return "text-pending";
case "PAUSED":
return "text-sky-300";
return "text-charcoal-500";
case "FAILED":
return "text-error";
case "CANCELED":
Expand All @@ -117,7 +116,7 @@ export function runAttemptStatusTitle(status: ExtendedTaskAttemptStatus | null):
case "EXECUTING":
return "Executing";
case "PAUSED":
return "Frozen";
return "Waiting";
case "FAILED":
return "Failed";
case "CANCELED":
Expand Down
41 changes: 20 additions & 21 deletions apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,12 @@ import {
NoSymbolIcon,
PauseCircleIcon,
RectangleStackIcon,
StopIcon,
TrashIcon,
XCircleIcon,
} from "@heroicons/react/20/solid";
import { TaskRunStatus } from "@trigger.dev/database";
import assertNever from "assert-never";
import { SnowflakeIcon } from "lucide-react";
import { HourglassIcon } from "lucide-react";
import { TimedOutIcon } from "~/assets/icons/TimedOutIcon";
import { Spinner } from "~/components/primitives/Spinner";
import { cn } from "~/utils/cn";
Expand All @@ -41,9 +40,9 @@ export const filterableTaskRunStatuses = [
"WAITING_FOR_DEPLOY",
"DELAYED",
"PENDING",
"WAITING_TO_RESUME",
"EXECUTING",
"RETRYING_AFTER_FAILURE",
"WAITING_TO_RESUME",
"COMPLETED_SUCCESSFULLY",
"CANCELED",
"COMPLETED_WITH_ERRORS",
Expand All @@ -55,21 +54,21 @@ export const filterableTaskRunStatuses = [
] as const satisfies Readonly<Array<TaskRunStatus>>;

const taskRunStatusDescriptions: Record<TaskRunStatus, string> = {
DELAYED: "Task has been delayed and is waiting to be executed",
PENDING: "Task is waiting to be executed",
WAITING_FOR_DEPLOY: "Task needs to be deployed first to start executing",
EXECUTING: "Task is currently being executed",
RETRYING_AFTER_FAILURE: "Task is being reattempted after a failure",
WAITING_TO_RESUME: "Task has been frozen and is waiting to be resumed",
COMPLETED_SUCCESSFULLY: "Task has been successfully completed",
CANCELED: "Task has been canceled",
COMPLETED_WITH_ERRORS: "Task has failed with errors",
INTERRUPTED: "Task has failed because it was interrupted",
SYSTEM_FAILURE: "Task has failed due to a system failure",
PAUSED: "Task has been paused by the user",
CRASHED: "Task has crashed and won't be retried",
EXPIRED: "Task has surpassed its ttl and won't be executed",
TIMED_OUT: "Task has failed because it exceeded its maxDuration",
DELAYED: "Task has been delayed and is waiting to be executed.",
PENDING: "Task is waiting to be executed.",
WAITING_FOR_DEPLOY: "Task needs to be deployed first to start executing.",
EXECUTING: "Task is currently being executed.",
RETRYING_AFTER_FAILURE: "Task is being reattempted after a failure.",
WAITING_TO_RESUME: `You have used a "wait" function. When the wait is complete, the task will resume execution.`,
COMPLETED_SUCCESSFULLY: "Task has been successfully completed.",
CANCELED: "Task has been canceled.",
COMPLETED_WITH_ERRORS: "Task has failed with errors.",
INTERRUPTED: "Task has failed because it was interrupted.",
SYSTEM_FAILURE: "Task has failed due to a system failure.",
PAUSED: "Task has been paused by the user.",
CRASHED: "Task has crashed and won't be retried.",
EXPIRED: "Task has surpassed its ttl and won't be executed.",
TIMED_OUT: "Task has failed because it exceeded its maxDuration.",
};

export const QUEUED_STATUSES = [
Expand Down Expand Up @@ -126,7 +125,7 @@ export function TaskRunStatusIcon({
case "EXECUTING":
return <Spinner className={cn(runStatusClassNameColor(status), className)} />;
case "WAITING_TO_RESUME":
return <SnowflakeIcon className={cn(runStatusClassNameColor(status), className)} />;
return <HourglassIcon className={cn(runStatusClassNameColor(status), className)} />;
case "RETRYING_AFTER_FAILURE":
return <ArrowPathIcon className={cn(runStatusClassNameColor(status), className)} />;
case "PAUSED":
Expand Down Expand Up @@ -165,7 +164,7 @@ export function runStatusClassNameColor(status: TaskRunStatus): string {
case "RETRYING_AFTER_FAILURE":
return "text-pending";
case "WAITING_TO_RESUME":
return "text-sky-300";
return "text-charcoal-500";
case "PAUSED":
return "text-amber-300";
case "CANCELED":
Expand Down Expand Up @@ -200,7 +199,7 @@ export function runStatusTitle(status: TaskRunStatus): string {
case "EXECUTING":
return "Executing";
case "WAITING_TO_RESUME":
return "Frozen";
return "Waiting";
case "RETRYING_AFTER_FAILURE":
return "Reattempting";
case "PAUSED":
Expand Down
4 changes: 2 additions & 2 deletions docs/runs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@ currently running.
<Icon icon="arrows-rotate" iconType="solid" color="#3B82F6" size={17} /> **Reattempting**: The task has
failed and is being retried.

<Icon icon="snowflake" iconType="solid" color="#68BAF2" size={17} /> **Frozen**: Task has been frozen
and is waiting to be resumed.
<Icon icon="hourglass" iconType="solid" color="#878C99" size={17} /> **Waiting**: You have used a
[triggerAndWait()](/triggering#yourtask-triggerandwait), [batchTriggerAndWait()](/triggering#yourtask-batchtriggerandwait) or a [wait function](/wait). When the wait is complete, the task will resume execution.

### Final States

Expand Down
Loading