Add story

src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.stories.tsx

@@ -0,0 +1,57 @@
+import WithToastContext from "test_utils/toast-decorator";
+import { CustomMeta, CustomStoryObj } from "test_utils/types";
+import CustomCreatedTickets from "./CustomCreatedTickets";
+
+export default {
+  component: CustomCreatedTickets,
+  decorators: [(Story: () => JSX.Element) => WithToastContext(Story)],
+} satisfies CustomMeta<typeof CustomCreatedTickets>;
+
+export const Default: CustomStoryObj<typeof CustomCreatedTickets> = {
+  render: (args) => <CustomCreatedTickets {...args} />,
+  argTypes: {},
+  args: {
+    execution: 0,
+    taskId: "123",
+    tickets: [
+      {
+        confidenceScore: 0.25,
+        issueKey: "DEVPROD-1",
+        jiraTicket: {
+          key: "key",
+          fields: {
+            summary: "Issue Summary",
+            status: {
+              id: "id",
+              name: "Done",
+            },
+            created: "2020-01-27",
+            updated: "2023-11-28",
+            assigneeDisplayName: "sophie.stadler",
+            assignedTeam: "evg-ui",
+          },
+        },
+        url: "https://spruce.mongodb.com",
+      },
+      {
+        confidenceScore: 0.5,
+        issueKey: "DEVPROD-2",
+        jiraTicket: {
+          key: "key",
+          fields: {
+            summary: "Issue Summary",
+            status: {
+              id: "id",
+              name: "In Progress",
+            },
+            created: "2020-01-28",
+            updated: "2023-11-29",
+            assigneeDisplayName: "mohamed.khelif",
+            assignedTeam: "evg-ui",
+          },
+        },
+        url: "https://spruce.mongodb.com",
+      },
+    ],
+  },
+};

src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx

@@ -1,3 +1,5 @@
+import styled from "@emotion/styled";
+import { size } from "constants/tokens";
 import { IssueLink } from "gql/generated/types";
 import { AnnotationTicketRow } from "../AnnotationTicketsTable/AnnotationTicketRow";
 import { TicketsTitle } from "../BBComponents";
@@ -19,19 +21,27 @@ const CustomCreatedTickets: React.FC<CustomCreatedTicketProps> = ({
     <FileTicketButton taskId={taskId} execution={execution} />
     {tickets?.length > 0 && (
       <>
-        <TicketsTitle>Tickets Created From This Task</TicketsTitle>
-        {tickets.map(({ confidenceScore, issueKey, jiraTicket, url }) => (
-          <AnnotationTicketRow
-            confidenceScore={confidenceScore}
-            issueKey={issueKey}
-            jiraTicket={jiraTicket}
-            key={issueKey}
-            url={url}
-          />
-        ))}
+        <TicketsTitle margin>Tickets Created From This Task</TicketsTitle>
+        <TicketContainer>
+          {tickets.map(({ confidenceScore, issueKey, jiraTicket, url }) => (
+            <AnnotationTicketRow
+              confidenceScore={confidenceScore}
+              issueKey={issueKey}
+              jiraTicket={jiraTicket}
+              key={issueKey}
+              url={url}
+            />
+          ))}
+        </TicketContainer>
       </>
     )}
   </>
 );
 
+const TicketContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${size.s};
+`;
+
 export default CustomCreatedTickets;