Insight update

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);

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;
 }

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>
           );
         })}

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>

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;
 `;

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>

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;
 `;