EVG-20606 Display an error for previous commit selector (evergreen-ci…

…#2022)

src/pages/task/ActionButtons.tsx

@@ -38,7 +38,7 @@ import {
 import { useLGButtonRouterLink } from "hooks/useLGButtonRouterLink";
 import { useQueryParam } from "hooks/useQueryParam";
 import { TaskStatus } from "types/task";
-import { PreviousCommits } from "./actionButtons/previousCommits/PreviousCommits";
+import { PreviousCommits } from "./actionButtons/previousCommits";
 import { TaskNotificationModal } from "./actionButtons/TaskNotificationModal";
 
 interface Props {

src/pages/task/actionButtons/previousCommits/PreviousCommits.test.tsx

@@ -1,4 +1,5 @@
 import { MockedProvider } from "@apollo/client/testing";
+import { RenderFakeToastContext } from "context/toast/__mocks__";
 import {
   BaseVersionAndTaskQuery,
   BaseVersionAndTaskQueryVariables,
@@ -11,7 +12,7 @@ import {
 } from "gql/queries";
 import { renderWithRouterMatch, screen, userEvent, waitFor } from "test_utils";
 import { ApolloMock } from "types/gql";
-import { PreviousCommits } from "./PreviousCommits";
+import { PreviousCommits } from ".";
 
 const goButton = { name: "Go" };
 const select = { name: "Previous commits for this task" };
@@ -22,11 +23,12 @@ describe("previous commits", () => {
   // mainline commits needs to run another query GET_LAST_MAINLINE_COMMIT to get previous task.
   describe("patch specific", () => {
     it("the GO button is disabled when there is no base task", async () => {
-      renderWithRouterMatch(
+      const { Component } = RenderFakeToastContext(
         <MockedProvider mocks={[getPatchTaskWithNoBaseTask]}>
           <PreviousCommits taskId="t1" />
         </MockedProvider>
       );
+      renderWithRouterMatch(<Component />);
       await waitFor(() => {
         expect(screen.getByRole("link", goButton)).toHaveAttribute(
           "aria-disabled",
@@ -47,13 +49,15 @@ describe("previous commits", () => {
 
   describe("mainline commits specific", () => {
     it("the GO button is disabled when getParentTask returns null", async () => {
-      renderWithRouterMatch(
+      const { Component } = RenderFakeToastContext(
         <MockedProvider
           mocks={[getMainlineTaskWithBaseVersion, getNullParentTask]}
         >
           <PreviousCommits taskId="t4" />
         </MockedProvider>
       );
+      renderWithRouterMatch(<Component />);
+
       await waitFor(() => {
         expect(screen.getByRole("link", goButton)).toHaveAttribute(
           "aria-disabled",
@@ -72,13 +76,15 @@ describe("previous commits", () => {
     });
 
     it("the GO button is disabled when getParentTask returns an error", async () => {
-      renderWithRouterMatch(
+      const { Component } = RenderFakeToastContext(
         <MockedProvider
           mocks={[getMainlineTaskWithBaseVersion, getParentTaskWithError]}
         >
           <PreviousCommits taskId="t4" />
         </MockedProvider>
       );
+      renderWithRouterMatch(<Component />);
+
       await waitFor(() => {
         expect(screen.getByRole("link", goButton)).toHaveAttribute(
           "aria-disabled",
@@ -98,11 +104,13 @@ describe("previous commits", () => {
   });
 
   it("the select & GO button are disabled when no base version exists", async () => {
-    renderWithRouterMatch(
+    const { Component } = RenderFakeToastContext(
       <MockedProvider mocks={[getPatchTaskWithNoBaseVersion]}>
         <PreviousCommits taskId="t3" />
       </MockedProvider>
     );
+    renderWithRouterMatch(<Component />);
+
     await waitFor(() => {
       expect(screen.getByRole("link", goButton)).toHaveAttribute(
         "aria-disabled",
@@ -119,11 +127,12 @@ describe("previous commits", () => {
 
   it("when base task is passing, all dropdown items generate the same link.", async () => {
     const user = userEvent.setup();
-    renderWithRouterMatch(
+    const { Component } = RenderFakeToastContext(
       <MockedProvider mocks={[getPatchTaskWithSuccessfulBaseTask]}>
         <PreviousCommits taskId="t1" />
       </MockedProvider>
     );
+    renderWithRouterMatch(<Component />);
 
     await waitFor(() => {
       expect(screen.getByRole("link", goButton)).toHaveAttribute(
@@ -151,13 +160,14 @@ describe("previous commits", () => {
 
   it("when base task is failing, 'Go to base commit' and 'Go to last executed' dropdown items generate the same link and 'Go to last passing version' will be different.", async () => {
     const user = userEvent.setup();
-    renderWithRouterMatch(
+    const { Component } = RenderFakeToastContext(
       <MockedProvider
         mocks={[getPatchTaskWithFailingBaseTask, getLastPassingVersion]}
       >
         <PreviousCommits taskId="t1" />
       </MockedProvider>
     );
+    renderWithRouterMatch(<Component />);
 
     await waitFor(() => {
       expect(screen.getByRole("link", goButton)).toHaveAttribute(
@@ -187,7 +197,7 @@ describe("previous commits", () => {
 
   it("when base task is not in a finished state, the last executed & passing task is not the same as the base commit", async () => {
     const user = userEvent.setup();
-    renderWithRouterMatch(
+    const { Component } = RenderFakeToastContext(
       <MockedProvider
         mocks={[
           getPatchTaskWithRunningBaseTask,
@@ -198,6 +208,7 @@ describe("previous commits", () => {
         <PreviousCommits taskId="t3" />
       </MockedProvider>
     );
+    renderWithRouterMatch(<Component />);
 
     await waitFor(() => {
       expect(screen.getByRole("link", goButton)).toHaveAttribute(

src/pages/task/actionButtons/previousCommits/PreviousCommits.tsx → src/pages/task/actionButtons/previousCommits/index.tsx

@@ -2,12 +2,14 @@ import { useReducer, useEffect } from "react";
 import { useLazyQuery, useQuery } from "@apollo/client";
 import styled from "@emotion/styled";
 import Button from "@leafygreen-ui/button";
+import { Spinner } from "@leafygreen-ui/loading-indicator";
 import { Option, Select } from "@leafygreen-ui/select";
 import Tooltip from "@leafygreen-ui/tooltip";
 import { useTaskAnalytics } from "analytics";
 import { ConditionalWrapper } from "components/ConditionalWrapper";
 import { finishedTaskStatuses } from "constants/task";
 import { size } from "constants/tokens";
+import { useToastContext } from "context/toast";
 import {
   BaseVersionAndTaskQuery,
   BaseVersionAndTaskQueryVariables,
@@ -44,6 +46,7 @@ export const PreviousCommits: React.FC<PreviousCommitsProps> = ({ taskId }) => {
     },
     dispatch,
   ] = useReducer(reducer, initialState);
+  const dispatchToast = useToastContext();
 
   const { data: taskData } = useQuery<
     BaseVersionAndTaskQuery,
@@ -52,6 +55,8 @@ export const PreviousCommits: React.FC<PreviousCommitsProps> = ({ taskId }) => {
     variables: { taskId },
   });
 
+  // We don't error for this query because it is the default query that is run when the page loads.
+  // If it errors it probably means there is no base version, which is fine.
   const [fetchParentTask, { loading: parentLoading }] = useLazyQuery<
     LastMainlineCommitQuery,
     LastMainlineCommitQueryVariables
@@ -74,6 +79,9 @@ export const PreviousCommits: React.FC<PreviousCommitsProps> = ({ taskId }) => {
         task: getTaskFromMainlineCommitsQuery(data),
       });
     },
+    onError: (err) => {
+      dispatchToast.error(`Last passing version unavailable: '${err.message}'`);
+    },
   });
 
   const [fetchLastExecuted, { loading: executedLoading }] = useLazyQuery<
@@ -86,6 +94,11 @@ export const PreviousCommits: React.FC<PreviousCommitsProps> = ({ taskId }) => {
         task: getTaskFromMainlineCommitsQuery(data),
       });
     },
+    onError: (err) => {
+      dispatchToast.error(
+        `Could not fetch last task execution: '${err.message}'`
+      );
+    },
   });
 
   const { baseTask, buildVariant, displayName, versionMetadata } =
@@ -202,6 +215,8 @@ export const PreviousCommits: React.FC<PreviousCommitsProps> = ({ taskId }) => {
           disabled={disableButton}
           size="small"
           data-cy="previous-commits-go-button"
+          isLoading={loading}
+          loadingIndicator={<Spinner />}
         >
           Go
         </Button>