Support JiraTicket multi attachments

src/components/Insights/InsightJiraTicket/InsightJiraTicket.stories.tsx

@@ -69,7 +69,9 @@ export const Linked: Story = {
   args: {
     summary: "Summary text",
     description: { content: "Multiline\ndescription text", isLoading: false },
-    attachment: { url: "https://www.example.com", fileName: "attachment.ext" },
+    attachments: [
+      { url: "https://www.example.com", fileName: "attachment.ext" }
+    ],
     insight: { ...insight, ticketLink: "https://digma.ai/ticket/1" }
   }
 };
@@ -78,7 +80,32 @@ export const Unlinked: Story = {
   args: {
     summary: "",
     description: { content: "Multiline\ndescription text", isLoading: false },
-    attachment: { url: "https://www.example.com", fileName: "attachment.ext" },
-    insight
+    attachments: [
+      { url: "https://www.example.com", fileName: "attachment.ext" }
+    ],
+    insight: { ...insight, ticketLink: "https://digma.ai/ticket/1" }
+  }
+};
+
+export const SingleAttachment: Story = {
+  args: {
+    summary: "",
+    description: { content: "Description text", isLoading: false },
+    attachments: [
+      { url: "https://www.example.com", fileName: "attachment.ext" }
+    ],
+    insight: { ...insight, ticketLink: "https://digma.ai/ticket/1" }
+  }
+};
+
+export const MultiAttachments: Story = {
+  args: {
+    summary: "Summary text",
+    description: { content: "Description text", isLoading: false },
+    attachments: [
+      { url: "https://www.example.com", fileName: "attachment_1.ext" },
+      { url: "https://www.example.com", fileName: "attachment_2.ext" }
+    ],
+    insight: { ...insight, ticketLink: "https://digma.ai/ticket/1" }
   }
 };

src/components/Insights/InsightJiraTicket/index.tsx

@@ -11,6 +11,7 @@ import {
   InsightsGetDataListQuery,
   LinkTicketResponse
 } from "./types";
