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 {