Merge branch 'main' of github.com:evergreen-ci/spruce into DEVPROD-1905

cypress/integration/task/annotations.ts

@@ -2,28 +2,29 @@ const taskWithAnnotations =
   "evergreen_ubuntu1604_test_annotations_b_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48";
 const taskRoute = `/task/${taskWithAnnotations}/annotations`;
 
-const suspectedIssuesTable =
-  "[data-test-id=suspected-issues-table] tr td:first-child";
-const issuesTable = "[data-test-id=issues-table] tr td:first-child";
-
 describe("Task Annotation Tab", () => {
   beforeEach(() => {
     cy.visit(taskRoute);
+    cy.dataCy("loading-annotation-ticket").should("not.exist");
+    const rowSelector = "[data-cy='annotation-ticket-row']";
+    cy.dataCy("issues-list").find(rowSelector).as("issueRows");
+    cy.dataCy("suspected-issues-list").find(rowSelector).as("susIssueRows");
   });
 
   it("annotations can be moved between lists", () => {
-    cy.get(issuesTable).should("have.length", 1);
-    cy.get(suspectedIssuesTable).should("have.length", 3);
-    cy.dataCy("loading-annotation-ticket").should("have.length", 0);
+    cy.dataCy("loading-annotation-ticket").should("not.exist");
+
+    cy.get("@issueRows").should("have.length", 1);
+    cy.get("@susIssueRows").should("have.length", 3);
 
     // move from suspectedIssues to Issues
     cy.dataCy("move-btn-AnotherOne").click();
     cy.contains("button", "Yes")
       .should("be.visible")
       .should("not.have.attr", "aria-disabled", "true");
     cy.contains("button", "Yes").click();
-    cy.get(issuesTable).should("have.length", 2);
-    cy.get(suspectedIssuesTable).should("have.length", 2);
+    cy.get("@issueRows").should("have.length", 2);
+    cy.get("@susIssueRows").should("have.length", 2);
     cy.validateToast("success", "Successfully moved suspected issue to issues");
 
     // move from Issues to suspectedIssues
@@ -32,22 +33,24 @@ describe("Task Annotation Tab", () => {
       .should("be.visible")
       .should("not.have.attr", "aria-disabled", "true");
     cy.contains("button", "Yes").click();
-    cy.get(issuesTable).should("have.length", 1);
-    cy.get(suspectedIssuesTable).should("have.length", 3);
+    cy.get("@issueRows").should("have.length", 1);
+    cy.get("@susIssueRows").should("have.length", 3);
+
     cy.validateToast("success", "Successfully moved issue to suspected issues");
   });
 
   it("annotations add and delete correctly", () => {
-    cy.get(issuesTable).should("have.length", 1);
-    cy.get(suspectedIssuesTable).should("have.length", 3);
+    cy.get("@issueRows").should("have.length", 1);
+    cy.get("@susIssueRows").should("have.length", 3);
+
     cy.dataCy("loading-annotation-ticket").should("have.length", 0);
 
     // add a ticket
     cy.dataCy("add-suspected-issue-button").click();
     cy.dataCy("issue-url").type("https://jira.example.com/browse/SERVER-1234");
     cy.contains("Add suspected issue").click();
-    cy.get(issuesTable).should("have.length", 1);
-    cy.get(suspectedIssuesTable).should("have.length", 4);
+    cy.get("@issueRows").should("have.length", 1);
+    cy.get("@susIssueRows").should("have.length", 4);
     cy.validateToast("success", "Successfully added suspected issue");
 
     // delete the added ticket
@@ -56,8 +59,8 @@ describe("Task Annotation Tab", () => {
       .should("be.visible")
       .should("not.have.attr", "aria-disabled", "true");
     cy.contains("button", "Yes").click();
-    cy.get(issuesTable).should("have.length", 1);
-    cy.get(suspectedIssuesTable).should("have.length", 3);
+    cy.get("@issueRows").should("have.length", 1);
+    cy.get("@susIssueRows").should("have.length", 3);
     cy.validateToast("success", "Successfully removed suspected issue");
   });
 });

src/components/Header/Navbar.tsx

@@ -7,6 +7,7 @@ import Cookies from "js-cookie";
 import { Link, useParams } from "react-router-dom";
 import { useNavbarAnalytics } from "analytics";
 import Icon from "components/Icon";
+import ChristmasTree from "components/Icon/icons/ChristmasTree.svg";
 import { CURRENT_PROJECT } from "constants/cookies";
 import { wikiUrl } from "constants/externalResources";
 import { getCommitsRoute, getUserPatchesRoute, routes } from "constants/routes";
@@ -60,7 +61,7 @@ export const Navbar: React.FC = () => {
           to={routes.myPatches}
           onClick={() => sendEvent({ name: "Click Logo Link" })}
         >
-          <Icon glyph="EvergreenLogo" size={32} />
+          <ChristmasTreeIcon src={ChristmasTree} alt="Evergreen Logo" />
         </LogoLink>
         <PrimaryLink
           data-cy="project-health-link"
@@ -172,3 +173,10 @@ const secondaryStyle = css`
 const SecondaryLink = styled.a`
   ${secondaryStyle}
 `;
+
+const ChristmasTreeIcon = styled.img`
+  height: 46px;
+  width: 46px;
+  position: relative;
+  bottom: 4px;
+`;

src/gql/mocks/taskData.ts

@@ -17,12 +17,12 @@ export const taskQuery: TaskQuery = {
     details: {
       description:
         "Long description that requirese use of the inline definition component. This would include details about where the task failed.",
+      diskDevices: [],
       oomTracker: {
         detected: false,
       },
       status: TaskStatus.Failed,
       type: "type",
-      diskDevices: [],
     },
     timeTaken: null,
     annotation: null,

src/pages/configurePatch/configurePatchCore/index.tsx

@@ -12,9 +12,14 @@ import {
   MetadataItem,
   MetadataTitle,
 } from "components/MetadataCard";
-import { PageContent, PageLayout, PageSider } from "components/styles";
+import {
+  StyledRouterLink,
+  PageContent,
+  PageLayout,
+  PageSider,
+} from "components/styles";
 import { StyledTabs } from "components/styles/StyledTabs";
-import { getVersionRoute } from "constants/routes";
+import { getProjectPatchesRoute, getVersionRoute } from "constants/routes";
 import { fontSize, size } from "constants/tokens";
 import { useToastContext } from "context/toast";
 import {
@@ -53,6 +58,7 @@ const ConfigurePatchCore: React.FC<ConfigurePatchCoreProps> = ({ patch }) => {
     id,
     patchTriggerAliases,
     project,
+    projectIdentifier,
     time,
     variantsTasks,
   } = patch;
@@ -183,6 +189,12 @@ const ConfigurePatchCore: React.FC<ConfigurePatchCoreProps> = ({ patch }) => {
             <MetadataTitle>Patch Metadata</MetadataTitle>
             <MetadataItem>Submitted by: {author}</MetadataItem>
             <MetadataItem>Submitted at: {time.submittedAt}</MetadataItem>
+            <MetadataItem>
+              Project:{" "}
+              <StyledRouterLink to={getProjectPatchesRoute(projectIdentifier)}>
+                {projectIdentifier}
+              </StyledRouterLink>
+            </MetadataItem>
           </MetadataCard>
           <ConfigureBuildVariants
             variants={getVariantEntries(variants, selectedBuildVariantTasks)}

src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow.stories.tsx → src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/AnnotationTicketRow.stories.tsx

@@ -1,5 +1,5 @@
 import { CustomStoryObj, CustomMeta } from "test_utils/types";
-import { AnnotationTicketRow } from "./AnnotationTicketRow";
+import AnnotationTicketRow from ".";
 
 export default {
   component: AnnotationTicketRow,
@@ -29,6 +29,7 @@ export const Default: CustomStoryObj<typeof AnnotationTicketRow> = {
   ),
   args: {
     confidenceScore: 0.5,
+    loading: false,
   },
   argTypes: {
     confidenceScore: {

src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow.tsx → src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import Badge from "@leafygreen-ui/badge";
+import { Skeleton } from "@leafygreen-ui/skeleton-loader";
 import { Disclaimer } from "@leafygreen-ui/typography";
-import { Skeleton } from "antd";
 import { useAnnotationAnalytics } from "analytics";
 import { StyledLink } from "components/styles";
 import { size } from "constants/tokens";
@@ -12,14 +12,14 @@ import { numbers } from "utils";
 const { roundDecimal, toPercent } = numbers;
 
 interface AnnotationTicketRowProps {
-  issueKey: string;
-  url: string;
+  issueKey?: string;
+  url?: string;
   jiraTicket?: JiraTicket;
   loading?: boolean;
   confidenceScore?: number;
 }
 
-export const AnnotationTicketRow: React.FC<AnnotationTicketRowProps> = ({
+const AnnotationTicketRow: React.FC<AnnotationTicketRowProps> = ({
   confidenceScore,
   issueKey,
   jiraTicket,
@@ -38,27 +38,31 @@ export const AnnotationTicketRow: React.FC<AnnotationTicketRowProps> = ({
     updated,
   } = fields ?? {};
 
+  const jiraLink = (
+    <JiraSummaryLink
+      href={url}
+      target="_blank"
+      data-cy={issueKey}
+      onClick={() =>
+        annotationAnalytics.sendEvent({
+          name: "Click Annotation Ticket Link",
+        })
+      }
+    >
+      {issueKey}
+      {summary && `: ${summary}`}
+    </JiraSummaryLink>
+  );
   return (
-    <div data-cy="annotation-ticket-row">
-      <JiraSummaryLink
-        href={url}
-        target="_blank"
-        data-cy={issueKey}
-        onClick={() =>
-          annotationAnalytics.sendEvent({
-            name: "Click Annotation Ticket Link",
-          })
-        }
-      >
-        {issueKey}
-        {summary && `: ${summary}`}
-      </JiraSummaryLink>
+    <Container data-cy="annotation-ticket-row">
       {loading ? (
-        <LoadingWrapper data-cy="loading-annotation-ticket">
-          <Skeleton active title={false} />
-        </LoadingWrapper>
+        <>
+          {jiraLink}
+          <Skeleton data-cy="loading-annotation-ticket" />
+        </>
       ) : (
         <>
+          {jiraLink}
           {jiraTicket && (
             <StyledBadge data-cy={`${issueKey}-badge`} variant="lightgray">
               {status.name}
@@ -95,12 +99,11 @@ export const AnnotationTicketRow: React.FC<AnnotationTicketRowProps> = ({
           </BottomMetaDataWrapper>
         </>
       )}
-    </div>
+    </Container>
   );
 };
-
-const LoadingWrapper = styled.div`
-  margin-top: ${size.xs};
+const Container = styled.div`
+  width: 100%;
 `;
 
 const JiraSummaryLink = styled(StyledLink)`
@@ -118,3 +121,6 @@ const BottomMetaDataWrapper = styled.div`
   margin-top: ${size.xs};
   width: 80%;
 `;
+
+export default AnnotationTicketRow;
+export type { AnnotationTicketRowProps };

src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/AnnotationTicketRowWithAction.stories.tsx

@@ -0,0 +1,35 @@
+import { CustomMeta, CustomStoryObj } from "test_utils/types";
+import AnnotationTicketRowWithActionProps from ".";
+
+export default {
+  component: AnnotationTicketRowWithActionProps,
+} satisfies CustomMeta<typeof AnnotationTicketRowWithActionProps>;
+
+export const Default: CustomStoryObj<
+  typeof AnnotationTicketRowWithActionProps
+> = {
+  render: (args) => <AnnotationTicketRowWithActionProps {...args} />,
+  argTypes: {},
+  args: {
+    issueKey: "EVG-123",
+    url: "https://www.google.com",
+    jiraTicket: {
+      key: "key",
+      fields: {
+        summary: "summary",
+        status: {
+          name: "status",
+          id: "id",
+        },
+        created: "2020-01-02",
+        updated: "2020-01-02",
+        assigneeDisplayName: "mohamed.khelif",
+        assignedTeam: "evg-ui",
+      },
+    },
+    confidenceScore: 0.5,
+    loading: false,
+    userCanModify: true,
+    isIssue: true,
+  },
+};