Improve Select to accept items with custom content

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

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

src/components/common/v3/Select/Select.stories.tsx → 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
@@ -59,9 +59,24 @@ 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,
+    placeholder: "No items",
     isDisabled: true
   }
 };

src/components/common/v3/Select/index.tsx → 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>
   );

src/components/common/v3/Select/styles.ts → 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;
+`;

src/components/common/v3/Select/types.ts → 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;
 }
 

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