From eece3b13f3e19f7699563a0160b155db0cc0a3df Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 28 Aug 2024 22:53:06 +0300
Subject: [PATCH 1/5] Added Affected endpoint

---
 .../AffectedEndpointsSelector.stories.tsx     | 39 +++++++++++
 .../AffectedEndpointsSelector/index.tsx       | 65 +++++++++++++++++++
 .../AffectedEndpointsSelector/styles.ts       | 14 ++++
 .../AffectedEndpointsSelector/types.ts        | 29 +++++++++
 .../InsightCard/EndpointOption/index.tsx      | 39 +++++++++++
 .../InsightCard/EndpointOption/styles.ts      | 59 +++++++++++++++++
 .../InsightCard/EndpointOption/types.ts       | 14 ++++
 .../common/InsightCard/Select/index.tsx       | 13 +++-
 8 files changed, 269 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/AffectedEndpointsSelector.stories.tsx
 create mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/index.tsx
 create mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/styles.ts
 create mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/types.ts
 create mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/index.tsx
 create mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/styles.ts
 create mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/types.ts

diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/AffectedEndpointsSelector.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/AffectedEndpointsSelector.stories.tsx
new file mode 100644
index 000000000..d9dcaa287
--- /dev/null
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/AffectedEndpointsSelector.stories.tsx
@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { AffectedEndpointsSelector } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof AffectedEndpointsSelector> = {
+  title: "Insights/InsightsCatalog/InsightPage/AffectedEndpointsSelector",
+  component: AffectedEndpointsSelector,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: "spanCodeObjectId1",
+    options: [
+      {
+        route: "test",
+        serviceName: "test1",
+        spanCodeObjectId: "spanCodeObjectId1"
+      },
+      {
+        route: "test",
+        serviceName: "test1",
+        spanCodeObjectId: "spanCodeObjectId2"
+      },
+      {
+        route: "test",
+        serviceName: "test1",
+        spanCodeObjectId: "spanCodeObjectId2"
+      }
+    ]
+  }
+};
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/index.tsx
new file mode 100644
index 000000000..881d69e85
--- /dev/null
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/index.tsx
@@ -0,0 +1,65 @@
+import { ReactNode } from "react";
+import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme";
+import { EndpointOption } from "../insightCards/common/InsightCard/EndpointOption";
+import { Select } from "../insightCards/common/InsightCard/Select";
+import { CustomContentProps } from "../insightCards/common/InsightCard/Select/types";
+import * as s from "./styles";
+import { AffectedEndpointsSelectorProps, Option } from "./types";
+
+const renderOptions = (
+  endpoints: Option[],
+  handleLinkClick: (spanCodeObjectId?: string) => void
+): {
+  label: string;
+  customContent: (props: CustomContentProps) => ReactNode;
+  value: string;
+}[] =>
+  endpoints.map((x) => {
+    const spanCodeObjectId = x.spanCodeObjectId;
+    const route = trimEndpointScheme(x.route);
+    return {
+      label: route,
+      customContent: ({ isSelected, onClick }) => (
+        <EndpointOption
+          serviceName={x.serviceName}
+          route={route}
+          selected={isSelected}
+          spanCodeObjectId={spanCodeObjectId}
+          onSpanLinkClick={handleLinkClick}
+          hideCopyIcon={!isSelected}
+          onClick={onClick}
+        />
+      ),
+      value: spanCodeObjectId
+    };
+  });
+
+export const AffectedEndpointsSelector = ({
+  onAssetLinkClick,
+  insightType,
+  value,
+  options,
+  onChange
+}: AffectedEndpointsSelectorProps) => {
+  const handleSpanLinkClick = (spanCodeObjectId?: string) => {
+    spanCodeObjectId && onAssetLinkClick(spanCodeObjectId, insightType);
+  };
+
+  return (
+    <Select
+      value={value}
+      onChange={(selectedOption) => {
+        const selected =
+          options.find((x) => x.spanCodeObjectId === selectedOption) ?? null;
+
+        onChange(selected);
+      }}
+      options={renderOptions(options, handleSpanLinkClick)}
+      listHeader={
+        <s.ListHeader>
+          <EndpointOption route="Endpoint" serviceName="Service" />
+        </s.ListHeader>
+      }
+    />
+  );
+};
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/styles.ts
new file mode 100644
index 000000000..31e54901c
--- /dev/null
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/styles.ts
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { footnoteRegularTypography } from "../../../../common/App/typographies";
+
+export const ListHeader = styled.div`
+  display: flex;
+  gap: 4px;
+  color: ${({ theme }) => theme.colors.v3.text.tertiary};
+
+  ${footnoteRegularTypography}
+`;
+
+export const ServicePart = styled.div`
+  width: 151px;
+`;
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/types.ts
new file mode 100644
index 000000000..fac7ed486
--- /dev/null
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/types.ts
@@ -0,0 +1,29 @@
+import { InsightType } from "../../../../../types";
+
+export interface FilterButtonProps {
+  isActive: boolean;
+  onClick: () => void;
+  filterCount: number;
+}
+
+export interface ContainerProps {
+  $isActive: boolean;
+}
+
+export interface AffectedEndpointsSelectorProps {
+  insightType: InsightType;
+  value?: string;
+  options: Option[];
+  onChange: (selected: Option | null) => void;
+
+  onAssetLinkClick: (
+    spanCodeObjectId: string,
+    insightType: InsightType
+  ) => void;
+}
+
+export interface Option {
+  serviceName: string;
+  route: string;
+  spanCodeObjectId: string;
+}
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/index.tsx
new file mode 100644
index 000000000..915b34746
--- /dev/null
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/index.tsx
@@ -0,0 +1,39 @@
+import { Link } from "../../../../../../../common/v3/Link";
+import { Tooltip } from "../../../../../../../common/v3/Tooltip";
+import * as s from "./styles";
+import { EndpointOptionProps } from "./types";
+
+export const EndpointOption = ({
+  serviceName,
+  route,
+  spanCodeObjectId,
+  onSpanLinkClick,
+  selected,
+  hideCopyIcon,
+  onClick
+}: EndpointOptionProps) => {
+  const title = `${serviceName} ${route}`;
+
+  return (
+    <s.Container>
+      <Tooltip title={title}>
+        <s.EndpointName
+          $selected={selected}
+          $clickable={Boolean(onClick)}
+          onClick={() => onClick && onClick()}
+        >
+          <s.ServiceName>{serviceName}</s.ServiceName>
+
+          {spanCodeObjectId && onSpanLinkClick ? (
+            <Link onClick={() => onSpanLinkClick(spanCodeObjectId)}>
+              {route}
+            </Link>
+          ) : (
+            <span>{route}</span>
+          )}
+        </s.EndpointName>
+      </Tooltip>
+      {!hideCopyIcon && <s.StyledCopyButton text={route} />}
+    </s.Container>
+  );
+};
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/styles.ts
new file mode 100644
index 000000000..087a8ed81
--- /dev/null
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/styles.ts
@@ -0,0 +1,59 @@
+import styled, { css } from "styled-components";
+import { footnoteRegularTypography } from "../../../../../../../common/App/typographies";
+import { CopyButton } from "../../../../../../../common/v3/CopyButton";
+import { EndpointNameProps } from "./types";
+
+export const StyledCopyButton = styled(CopyButton)`
+  display: none;
+  padding: 0;
+`;
+
+export const Container = styled.div`
+  ${footnoteRegularTypography}
+
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  width: 100%;
+
+  &:hover {
+    ${StyledCopyButton} {
+      display: flex;
+    }
+  }
+`;
+
+export const EndpointName = styled.div<EndpointNameProps>`
+  display: flex;
+  gap: 4px;
+  overflow: hidden;
+  border-radius: 4px;
+  ${({ $selected }) => {
+    if (!$selected) {
+      return css`
+        width: 100%;
+        padding: 4px 8px;
+        ${ServiceName} {
+          width: 151px;
+        }
+      `;
+    }
+    return null;
+  }}
+
+  ${({ $clickable }) =>
+    $clickable
+      ? css`
+          &:hover {
+            background: ${({ theme }) => theme.colors.v3.surface.highlight};
+          }
+        `
+      : ""}
+`;
+
+export const ServiceName = styled.span`
+  max-width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/types.ts
new file mode 100644
index 000000000..01a7c2f3f
--- /dev/null
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/types.ts
@@ -0,0 +1,14 @@
+export interface EndpointOptionProps {
+  serviceName: string;
+  route: string;
+  spanCodeObjectId?: string;
+  selected?: boolean;
+  onSpanLinkClick?: (spanCodeObjectId: string) => void;
+  hideCopyIcon?: boolean;
+  onClick?: ((spanCodeObjectId?: string) => void) | null;
+}
+
+export interface EndpointNameProps {
+  $selected?: boolean;
+  $clickable?: boolean;
+}
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/index.tsx
index 37c514116..f2a6d340a 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/index.tsx
@@ -13,7 +13,8 @@ export const Select = ({
   onChange,
   isDisabled,
   value,
-  placeholder
+  placeholder,
+  listHeader
 }: SelectProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -39,10 +40,16 @@ export const Select = ({
       content={
         <Popup height={"125px"}>
           <MenuList
+            header={listHeader}
             items={options.map((x) => ({
               id: x.value,
               label: x.label,
-              onClick: () => handleOptionClick(x)
+              customContent: x.customContent
+                ? x.customContent({
+                    isSelected: false,
+                    onClick: () => handleOptionClick(x)
+                  })
+                : null
             }))}
           />
         </Popup>
@@ -60,7 +67,7 @@ export const Select = ({
         {selectedOption ? (
           <s.SelectedValue>
             {selectedOption.customContent ? (
-              selectedOption.customContent
+              selectedOption.customContent({ isSelected: true, onClick: null })
             ) : (
               <Tooltip title={selectedOption.label}>
                 <span>{selectedOption.label}</span>

From 91931fe240f522a533bdbb731fd9a05e25dcafeb Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 28 Aug 2024 22:57:47 +0300
Subject: [PATCH 2/5] Migrate to use new Selector

---
 .../SpaNPlusOneInsightCard/index.tsx          | 42 ++++++------------
 .../index.tsx                                 | 44 +++++++------------
 .../InsightCard/Select/Select.stories.tsx     |  2 +-
 .../common/InsightCard/Select/types.ts        | 10 ++++-
 .../Navigation/common/MenuList/index.tsx      |  4 +-
 .../Navigation/common/MenuList/types.ts       |  3 ++
 6 files changed, 43 insertions(+), 62 deletions(-)

diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx
index 8cd6c0d0b..25e0fb8b1 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx
@@ -1,41 +1,18 @@
-import { ReactNode, useState } from "react";
+import { useState } from "react";
 import { useGlobalStore } from "../../../../../../containers/Main/stores/useGlobalStore";
 import { getDurationString } from "../../../../../../utils/getDurationString";
-import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme";
 import { TraceIcon } from "../../../../../common/icons/12px/TraceIcon";
 import { Button } from "../../../../../common/v3/Button";
 import { Tooltip } from "../../../../../common/v3/Tooltip";
-import { InsightType, NPlusOneEndpointInfo, Trace } from "../../../../types";
+import { InsightType, Trace } from "../../../../types";
+import { AffectedEndpointsSelector } from "../../AffectedEndpointsSelector";
 import { InsightCard } from "../common/InsightCard";
 import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer";
-import { EndpointSelectedOption } from "../common/InsightCard/EndpointSelectedOption";
 import { KeyValue } from "../common/InsightCard/KeyValue";
-import { Select } from "../common/InsightCard/Select";
 import { ContentContainer, Description, Details } from "../styles";
 import * as s from "./styles";
 import { SpaNPlusOneInsightCardProps } from "./types";
 
-const renderOptions = (
-  endpoints: NPlusOneEndpointInfo[],
-  handleLinkClick: (spanCodeObjectId?: string) => void
-): { label: string; customContent: ReactNode; value: string }[] =>
-  endpoints.map((x) => {
-    const spanCodeObjectId = x.endpointInfo.entrySpanCodeObjectId;
-    const route = trimEndpointScheme(x.endpointInfo.route);
-    return {
-      label: route,
-      customContent: (
-        <EndpointSelectedOption
-          serviceName={x.endpointInfo.serviceName}
-          route={route}
-          spanCodeObjectId={spanCodeObjectId}
-          onClick={handleLinkClick}
-        />
-      ),
-      value: spanCodeObjectId
-    };
-  });
-
 export const SpaNPlusOneInsightCard = ({
   insight,
   onAssetLinkClick,
@@ -86,18 +63,25 @@ export const SpaNPlusOneInsightCard = ({
           <Details>
             <Description>Affected Endpoints ({endpoints.length})</Description>
             <s.SelectContainer>
-              <Select
+              <AffectedEndpointsSelector
                 value={selectedEndpoint?.endpointInfo.entrySpanCodeObjectId}
                 onChange={(selectedOption) => {
                   const selected =
                     endpoints.find(
                       (x) =>
-                        x.endpointInfo.entrySpanCodeObjectId === selectedOption
+                        x.endpointInfo.entrySpanCodeObjectId ===
+                        selectedOption?.spanCodeObjectId
                     ) ?? null;
 
                   setSelectedEndpoint(selected);
                 }}
-                options={renderOptions(endpoints, handleSpanLinkClick)}
+                options={endpoints.map((x) => ({
+                  route: x.endpointInfo.route,
+                  serviceName: x.endpointInfo.serviceName,
+                  spanCodeObjectId: x.endpointInfo.entrySpanCodeObjectId
+                }))}
+                insightType={insight.type}
+                onAssetLinkClick={handleSpanLinkClick}
               />
               {isJaegerEnabled && selectedEndpoint && (
                 <Tooltip title={"Open Trace"}>
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
index 79efc8b0f..b8e8fa3a8 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useState } from "react";
+import { useState } from "react";
 import { useGlobalStore } from "../../../../../../containers/Main/stores/useGlobalStore";
 import { isNull } from "../../../../../../typeGuards/isNull";
 import { getDurationString } from "../../../../../../utils/getDurationString";
@@ -6,37 +6,15 @@ import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme";
 import { TraceIcon } from "../../../../../common/icons/12px/TraceIcon";
 import { Button } from "../../../../../common/v3/Button";
 import { Tooltip } from "../../../../../common/v3/Tooltip";
-import { BottleneckEndpointInfo, InsightType, Trace } from "../../../../types";
+import { InsightType, Trace } from "../../../../types";
+import { AffectedEndpointsSelector } from "../../AffectedEndpointsSelector";
 import { InsightCard } from "../common/InsightCard";
 import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer";
-import { EndpointSelectedOption } from "../common/InsightCard/EndpointSelectedOption";
 import { KeyValue } from "../common/InsightCard/KeyValue";
-import { Select } from "../common/InsightCard/Select";
 import { ContentContainer, Description, Details } from "../styles";
 import * as s from "./styles";
 import { SpanEndpointBottleneckInsightCardProps } from "./types";
 
-const renderOptions = (
-  endpoints: BottleneckEndpointInfo[],
-  handleLinkClick: (spanCodeObjectId?: string) => void
-): { label: string; customContent: ReactNode; value: string }[] =>
-  endpoints.map((x) => {
-    const spanCodeObjectId = x.endpointInfo.spanCodeObjectId;
-    const route = trimEndpointScheme(x.endpointInfo.route);
-    return {
-      label: route,
-      customContent: (
-        <EndpointSelectedOption
-          serviceName={x.endpointInfo.serviceName}
-          route={route}
-          spanCodeObjectId={spanCodeObjectId}
-          onClick={handleLinkClick}
-        />
-      ),
-      value: spanCodeObjectId
-    };
-  });
-
 export const SpanEndpointBottleneckInsightCard = ({
   insight,
   onJiraTicketCreate,
@@ -100,17 +78,25 @@ export const SpanEndpointBottleneckInsightCard = ({
               Affected Endpoints ({slowEndpoints.length})
             </Description>
             <s.SelectContainer>
-              <Select
-                value={selectedEndpoint?.endpointInfo.spanCodeObjectId}
+              <AffectedEndpointsSelector
+                insightType={insight.type}
                 onChange={(selectedOption) => {
                   const selected =
                     slowEndpoints.find(
-                      (x) => x.endpointInfo.spanCodeObjectId === selectedOption
+                      (x) =>
+                        x.endpointInfo.spanCodeObjectId ===
+                        selectedOption?.spanCodeObjectId
                     ) ?? null;
 
                   setSelectedEndpoint(selected);
                 }}
-                options={renderOptions(slowEndpoints, handleSpanLinkClick)}
+                onAssetLinkClick={handleSpanLinkClick}
+                value={selectedEndpoint?.endpointInfo.spanCodeObjectId}
+                options={slowEndpoints.map((x) => ({
+                  route: trimEndpointScheme(x.endpointInfo.route),
+                  serviceName: x.endpointInfo.serviceName,
+                  spanCodeObjectId: x.endpointInfo.spanCodeObjectId
+                }))}
               />
               {isJaegerEnabled && selectedEndpoint?.traceId && (
                 <Tooltip title={"Open Trace"}>
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/Select.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/Select.stories.tsx
index 5728c94d1..0cc4f2c93 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/Select.stories.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/Select.stories.tsx
@@ -67,7 +67,7 @@ export const ItemWithCustomContent: Story = {
       {
         value: "item_with_custom_content",
         label: "Item with custom content",
-        customContent: <a href={"#"}>Custom content</a>
+        customContent: () => <a href={"#"}>Custom content</a>
       }
     ],
     value: "item_with_custom_content"
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/types.ts
index 2d1040c43..7360319f8 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/types.ts
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/types.ts
@@ -1,8 +1,8 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 
 export interface SelectOption {
   label: string;
-  customContent?: ReactNode;
+  customContent?: (props: CustomContentProps) => ReactNode;
   value: string;
 }
 
@@ -12,9 +12,15 @@ export interface SelectProps {
   placeholder?: string;
   isDisabled?: boolean;
   onChange: (value: string) => void;
+  listHeader?: ReactElement;
 }
 
 export interface SelectBarProps {
   $isOpen: boolean;
   $isDisabled?: boolean;
 }
+
+export interface CustomContentProps {
+  isSelected: boolean;
+  onClick: (() => void) | null;
+}
diff --git a/src/components/Navigation/common/MenuList/index.tsx b/src/components/Navigation/common/MenuList/index.tsx
index b8e1a0a2f..f44d6ccb2 100644
--- a/src/components/Navigation/common/MenuList/index.tsx
+++ b/src/components/Navigation/common/MenuList/index.tsx
@@ -11,7 +11,8 @@ export const MenuList = ({
   showGroupNames = true,
   items,
   showGroupDividers,
-  highlightSelected
+  highlightSelected,
+  header
 }: MenuListProps) => {
   const groups = groupBy(
     items,
@@ -47,6 +48,7 @@ export const MenuList = ({
 
   return (
     <s.List>
+      {header}
       {showGroupDividers
         ? intersperse<ReactElement, ReactElement>(
             groupElements,
diff --git a/src/components/Navigation/common/MenuList/types.ts b/src/components/Navigation/common/MenuList/types.ts
index 5f1b840f6..6f16179db 100644
--- a/src/components/Navigation/common/MenuList/types.ts
+++ b/src/components/Navigation/common/MenuList/types.ts
@@ -1,8 +1,11 @@
+import { ReactNode } from "react";
+
 export interface MenuListProps {
   items: MenuItem[];
   showGroupNames?: boolean;
   showGroupDividers?: boolean;
   highlightSelected?: boolean;
+  header?: ReactNode;
 }
 
 export interface ListItemProps {

From f9c16eea465a2d9a7b16567d8d0763f8bf68d238 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 28 Aug 2024 23:50:35 +0300
Subject: [PATCH 3/5] Fix styles

---
 .../InsightsPage/AffectedEndpointsSelector/index.tsx        | 6 +++++-
 .../common/InsightCard/EndpointOption/styles.ts             | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/index.tsx
index 881d69e85..87e47cc98 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/index.tsx
@@ -57,7 +57,11 @@ export const AffectedEndpointsSelector = ({
       options={renderOptions(options, handleSpanLinkClick)}
       listHeader={
         <s.ListHeader>
-          <EndpointOption route="Endpoint" serviceName="Service" />
+          <EndpointOption
+            route="Endpoint"
+            serviceName="Service"
+            hideCopyIcon={true}
+          />
         </s.ListHeader>
       }
     />
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/styles.ts
index 087a8ed81..2a1c510f3 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/styles.ts
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/styles.ts
@@ -56,4 +56,5 @@ export const ServiceName = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: ${({ theme }) => theme.colors.v3.text.tertiary};
 `;

