From d8c067517ff3d0274533046aadce6e8cd0f7cb9e Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Wed, 28 Feb 2024 13:17:33 +0100
Subject: [PATCH 1/2] Improve Select to accept items with custom content

---
 .../InsightCard/InsightCard.stories.tsx       |  6 ---
 .../InsightCard/KeyValue/KeyValue.stories.tsx |  2 +-
 .../InsightCard}/Select/Select.stories.tsx    |  3 +-
 .../common/InsightCard}/Select/index.tsx      | 31 +++++++++------
 .../common/InsightCard}/Select/styles.ts      | 38 ++++++++++++++-----
 .../common/InsightCard}/Select/types.ts       |  3 +-
 .../common/InsightsDescription/index.tsx      |  5 ++-
 7 files changed, 56 insertions(+), 32 deletions(-)
 rename src/components/{common/v3 => Insights/common/InsightCard}/Select/Select.stories.tsx (94%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/Select/index.tsx (58%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/Select/styles.ts (61%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/Select/types.ts (87%)

diff --git a/src/components/Insights/common/InsightCard/InsightCard.stories.tsx b/src/components/Insights/common/InsightCard/InsightCard.stories.tsx
index ab6039315..96c932da4 100644
--- a/src/components/Insights/common/InsightCard/InsightCard.stories.tsx
+++ b/src/components/Insights/common/InsightCard/InsightCard.stories.tsx
@@ -22,9 +22,3 @@ export const Default: Story = {
     insight: mockedEndpointNPlusOneInsight
   }
 };
-
-export const OnlyContent: Story = {
-  args: {
-    content: <div>Hover me</div>
-  }
-};
diff --git a/src/components/Insights/common/InsightCard/KeyValue/KeyValue.stories.tsx b/src/components/Insights/common/InsightCard/KeyValue/KeyValue.stories.tsx
index c80dfdfdc..fc42040bd 100644
--- a/src/components/Insights/common/InsightCard/KeyValue/KeyValue.stories.tsx
+++ b/src/components/Insights/common/InsightCard/KeyValue/KeyValue.stories.tsx
@@ -3,7 +3,7 @@ import { KeyValue } from ".";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof KeyValue> = {
-  title: "Insights/common/InsightCard/KeyValueContainer/KeyValue",
+  title: "Insights/common/InsightCard/KeyValue",
   component: KeyValue,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
diff --git a/src/components/common/v3/Select/Select.stories.tsx b/src/components/Insights/common/InsightCard/Select/Select.stories.tsx
similarity index 94%
rename from src/components/common/v3/Select/Select.stories.tsx
rename to src/components/Insights/common/InsightCard/Select/Select.stories.tsx
index ff1fa6437..b5dab5fff 100644
--- a/src/components/common/v3/Select/Select.stories.tsx
+++ b/src/components/Insights/common/InsightCard/Select/Select.stories.tsx
@@ -4,7 +4,7 @@ import { Select } from ".";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Select> = {
-  title: "Common/v3/Select",
+  title: "Insights/common/InsightCard/Select",
   component: Select,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
@@ -62,6 +62,7 @@ export const Empty: Story = {
 export const Disabled: Story = {
   args: {
     options: mockedData.options,
+    placeholder: "No items",
     isDisabled: true
   }
 };
diff --git a/src/components/common/v3/Select/index.tsx b/src/components/Insights/common/InsightCard/Select/index.tsx
similarity index 58%
rename from src/components/common/v3/Select/index.tsx
rename to src/components/Insights/common/InsightCard/Select/index.tsx
index 696fe2c91..c7ff6160d 100644
--- a/src/components/common/v3/Select/index.tsx
+++ b/src/components/Insights/common/InsightCard/Select/index.tsx
@@ -1,10 +1,10 @@
 import { useState } from "react";
-import { MenuList } from "../../../Navigation/common/MenuList";
-import { Popup } from "../../../Navigation/common/Popup";
-import { NewPopover } from "../../NewPopover";
-import { ChevronIcon } from "../../icons/16px/ChevronIcon";
-import { Direction } from "../../icons/types";
-import { Tooltip } from "../Tooltip";
+import { MenuList } from "../../../../Navigation/common/MenuList";
+import { Popup } from "../../../../Navigation/common/Popup";
+import { NewPopover } from "../../../../common/NewPopover";
+import { ChevronIcon } from "../../../../common/icons/16px/ChevronIcon";
+import { Direction } from "../../../../common/icons/types";
+import { Tooltip } from "../../../../common/v3/Tooltip";
 import * as s from "./styles";
 import { SelectOption, SelectProps } from "./types";
 
@@ -18,6 +18,10 @@ export const Select = (props: SelectProps) => {
     props.onChange(option.value);
   };
 
+  const handleExpandButtonClick = () => {
+    setIsOpen(!isOpen);
+  };
+
   return (
     <NewPopover
       sameWidth={true}
@@ -26,31 +30,36 @@ export const Select = (props: SelectProps) => {
           <MenuList
             items={props.options.map((x) => ({
               id: x.value,
-              customContent: x.label,
+              label: x.label,
               onClick: () => handleOptionClick(x)
             }))}
           />
         </Popup>
       }
-      onOpenChange={props.isDisabled ? undefined : setIsOpen}
+      onOpenChange={props.isDisabled || !isOpen ? undefined : setIsOpen}
       isOpen={props.isDisabled ? false : isOpen}
       placement={"bottom-start"}
     >
       <s.SelectBar $isDisabled={props.isDisabled} $isOpen={isOpen}>
         {selectedOption ? (
           <Tooltip title={selectedOption.label}>
-            <s.SelectedValue>{selectedOption.label}</s.SelectedValue>
+            {selectedOption.customContent ? (
+              <>{selectedOption.customContent}</>
+            ) : (
+              <s.SelectedValue>{selectedOption.label}</s.SelectedValue>
+            )}
           </Tooltip>
         ) : (
           props.placeholder
         )}
-        <s.ChevronIconContainer>
+        <s.Divider />
+        <s.ExpandButton onClick={handleExpandButtonClick}>
           <ChevronIcon
             size={16}
             color={"currentColor"}
             direction={isOpen ? Direction.UP : Direction.DOWN}
           />
-        </s.ChevronIconContainer>
+        </s.ExpandButton>
       </s.SelectBar>
     </NewPopover>
   );
diff --git a/src/components/common/v3/Select/styles.ts b/src/components/Insights/common/InsightCard/Select/styles.ts
similarity index 61%
rename from src/components/common/v3/Select/styles.ts
rename to src/components/Insights/common/InsightCard/Select/styles.ts
index d3a747f2d..3829e92ba 100644
--- a/src/components/common/v3/Select/styles.ts
+++ b/src/components/Insights/common/InsightCard/Select/styles.ts
@@ -1,22 +1,32 @@
 import styled from "styled-components";
+import { bodyRegularTypography } from "../../../../common/App/typographies";
 import { SelectBarProps } from "./types";
 
-export const ChevronIconContainer = styled.div`
-  margin-left: auto;
+export const ExpandButton = styled.button`
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
   display: flex;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: initial;
+  }
 `;
 
 export const SelectBar = styled.div<SelectBarProps>`
+  ${bodyRegularTypography}
+
   overflow: hidden;
   flex-grow: 1;
   user-select: none;
-  padding: 5px 8px;
-  font-size: 14px;
+  padding: 4px 6px;
   gap: 4px;
   border-radius: 4px;
   display: flex;
   align-items: center;
-  box-shadow: 0 0 5px 0 rgb(0 0 0 / 13%);
+  box-shadow: 1 1 4px 0 rgb(0 0 0 / 25%);
   border: 1px solid
     ${({ theme, $isOpen }) =>
       $isOpen
@@ -27,16 +37,17 @@ export const SelectBar = styled.div<SelectBarProps>`
       ? theme.colors.surface.primary
       : $isOpen
       ? theme.colors.v3.surface.primaryLight
-      : theme.colors.v3.surface.brandDark};
+      : theme.colors.v3.surface.primary};
   color: ${({ theme, $isDisabled }) =>
-    $isDisabled ? theme.colors.v3.text.secondary : theme.colors.v3.text.link};
-  cursor: ${({ $isDisabled }) => ($isDisabled ? "initial" : "pointer")};
+    $isDisabled
+      ? theme.colors.v3.text.disabled
+      : theme.colors.v3.text.secondary};
 
-  & ${ChevronIconContainer} {
+  & ${ExpandButton} {
     color: ${({ theme, $isDisabled }) =>
       $isDisabled
         ? theme.colors.v3.icon.disabled
-        : theme.colors.v3.icon.tertiary};
+        : theme.colors.v3.icon.secondary};
   }
 
   &:hover {
@@ -53,3 +64,10 @@ export const SelectedValue = styled.span`
   white-space: nowrap;
   overflow: hidden;
 `;
+
+export const Divider = styled.div`
+  width: 1px;
+  height: 18px;
+  background: ${({ theme }) => theme.colors.v3.stroke.primary};
+  margin-left: auto;
+`;
diff --git a/src/components/common/v3/Select/types.ts b/src/components/Insights/common/InsightCard/Select/types.ts
similarity index 87%
rename from src/components/common/v3/Select/types.ts
rename to src/components/Insights/common/InsightCard/Select/types.ts
index 407fddeec..2d1040c43 100644
--- a/src/components/common/v3/Select/types.ts
+++ b/src/components/Insights/common/InsightCard/Select/types.ts
@@ -1,7 +1,8 @@
 import { ReactNode } from "react";
 
 export interface SelectOption {
-  label: ReactNode;
+  label: string;
+  customContent?: ReactNode;
   value: string;
 }
 
diff --git a/src/components/common/InsightsDescription/index.tsx b/src/components/common/InsightsDescription/index.tsx
index 045281fa2..9bff28368 100644
--- a/src/components/common/InsightsDescription/index.tsx
+++ b/src/components/common/InsightsDescription/index.tsx
@@ -53,7 +53,8 @@ export const CodeNexusDescription = () => (
 export const HotSpotDescription = () => (
   <s.Content>
     Error hotspots are places in the code where errors are significant. There
-    are several factors that make a place in the code an “error hotspot”:
+    are several factors that make a place in the code an &quot;error
+    hotspot&quot;:
     <s.List>
       <li>Is the error handled.</li>
       <li>Is the error escalating (we’re seeing more and more of it).</li>
@@ -76,7 +77,7 @@ export const ScalingIssueDescription = () => (
     Scaling issues are performance problems that emerge when the code is run
     concurrently. Digma analyzes the correlation between concurrency and
     performance and can detect when the degradation becomes problematic. To see
-    a detailed analysis click on the “Histogram button.
+    a detailed analysis click on the &quot;Histogram&quot; button.
   </s.Content>
 );
 

From 54a07bafe104a4c321b91536c77bf9e8ac7e5349 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Wed, 28 Feb 2024 13:23:24 +0100
Subject: [PATCH 2/2] Add story

---
 .../common/InsightCard/Select/Select.stories.tsx   | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/Insights/common/InsightCard/Select/Select.stories.tsx b/src/components/Insights/common/InsightCard/Select/Select.stories.tsx
index b5dab5fff..e1e4fe6a3 100644
--- a/src/components/Insights/common/InsightCard/Select/Select.stories.tsx
+++ b/src/components/Insights/common/InsightCard/Select/Select.stories.tsx
@@ -59,6 +59,20 @@ export const Empty: Story = {
   }
 };
 
+export const ItemWithCustomContent: Story = {
+  args: {
+    options: [
+      ...mockedData.options,
+      {
+        value: "item_with_custom_content",
+        label: "Item with custom content",
+        customContent: <a href={"#"}>Custom content</a>
+      }
+    ],
+    value: "item_with_custom_content"
+  }
+};
+
 export const Disabled: Story = {
   args: {
     options: mockedData.options,