+import { Attachment } from "../../common/JiraTicket/types";
 
 export const InsightJiraTicket = (props: InsightJiraTicketProps) => {
   const [errorMessage, setErrorMessage] = useState<string | null>();
@@ -95,7 +96,7 @@ export const InsightJiraTicket = (props: InsightJiraTicketProps) => {
     <JiraTicket
       description={props.description}
       summary={props.summary}
-      attachment={props.attachment}
+      attachments={props.attachments || []}
       onClose={props.onClose}
       ticketLink={{ link: ticketLink, errorMessage }}
       unlinkTicket={unlinkTicket}

src/components/Insights/InsightJiraTicket/types.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { InsightsQuery } from "../../common/App/types";
 import { GenericCodeObjectInsight } from "../types";
+import { Attachment } from "../../common/JiraTicket/types";
 
 export interface InsightJiraTicketProps {
   summary: string;
@@ -9,7 +10,7 @@ export interface InsightJiraTicketProps {
     isLoading?: boolean;
     errorMessage?: string;
   };
-  attachment?: { url: string; fileName: string };
+  attachments?: Attachment[];
   insight: GenericCodeObjectInsight;
   relatedInsight?: GenericCodeObjectInsight | null;
   onClose: () => void;

src/components/Insights/tickets/EndpointNPlusOneInsightTicket/index.tsx

@@ -73,12 +73,16 @@ export const EndpointNPlusOneInsightTicket = (
   );
 
   const traceId = span?.traceId;
-  const attachment = traceId
-    ? {
-        url: `${config.jaegerURL}/api/traces/${traceId}?prettyPrint=true`,
-        fileName: `trace-${traceId}.json`
-      }
-    : undefined;
+  const attachments = [
+    ...(traceId
+      ? [
+          {
+            url: `${config.jaegerURL}/api/traces/${traceId}?prettyPrint=true`,
+            fileName: `trace-${traceId}.json`
+          }
+        ]
+      : [])
+  ];
 
   return (
     <InsightJiraTicket
@@ -89,7 +93,7 @@ export const EndpointNPlusOneInsightTicket = (
         errorMessage:
           spanInsight === null ? "Failed to get insight details" : undefined
       }}
-      attachment={attachment}
+      attachments={attachments}
       insight={props.data.insight}
       relatedInsight={spanInsight}
       onClose={props.onClose}

src/components/Insights/tickets/EndpointQueryOptimizationTicket/index.tsx

@@ -101,12 +101,16 @@ export const EndpointQueryOptimizationInsightTicket = (
   );
 
   const traceId = span?.traceId;
-  const attachment = traceId
-    ? {
-        url: `${config.jaegerURL}/api/traces/${traceId}?prettyPrint=true`,
-        fileName: `trace-${traceId}.json`
-      }
-    : undefined;
+  const attachments = [
+    ...(traceId
+      ? [
+          {
+            url: `${config.jaegerURL}/api/traces/${traceId}?prettyPrint=true`,
+            fileName: `trace-${traceId}.json`
+          }
+        ]
+      : [])
+  ];
 
   return (
     <InsightJiraTicket
@@ -117,7 +121,7 @@ export const EndpointQueryOptimizationInsightTicket = (
         errorMessage:
           spanInsight === null ? "Failed to get insight details" : undefined
       }}
-      attachment={attachment}
+      attachments={attachments}
       insight={props.data.insight}
       relatedInsight={spanInsight}
       onClose={props.onClose}

src/components/Insights/tickets/NPlusOneInsightTicket/index.tsx

@@ -66,12 +66,16 @@ export const NPlusOneInsightTicket = (
   );
 
   const traceId = props.data.insight.traceId;
-  const attachment = traceId
-    ? {
-        url: `${config.jaegerURL}/api/traces/${traceId}?prettyPrint=true`,
-        fileName: `trace-${traceId}.json`
-      }
-    : undefined;
+  const attachments = [
+    ...(traceId
+      ? [
+          {
+            url: `${config.jaegerURL}/api/traces/${traceId}?prettyPrint=true`,
+            fileName: `trace-${traceId}.json`
+          }
+        ]
+      : [])
+  ];
 
   return (
     <InsightJiraTicket
@@ -80,7 +84,7 @@ export const NPlusOneInsightTicket = (
         content: renderDescription(),
         isLoading
       }}
-      attachment={attachment}
+      attachments={attachments}
       insight={props.data.insight}
       onClose={props.onClose}
     />

src/components/Insights/tickets/QueryOptimizationInsightTicket/index.tsx

@@ -80,12 +80,16 @@ export const QueryOptimizationInsightTicket = (
   );
 
   const traceId = props.data.insight.traceId;
-  const attachment = traceId
-    ? {
-        url: `${config.jaegerURL}/api/traces/${traceId}?prettyPrint=true`,
-        fileName: `trace-${traceId}.json`
-      }
-    : undefined;
+  const attachments = [
+    ...(traceId
+      ? [
+          {
+            url: `${config.jaegerURL}/api/traces/${traceId}?prettyPrint=true`,
+            fileName: `trace-${traceId}.json`
+          }
+        ]
+      : [])
+  ];
 
   return (
     <InsightJiraTicket
@@ -94,7 +98,7 @@ export const QueryOptimizationInsightTicket = (
         content: renderDescription(),
         isLoading
       }}
-      attachment={attachment}
+      attachments={attachments}
       insight={props.data.insight}
       onClose={props.onClose}
     />

src/components/Insights/tickets/ScalingIssueInsightTicket/index.tsx

@@ -79,10 +79,11 @@ export const ScalingIssueInsightTicket = (
     ?.map((ep) => ep.sampleTraceId)
     ?.find((t) => t);
   const attachmentTrace = getTraceAttachment(config, traceId);
-
-  // Add it to the attachment(s) after we'll support more than one and
-  // know how to make https calls while ignoring ssl cert verification
   const attachmentHistogram = getHistogramAttachment(config, insight);
+  const attachments = [
+    ...(attachmentTrace ? [attachmentTrace] : []),
+    ...(attachmentHistogram ? [attachmentHistogram] : [])
+  ];
 
   return (
     <InsightJiraTicket
@@ -91,7 +92,7 @@ export const ScalingIssueInsightTicket = (
         content: renderDescription(),
         isLoading: isLoading
       }}
-      attachment={attachmentTrace}
+      attachments={attachments}
       insight={props.data.insight}
       onClose={props.onClose}
     />

src/components/Insights/tickets/ScalingIssueInsightTicketByRootCause/index.tsx

@@ -84,10 +84,11 @@ export const ScalingIssueInsightTicketByRootCause = (
   const summary = getScalingIssueSummary(spanInsight);
 
   const attachmentTrace = getTraceAttachment(config, spanInfo?.sampleTraceId);
-
-  // Add it to the attachment(s) after we'll support more than one and
-  // know how to make https calls while ignoring ssl cert verification
   const attachmentHistogram = getHistogramAttachment(config, spanInsight);
+  const attachments = [
+    ...(attachmentTrace ? [attachmentTrace] : []),
+    ...(attachmentHistogram ? [attachmentHistogram] : [])
+  ];
 
   return (
     <InsightJiraTicket
@@ -98,7 +99,7 @@ export const ScalingIssueInsightTicketByRootCause = (
         errorMessage:
           spanInsight === null ? "Failed to get insight details" : undefined
       }}
-      attachment={attachmentTrace}
+      attachments={attachments}
       insight={props.data.insight}
       relatedInsight={spanInsight}
       onClose={props.onClose}

src/components/Tests/TestTicket/index.tsx

@@ -6,6 +6,7 @@ import { DigmaSignature } from "../../Insights/tickets/common/DigmaSignature";
 import { ConfigContext } from "../../common/App/ConfigContext";
 import { JiraTicket } from "../../common/JiraTicket";
 import { TestTicketProps } from "./types";
+import { Attachment } from "../../common/JiraTicket/types";
 
 export const TestTicket = (props: TestTicketProps) => {
   const {
@@ -51,20 +52,24 @@ export const TestTicket = (props: TestTicketProps) => {
     </>
   );
 
-  const attachment = traceId
-    ? {
-        url: `${config.jaegerURL}/api/traces/${traceId}?prettyPrint=true`,
-        fileName: `trace-${traceId}.json`
-      }
-    : undefined;
+  const attachments = [
+    ...(traceId
+      ? [
+          {
+            url: `${config.jaegerURL}/api/traces/${traceId}?prettyPrint=true`,
+            fileName: `trace-${traceId}.json`
+          }
+        ]
+      : [])
+  ];
 
   return (
     <JiraTicket
       summary={summary}
       description={{
         content: renderDescription()
       }}
-      attachment={attachment}
+      attachments={attachments}
       onClose={props.onClose}
       tracking={{ prefix: "tests" }}
     />

src/components/common/JiraTicket/AttachmentTag/index.tsx

@@ -5,7 +5,7 @@ import { AttachmentTagProps } from "./types";
 export const AttachmentTag = (props: AttachmentTagProps) => (
   <s.Container>
     <s.IconContainer>
-      <props.icon color={"currentColor"} />
+      <props.icon color={"currentColor"} size={16} />
     </s.IconContainer>
     <Tooltip title={props.text}>
       <s.TextContainer>{props.text}</s.TextContainer>

src/components/common/JiraTicket/AttachmentTag/styles.ts

@@ -2,11 +2,8 @@ import styled from "styled-components";
 
 export const Container = styled.div`
   display: flex;
-  padding: 4px 6px 4px 4px;
+  padding: 2px 0;
   gap: 8px;
-  border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.colors.attachmentTag.border};
-  background: ${({ theme }) => theme.colors.attachmentTag.background};
   color: ${({ theme }) => theme.colors.attachmentTag.text};
   align-items: center;
   max-width: fit-content;

src/components/common/JiraTicket/Field/index.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useRef } from "react";
 import useDimensions from "react-cool-dimensions";
 import useScrollbarSize from "react-scrollbar-size";
-import { isString } from "../../../../typeGuards/isString";
 import * as s from "./styles";
 import { ButtonPosition, FieldProps } from "./types";
 
@@ -28,22 +27,16 @@ export const Field = (props: FieldProps) => {
     props.multiline === true ? "top" : "center";
 
   return (
-    <s.Container $selectable={props.selectable}>
-      <s.Label>{props.label}</s.Label>
-      <s.ContentContainer>
-        <s.Content ref={getContentRef} $multiline={props.multiline}>
-          {props.content}
-          <s.ButtonContainer
-            $position={iconPosition}
-            $scrollbarOffset={scrollbarOffset}
-          >
-            {props.button}
-          </s.ButtonContainer>
-        </s.Content>
-      </s.ContentContainer>
-      {isString(props.errorMessage) && (
-        <s.ErrorMessage>{props.errorMessage}</s.ErrorMessage>
-      )}
-    </s.Container>
+    <s.ContentContainer>
+      <s.Content ref={getContentRef} $multiline={props.multiline}>
+        {props.children}
+        <s.ButtonContainer
+          $position={iconPosition}
+          $scrollbarOffset={scrollbarOffset}
+        >
+          {props.button}
+        </s.ButtonContainer>
+      </s.Content>
+    </s.ContentContainer>
   );
 };

src/components/common/JiraTicket/Field/styles.ts

@@ -1,17 +1,5 @@
 import styled from "styled-components";
-import { redScale } from "../../../common/App/v2colors";
-import { ButtonContainerProps, ContainerProps, ContentProps } from "./types";
-
-export const Container = styled.div<ContainerProps>`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  ${({ $selectable }) => ($selectable ? "" : "user-select: none;")}
-`;
-
-export const Label = styled.label`
-  color: ${({ theme }) => theme.colors.jiraTicket.text.secondary};
-`;
+import { ButtonContainerProps, ContentProps } from "./types";
 
 export const ContentContainer = styled.div`
   display: flex;
@@ -48,19 +36,3 @@ export const ButtonContainer = styled.div<ButtonContainerProps>`
     }
   }}
 `;
-
-export const ErrorMessage = styled.span`
-  display: flex;
-  font-size: 13px;
-  align-items: center;
-  white-space: pre-line;
-  color: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return redScale[500];
-      case "dark":
-      case "dark-jetbrains":
-        return redScale[300];
-    }
-  }};
-`;