Fix styles

src/components/Insights/common/InsightCard/KeyValue/styles.ts

@@ -1,5 +1,8 @@
 import styled from "styled-components";
-import { caption1RegularTypography } from "../../../../common/App/typographies";
+import {
+  footnoteRegularTypography,
+  subscriptRegularTypography
+} from "../../../../common/App/typographies";
 
 export const Container = styled.div`
   display: flex;
@@ -8,10 +11,13 @@ export const Container = styled.div`
 `;
 
 export const Key = styled.div`
+  ${footnoteRegularTypography}
+
   color: ${({ theme }) => theme.colors.v3.text.secondary};
-  ${caption1RegularTypography}
 `;
 
 export const Value = styled.div`
+  ${subscriptRegularTypography}
+
   color: ${({ theme }) => theme.colors.v3.text.primary};
 `;

src/components/Insights/common/InsightCard/ListItem/index.tsx

@@ -1,4 +1,5 @@
 import { ForwardedRef, MouseEvent, forwardRef } from "react";
+import { Link } from "../../../../common/v3/Link";
 import { Tooltip } from "../../../../common/v3/Tooltip";
 import * as s from "./styles";
 import { ListItemProps } from "./types";
@@ -13,11 +14,9 @@ const ListItemComponent = (
   };
 
   return (
-    <s.Container ref={ref}>
+    <s.Container ref={ref} className={className}>
       <Tooltip title={name}>
-        <s.Link className={className} href={"#"} onClick={handleClick}>
-          {name}
-        </s.Link>
+        <Link onClick={handleClick}>{name}</Link>
       </Tooltip>
       {buttons && <s.ButtonsContainer>{buttons}</s.ButtonsContainer>}
     </s.Container>

src/components/Insights/common/InsightCard/ListItem/styles.ts

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { footnoteRegularTypography } from "../../../../common/App/typographies";
 
 export const Container = styled.div`
   display: flex;
@@ -9,18 +8,8 @@ export const Container = styled.div`
   padding: 4px;
   border-radius: 4px;
   background: ${({ theme }) => theme.colors.v3.surface.primary};
-`;
-
-export const Link = styled.a`
-  ${footnoteRegularTypography}
-
-  cursor: pointer;
-  color: ${({ theme }) => theme.colors.v3.text.link};
-  text-decoration: none;
-  display: block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+  height: 28px;
+  box-sizing: border-box;
 `;
 
 export const ButtonsContainer = styled.div`

src/components/Insights/common/InsightCard/Select/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { MouseEvent, useState } from "react";
 import { MenuList } from "../../../../Navigation/common/MenuList";
 import { Popup } from "../../../../Navigation/common/Popup";
 import { NewPopover } from "../../../../common/NewPopover";
@@ -18,7 +18,12 @@ export const Select = (props: SelectProps) => {
     props.onChange(option.value);
   };
 
-  const handleExpandButtonClick = () => {
+  const handleSelectBarClick = (e: MouseEvent<HTMLElement>) => {
+    // Prevent the dropdown from opening when clicking on a link inside the selected item
+    if ((e.target as HTMLElement).tagName === "A") {
+      return;
+    }
+
     setIsOpen(!isOpen);
   };
 
@@ -36,11 +41,16 @@ export const Select = (props: SelectProps) => {
           />
         </Popup>
       }
-      onOpenChange={props.isDisabled || !isOpen ? undefined : setIsOpen}
+      onOpenChange={props.isDisabled ? undefined : setIsOpen}
+      useClickInteraction={false}
       isOpen={props.isDisabled ? false : isOpen}
       placement={"bottom-start"}
     >
-      <s.SelectBar $isDisabled={props.isDisabled} $isOpen={isOpen}>
+      <s.SelectBar
+        $isDisabled={props.isDisabled}
+        $isOpen={isOpen}
+        onClick={handleSelectBarClick}
+      >
         {selectedOption ? (
           <Tooltip title={selectedOption.label}>
             {selectedOption.customContent ? (
@@ -53,7 +63,7 @@ export const Select = (props: SelectProps) => {
           props.placeholder
         )}
         <s.Divider />
-        <s.ExpandButton onClick={handleExpandButtonClick}>
+        <s.ExpandButton>
           <ChevronIcon
             size={16}
             color={"currentColor"}

src/components/Insights/common/InsightCard/Select/styles.ts

@@ -8,11 +8,7 @@ export const ExpandButton = styled.button`
   padding: 0;
   margin: 0;
   display: flex;
-  cursor: pointer;
-
-  &:disabled {
-    cursor: initial;
-  }
+  cursor: inherit;
 `;
 
 export const SelectBar = styled.div<SelectBarProps>`
@@ -27,6 +23,7 @@ export const SelectBar = styled.div<SelectBarProps>`
   display: flex;
   align-items: center;
   box-shadow: 1 1 4px 0 rgb(0 0 0 / 25%);
+  cursor: ${({ $isDisabled }) => ($isDisabled ? "initial" : "pointer")};
   border: 1px solid
     ${({ theme, $isOpen }) =>
       $isOpen

src/components/Insights/common/insights/EndpointBottleneckInsight/styles.ts

@@ -2,5 +2,5 @@ import styled from "styled-components";
 import { ListItem } from "../../InsightCard/ListItem";
 
 export const SpanListItem = styled(ListItem)`