From 998b224ea7e8a71329f0534e940aeb6203dd3cc8 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 28 Aug 2024 23:55:59 +0300
Subject: [PATCH 4/5] Clean-up

---
 .../EndpointOption/index.tsx                  |  4 +--
 .../EndpointOption/styles.ts                  |  4 +--
 .../EndpointOption/types.ts                   |  0
 .../AffectedEndpointsSelector/index.tsx       |  2 +-
 .../EndpointSelectedOption/index.tsx          | 25 -------------
 .../EndpointSelectedOption/styles.ts          | 36 -------------------
 .../EndpointSelectedOption/types.ts           |  6 ----
 7 files changed, 5 insertions(+), 72 deletions(-)
 rename src/components/Insights/InsightsCatalog/InsightsPage/{insightCards/common/InsightCard => AffectedEndpointsSelector}/EndpointOption/index.tsx (87%)
 rename src/components/Insights/InsightsCatalog/InsightsPage/{insightCards/common/InsightCard => AffectedEndpointsSelector}/EndpointOption/styles.ts (87%)
 rename src/components/Insights/InsightsCatalog/InsightsPage/{insightCards/common/InsightCard => AffectedEndpointsSelector}/EndpointOption/types.ts (100%)
 delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointSelectedOption/index.tsx
 delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointSelectedOption/styles.ts
 delete mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointSelectedOption/types.ts

diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/EndpointOption/index.tsx
similarity index 87%
rename from src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/index.tsx
rename to src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/EndpointOption/index.tsx
index 915b34746..4861abf9c 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/EndpointOption/index.tsx
@@ -1,5 +1,5 @@
-import { Link } from "../../../../../../../common/v3/Link";
-import { Tooltip } from "../../../../../../../common/v3/Tooltip";
+import { Link } from "../../../../../common/v3/Link";
+import { Tooltip } from "../../../../../common/v3/Tooltip";
 import * as s from "./styles";
 import { EndpointOptionProps } from "./types";
 
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/EndpointOption/styles.ts
similarity index 87%
rename from src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/styles.ts
rename to src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/EndpointOption/styles.ts
index 2a1c510f3..d9570dc6e 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/styles.ts
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/EndpointOption/styles.ts
@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
-import { footnoteRegularTypography } from "../../../../../../../common/App/typographies";
-import { CopyButton } from "../../../../../../../common/v3/CopyButton";
+import { footnoteRegularTypography } from "../../../../../common/App/typographies";
+import { CopyButton } from "../../../../../common/v3/CopyButton";
 import { EndpointNameProps } from "./types";
 
 export const StyledCopyButton = styled(CopyButton)`
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/EndpointOption/types.ts
similarity index 100%
rename from src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointOption/types.ts
rename to src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/EndpointOption/types.ts
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/index.tsx
index 87e47cc98..a2b0024e2 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/AffectedEndpointsSelector/index.tsx
@@ -1,8 +1,8 @@
 import { ReactNode } from "react";
 import { trimEndpointScheme } from "../../../../../utils/trimEndpointScheme";
-import { EndpointOption } from "../insightCards/common/InsightCard/EndpointOption";
 import { Select } from "../insightCards/common/InsightCard/Select";
 import { CustomContentProps } from "../insightCards/common/InsightCard/Select/types";
+import { EndpointOption } from "./EndpointOption";
 import * as s from "./styles";
 import { AffectedEndpointsSelectorProps, Option } from "./types";
 
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointSelectedOption/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointSelectedOption/index.tsx
deleted file mode 100644
index 4c83927ed..000000000
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointSelectedOption/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Link } from "../../../../../../../common/v3/Link";
-import { Tooltip } from "../../../../../../../common/v3/Tooltip";
-import * as s from "./styles";
-import { EndpointSelectedOptionProps } from "./types";
-
-export const EndpointSelectedOption = ({
-  serviceName,
-  route,
-  spanCodeObjectId,
-  onClick
-}: EndpointSelectedOptionProps) => {
-  const title = `${serviceName} ${route}`;
-
-  return (
-    <s.Container>
-      <Tooltip title={title}>
-        <s.EndpointName>
-          <s.ServiceName>{serviceName}</s.ServiceName>
-          <Link onClick={() => onClick(spanCodeObjectId)}>{route}</Link>
-        </s.EndpointName>
-      </Tooltip>
-      <s.StyledCopyButton text={route} />
-    </s.Container>
-  );
-};
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointSelectedOption/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointSelectedOption/styles.ts
deleted file mode 100644
index 0ec5362d7..000000000
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointSelectedOption/styles.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import styled from "styled-components";
-import { footnoteRegularTypography } from "../../../../../../../common/App/typographies";
-import { CopyButton } from "../../../../../../../common/v3/CopyButton";
-
-export const StyledCopyButton = styled(CopyButton)`
-  display: none;
-  padding: 0;
-`;
-
-export const Container = styled.div`
-  ${footnoteRegularTypography}
-
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  width: 100%;
-
-  &:hover {
-    ${StyledCopyButton} {
-      display: flex;
-    }
-  }
-`;
-
-export const EndpointName = styled.div`
-  display: flex;
-  gap: 4px;
-  overflow: hidden;
-`;
-
-export const ServiceName = styled.span`
-  max-width: 50%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointSelectedOption/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointSelectedOption/types.ts
deleted file mode 100644
index 51c9fb512..000000000
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/EndpointSelectedOption/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface EndpointSelectedOptionProps {
-  serviceName: string;
-  route: string;
-  spanCodeObjectId: string;
-  onClick: (spanCodeObjectId: string) => void;
-}

From 009c4887b2727e02ea6f4cadaf7763399f290015 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Thu, 29 Aug 2024 12:00:39 +0300
Subject: [PATCH 5/5] Fix comment

---
 .../insightCards/common/InsightCard/Select/types.ts           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/types.ts
index 7360319f8..21a5adc57 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/types.ts
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/Select/types.ts
@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { ReactNode } from "react";
 
 export interface SelectOption {
   label: string;
@@ -12,7 +12,7 @@ export interface SelectProps {
   placeholder?: string;
   isDisabled?: boolean;
   onChange: (value: string) => void;
-  listHeader?: ReactElement;
+  listHeader?: ReactNode;
 }
 
 export interface SelectBarProps {