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:
Hover me
- }
-};
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 = {
- 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 75%
rename from src/components/common/v3/Select/Select.stories.tsx
rename to src/components/Insights/common/InsightCard/Select/Select.stories.tsx
index ff1fa6437..e1e4fe6a3 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 = {
- 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: Custom content
+ }
+ ],
+ value: "item_with_custom_content"
+ }
+};
+
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 (
{
({
id: x.value,
- customContent: x.label,
+ label: x.label,
onClick: () => handleOptionClick(x)
}))}
/>
}
- onOpenChange={props.isDisabled ? undefined : setIsOpen}
+ onOpenChange={props.isDisabled || !isOpen ? undefined : setIsOpen}
isOpen={props.isDisabled ? false : isOpen}
placement={"bottom-start"}
>
{selectedOption ? (
- {selectedOption.label}
+ {selectedOption.customContent ? (
+ <>{selectedOption.customContent}>
+ ) : (
+ {selectedOption.label}
+ )}
) : (
props.placeholder
)}
-
+
+
-
+
);
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`
+ ${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`
? 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 = () => (
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 "error
+ hotspot":
Is the error handled.
Is the error escalating (we’re seeing more and more of it).
@@ -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 "Histogram" button.
);