Merge branch 'main' of https://github.com/evergreen-ci/spruce into DE…

…VPROD-838

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spruce",
-  "version": "3.0.211",
+  "version": "3.0.213",
   "private": true,
   "scripts": {
     "bootstrap-logkeeper": "./scripts/bootstrap-logkeeper.sh",
@@ -87,7 +87,7 @@
     "@leafygreen-ui/search-input": "2.0.8",
     "@leafygreen-ui/segmented-control": "8.2.6",
     "@leafygreen-ui/select": "11.1.1",
-    "@leafygreen-ui/side-nav": "14.0.3",
+    "@leafygreen-ui/side-nav": "14.1.0",
     "@leafygreen-ui/skeleton-loader": "1.1.0",
     "@leafygreen-ui/table": "12.3.0",
     "@leafygreen-ui/tabs": "11.0.4",
@@ -149,7 +149,7 @@
     "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.1",
-    "@types/jest": "29.4.0",
+    "@types/jest": "29.5.12",
     "@types/jest-specific-snapshot": "0.5.9",
     "@types/js-cookie": "^3.0.4",
     "@types/lodash.debounce": "4.0.7",
@@ -188,7 +188,7 @@
     "http-proxy": "^1.18.1",
     "husky": "8.0.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.5.0",
+    "jest": "29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "15.0.0",

scripts/deploy/deploy.sh

@@ -1,8 +1,12 @@
-#!/bin/sh
+#!/bin/bash
 
-# This script runs the aws cli command to deploy the app to s3
+# This script runs the AWS CLI command to deploy the app to S3.
 
-# Try this step and throw an error if it fails
 echo "Deploying to S3"
-aws s3 sync build/ s3://"${BUCKET}"/ --acl public-read --follow-symlinks --delete --exclude .env-cmdrc.json 
-echo "Deployed to S3"
+
+if ! aws s3 sync build/ s3://"${BUCKET}"/ --acl public-read --follow-symlinks --delete --exclude .env-cmdrc.json; then
+  echo "Deployment to S3 failed"
+  exit 1
+else
+  echo "Successfully deployed to S3"
+fi

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

@@ -8873,6 +8873,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 {

src/pages/spawn/spawnHost/EditSpawnHostButton.tsx

@@ -52,6 +52,7 @@ export const EditSpawnHostButton: React.FC<EditSpawnHostButtonProps> = ({
         </Tooltip>
       </span>
       <EditSpawnHostModal
+        key={host.id}
         onCancel={() => setOpenModal(false)}
         visible={openModal}
         host={host}

src/pages/taskHistory/BuildVariantSelector.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useState } from "react";
 import { useQuery } from "@apollo/client";
 import styled from "@emotion/styled";
 import { Combobox, ComboboxOption } from "@leafygreen-ui/combobox";
@@ -24,7 +25,7 @@ const BuildVariantSelector: React.FC<BuildVariantSelectorProps> = ({
     HistoryQueryParams.VisibleColumns,
     [],
   );
-
+  const [filteredOptions, setFilteredOptions] = useState<string[]>([]);
   const { data, loading } = useQuery<
     BuildVariantsForTaskNameQuery,
     BuildVariantsForTaskNameQueryVariables
@@ -35,16 +36,39 @@ const BuildVariantSelector: React.FC<BuildVariantSelectorProps> = ({
     },
   });
 
+  /**
+   * `onChange` is a callback function that is called when the user selects a build variant
+   * @param selectedBuildVariants - an array of build variants that the user has selected
+   */
   const onChange = (selectedBuildVariants: string[]) => {
     sendEvent({
       name: "Filter by build variant",
     });
 
     setVisibleColumns(selectedBuildVariants);
   };
-
   const { buildVariantsForTaskName } = data || {};
 
+  /**
+   * `onFilter` is a callback function that is called when the user types in the search bar
+   */
+  const onFilter = useCallback(
+    (value: string) => {
+      setFilteredOptions(
+        (buildVariantsForTaskName || [])
+          .filter(({ buildVariant, displayName }) => {
+            const trimmedValue = value.toLowerCase().trim();
+            return (
+              buildVariant.toLowerCase().includes(trimmedValue) ||
+              displayName.toLowerCase().includes(trimmedValue)
+            );
+          })
+          .map((option) => option.buildVariant) || [],
+      );
+    },
+    [buildVariantsForTaskName],
+  );
+
   return (
     <Container>
       <Combobox
@@ -56,6 +80,8 @@ const BuildVariantSelector: React.FC<BuildVariantSelectorProps> = ({
         onChange={onChange}
         disabled={loading}
         overflow="scroll-x"
+        onFilter={onFilter}
+        filteredOptions={filteredOptions}
       >
         {buildVariantsForTaskName?.map((option) => (
           <ComboboxOption