-  padding: 4px;
+  height: 32px;
 `;

src/components/Insights/common/insights/EndpointNPlusOneInsight/styles.ts

@@ -8,5 +8,5 @@ export const InfoContainer = styled.div`
 `;
 
 export const SpanListItem = styled(ListItem)`
-  padding: 4px;
+  height: 32px;
 `;

src/components/Insights/common/insights/EndpointQueryOptimizationInsight/index.tsx

@@ -2,6 +2,8 @@ import { ReactNode, useContext, useState } from "react";
 import { getDurationString } from "../../../../../utils/getDurationString";
 import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
+import { Link } from "../../../../common/v3/Link";
+import { Tooltip } from "../../../../common/v3/Tooltip";
 import { trackingEvents } from "../../../tracking";
 import {
   EndpointQueryOptimizationSpan,
@@ -11,7 +13,6 @@ import {
 import { InsightCard } from "../../InsightCard";
 import { ColumnsContainer } from "../../InsightCard/ColumnsContainer";
 import { KeyValue } from "../../InsightCard/KeyValue";
-import { ListItem } from "../../InsightCard/ListItem";
 import { Select } from "../../InsightCard/Select";
 import { ContentContainer, Description, Details } from "../styles";
 import * as s from "./styles";
@@ -20,23 +21,25 @@ import { EndpointQueryOptimizationInsightProps } from "./types";
 const renderOptions = (
   spans: EndpointQueryOptimizationSpan[],
   handleLinkClick: (spanCodeObjectId: string) => void
-): { label: string; customContent: ReactNode; value: string }[] => {
-  return spans.map((x) => {
+): { label: string; customContent: ReactNode; value: string }[] =>
+  spans.map((x) => {
     const spanCodeObjectId = x.spanInfo.spanCodeObjectId;
+    const name = x.spanInfo.displayName;
+
     return {
-      label: x.spanInfo.displayName,
+      label: name,
       customContent: (
         <s.SelectedItem>
-          <ListItem
-            name={x.spanInfo.displayName}
-            onClick={() => handleLinkClick(spanCodeObjectId)}
-          />
+          <Tooltip title={name}>
+            <Link onClick={() => handleLinkClick(spanCodeObjectId)}>
+              {name}
+            </Link>
+          </Tooltip>
         </s.SelectedItem>
       ),
       value: spanCodeObjectId
     };
   });
-};
 
 export const EndpointQueryOptimizationInsight = (
   props: EndpointQueryOptimizationInsightProps

src/components/Insights/common/insights/EndpointQueryOptimizationInsight/styles.ts

@@ -2,7 +2,8 @@ import styled from "styled-components";
 import { footnoteRegularTypography } from "../../../../common/App/typographies";
 
 export const SelectedItem = styled.div`
+  ${footnoteRegularTypography}
+
   display: flex;
   align-items: center;
-  ${footnoteRegularTypography}
 `;

src/components/Insights/common/insights/ExcessiveAPICallsInsight/index.tsx

@@ -4,6 +4,7 @@ import { ConfigContext } from "../../../../common/App/ConfigContext";
 import { TargetIcon } from "../../../../common/icons/12px/TargetIcon";
 import { Button } from "../../../../common/v3/Button";
 import { Pagination } from "../../../../common/v3/Pagination";
+import { Tooltip } from "../../../../common/v3/Tooltip";
 import { InsightType, Trace } from "../../../types";
 import { InsightCard } from "../../InsightCard";
 import { ContentContainer, Description, ListContainer } from "../styles";
@@ -56,20 +57,22 @@ export const ExcessiveAPICallsInsight = (
                   onClick={() => handleLinkClick(spanCodeObjectId)}
                   buttons={[
                     config.isJaegerEnabled && traceId && (
-                      <Button
-                        key={spanCodeObjectId + "trace"}
-                        icon={TargetIcon}
-                        onClick={() =>
-                          handleTraceButtonClick(
-                            {
-                              name: spanName,
-                              id: traceId
-                            },
-                            props.insight.type,
-                            spanCodeObjectId
-                          )
-                        }
-                      />
+                      <Tooltip title={"Open trace"}>
+                        <Button
+                          key={"trace"}
+                          icon={TargetIcon}
+                          onClick={() =>
+                            handleTraceButtonClick(
+                              {
+                                name: spanName,
+                                id: traceId
+                              },
+                              props.insight.type,
+                              spanCodeObjectId
+                            )
+                          }
+                        />
+                      </Tooltip>
                     )
                   ]}
                 />

src/components/Insights/common/insights/ExcessiveAPICallsInsight/styles.ts

@@ -2,5 +2,5 @@ import styled from "styled-components";
 import { ListItem } from "../../InsightCard/ListItem";
 
 export const SpanListItem = styled(ListItem)`
