diff --git a/cypress/integration/version/task_table.ts b/cypress/integration/version/task_table.ts index c119afc102..4af9e0589f 100644 --- a/cypress/integration/version/task_table.ts +++ b/cypress/integration/version/task_table.ts @@ -146,6 +146,22 @@ describe("Task table", () => { }); }); }); + + describe("blocked tasks", () => { + beforeEach(() => { + cy.visit(pathTasks); + waitForTaskTable(); + }); + + it("shows the blocking tasks when hovering over status badge", () => { + cy.dataCy("depends-on-tooltip").should("not.exist"); + cy.dataCy("task-status-badge").contains("Blocked").trigger("mouseover"); + cy.dataCy("depends-on-tooltip").should("be.visible"); + cy.dataCy("depends-on-tooltip").contains( + "Depends on tasks: “test-migrations”, “test-graphql”", + ); + }); + }); }); const dataCyTableDataRows = ".ant-table-cell > .cy-task-table-col-NAME"; diff --git a/src/components/TasksTable/index.tsx b/src/components/TasksTable/index.tsx index d65a6cef7a..a171477321 100644 --- a/src/components/TasksTable/index.tsx +++ b/src/components/TasksTable/index.tsx @@ -1,6 +1,8 @@ +import Tooltip from "@leafygreen-ui/tooltip"; import { Table } from "antd"; import { ColumnProps } from "antd/es/table"; import { SortOrder as antSortOrder } from "antd/lib/table/interface"; +import pluralize from "pluralize"; import { ConditionalWrapper } from "components/ConditionalWrapper"; import { StyledRouterLink } from "components/styles"; import { @@ -12,13 +14,14 @@ import TaskStatusBadge from "components/TaskStatusBadge"; import { TreeSelectProps } from "components/TreeSelect"; import { getVariantHistoryRoute } from "constants/routes"; import { mergeTaskVariant } from "constants/task"; +import { zIndex } from "constants/tokens"; import { Task, SortDirection, SortOrder, TaskSortCategory, } from "gql/generated/types"; -import { TableOnChange } from "types/task"; +import { TableOnChange, TaskStatus } from "types/task"; import { sortTasks } from "utils/statuses"; import { TaskLink } from "./TaskLink"; @@ -27,6 +30,7 @@ type TaskTableInfo = { status: string; }; buildVariantDisplayName?: string; + dependsOn?: Array<{ name: string }>; displayName: string; executionTasksFull?: TaskTableInfo[]; id: string; @@ -172,9 +176,25 @@ const getColumnDefs = ({ multiple: 4, }, className: "cy-task-table-col-STATUS", - render: (status: string, { execution, id }) => - status && ( - + render: (status: string, { dependsOn, execution, id }) => + dependsOn?.length && status === TaskStatus.Blocked ? ( + + + + } + > + Depends on {pluralize("task", dependsOn.length)}:{" "} + {dependsOn.map(({ name }) => `“${name}”`).join(", ")} + + ) : ( + status && ( + + ) ), ...(statusSelectorProps && { ...getColumnTreeSelectFilterProps({ diff --git a/src/gql/generated/types.ts b/src/gql/generated/types.ts index c75561a068..ab69ebc38e 100644 --- a/src/gql/generated/types.ts +++ b/src/gql/generated/types.ts @@ -8870,6 +8870,7 @@ export type VersionTasksQuery = { id: string; status: string; } | null; + dependsOn?: Array<{ __typename?: "Dependency"; name: string }> | null; executionTasksFull?: Array<{ __typename?: "Task"; buildVariant: string; diff --git a/src/gql/queries/version-tasks.graphql b/src/gql/queries/version-tasks.graphql index cd06634c65..6d6f21b599 100644 --- a/src/gql/queries/version-tasks.graphql +++ b/src/gql/queries/version-tasks.graphql @@ -17,6 +17,9 @@ query VersionTasks( blocked buildVariant buildVariantDisplayName + dependsOn { + name + } displayName execution executionTasksFull {