From 189c5a2f1e6b5337611caed992f938762a5ccfdd Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Fri, 1 Dec 2023 13:04:46 -0500
Subject: [PATCH 01/12] Move annotationTicketRow stories

---
 .../{ => AnnotationTicketRow}/AnnotationTicketRow.stories.tsx  | 3 ++-
 .../__snapshots__/AnnotationTicketRow.stories.storyshot        | 0
 .../{AnnotationTicketRow.tsx => AnnotationTicketRow/index.tsx} | 0
 3 files changed, 2 insertions(+), 1 deletion(-)
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/{ => AnnotationTicketRow}/AnnotationTicketRow.stories.tsx (93%)
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/{ => AnnotationTicketRow}/__snapshots__/AnnotationTicketRow.stories.storyshot (100%)
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/{AnnotationTicketRow.tsx => AnnotationTicketRow/index.tsx} (100%)

diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow.stories.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/AnnotationTicketRow.stories.tsx
similarity index 93%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow.stories.tsx
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/AnnotationTicketRow.stories.tsx
index 644a5e856e..c6f9ea268e 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow.stories.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/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: {
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/__snapshots__/AnnotationTicketRow.stories.storyshot b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/__snapshots__/AnnotationTicketRow.stories.storyshot
similarity index 100%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/__snapshots__/AnnotationTicketRow.stories.storyshot
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/__snapshots__/AnnotationTicketRow.stories.storyshot
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx
similarity index 100%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow.tsx
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx

From 1f2ca59440c564d85c9d560d6f9a4b874b49c43b Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Fri, 1 Dec 2023 13:12:14 -0500
Subject: [PATCH 02/12] Remove antd skeleton

---
 .../AnnotationTicketRow/index.tsx             | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx
index 57564548b8..1e833498ca 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/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";
@@ -40,25 +40,25 @@ export const AnnotationTicketRow: React.FC<AnnotationTicketRowProps> = ({
 
   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>
       {loading ? (
         <LoadingWrapper data-cy="loading-annotation-ticket">
-          <Skeleton active title={false} />
+          <Skeleton />
         </LoadingWrapper>
       ) : (
         <>
+          <JiraSummaryLink
+            href={url}
+            target="_blank"
+            data-cy={issueKey}
+            onClick={() =>
+              annotationAnalytics.sendEvent({
+                name: "Click Annotation Ticket Link",
+              })
+            }
+          >
+            {issueKey}
+            {summary && `: ${summary}`}
+          </JiraSummaryLink>
           {jiraTicket && (
             <StyledBadge data-cy={`${issueKey}-badge`} variant="lightgray">
               {status.name}

From 31f2cce37626c46b5de594ae04eac628d5068525 Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Fri, 1 Dec 2023 13:13:10 -0500
Subject: [PATCH 03/12] Remove barrel export

---
 .../AnnotationTicketsTable/AnnotationTicketsTable.test.tsx     | 2 +-
 .../buildBaronAndAnnotations/AnnotationTicketsTable/index.ts   | 3 ---
 .../{AnnotationTicketsTable.tsx => index.tsx}                  | 0
 3 files changed, 1 insertion(+), 4 deletions(-)
 delete mode 100644 src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.ts
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/{AnnotationTicketsTable.tsx => index.tsx} (100%)

diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.test.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.test.tsx
index 722b075997..d329cbd7ff 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.test.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.test.tsx
@@ -11,7 +11,7 @@ import { getUserMock } from "gql/mocks/getUser";
 import { MOVE_ANNOTATION, REMOVE_ANNOTATION } from "gql/mutations";
 import { renderWithRouterMatch as render, screen } from "test_utils";
 import { ApolloMock } from "types/gql";
-import AnnotationTicketsTable from "./AnnotationTicketsTable";
+import AnnotationTicketsTable from ".";
 
 const taskId =
   "spruce_ubuntu1604_e2e_test_e0ece5ad52ad01630bdf29f55b9382a26d6256b3_20_08_26_19_20_41";
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.ts b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.ts
deleted file mode 100644
index 416ea6210c..0000000000
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import AnnotationTicketsTable from "./AnnotationTicketsTable";
-
-export { AnnotationTicketsTable };
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.tsx
similarity index 100%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.tsx
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.tsx

From 33a3062da03bcf11ac989cf021f498ea7a66d8a0 Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Fri, 1 Dec 2023 13:34:52 -0500
Subject: [PATCH 04/12] AnnotationTicketsTable stories

---
 .../AnnotationTicketsTable.stories.tsx        | 61 +++++++++++++++++++
 .../Issues/AnnotationTickets.tsx              |  2 +-
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.stories.tsx

diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.stories.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.stories.tsx
new file mode 100644
index 0000000000..09a7457140
--- /dev/null
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.stories.tsx
@@ -0,0 +1,61 @@
+import WithToastContext from "test_utils/toast-decorator";
+import { CustomMeta, CustomStoryObj } from "test_utils/types";
+import AnnotationTicketsTable from ".";
+
+export default {
+  component: AnnotationTicketsTable,
+  decorators: [(Story: () => JSX.Element) => WithToastContext(Story)],
+} satisfies CustomMeta<typeof AnnotationTicketsTable>;
+
+export const Default: CustomStoryObj<typeof AnnotationTicketsTable> = {
+  render: (args) => <AnnotationTicketsTable {...args} />,
+  argTypes: {},
+  args: {
+    execution: 0,
+    isIssue: true,
+    taskId: "taskId",
+    userCanModify: true,
+    selectedRowKey: "key",
+    loading: false,
+    jiraIssues: [
+      {
+        confidenceScore: 0.5,
+        issueKey: "DEVPROD-123",
+        url: "https://example.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.99,
+        issueKey: "DEVPROD-456",
+        url: "https://example.com",
+        jiraTicket: {
+          key: "key2",
+          fields: {
+            summary: "other summary",
+            status: {
+              name: "failed",
+              id: "id",
+            },
+            created: "2020-01-02",
+            updated: "2020-01-02",
+            assigneeDisplayName: "sophie.stadler",
+            assignedTeam: "evg-ui",
+          },
+        },
+      },
+    ],
+  },
+};
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx
index 54fda20810..7f7f79913b 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx
@@ -6,7 +6,7 @@ import { PlusButton } from "components/Buttons";
 import { size } from "constants/tokens";
 import { IssueLink } from "gql/generated/types";
 import { AddIssueModal } from "../AddIssueModal";
-import { AnnotationTicketsTable } from "../AnnotationTicketsTable";
+import AnnotationTicketsTable from "../AnnotationTicketsTable";
 import { TicketsTitle } from "../BBComponents";
 
 interface AnnotationTicketsProps {

From 8df50df6aa053aa27827ee8dde326aa5c7d457c1 Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Fri, 1 Dec 2023 14:12:45 -0500
Subject: [PATCH 05/12] Extract annotationticketrow with actions into its own
 component

---
 .../AnnotationTicketRow.stories.tsx           |   2 +-
 .../AnnotationTicketRow/index.tsx             |   5 +-
 .../AnnotationTicketRowWithAction.stories.tsx |  35 ++++++
 .../AnnotationTicketRowWithActions/index.tsx  | 109 ++++++++++++++++++
 .../CustomCreatedTicketsTable.tsx             |   2 +-
 5 files changed, 150 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/AnnotationTicketRowWithAction.stories.tsx
 create mode 100644 src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/index.tsx

diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/AnnotationTicketRow.stories.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/AnnotationTicketRow.stories.tsx
index c6f9ea268e..d78a9af141 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/AnnotationTicketRow.stories.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/AnnotationTicketRow.stories.tsx
@@ -1,5 +1,5 @@
 import { CustomStoryObj, CustomMeta } from "test_utils/types";
-import { AnnotationTicketRow } from ".";
+import AnnotationTicketRow from ".";
 
 export default {
   component: AnnotationTicketRow,
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx
index 1e833498ca..8c06233edd 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx
@@ -19,7 +19,7 @@ interface AnnotationTicketRowProps {
   confidenceScore?: number;
 }
 
-export const AnnotationTicketRow: React.FC<AnnotationTicketRowProps> = ({
+const AnnotationTicketRow: React.FC<AnnotationTicketRowProps> = ({
   confidenceScore,
   issueKey,
   jiraTicket,
@@ -118,3 +118,6 @@ const BottomMetaDataWrapper = styled.div`
   margin-top: ${size.xs};
   width: 80%;
 `;
+
+export default AnnotationTicketRow;
+export type { AnnotationTicketRowProps };
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/AnnotationTicketRowWithAction.stories.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/AnnotationTicketRowWithAction.stories.tsx
new file mode 100644
index 0000000000..c1d971496d
--- /dev/null
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/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,
+  },
+};
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/index.tsx
new file mode 100644
index 0000000000..21343127ba
--- /dev/null
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/index.tsx
@@ -0,0 +1,109 @@
+import styled from "@emotion/styled";
+import Button, { Size } from "@leafygreen-ui/button";
+import Tooltip from "@leafygreen-ui/tooltip";
+import { ConditionalWrapper } from "components/ConditionalWrapper";
+import Icon from "components/Icon";
+import Popconfirm from "components/Popconfirm";
+import { size } from "constants/tokens";
+import AnnotationTicketRow, {
+  AnnotationTicketRowProps,
+} from "../AnnotationTicketRow";
+
+interface AnnotationTicketRowWithActionsProps extends AnnotationTicketRowProps {
+  onRemove: (url: string, issueKey: string) => void;
+  userCanModify: boolean;
+  onMove: ({
+    confidenceScore,
+    issueKey,
+    url,
+  }: {
+    url: string;
+    issueKey: string;
+    confidenceScore?: number;
+  }) => void;
+  issueString: string;
+  isIssue: boolean;
+}
+
+const AnnotationTicketRowWithActions: React.FC<
+  AnnotationTicketRowWithActionsProps
+> = ({ isIssue, issueString, onMove, onRemove, userCanModify, ...rest }) => {
+  const { confidenceScore, issueKey, url } = rest;
+  return (
+    <Container>
+      <AnnotationTicketRow {...rest} />
+      <ButtonContainer>
+        {ConditionalWrapper({
+          condition: userCanModify,
+          wrapper: (children: JSX.Element) => (
+            <Popconfirm
+              align="right"
+              onConfirm={() => {
+                onMove({ url, issueKey, confidenceScore });
+              }}
+              trigger={children}
+            >
+              Do you want to move this {issueString} to{" "}
+              {isIssue ? "suspected issues" : "issues"}?
+            </Popconfirm>
+          ),
+          altWrapper: (children: JSX.Element) => (
+            <Tooltip trigger={children}>
+              You are not authorized to edit failure details
+            </Tooltip>
+          ),
+          children: (
+            <Button
+              size={Size.Small}
+              data-cy={`move-btn-${issueKey}`}
+              disabled={!userCanModify}
+              leftGlyph={<Icon glyph={isIssue ? "ArrowDown" : "ArrowUp"} />}
+            >
+              Move to {isIssue ? "suspected issues" : "issues"}
+            </Button>
+          ),
+        })}
+        {ConditionalWrapper({
+          condition: userCanModify,
+          wrapper: (children: JSX.Element) => (
+            <Popconfirm
+              align="right"
+              onConfirm={() => {
+                onRemove(url, issueKey);
+              }}
+              trigger={children}
+            >
+              Do you want to delete this {issueString}?
+            </Popconfirm>
+          ),
+          altWrapper: (children: JSX.Element) => (
+            <Tooltip trigger={children}>
+              You are not authorized to edit failure details
+            </Tooltip>
+          ),
+          children: (
+            <Button
+              size="small"
+              data-cy={`${issueKey}-delete-btn`}
+              leftGlyph={<Icon glyph="Trash" />}
+              disabled={!userCanModify}
+            />
+          ),
+        })}
+      </ButtonContainer>
+    </Container>
+  );
+};
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: ${size.xs};
+`;
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export default AnnotationTicketRowWithActions;
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTicketsTable.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTicketsTable.tsx
index a5c599f050..c40ec8834e 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTicketsTable.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTicketsTable.tsx
@@ -1,5 +1,5 @@
 import { Table } from "antd";
-import { AnnotationTicketRow } from "../AnnotationTicketsTable/AnnotationTicketRow";
+import AnnotationTicketRow from "../AnnotationTicketsTable/AnnotationTicketRow";
 import {
   AnnotationTickets,
   AnnotationTicket,

From 0c70fa0253cd2533d16ed870a954233f2b51c53f Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Fri, 1 Dec 2023 14:45:07 -0500
Subject: [PATCH 06/12] Convert annotationTicketsTable into a list

---
 .../AnnotationTicketRow/index.tsx             |   4 +-
 .../AnnotationTicketRowWithActions/index.tsx  |   2 +-
 .../AnnotationTicketsTable/index.tsx          | 149 ++++--------------
 3 files changed, 35 insertions(+), 120 deletions(-)

diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx
index 8c06233edd..97cb98f64f 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx
@@ -12,8 +12,8 @@ import { numbers } from "utils";
 const { roundDecimal, toPercent } = numbers;
 
 interface AnnotationTicketRowProps {
-  issueKey: string;
-  url: string;
+  issueKey?: string;
+  url?: string;
   jiraTicket?: JiraTicket;
   loading?: boolean;
   confidenceScore?: number;
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/index.tsx
index 21343127ba..24d2a0e302 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/index.tsx
@@ -18,7 +18,7 @@ interface AnnotationTicketRowWithActionsProps extends AnnotationTicketRowProps {
     url,
   }: {
     url: string;
-    issueKey: string;
+    issueKey?: string;
     confidenceScore?: number;
   }) => void;
   issueString: string;
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.tsx
index 078dac345b..8c4d2f2f2b 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.tsx
@@ -1,13 +1,8 @@
 import { useEffect, useRef } from "react";
 import { useMutation } from "@apollo/client";
 import styled from "@emotion/styled";
-import Button from "@leafygreen-ui/button";
-import Icon, { Size } from "@leafygreen-ui/icon";
-import Tooltip from "@leafygreen-ui/tooltip";
-import { Table } from "antd";
+import { palette } from "@leafygreen-ui/palette";
 import { useAnnotationAnalytics } from "analytics";
-import { ConditionalWrapper } from "components/ConditionalWrapper";
-import Popconfirm from "components/Popconfirm";
 import { size } from "constants/tokens";
 import { useToastContext } from "context/toast";
 import {
@@ -17,8 +12,10 @@ import {
   RemoveAnnotationIssueMutationVariables,
 } from "gql/generated/types";
 import { MOVE_ANNOTATION, REMOVE_ANNOTATION } from "gql/mutations";
-import { AnnotationTicketRow } from "./AnnotationTicketRow";
-import { AnnotationTickets, AnnotationTicket } from "./types";
+import AnnotationTicketRowWithActions from "./AnnotationTicketRowWithActions";
+import { AnnotationTickets } from "./types";
+
+const { gray } = palette;
 
 interface AnnotationTicketsProps {
   jiraIssues: AnnotationTickets;
@@ -45,94 +42,6 @@ const AnnotationTicketsTable: React.FC<AnnotationTicketsProps> = ({
   const dispatchToast = useToastContext();
   const issueString = isIssue ? "issue" : "suspected issue";
 
-  const columns = [
-    {
-      title: "Ticket",
-      width: "65%",
-      render: ({
-        confidenceScore,
-        issueKey,
-        jiraTicket,
-        url,
-      }: AnnotationTicket): JSX.Element => (
-        <AnnotationTicketRow
-          issueKey={issueKey}
-          url={url}
-          jiraTicket={jiraTicket}
-          confidenceScore={confidenceScore}
-          loading={loading}
-        />
-      ),
-    },
-    {
-      render: ({
-        confidenceScore,
-        issueKey,
-        url,
-      }: AnnotationTicket): JSX.Element => (
-        <ButtonContainer>
-          {ConditionalWrapper({
-            condition: userCanModify,
-            wrapper: (children: JSX.Element) => (
-              <Popconfirm
-                align="right"
-                onConfirm={() => {
-                  handleMove({ url, issueKey, confidenceScore });
-                }}
-                trigger={children}
-              >
-                Do you want to move this {issueString} to{" "}
-                {isIssue ? "suspected issues" : "issues"}?
-              </Popconfirm>
-            ),
-            altWrapper: (children: JSX.Element) => (
-              <Tooltip trigger={children}>
-                You are not authorized to edit failure details
-              </Tooltip>
-            ),
-            children: (
-              <Button
-                size={Size.Small}
-                data-cy={`move-btn-${issueKey}`}
-                disabled={!userCanModify}
-                leftGlyph={<Icon glyph={isIssue ? "ArrowDown" : "ArrowUp"} />}
-              >
-                Move to {isIssue ? "suspected issues" : "issues"}
-              </Button>
-            ),
-          })}
-          {ConditionalWrapper({
-            condition: userCanModify,
-            wrapper: (children: JSX.Element) => (
-              <Popconfirm
-                align="right"
-                onConfirm={() => {
-                  handleRemove(url, issueKey);
-                }}
-                trigger={children}
-              >
-                Do you want to delete this {issueString}?
-              </Popconfirm>
-            ),
-            altWrapper: (children: JSX.Element) => (
-              <Tooltip trigger={children}>
-                You are not authorized to edit failure details
-              </Tooltip>
-            ),
-            children: (
-              <Button
-                size="small"
-                data-cy={`${issueKey}-delete-btn`}
-                leftGlyph={<Icon glyph="Trash" />}
-                disabled={!userCanModify}
-              />
-            ),
-          })}
-        </ButtonContainer>
-      ),
-    },
-  ];
-
   const [removeAnnotation] = useMutation<
     RemoveAnnotationIssueMutation,
     RemoveAnnotationIssueMutationVariables
@@ -199,7 +108,7 @@ const AnnotationTicketsTable: React.FC<AnnotationTicketsProps> = ({
   // SCROLL TO added Issue
   // Will add a span with a ref to the row that matches the selectedRowKey
   // And will scroll to that ref.
-  const rowRef = useRef<HTMLSpanElement>(null);
+  const rowRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (selectedRowKey && rowRef.current) {
@@ -211,28 +120,34 @@ const AnnotationTicketsTable: React.FC<AnnotationTicketsProps> = ({
   }, [selectedRowKey]);
 
   return (
-    <Table
-      tableLayout="fixed"
-      data-test-id={isIssue ? "issues-table" : "suspected-issues-table"}
-      dataSource={jiraIssues}
-      rowKey={({ issueKey }) => issueKey}
-      columns={columns}
-      pagination={false}
-      showHeader={false}
-      rowSelection={{
-        renderCell: (_, record) =>
-          record.issueKey === selectedRowKey && <span ref={rowRef} />,
-        selectedRowKeys: [selectedRowKey],
-        columnWidth: 0,
-      }}
-    />
+    <>
+      {jiraIssues.map((issue) => (
+        <ItemContainer
+          key={issue.issueKey}
+          ref={issue.issueKey === selectedRowKey ? rowRef : null}
+          selected={issue.issueKey === selectedRowKey}
+        >
+          <AnnotationTicketRowWithActions
+            isIssue={isIssue}
+            issueString={issueString}
+            onMove={handleMove}
+            onRemove={handleRemove}
+            userCanModify={userCanModify}
+            loading={loading}
+            {...issue}
+          />
+        </ItemContainer>
+      ))}
+    </>
   );
 };
-
-const ButtonContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  gap: ${size.xs};
+const ItemContainer = styled.div`
+  padding: ${size.xs};
+  ${({ selected }: { selected?: boolean }) =>
+    selected &&
+    `
+    background-color: ${gray.light2};
+  `}
 `;
 
 export default AnnotationTicketsTable;

From 81c527a3ced52bbca1c8d063ca74c07bc8564fb8 Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Fri, 1 Dec 2023 16:31:48 -0500
Subject: [PATCH 07/12] AnnotationTicketsTable -> AnnotationTicketsList

---
 .../AnnotationTicketRow.stories.tsx                    |  0
 .../AnnotationTicketRow.stories.storyshot              |  0
 .../AnnotationTicketRow/index.tsx                      |  0
 .../AnnotationTicketRowWithAction.stories.tsx          |  0
 .../AnnotationTicketRowWithActions/index.tsx           |  0
 .../AnnotationTicketsList.stories.tsx}                 | 10 +++++-----
 .../AnnotationTicketsList.test.tsx}                    |  6 +++---
 .../index.tsx                                          |  6 +++---
 .../types.ts                                           |  0
 .../CreatedTicketsTable/CustomCreatedTicketsTable.tsx  |  4 ++--
 .../Issues/AnnotationTickets.tsx                       |  4 ++--
 11 files changed, 15 insertions(+), 15 deletions(-)
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/{AnnotationTicketsTable => AnnotationTicketsList}/AnnotationTicketRow/AnnotationTicketRow.stories.tsx (100%)
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/{AnnotationTicketsTable => AnnotationTicketsList}/AnnotationTicketRow/__snapshots__/AnnotationTicketRow.stories.storyshot (100%)
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/{AnnotationTicketsTable => AnnotationTicketsList}/AnnotationTicketRow/index.tsx (100%)
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/{AnnotationTicketsTable => AnnotationTicketsList}/AnnotationTicketRowWithActions/AnnotationTicketRowWithAction.stories.tsx (100%)
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/{AnnotationTicketsTable => AnnotationTicketsList}/AnnotationTicketRowWithActions/index.tsx (100%)
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/{AnnotationTicketsTable/AnnotationTicketsTable.stories.tsx => AnnotationTicketsList/AnnotationTicketsList.stories.tsx} (84%)
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/{AnnotationTicketsTable/AnnotationTicketsTable.test.tsx => AnnotationTicketsList/AnnotationTicketsList.test.tsx} (95%)
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/{AnnotationTicketsTable => AnnotationTicketsList}/index.tsx (96%)
 rename src/pages/task/taskTabs/buildBaronAndAnnotations/{AnnotationTicketsTable => AnnotationTicketsList}/types.ts (100%)

diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/AnnotationTicketRow.stories.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/AnnotationTicketRow.stories.tsx
similarity index 100%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/AnnotationTicketRow.stories.tsx
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/AnnotationTicketRow.stories.tsx
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/__snapshots__/AnnotationTicketRow.stories.storyshot b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/__snapshots__/AnnotationTicketRow.stories.storyshot
similarity index 100%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/__snapshots__/AnnotationTicketRow.stories.storyshot
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/__snapshots__/AnnotationTicketRow.stories.storyshot
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx
similarity index 100%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow/index.tsx
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/AnnotationTicketRowWithAction.stories.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/AnnotationTicketRowWithAction.stories.tsx
similarity index 100%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/AnnotationTicketRowWithAction.stories.tsx
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/AnnotationTicketRowWithAction.stories.tsx
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx
similarity index 100%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRowWithActions/index.tsx
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.stories.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketsList.stories.tsx
similarity index 84%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.stories.tsx
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketsList.stories.tsx
index 09a7457140..9de7dfeb5f 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.stories.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketsList.stories.tsx
@@ -1,14 +1,14 @@
 import WithToastContext from "test_utils/toast-decorator";
 import { CustomMeta, CustomStoryObj } from "test_utils/types";
-import AnnotationTicketsTable from ".";
+import AnnotationTicketsList from ".";
 
 export default {
-  component: AnnotationTicketsTable,
+  component: AnnotationTicketsList,
   decorators: [(Story: () => JSX.Element) => WithToastContext(Story)],
-} satisfies CustomMeta<typeof AnnotationTicketsTable>;
+} satisfies CustomMeta<typeof AnnotationTicketsList>;
 
-export const Default: CustomStoryObj<typeof AnnotationTicketsTable> = {
-  render: (args) => <AnnotationTicketsTable {...args} />,
+export const Default: CustomStoryObj<typeof AnnotationTicketsList> = {
+  render: (args) => <AnnotationTicketsList {...args} />,
   argTypes: {},
   args: {
     execution: 0,
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.test.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketsList.test.tsx
similarity index 95%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.test.tsx
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketsList.test.tsx
index d329cbd7ff..ee1f83eca5 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketsTable.test.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketsList.test.tsx
@@ -11,14 +11,14 @@ import { getUserMock } from "gql/mocks/getUser";
 import { MOVE_ANNOTATION, REMOVE_ANNOTATION } from "gql/mutations";
 import { renderWithRouterMatch as render, screen } from "test_utils";
 import { ApolloMock } from "types/gql";
-import AnnotationTicketsTable from ".";
+import AnnotationTicketsList from ".";
 
 const taskId =
   "spruce_ubuntu1604_e2e_test_e0ece5ad52ad01630bdf29f55b9382a26d6256b3_20_08_26_19_20_41";
 const execution = 1;
 let matchMedia;
 
-describe("annotationTicketsTable", () => {
+describe("annotationTicketsList", () => {
   beforeAll(() => {
     matchMedia = new MatchMediaMock();
   });
@@ -31,7 +31,7 @@ describe("annotationTicketsTable", () => {
   it("should display the link and jiraIssue key while waiting for data to fetch", async () => {
     const { Component } = RenderFakeToastContext(
       <MockedProvider mocks={ticketsTableMocks}>
-        <AnnotationTicketsTable
+        <AnnotationTicketsList
           jiraIssues={[
             {
               issueKey: "EVG-1234567",
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
similarity index 96%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.tsx
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
index 8c4d2f2f2b..5fc4e8dcf2 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
@@ -17,7 +17,7 @@ import { AnnotationTickets } from "./types";
 
 const { gray } = palette;
 
-interface AnnotationTicketsProps {
+interface AnnotationTicketsListProps {
   jiraIssues: AnnotationTickets;
   taskId: string;
   execution: number;
@@ -28,7 +28,7 @@ interface AnnotationTicketsProps {
   loading: boolean;
 }
 
-const AnnotationTicketsTable: React.FC<AnnotationTicketsProps> = ({
+const AnnotationTicketsList: React.FC<AnnotationTicketsListProps> = ({
   execution,
   isIssue,
   jiraIssues,
@@ -150,4 +150,4 @@ const ItemContainer = styled.div`
   `}
 `;
 
-export default AnnotationTicketsTable;
+export default AnnotationTicketsList;
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/types.ts b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/types.ts
similarity index 100%
rename from src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/types.ts
rename to src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/types.ts
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTicketsTable.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTicketsTable.tsx
index c40ec8834e..2107bfcac0 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTicketsTable.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTicketsTable.tsx
@@ -1,9 +1,9 @@
 import { Table } from "antd";
-import AnnotationTicketRow from "../AnnotationTicketsTable/AnnotationTicketRow";
+import AnnotationTicketRow from "../AnnotationTicketsList/AnnotationTicketRow";
 import {
   AnnotationTickets,
   AnnotationTicket,
-} from "../AnnotationTicketsTable/types";
+} from "../AnnotationTicketsList/types";
 
 // CREATED TICKETS
 interface CreatedTicketsProps {
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx
index 7f7f79913b..fab3c5219f 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx
@@ -6,7 +6,7 @@ import { PlusButton } from "components/Buttons";
 import { size } from "constants/tokens";
 import { IssueLink } from "gql/generated/types";
 import { AddIssueModal } from "../AddIssueModal";
-import AnnotationTicketsTable from "../AnnotationTicketsTable";
+import AnnotationTicketsList from "../AnnotationTicketsList";
 import { TicketsTitle } from "../BBComponents";
 
 interface AnnotationTicketsProps {
@@ -63,7 +63,7 @@ const AnnotationTickets: React.FC<AnnotationTicketsProps> = ({
         You are not authorized to edit failure details
       </Tooltip>
       {tickets.length > 0 && (
-        <AnnotationTicketsTable
+        <AnnotationTicketsList
           jiraIssues={tickets}
           taskId={taskId}
           execution={execution}

From 030770fae166d911b16beecb645035b3156504a0 Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Mon, 11 Dec 2023 14:37:29 -0500
Subject: [PATCH 08/12] Scroll to correct element without extra dom bloat

---
 .../AnnotationTicketRowWithActions/index.tsx  | 160 ++++++++++--------
 .../AnnotationTicketsList/index.tsx           |  36 +---
 2 files changed, 101 insertions(+), 95 deletions(-)

diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx
index 24d2a0e302..7fd0c4eaa3 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx
@@ -1,5 +1,7 @@
+import { forwardRef } from "react";
 import styled from "@emotion/styled";
 import Button, { Size } from "@leafygreen-ui/button";
+import { palette } from "@leafygreen-ui/palette";
 import Tooltip from "@leafygreen-ui/tooltip";
 import { ConditionalWrapper } from "components/ConditionalWrapper";
 import Icon from "components/Icon";
@@ -9,6 +11,7 @@ import AnnotationTicketRow, {
   AnnotationTicketRowProps,
 } from "../AnnotationTicketRow";
 
+const { gray } = palette;
 interface AnnotationTicketRowWithActionsProps extends AnnotationTicketRowProps {
   onRemove: (url: string, issueKey: string) => void;
   userCanModify: boolean;
@@ -23,77 +26,92 @@ interface AnnotationTicketRowWithActionsProps extends AnnotationTicketRowProps {
   }) => void;
   issueString: string;
   isIssue: boolean;
+  selected: boolean;
 }
 
-const AnnotationTicketRowWithActions: React.FC<
+const AnnotationTicketRowWithActions = forwardRef<
+  HTMLDivElement,
   AnnotationTicketRowWithActionsProps
-> = ({ isIssue, issueString, onMove, onRemove, userCanModify, ...rest }) => {
-  const { confidenceScore, issueKey, url } = rest;
-  return (
-    <Container>
-      <AnnotationTicketRow {...rest} />
-      <ButtonContainer>
-        {ConditionalWrapper({
-          condition: userCanModify,
-          wrapper: (children: JSX.Element) => (
-            <Popconfirm
-              align="right"
-              onConfirm={() => {
-                onMove({ url, issueKey, confidenceScore });
-              }}
-              trigger={children}
-            >
-              Do you want to move this {issueString} to{" "}
-              {isIssue ? "suspected issues" : "issues"}?
-            </Popconfirm>
-          ),
-          altWrapper: (children: JSX.Element) => (
-            <Tooltip trigger={children}>
-              You are not authorized to edit failure details
-            </Tooltip>
-          ),
-          children: (
-            <Button
-              size={Size.Small}
-              data-cy={`move-btn-${issueKey}`}
-              disabled={!userCanModify}
-              leftGlyph={<Icon glyph={isIssue ? "ArrowDown" : "ArrowUp"} />}
-            >
-              Move to {isIssue ? "suspected issues" : "issues"}
-            </Button>
-          ),
-        })}
-        {ConditionalWrapper({
-          condition: userCanModify,
-          wrapper: (children: JSX.Element) => (
-            <Popconfirm
-              align="right"
-              onConfirm={() => {
-                onRemove(url, issueKey);
-              }}
-              trigger={children}
-            >
-              Do you want to delete this {issueString}?
-            </Popconfirm>
-          ),
-          altWrapper: (children: JSX.Element) => (
-            <Tooltip trigger={children}>
-              You are not authorized to edit failure details
-            </Tooltip>
-          ),
-          children: (
-            <Button
-              size="small"
-              data-cy={`${issueKey}-delete-btn`}
-              leftGlyph={<Icon glyph="Trash" />}
-              disabled={!userCanModify}
-            />
-          ),
-        })}
-      </ButtonContainer>
-    </Container>
-  );
-};
+>(
+  (
+    {
+      isIssue,
+      issueString,
+      onMove,
+      onRemove,
+      selected,
+      userCanModify,
+      ...rest
+    },
+    ref
+  ) => {
+    const { confidenceScore, issueKey, url } = rest;
+    return (
+      <Container selected={selected} ref={ref}>
+        <AnnotationTicketRow {...rest} />
+        <ButtonContainer>
+          {ConditionalWrapper({
+            condition: userCanModify,
+            wrapper: (children: JSX.Element) => (
+              <Popconfirm
+                align="right"
+                onConfirm={() => {
+                  onMove({ url, issueKey, confidenceScore });
+                }}
+                trigger={children}
+              >
+                Do you want to move this {issueString} to{" "}
+                {isIssue ? "suspected issues" : "issues"}?
+              </Popconfirm>
+            ),
+            altWrapper: (children: JSX.Element) => (
+              <Tooltip trigger={children}>
+                You are not authorized to edit failure details
+              </Tooltip>
+            ),
+            children: (
+              <Button
+                size={Size.Small}
+                data-cy={`move-btn-${issueKey}`}
+                disabled={!userCanModify}
+                leftGlyph={<Icon glyph={isIssue ? "ArrowDown" : "ArrowUp"} />}
+              >
+                Move to {isIssue ? "suspected issues" : "issues"}
+              </Button>
+            ),
+          })}
+          {ConditionalWrapper({
+            condition: userCanModify,
+            wrapper: (children: JSX.Element) => (
+              <Popconfirm
+                align="right"
+                onConfirm={() => {
+                  onRemove(url, issueKey);
+                }}
+                trigger={children}
+              >
+                Do you want to delete this {issueString}?
+              </Popconfirm>
+            ),
+            altWrapper: (children: JSX.Element) => (
+              <Tooltip trigger={children}>
+                You are not authorized to edit failure details
+              </Tooltip>
+            ),
+            children: (
+              <Button
+                size="small"
+                data-cy={`${issueKey}-delete-btn`}
+                leftGlyph={<Icon glyph="Trash" />}
+                disabled={!userCanModify}
+              />
+            ),
+          })}
+        </ButtonContainer>
+      </Container>
+    );
+  }
+);
 
 const ButtonContainer = styled.div`
   display: flex;
@@ -104,6 +122,12 @@ const ButtonContainer = styled.div`
 const Container = styled.div`
   display: flex;
   justify-content: space-between;
+  padding: ${size.xs};
+  ${({ selected }: { selected?: boolean }) =>
+    selected &&
+    `
+    background-color: ${gray.light2};
+  `}
 `;
 
 export default AnnotationTicketRowWithActions;
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
index 5fc4e8dcf2..e83e17faf0 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
@@ -1,9 +1,6 @@
 import { useEffect, useRef } from "react";
 import { useMutation } from "@apollo/client";
-import styled from "@emotion/styled";
-import { palette } from "@leafygreen-ui/palette";
 import { useAnnotationAnalytics } from "analytics";
-import { size } from "constants/tokens";
 import { useToastContext } from "context/toast";
 import {
   MoveAnnotationIssueMutation,
@@ -15,8 +12,6 @@ import { MOVE_ANNOTATION, REMOVE_ANNOTATION } from "gql/mutations";
 import AnnotationTicketRowWithActions from "./AnnotationTicketRowWithActions";
 import { AnnotationTickets } from "./types";
 
-const { gray } = palette;
-
 interface AnnotationTicketsListProps {
   jiraIssues: AnnotationTickets;
   taskId: string;
@@ -106,8 +101,6 @@ const AnnotationTicketsList: React.FC<AnnotationTicketsListProps> = ({
   };
 
   // SCROLL TO added Issue
-  // Will add a span with a ref to the row that matches the selectedRowKey
-  // And will scroll to that ref.
   const rowRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -122,32 +115,21 @@ const AnnotationTicketsList: React.FC<AnnotationTicketsListProps> = ({
   return (
     <>
       {jiraIssues.map((issue) => (
-        <ItemContainer
+        <AnnotationTicketRowWithActions
+          isIssue={isIssue}
+          issueString={issueString}
+          onMove={handleMove}
+          onRemove={handleRemove}
+          userCanModify={userCanModify}
+          loading={loading}
           key={issue.issueKey}
           ref={issue.issueKey === selectedRowKey ? rowRef : null}
           selected={issue.issueKey === selectedRowKey}
-        >
-          <AnnotationTicketRowWithActions
-            isIssue={isIssue}
-            issueString={issueString}
-            onMove={handleMove}
-            onRemove={handleRemove}
-            userCanModify={userCanModify}
-            loading={loading}
-            {...issue}
-          />
-        </ItemContainer>
+          {...issue}
+        />
       ))}
     </>
   );
 };
-const ItemContainer = styled.div`
-  padding: ${size.xs};
-  ${({ selected }: { selected?: boolean }) =>
-    selected &&
-    `
-    background-color: ${gray.light2};
-  `}
-`;
 
 export default AnnotationTicketsList;

From fc5ec34d4089b5876c412d3f5062a18e017c8f8a Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Mon, 11 Dec 2023 15:25:32 -0500
Subject: [PATCH 09/12] Fix annotation test failure

---
 cypress/integration/task/annotations.ts       | 38 +++++++++++--------
 .../AnnotationTicketsList/index.tsx           |  4 +-
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/cypress/integration/task/annotations.ts b/cypress/integration/task/annotations.ts
index b29f471a6f..c45e75eb04 100644
--- a/cypress/integration/task/annotations.ts
+++ b/cypress/integration/task/annotations.ts
@@ -2,19 +2,24 @@ 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";
+const issuesList = "issues-list";
+const suspectedIssuesList = "suspected-issues-list";
 
+const validateAnnotationRowCount = (listName: string, count: number) => {
+  cy.dataCy(listName).within(() =>
+    cy.dataCy("annotation-ticket-row").should("have.length", count)
+  );
+};
 describe("Task Annotation Tab", () => {
   beforeEach(() => {
     cy.visit(taskRoute);
   });
 
   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");
+
+    validateAnnotationRowCount(issuesList, 1);
+    validateAnnotationRowCount(suspectedIssuesList, 3);
 
     // move from suspectedIssues to Issues
     cy.dataCy("move-btn-AnotherOne").click();
@@ -22,8 +27,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", 2);
-    cy.get(suspectedIssuesTable).should("have.length", 2);
+    validateAnnotationRowCount(issuesList, 2);
+    validateAnnotationRowCount(suspectedIssuesList, 2);
     cy.validateToast("success", "Successfully moved suspected issue to issues");
 
     // move from Issues to suspectedIssues
@@ -32,22 +37,23 @@ 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);
+    validateAnnotationRowCount(issuesList, 1);
+    validateAnnotationRowCount(suspectedIssuesList, 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);
+    validateAnnotationRowCount(issuesList, 1);
+    validateAnnotationRowCount(suspectedIssuesList, 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);
+    validateAnnotationRowCount(issuesList, 1);
+    validateAnnotationRowCount(suspectedIssuesList, 4);
     cy.validateToast("success", "Successfully added suspected issue");
 
     // delete the added ticket
@@ -56,8 +62,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);
+    validateAnnotationRowCount(issuesList, 1);
+    validateAnnotationRowCount(suspectedIssuesList, 3);
     cy.validateToast("success", "Successfully removed suspected issue");
   });
 });
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
index e83e17faf0..799d70f150 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
@@ -113,7 +113,7 @@ const AnnotationTicketsList: React.FC<AnnotationTicketsListProps> = ({
   }, [selectedRowKey]);
 
   return (
-    <>
+    <div data-cy={isIssue ? "issues-list" : "suspected-issues-list"}>
       {jiraIssues.map((issue) => (
         <AnnotationTicketRowWithActions
           isIssue={isIssue}
@@ -128,7 +128,7 @@ const AnnotationTicketsList: React.FC<AnnotationTicketsListProps> = ({
           {...issue}
         />
       ))}
-    </>
+    </div>
   );
 };
 

From 546ee9af8e844564f7cc3d242d5c147bc38b9e25 Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Mon, 11 Dec 2023 16:16:57 -0500
Subject: [PATCH 10/12] Fix loading state

---
 .../AnnotationTicketRow/index.tsx             |  29 +++--
 .../AnnotationTicketRowWithActions/index.tsx  | 122 +++++++++---------
 2 files changed, 82 insertions(+), 69 deletions(-)

diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx
index 97cb98f64f..ca64963266 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx
@@ -37,13 +37,25 @@ const AnnotationTicketRow: React.FC<AnnotationTicketRowProps> = ({
     summary,
     updated,
   } = fields ?? {};
-
   return (
-    <div data-cy="annotation-ticket-row">
+    <Container data-cy="annotation-ticket-row">
       {loading ? (
-        <LoadingWrapper data-cy="loading-annotation-ticket">
-          <Skeleton />
-        </LoadingWrapper>
+        <>
+          <JiraSummaryLink
+            href={url}
+            target="_blank"
+            data-cy={issueKey}
+            onClick={() =>
+              annotationAnalytics.sendEvent({
+                name: "Click Annotation Ticket Link",
+              })
+            }
+          >
+            {issueKey}
+            {summary && `: ${summary}`}
+          </JiraSummaryLink>
+          <Skeleton data-cy="loading-annotation-ticket" />
+        </>
       ) : (
         <>
           <JiraSummaryLink
@@ -95,12 +107,11 @@ 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)`
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx
index 7fd0c4eaa3..1e6d6b87f1 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx
@@ -45,69 +45,71 @@ const AnnotationTicketRowWithActions = forwardRef<
     },
     ref
   ) => {
-    const { confidenceScore, issueKey, url } = rest;
+    const { confidenceScore, issueKey, loading, url } = rest;
     return (
       <Container selected={selected} ref={ref}>
         <AnnotationTicketRow {...rest} />
-        <ButtonContainer>
-          {ConditionalWrapper({
-            condition: userCanModify,
-            wrapper: (children: JSX.Element) => (
-              <Popconfirm
-                align="right"
-                onConfirm={() => {
-                  onMove({ url, issueKey, confidenceScore });
-                }}
-                trigger={children}
-              >
-                Do you want to move this {issueString} to{" "}
-                {isIssue ? "suspected issues" : "issues"}?
-              </Popconfirm>
-            ),
-            altWrapper: (children: JSX.Element) => (
-              <Tooltip trigger={children}>
-                You are not authorized to edit failure details
-              </Tooltip>
-            ),
-            children: (
-              <Button
-                size={Size.Small}
-                data-cy={`move-btn-${issueKey}`}
-                disabled={!userCanModify}
-                leftGlyph={<Icon glyph={isIssue ? "ArrowDown" : "ArrowUp"} />}
-              >
-                Move to {isIssue ? "suspected issues" : "issues"}
-              </Button>
-            ),
-          })}
-          {ConditionalWrapper({
-            condition: userCanModify,
-            wrapper: (children: JSX.Element) => (
-              <Popconfirm
-                align="right"
-                onConfirm={() => {
-                  onRemove(url, issueKey);
-                }}
-                trigger={children}
-              >
-                Do you want to delete this {issueString}?
-              </Popconfirm>
-            ),
-            altWrapper: (children: JSX.Element) => (
-              <Tooltip trigger={children}>
-                You are not authorized to edit failure details
-              </Tooltip>
-            ),
-            children: (
-              <Button
-                size="small"
-                data-cy={`${issueKey}-delete-btn`}
-                leftGlyph={<Icon glyph="Trash" />}
-                disabled={!userCanModify}
-              />
-            ),
-          })}
-        </ButtonContainer>
+        {!loading && (
+          <ButtonContainer>
+            {ConditionalWrapper({
+              condition: userCanModify,
+              wrapper: (children: JSX.Element) => (
+                <Popconfirm
+                  align="right"
+                  onConfirm={() => {
+                    onMove({ url, issueKey, confidenceScore });
+                  }}
+                  trigger={children}
+                >
+                  Do you want to move this {issueString} to{" "}
+                  {isIssue ? "suspected issues" : "issues"}?
+                </Popconfirm>
+              ),
+              altWrapper: (children: JSX.Element) => (
+                <Tooltip trigger={children}>
+                  You are not authorized to edit failure details
+                </Tooltip>
+              ),
+              children: (
+                <Button
+                  size={Size.Small}
+                  data-cy={`move-btn-${issueKey}`}
+                  disabled={!userCanModify}
+                  leftGlyph={<Icon glyph={isIssue ? "ArrowDown" : "ArrowUp"} />}
+                >
+                  Move to {isIssue ? "suspected issues" : "issues"}
+                </Button>
+              ),
+            })}
+            {ConditionalWrapper({
+              condition: userCanModify,
+              wrapper: (children: JSX.Element) => (
+                <Popconfirm
+                  align="right"
+                  onConfirm={() => {
+                    onRemove(url, issueKey);
+                  }}
+                  trigger={children}
+                >
+                  Do you want to delete this {issueString}?
+                </Popconfirm>
+              ),
+              altWrapper: (children: JSX.Element) => (
+                <Tooltip trigger={children}>
+                  You are not authorized to edit failure details
+                </Tooltip>
+              ),
+              children: (
+                <Button
+                  size="small"
+                  data-cy={`${issueKey}-delete-btn`}
+                  leftGlyph={<Icon glyph="Trash" />}
+                  disabled={!userCanModify}
+                />
+              ),
+            })}
+          </ButtonContainer>
+        )}
       </Container>
     );
   }

From 285d32164d832b58bbf0afe662fb1811a729ba38 Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Tue, 12 Dec 2023 17:25:03 -0500
Subject: [PATCH 11/12] Use aliases to select rows

---
 cypress/integration/task/annotations.ts | 37 ++++++++++++-------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/cypress/integration/task/annotations.ts b/cypress/integration/task/annotations.ts
index c45e75eb04..f52e02922b 100644
--- a/cypress/integration/task/annotations.ts
+++ b/cypress/integration/task/annotations.ts
@@ -2,24 +2,20 @@ const taskWithAnnotations =
   "evergreen_ubuntu1604_test_annotations_b_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48";
 const taskRoute = `/task/${taskWithAnnotations}/annotations`;
 
-const issuesList = "issues-list";
-const suspectedIssuesList = "suspected-issues-list";
-
-const validateAnnotationRowCount = (listName: string, count: number) => {
-  cy.dataCy(listName).within(() =>
-    cy.dataCy("annotation-ticket-row").should("have.length", count)
-  );
-};
 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.dataCy("loading-annotation-ticket").should("not.exist");
 
-    validateAnnotationRowCount(issuesList, 1);
-    validateAnnotationRowCount(suspectedIssuesList, 3);
+    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();
@@ -27,8 +23,8 @@ describe("Task Annotation Tab", () => {
       .should("be.visible")
       .should("not.have.attr", "aria-disabled", "true");
     cy.contains("button", "Yes").click();
-    validateAnnotationRowCount(issuesList, 2);
-    validateAnnotationRowCount(suspectedIssuesList, 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
@@ -37,23 +33,24 @@ describe("Task Annotation Tab", () => {
       .should("be.visible")
       .should("not.have.attr", "aria-disabled", "true");
     cy.contains("button", "Yes").click();
-    validateAnnotationRowCount(issuesList, 1);
-    validateAnnotationRowCount(suspectedIssuesList, 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", () => {
-    validateAnnotationRowCount(issuesList, 1);
-    validateAnnotationRowCount(suspectedIssuesList, 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();
-    validateAnnotationRowCount(issuesList, 1);
-    validateAnnotationRowCount(suspectedIssuesList, 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
@@ -62,8 +59,8 @@ describe("Task Annotation Tab", () => {
       .should("be.visible")
       .should("not.have.attr", "aria-disabled", "true");
     cy.contains("button", "Yes").click();
-    validateAnnotationRowCount(issuesList, 1);
-    validateAnnotationRowCount(suspectedIssuesList, 3);
+    cy.get("@issueRows").should("have.length", 1);
+    cy.get("@susIssueRows").should("have.length", 3);
     cy.validateToast("success", "Successfully removed suspected issue");
   });
 });

From 2d85352fb9bf2007157208b894862bc89d8dd6da Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Tue, 12 Dec 2023 17:26:57 -0500
Subject: [PATCH 12/12] CR

---
 .../AnnotationTicketRow/index.tsx             | 44 ++++++++-----------
 .../AnnotationTicketsList/index.tsx           |  2 +-
 2 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx
index ca64963266..0846c5148f 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx
@@ -37,40 +37,32 @@ const AnnotationTicketRow: React.FC<AnnotationTicketRowProps> = ({
     summary,
     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 (
     <Container data-cy="annotation-ticket-row">
       {loading ? (
         <>
-          <JiraSummaryLink
-            href={url}
-            target="_blank"
-            data-cy={issueKey}
-            onClick={() =>
-              annotationAnalytics.sendEvent({
-                name: "Click Annotation Ticket Link",
-              })
-            }
-          >
-            {issueKey}
-            {summary && `: ${summary}`}
-          </JiraSummaryLink>
+          {jiraLink}
           <Skeleton data-cy="loading-annotation-ticket" />
         </>
       ) : (
         <>
-          <JiraSummaryLink
-            href={url}
-            target="_blank"
-            data-cy={issueKey}
-            onClick={() =>
-              annotationAnalytics.sendEvent({
-                name: "Click Annotation Ticket Link",
-              })
-            }
-          >
-            {issueKey}
-            {summary && `: ${summary}`}
-          </JiraSummaryLink>
+          {jiraLink}
           {jiraTicket && (
             <StyledBadge data-cy={`${issueKey}-badge`} variant="lightgray">
               {status.name}
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
index 799d70f150..0f81cd9a09 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
@@ -60,7 +60,7 @@ const AnnotationTicketsList: React.FC<AnnotationTicketsListProps> = ({
       dispatchToast.success(
         `Successfully moved ${issueString} to ${
           isIssue ? "suspected issues" : "issues"
-        }`
+        }.`
       );
     },
     onError(error) {