From e399f93de7a520f0b8018c22774aa0637616c104 Mon Sep 17 00:00:00 2001
From: Sophie Stadler <sophie.stadler@mongodb.com>
Date: Mon, 12 Feb 2024 17:24:50 -0500
Subject: [PATCH] Add depends on tooltip

---
 src/components/TasksTable/index.tsx   | 25 +++++++++++++++++++++----
 src/gql/generated/types.ts            |  1 +
 src/gql/queries/version-tasks.graphql |  3 +++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/TasksTable/index.tsx b/src/components/TasksTable/index.tsx
index d65a6cef7a..1abdd6f79f 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 {
@@ -18,7 +20,7 @@ import {
   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 +29,7 @@ type TaskTableInfo = {
     status: string;
   };
   buildVariantDisplayName?: string;
+  dependsOn?: Array<{ name: string }>;
   displayName: string;
   executionTasksFull?: TaskTableInfo[];
   id: string;
@@ -172,9 +175,23 @@ 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
+          justify="middle"
+          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({
diff --git a/src/gql/generated/types.ts b/src/gql/generated/types.ts
index 53fdab5136..ea888468a5 100644
--- a/src/gql/generated/types.ts
+++ b/src/gql/generated/types.ts
@@ -8869,6 +8869,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 {