-  padding: 4px;
+  height: 32px;
 `;

src/components/Insights/common/insights/ScalingIssueInsight/index.tsx

@@ -8,13 +8,11 @@ import { TraceIcon } from "../../../../common/icons/12px/TraceIcon";
 import { Button } from "../../../../common/v3/Button";
 import { JiraButton } from "../../../../common/v3/JiraButton";
 import { Pagination } from "../../../../common/v3/Pagination";
-import { Tooltip } from "../../../../common/v3/Tooltip";
 import { trackingEvents } from "../../../tracking";
 import { InsightType, RootCauseSpanInfo, Trace } from "../../../types";
 import { InsightCard } from "../../InsightCard";
 import { ColumnsContainer } from "../../InsightCard/ColumnsContainer";
 import { KeyValue } from "../../InsightCard/KeyValue";
-import { ListItem } from "../../InsightCard/ListItem";
 import { ContentContainer, Description } from "../styles";
 import * as s from "./styles";
 import { ScalingIssueInsightProps } from "./types";
@@ -87,19 +85,16 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
                       spanCodeObjectId
                     )
                   }
-                ></Button>
+                />
               );
             }
             return (
-              <s.RootCause key={spanCodeObjectId}>
-                <Tooltip title={spanName}>
-                  <ListItem
-                    name={spanName}
-                    onClick={() => handleLinkClick(spanCodeObjectId)}
-                    buttons={buttons}
-                  />
-                </Tooltip>
-              </s.RootCause>
+              <s.RootCauseListItem
+                key={spanCodeObjectId}
+                name={spanName}
+                onClick={() => handleLinkClick(spanCodeObjectId)}
+                buttons={buttons}
+              />
             );
           })}
         </s.List>
@@ -132,15 +127,11 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
                 pageItems.map((endpoint) => {
                   const endpointRoute = trimEndpointScheme(endpoint.route);
                   return (
-                    <Tooltip title={endpointRoute} key={endpoint.route}>
-                      <s.EndpointListItem
-                        key={endpoint.spanCodeObjectId}
-                        onClick={() =>
-                          handleLinkClick(endpoint.spanCodeObjectId)
-                        }
-                        name={endpointRoute}
-                      />
-                    </Tooltip>
+                    <s.EndpointListItem
+                      key={endpoint.route}
+                      onClick={() => handleLinkClick(endpoint.spanCodeObjectId)}
+                      name={endpointRoute}
+                    />
                   );
                 })}
               <Pagination

src/components/Insights/common/insights/ScalingIssueInsight/styles.ts

@@ -18,6 +18,10 @@ export const RootCause = styled.div`
   gap: 4px;
 `;
 
+export const RootCauseListItem = styled(ListItem)`
+  height: 32px;
+`;
+
 export const EndpointListItem = styled(ListItem)`
-  padding: 4px 0;
+  height: 32px;
 `;

src/components/Insights/common/insights/SpanEndpointBottleneckInsight/index.tsx

@@ -3,13 +3,14 @@ import { getDurationString } from "../../../../../utils/getDurationString";
 import { roundTo } from "../../../../../utils/roundTo";
 import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
 import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme";
+import { Link } from "../../../../common/v3/Link";
+import { Tooltip } from "../../../../common/v3/Tooltip";
 import { trackingEvents } from "../../../tracking";
 import { BottleneckEndpointInfo } from "../../../types";
 import { Info } from "../../Info";
 import { InsightCard } from "../../InsightCard";
 import { ColumnsContainer } from "../../InsightCard/ColumnsContainer";
 import { KeyValue } from "../../InsightCard/KeyValue";
-import { ListItem } from "../../InsightCard/ListItem";
 import { Select } from "../../InsightCard/Select";
 import { ContentContainer, Description, Details } from "../styles";
 import * as s from "./styles";
@@ -18,26 +19,25 @@ import { SpanEndpointBottleneckInsightProps } from "./types";
 const renderOptions = (
   endpoints: BottleneckEndpointInfo[],
   handleLinkClick: (spanCodeObjectId?: string) => void
-): { label: string; customContent: ReactNode; value: string }[] => {
-  return endpoints.map((x) => {
+): { label: string; customContent: ReactNode; value: string }[] =>
+  endpoints.map((x) => {
     const spanCodeObjectId = x.endpointInfo.spanCodeObjectId;
     const route = trimEndpointScheme(x.endpointInfo.route);
     return {
       label: route,
       customContent: (
         <s.SelectedItem>
           {x.endpointInfo.serviceName}
-          <ListItem
-            name={route}
-            onClick={() => handleLinkClick(spanCodeObjectId)}
-          />
+          <Tooltip title={route}>
+            <Link onClick={() => handleLinkClick(spanCodeObjectId)}>
+              {route}
+            </Link>
+          </Tooltip>
         </s.SelectedItem>
       ),
       value: spanCodeObjectId
     };
   });
-};
-
 export const SpanEndpointBottleneckInsight = (
   props: SpanEndpointBottleneckInsightProps
 ) => {