fix(ui-v2): handle named pending states (#21931)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Alex S <alex.s@prefect.io>

Author: devin-ai-integration[bot]

ui-v2/src/api/flow-runs/constants.ts

@@ -32,6 +32,7 @@ export const STATE_NAMES = [
 	"AwaitingConcurrencySlot",
 	"Pending",
 	"Submitting",
+	"InfrastructurePending",
 	"Paused",
 	"Suspended",
 	"Running",
@@ -59,6 +60,7 @@ export const STATE_NAME_TO_TYPE: Record<StateName, StateType> = {
 	AwaitingConcurrencySlot: "SCHEDULED",
 	Pending: "PENDING",
 	Submitting: "PENDING",
+	InfrastructurePending: "PENDING",
 	Paused: "PAUSED",
 	Suspended: "PAUSED",
 	Running: "RUNNING",

ui-v2/src/api/flow-runs/state-utilities.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
 import {
 	isPausedState,
+	isPendingLikeState,
 	isRunningState,
 	isStuckState,
 	isTerminalState,
@@ -88,6 +89,24 @@ describe("state-utilities", () => {
 		});
 	});
 
+	describe("isPendingLikeState", () => {
+		it.each([
+			"Pending",
+			"Submitting",
+			"InfrastructurePending",
+		] as const)("returns true for PENDING/%s", (stateName) => {
+			expect(isPendingLikeState("PENDING", stateName)).toBe(true);
+		});
+
+		it("returns true for Scheduled", () => {
+			expect(isPendingLikeState("SCHEDULED", "Scheduled")).toBe(true);
+		});
+
+		it("returns false for AwaitingRetry", () => {
+			expect(isPendingLikeState("SCHEDULED", "AwaitingRetry")).toBe(false);
+		});
+	});
+
 	describe("constants", () => {
 		it("STUCK_STATES contains expected values", () => {
 			expect(STUCK_STATES).toEqual([

ui-v2/src/components/automations/automations-wizard/trigger-step/state-multi-select.test.tsx

@@ -26,7 +26,7 @@ describe("StateMultiSelect", () => {
 		expect(screen.getByText("Any state")).toBeVisible();
 	});
 
-	it("displays all 18 state options in the dropdown", async () => {
+	it("displays all state options in the dropdown", async () => {
 		const user = userEvent.setup();
 
 		render(<StateMultiSelect selectedStates={[]} onStateChange={vi.fn()} />);
@@ -177,6 +177,8 @@ describe("StateMultiSelect", () => {
 		const stateNamesToTest = [
 			"Late",
 			"AwaitingRetry",
+			"Submitting",
+			"InfrastructurePending",
 			"Suspended",
 			"Retrying",
 			"Cached",

ui-v2/src/components/automations/trigger-details/trigger-details-flow-run-state.test.tsx

@@ -69,6 +69,36 @@ describe("TriggerDetailsFlowRunState", () => {
 		expect(screen.getByText("Failed")).toBeInTheDocument();
 	});
 
+	it("renders named pending state badges", () => {
+		render(
+			<TriggerDetailsFlowRunState
+				flowIds={[]}
+				tags={[]}
+				posture="Reactive"
+				states={["Pending", "Submitting", "InfrastructurePending"]}
+			/>,
+			{ wrapper: QueryWrapper },
+		);
+
+		expect(screen.getByText("Pending")).toBeInTheDocument();
+		expect(screen.getByText("Submitting")).toBeInTheDocument();
+		expect(screen.getByText("InfrastructurePending")).toBeInTheDocument();
+	});
+
+	it("does not render badges for inherited object keys", () => {
+		render(
+			<TriggerDetailsFlowRunState
+				flowIds={[]}
+				tags={[]}
+				posture="Reactive"
+				states={["constructor"]}
+			/>,
+			{ wrapper: QueryWrapper },
+		);
+
+		expect(screen.queryByText("constructor")).not.toBeInTheDocument();
+	});
+
 	it("renders 'stays in' for Proactive posture", () => {
 		render(
 			<TriggerDetailsFlowRunState

ui-v2/src/components/automations/trigger-details/trigger-details-flow-run-state.tsx

@@ -1,3 +1,4 @@
+import { STATE_NAME_TO_TYPE, type StateName } from "@/api/flow-runs/constants";
 import type { components } from "@/api/prefect";
 import { FlowLink } from "@/components/flows/flow-link";
 import { StateBadge } from "@/components/ui/state-badge";
@@ -24,6 +25,10 @@ type TriggerDetailsFlowRunStateProps = {
  * and maps them to the uppercase StateType values expected by StateBadge.
  */
 function mapStateNameToStateType(stateName: string): StateType | null {
+	if (Object.hasOwn(STATE_NAME_TO_TYPE, stateName)) {
+		return STATE_NAME_TO_TYPE[stateName as StateName];
+	}
+
 	const normalizedName = stateName.toUpperCase();
 
 	const validStateTypes: StateType[] = [
@@ -83,7 +88,15 @@ export const TriggerDetailsFlowRunState = ({
 				states.map((state) => {
 					const stateType = mapStateNameToStateType(state);
 					if (stateType) {
-						return <StateBadge key={state} type={stateType} />;
+						return (
+							<StateBadge
+								key={state}
+								type={stateType}
+								name={
+									Object.hasOwn(STATE_NAME_TO_TYPE, state) ? state : undefined
+								}
+							/>
+						);
 					}
 					return null;
 				})

ui-v2/src/components/flow-runs/flow-run-details-page/flow-run-details-page.test.tsx

@@ -427,6 +427,35 @@ describe("FlowRunDetailsPage", () => {
 		expect(screen.queryByTestId("flow-run-graph")).not.toBeInTheDocument();
 	});
 
+	it.each([
+		"Submitting",
+		"InfrastructurePending",
+	] as const)("hides FlowRunGraph when flow run state is %s", async (stateName) => {
+		const pendingFlowRun = createFakeFlowRun({
+			name: `${stateName}-flow-run`,
+			state_type: "PENDING",
+			state_name: stateName,
+			state: createFakeState({
+				type: "PENDING",
+				name: stateName,
+			}),
+		});
+
+		server.use(
+			http.get(buildApiUrl("/flow_runs/:id"), () => {
+				return HttpResponse.json(pendingFlowRun);
+			}),
+		);
+
+		renderFlowRunDetailsPage();
+
+		await waitFor(() => {
+			expect(screen.getByText(`${stateName}-flow-run`)).toBeInTheDocument();
+		});
+
+		expect(screen.queryByTestId("flow-run-graph")).not.toBeInTheDocument();
+	});
+
 	it("hides FlowRunGraph and execution tabs when flow run state is SCHEDULED", async () => {
 		const scheduledFlowRun = createFakeFlowRun({
 			name: "scheduled-flow-run",
@@ -525,6 +554,45 @@ describe("FlowRunDetailsPage", () => {
 		).not.toBeInTheDocument();
 	});
 
+	it.each([
+		"Submitting",
+		"InfrastructurePending",
+	] as const)("hides execution tabs for %s flow runs", async (stateName) => {
+		const pendingFlowRun = createFakeFlowRun({
+			name: `${stateName}-tabs-flow-run`,
+			state_type: "PENDING",
+			state_name: stateName,
+			state: createFakeState({
+				type: "PENDING",
+				name: stateName,
+			}),
+		});
+
+		server.use(
+			http.get(buildApiUrl("/flow_runs/:id"), () => {
+				return HttpResponse.json(pendingFlowRun);
+			}),
+		);
+
+		renderFlowRunDetailsPage();
+
+		await waitFor(() => {
+			expect(
+				screen.getByText(`${stateName}-tabs-flow-run`),
+			).toBeInTheDocument();
+		});
+
+		expect(
+			screen.queryByRole("tab", { name: "Task Runs" }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole("tab", { name: "Subflow Runs" }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole("tab", { name: "Artifacts" }),
+		).not.toBeInTheDocument();
+	});
+
 	it("renders FlowRunGraph for FAILED flow runs", async () => {
 		const failedFlowRun = createFakeFlowRun({
 			name: "failed-flow-run",

ui-v2/src/components/flow-runs/flow-runs-list/flow-runs-filters/state-filter.test.tsx

@@ -33,6 +33,27 @@ describe("FlowRunsDataTable -- StateFilter", () => {
 		).toBeVisible();
 	});
 
+	it("includes all pending state names in All except scheduled", async () => {
+		// Setup
+		const user = userEvent.setup();
+		render(<TestStateFilter />);
+		// Test
+		await user.click(screen.getByRole("button", { name: /all run states/i }));
+		await user.click(
+			screen.getByRole("menuitem", { name: /all except scheduled/i }),
+		);
+
+		// Assert
+		expect(screen.getByRole("menuitem", { name: /submitting/i })).toBeVisible();
+		expect(
+			screen.getByRole("menuitem", { name: /infrastructurepending/i }),
+		).toBeVisible();
+		await user.keyboard("{Escape}");
+		expect(
+			screen.getByRole("button", { name: /all except scheduled/i }),
+		).toBeVisible();
+	});
+
 	it("selects All run states option", async () => {
 		// Setup
 		const user = userEvent.setup();

ui-v2/src/components/flow-runs/flow-runs-list/flow-runs-filters/state-filters.constants.ts

@@ -8,6 +8,7 @@ export const FLOW_RUN_STATES = [
 	"AwaitingConcurrencySlot",
 	"Pending",
 	"Submitting",
+	"InfrastructurePending",
 	"Paused",
 	"Suspended",
 	"Running",
@@ -34,6 +35,7 @@ export const FLOW_RUN_STATES_NO_SCHEDULED = FLOW_RUN_STATES.filter(
 export const FLOW_RUN_STATES_WITHOUT_SCHEDULED: FlowRunState[] = [
 	"Pending",
 	"Submitting",
+	"InfrastructurePending",
 	"Paused",
 	"Suspended",
 	"Running",
@@ -53,6 +55,7 @@ export const FLOW_RUN_STATES_MAP = {
 	AwaitingConcurrencySlot: "SCHEDULED",
 	Pending: "PENDING",
 	Submitting: "PENDING",
+	InfrastructurePending: "PENDING",
 	Paused: "PAUSED",
 	Suspended: "PAUSED",
 	Running: "RUNNING",

ui-v2/src/components/task-runs/task-run-state-filter.test.tsx

@@ -182,6 +182,7 @@ describe("TaskRunStateFilter", () => {
 			"AwaitingConcurrencySlot",
 			"Pending",
 			"Submitting",
+			"InfrastructurePending",
 			"Paused",
 			"Suspended",
 			"Running",

ui-v2/src/components/ui/state-badge/state-badge.stories.tsx

@@ -6,7 +6,7 @@ const badgesByState: Record<components["schemas"]["StateType"], string[]> = {
 	COMPLETED: ["Completed"],
 	FAILED: ["Failed"],
 	RUNNING: ["Running"],
-	PENDING: ["Pending"],
+	PENDING: ["Pending", "Submitting", "InfrastructurePending"],
 	PAUSED: ["Paused"],
 	CANCELLED: ["Cancelled"],
 	CANCELLING: ["Cancelling"],