DEVPROD-835: Add "Depends On" tooltip (#2256)

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";

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 && (
-        <TaskStatusBadge status={status} id={id} execution={execution} />
+    render: (status: string, { dependsOn, execution, id }) =>
+      dependsOn?.length && status === TaskStatus.Blocked ? (
+        <Tooltip
+          data-cy="depends-on-tooltip"
+          justify="middle"
+          popoverZIndex={zIndex.tooltip}
+          trigger={
+            <span>
+              <TaskStatusBadge status={status} id={id} execution={execution} />
+            </span>
+          }
+        >
+          Depends on {pluralize("task", dependsOn.length)}:{" "}
+          {dependsOn.map(({ name }) => `“${name}”`).join(", ")}
+        </Tooltip>
+      ) : (
+        status && (
+          <TaskStatusBadge status={status} id={id} execution={execution} />
+        )
       ),
     ...(statusSelectorProps && {
       ...getColumnTreeSelectFilterProps({

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;

src/gql/queries/version-tasks.graphql

@@ -17,6 +17,9 @@ query VersionTasks(
         blocked
         buildVariant
         buildVariantDisplayName
+        dependsOn {
+          name
+        }
         displayName
         execution
         executionTasksFull {