From d72e0ec966a1736f567ec67b44e302b1c8783c20 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Fri, 1 Mar 2024 17:52:09 +0200
Subject: [PATCH 1/2] change override for btn

---
 src/components/Insights/common/InsightCard/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Insights/common/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
index 31c12baee..319d6bb46 100644
--- a/src/components/Insights/common/InsightCard/index.tsx
+++ b/src/components/Insights/common/InsightCard/index.tsx
@@ -102,10 +102,10 @@ export const InsightCard = (props: InsightCardProps) => {
         tooltip: "Open Trace",
         button: (btnProps) => (
           <Button
-            {...btnProps}
             icon={TraceIcon}
             label={"Trace"}
             onClick={() => props.onGoToTrace && props.onGoToTrace()}
+            {...btnProps}
           />
         )
       });
@@ -184,7 +184,7 @@ export const InsightCard = (props: InsightCardProps) => {
         {secondary.map((Secondary) => {
           return (
             <Tooltip key={Secondary.tooltip} title={Secondary.tooltip}>
-                <Secondary.button buttonType="tertiary" label={undefined} />
+              <Secondary.button buttonType="tertiary" label={undefined} />
             </Tooltip>
           );
         })}

From 181d202f34341eca1827fa85e9e26bc46048c8a0 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Fri, 1 Mar 2024 19:12:19 +0200
Subject: [PATCH 2/2] Change insights

---
 .../Insights/common/InsightCard/KeyValue/index.tsx     | 10 ++++++++--
 .../Insights/common/InsightCard/KeyValue/types.ts      |  1 +
 .../common/insights/SlowEndpointInsight/index.tsx      |  5 ++---
 .../common/insights/SlowEndpointInsight/styles.ts      |  6 ++++++
 .../Insights/common/insights/TrafficInsight/index.tsx  |  4 +++-
 .../Insights/common/insights/TrafficInsight/styles.ts  |  8 ++++----
 6 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/Insights/common/InsightCard/KeyValue/index.tsx b/src/components/Insights/common/InsightCard/KeyValue/index.tsx
index 590d776db..fb4bb298e 100644
--- a/src/components/Insights/common/InsightCard/KeyValue/index.tsx
+++ b/src/components/Insights/common/InsightCard/KeyValue/index.tsx
@@ -1,11 +1,17 @@
+import { ForwardedRef, forwardRef } from "react";
 import * as s from "./styles";
 import { KeyValueProps } from "./types";
 
-export const KeyValue = (props: KeyValueProps) => {
+const KeyValueComponent = (
+  props: KeyValueProps,
+  ref: ForwardedRef<HTMLDivElement>
+) => {
   return (
-    <s.Container>
+    <s.Container className={props.className} ref={ref}>
       <s.Key>{props.label}</s.Key>
       <s.Value>{props.children}</s.Value>
     </s.Container>
   );
 };
+
+export const KeyValue = forwardRef(KeyValueComponent);
diff --git a/src/components/Insights/common/InsightCard/KeyValue/types.ts b/src/components/Insights/common/InsightCard/KeyValue/types.ts
index 76b1890e6..2903167c6 100644
--- a/src/components/Insights/common/InsightCard/KeyValue/types.ts
+++ b/src/components/Insights/common/InsightCard/KeyValue/types.ts
@@ -3,4 +3,5 @@ import { ReactNode } from "react";
 export interface KeyValueProps {
   label: ReactNode;
   children: ReactNode;
+  className?: string;
 }
diff --git a/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx b/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx
index 273024d6c..ac4ad3159 100644
--- a/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx
+++ b/src/components/Insights/common/insights/SlowEndpointInsight/index.tsx
@@ -4,7 +4,6 @@ import { Tag } from "../../../../common/v3/Tag";
 import { InsightCard } from "../../InsightCard";
 import { ColumnsContainer } from "../../InsightCard/ColumnsContainer";
 import { KeyValue } from "../../InsightCard/KeyValue";
-import { Description } from "../styles";
 import * as s from "./styles";
 import { SlowEndpointInsightProps } from "./types";
 
@@ -20,12 +19,12 @@ export const SlowEndpointInsight = (props: SlowEndpointInsightProps) => {
       content={
         <s.ContentContainer>
           <ColumnsContainer>
-            <Description>
+            <s.DescriptionColumn label="Description">
               {`On average requests are slower than other endpoints by ${roundTo(
                 diff,
                 2
               )}%`}
-            </Description>
+            </s.DescriptionColumn>
             <KeyValue label={"Slower by"}>
               <Tag content={getDurationString(props.insight.median)} />
             </KeyValue>
diff --git a/src/components/Insights/common/insights/SlowEndpointInsight/styles.ts b/src/components/Insights/common/insights/SlowEndpointInsight/styles.ts
index 451869f09..af0fc3ef5 100644
--- a/src/components/Insights/common/insights/SlowEndpointInsight/styles.ts
+++ b/src/components/Insights/common/insights/SlowEndpointInsight/styles.ts
@@ -1,5 +1,11 @@
 import styled from "styled-components";
+import { KeyValue } from "../../InsightCard/KeyValue";
 
 export const ContentContainer = styled.div`
   padding: 8px 0;
+  display: flex;
+`;
+
+export const DescriptionColumn = styled(KeyValue)`
+  flex-grow: 2;
 `;
diff --git a/src/components/Insights/common/insights/TrafficInsight/index.tsx b/src/components/Insights/common/insights/TrafficInsight/index.tsx
index fab8f9545..7f4f1143d 100644
--- a/src/components/Insights/common/insights/TrafficInsight/index.tsx
+++ b/src/components/Insights/common/insights/TrafficInsight/index.tsx
@@ -51,7 +51,9 @@ export const TrafficInsight = (props: TrafficInsightProps) => {
       content={
         <s.ContentContainer>
           <ColumnsContainer>
-            <s.Description>{getDescription(props.insight.type)}</s.Description>
+            <s.DescriptionColumn label="Description">
+              {getDescription(props.insight.type)}
+            </s.DescriptionColumn>
             <KeyValue label={"Duration"}>
               <Tag content={`${valueString}/min`} />
             </KeyValue>
diff --git a/src/components/Insights/common/insights/TrafficInsight/styles.ts b/src/components/Insights/common/insights/TrafficInsight/styles.ts
index 3fe430d93..f208a5775 100644
--- a/src/components/Insights/common/insights/TrafficInsight/styles.ts
+++ b/src/components/Insights/common/insights/TrafficInsight/styles.ts
@@ -1,12 +1,12 @@
 import styled from "styled-components";
-import { caption1RegularTypography } from "../../../../common/App/typographies";
+import { KeyValue } from "../../InsightCard/KeyValue";
 
 export const ContentContainer = styled.div`
   gap: 24px;
   padding: 8px 0;
+  display: flex;
 `;
 
-export const Description = styled.div`
-  color: ${({ theme }) => theme.colors.v3.text.secondary};
-  ${caption1RegularTypography}
+export const DescriptionColumn = styled(KeyValue)`
+  flex-grow: 2;
 `;