From 7bba9b39cf184e392c3cca0547099eb80abe568c Mon Sep 17 00:00:00 2001 From: olehp Date: Tue, 20 Feb 2024 17:16:21 +0200 Subject: [PATCH 01/16] init --- src/components/common/v3/Tag/Tag.stories.tsx | 100 +++++++++++++++++++ src/components/common/v3/Tag/index.tsx | 30 ++++++ src/components/common/v3/Tag/styles.ts | 66 ++++++++++++ src/components/common/v3/Tag/types.ts | 21 ++++ 4 files changed, 217 insertions(+) create mode 100644 src/components/common/v3/Tag/Tag.stories.tsx create mode 100644 src/components/common/v3/Tag/index.tsx create mode 100644 src/components/common/v3/Tag/styles.ts create mode 100644 src/components/common/v3/Tag/types.ts diff --git a/src/components/common/v3/Tag/Tag.stories.tsx b/src/components/common/v3/Tag/Tag.stories.tsx new file mode 100644 index 000000000..2a124e5ef --- /dev/null +++ b/src/components/common/v3/Tag/Tag.stories.tsx @@ -0,0 +1,100 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { Tag } from "."; +import { BottleneckIcon } from "../../icons/BottleneckIcon"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "common/v3/Tag", + component: Tag, + 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; + +export const Default: Story = { + args: { + icon: BottleneckIcon + }, + parameters: { + design: { + type: "figma" + } + } +}; + +export const HighlighNumber: Story = { + args: { + type: "highlight", + value: 30 + }, + parameters: { + design: { + type: "figma" + } + } +}; + +export const HighlightString: Story = { + args: { + type: "highlight", + value: "~30ms" + }, + parameters: { + design: { + type: "figma" + } + } +}; + +export const HighSeverity: Story = { + args: { + type: "highSeverity", + value: "Input" + }, + parameters: { + design: { + type: "figma" + } + } +}; + +export const MediumSeverity: Story = { + args: { + type: "mediumSeverity", + value: "Input" + }, + parameters: { + design: { + type: "figma" + } + } +}; + +export const LowSeverity: Story = { + args: { + type: "lowSeverity", + value: "Input" + }, + parameters: { + design: { + type: "figma" + } + } +}; + +export const Success: Story = { + args: { + type: "success", + value: "100ms" + }, + parameters: { + design: { + type: "figma" + } + } +}; diff --git a/src/components/common/v3/Tag/index.tsx b/src/components/common/v3/Tag/index.tsx new file mode 100644 index 000000000..87fc3b6fa --- /dev/null +++ b/src/components/common/v3/Tag/index.tsx @@ -0,0 +1,30 @@ +import { isString } from "../../../../typeGuards/isString"; +import { isUndefined } from "../../../../typeGuards/isUndefined"; +import { Tooltip } from "../../Tooltip"; +import * as s from "./styles"; +import { TagProps } from "./types"; + +const renderValue = (value: TagProps["value"]) => { + switch (typeof value) { + case "string": + return {value}; + case "number": + return value; + default: + return null; + } +}; + +export const Tag = (props: TagProps) => { + const title = isString(props.title) ? props.title : props.value; + return ( + + + {props.icon && } + {!isUndefined(props.value) && ( + {renderValue(props.value)} + )} + + + ); +}; diff --git a/src/components/common/v3/Tag/styles.ts b/src/components/common/v3/Tag/styles.ts new file mode 100644 index 000000000..a58fea4f6 --- /dev/null +++ b/src/components/common/v3/Tag/styles.ts @@ -0,0 +1,66 @@ +import styled from "styled-components"; +import { DefaultTheme } from "styled-components/dist/types"; +import { ContainerProps, TagType } from "./types"; + +const getTagTheme = ( + theme: DefaultTheme, + type?: TagType +): { text: string; background: string } => { + const typeMap = { + default: { + text: theme.colors.v3.text.secondary, + background: theme.colors.v3.surface.primary + }, + highlight: { + text: theme.colors.v3.text.secondary, + background: theme.colors.v3.surface.highlight + }, + highSeverity: { + text: theme.colors.v3.status.high, + background: theme.colors.v3.status.backgroundHigh + }, + mediumSeverity: { + text: theme.colors.v3.status.medium, + background: theme.colors.v3.status.backgroundMedium + }, + lowSeverity: { + text: theme.colors.v3.status.low, + background: theme.colors.v3.status.backgroundLow + }, + success: { + text: theme.colors.v3.status.success, + background: theme.colors.v3.status.backgroundSuccess + } + }; + + if (!type) { + return typeMap.default; + } + + return typeMap[type]; +}; + +export const Container = styled.div` + font-size: 14px; + font-weight: normal; + display: flex; + min-width: 24px; + padding: 4px 0; + justify-content: center; + align-items: center; + gap: 4px; + border-radius: 4px; + max-width: fit-content; + color: ${({ theme, $type }) => getTagTheme(theme, $type).text}; + background: ${({ theme, $type }) => getTagTheme(theme, $type).background}; +`; + +export const ValueContainer = styled.span` + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +`; + +export const TextContainer = styled.span` + padding: 0 4px; +`; diff --git a/src/components/common/v3/Tag/types.ts b/src/components/common/v3/Tag/types.ts new file mode 100644 index 000000000..13311dbeb --- /dev/null +++ b/src/components/common/v3/Tag/types.ts @@ -0,0 +1,21 @@ +import { MemoExoticComponent } from "react"; +import { IconProps } from "../../icons/types"; + +export type TagType = + | "highSeverity" + | "mediumSeverity" + | "lowSeverity" + | "success" + | "highlight" + | "default"; + +export interface TagProps { + icon?: MemoExoticComponent<(props: IconProps) => JSX.Element>; + value?: string | number; + type?: TagType; + title?: string; +} + +export interface ContainerProps { + $type?: TagType; +} From 7a4808211e873b1067a8232d702fa536eb1666c4 Mon Sep 17 00:00:00 2001 From: olehp Date: Tue, 20 Feb 2024 17:44:49 +0200 Subject: [PATCH 02/16] Simplify tag --- src/components/common/v3/Tag/Tag.stories.tsx | 24 +++++------------- src/components/common/v3/Tag/index.tsx | 26 +++----------------- src/components/common/v3/Tag/styles.ts | 10 +++----- src/components/common/v3/Tag/types.ts | 7 ++---- 4 files changed, 14 insertions(+), 53 deletions(-) diff --git a/src/components/common/v3/Tag/Tag.stories.tsx b/src/components/common/v3/Tag/Tag.stories.tsx index 2a124e5ef..4954e6877 100644 --- a/src/components/common/v3/Tag/Tag.stories.tsx +++ b/src/components/common/v3/Tag/Tag.stories.tsx @@ -18,19 +18,7 @@ type Story = StoryObj; export const Default: Story = { args: { - icon: BottleneckIcon - }, - parameters: { - design: { - type: "figma" - } - } -}; - -export const HighlighNumber: Story = { - args: { - type: "highlight", - value: 30 + content: }, parameters: { design: { @@ -42,7 +30,7 @@ export const HighlighNumber: Story = { export const HighlightString: Story = { args: { type: "highlight", - value: "~30ms" + content: ~30ms }, parameters: { design: { @@ -54,7 +42,7 @@ export const HighlightString: Story = { export const HighSeverity: Story = { args: { type: "highSeverity", - value: "Input" + content: input }, parameters: { design: { @@ -66,7 +54,7 @@ export const HighSeverity: Story = { export const MediumSeverity: Story = { args: { type: "mediumSeverity", - value: "Input" + content: input }, parameters: { design: { @@ -78,7 +66,7 @@ export const MediumSeverity: Story = { export const LowSeverity: Story = { args: { type: "lowSeverity", - value: "Input" + content: Input }, parameters: { design: { @@ -90,7 +78,7 @@ export const LowSeverity: Story = { export const Success: Story = { args: { type: "success", - value: "100ms" + content: 10ms }, parameters: { design: { diff --git a/src/components/common/v3/Tag/index.tsx b/src/components/common/v3/Tag/index.tsx index 87fc3b6fa..0d43d9ea0 100644 --- a/src/components/common/v3/Tag/index.tsx +++ b/src/components/common/v3/Tag/index.tsx @@ -1,30 +1,10 @@ -import { isString } from "../../../../typeGuards/isString"; -import { isUndefined } from "../../../../typeGuards/isUndefined"; -import { Tooltip } from "../../Tooltip"; import * as s from "./styles"; import { TagProps } from "./types"; -const renderValue = (value: TagProps["value"]) => { - switch (typeof value) { - case "string": - return {value}; - case "number": - return value; - default: - return null; - } -}; - export const Tag = (props: TagProps) => { - const title = isString(props.title) ? props.title : props.value; return ( - - - {props.icon && } - {!isUndefined(props.value) && ( - {renderValue(props.value)} - )} - - + + {props.content} + ); }; diff --git a/src/components/common/v3/Tag/styles.ts b/src/components/common/v3/Tag/styles.ts index a58fea4f6..e5c918596 100644 --- a/src/components/common/v3/Tag/styles.ts +++ b/src/components/common/v3/Tag/styles.ts @@ -44,23 +44,19 @@ export const Container = styled.div` font-size: 14px; font-weight: normal; display: flex; - min-width: 24px; - padding: 4px 0; justify-content: center; align-items: center; - gap: 4px; border-radius: 4px; + min-width: 24px; max-width: fit-content; color: ${({ theme, $type }) => getTagTheme(theme, $type).text}; background: ${({ theme, $type }) => getTagTheme(theme, $type).background}; `; export const ValueContainer = styled.span` + display: flex; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; -`; - -export const TextContainer = styled.span` - padding: 0 4px; + padding: 4px; `; diff --git a/src/components/common/v3/Tag/types.ts b/src/components/common/v3/Tag/types.ts index 13311dbeb..ccc288a31 100644 --- a/src/components/common/v3/Tag/types.ts +++ b/src/components/common/v3/Tag/types.ts @@ -1,5 +1,4 @@ -import { MemoExoticComponent } from "react"; -import { IconProps } from "../../icons/types"; +import React from "react"; export type TagType = | "highSeverity" @@ -10,10 +9,8 @@ export type TagType = | "default"; export interface TagProps { - icon?: MemoExoticComponent<(props: IconProps) => JSX.Element>; - value?: string | number; + content: React.ReactNode; type?: TagType; - title?: string; } export interface ContainerProps { From 63011d22a2a8e8d7a44976223786ea814ab5b618 Mon Sep 17 00:00:00 2001 From: olehp Date: Tue, 20 Feb 2024 22:52:16 +0200 Subject: [PATCH 03/16] Added async tag --- src/components/common/App/themes/darkTheme.ts | 3 +- .../common/App/themes/lightTheme.ts | 3 +- .../common/v3/AsyncTag/AsyncTag.stories.tsx | 28 +++++++++++++++++ src/components/common/v3/AsyncTag/index.tsx | 5 ++++ src/components/common/v3/AsyncTag/styles.ts | 7 +++++ src/components/common/v3/Tag/Tag.stories.tsx | 30 ------------------- src/components/common/v3/Tag/index.tsx | 6 ++-- src/components/common/v3/Tag/types.ts | 1 + src/styled.d.ts | 1 + 9 files changed, 50 insertions(+), 34 deletions(-) create mode 100644 src/components/common/v3/AsyncTag/AsyncTag.stories.tsx create mode 100644 src/components/common/v3/AsyncTag/index.tsx create mode 100644 src/components/common/v3/AsyncTag/styles.ts diff --git a/src/components/common/App/themes/darkTheme.ts b/src/components/common/App/themes/darkTheme.ts index 88400d6ea..3a13a73c7 100644 --- a/src/components/common/App/themes/darkTheme.ts +++ b/src/components/common/App/themes/darkTheme.ts @@ -234,7 +234,8 @@ export const darkTheme: ThemeColors = { brandPrimary: v3colors.primary[500], brandSecondary: v3colors.primary[300], brandDark: v3colors.primary[900], - sidePanelHeader: v3colors.gray[1200] + sidePanelHeader: v3colors.gray[1200], + asyncTag: v3colors.blue[400] }, text: { primary: v3colors.gray[0], diff --git a/src/components/common/App/themes/lightTheme.ts b/src/components/common/App/themes/lightTheme.ts index 2f8fda305..5d1922146 100644 --- a/src/components/common/App/themes/lightTheme.ts +++ b/src/components/common/App/themes/lightTheme.ts @@ -232,7 +232,8 @@ export const lightTheme: ThemeColors = { brandPrimary: v3colors.primary[500], brandSecondary: v3colors.primary[300], brandDark: v3colors.primary[150], - sidePanelHeader: v3colors.gray[300] + sidePanelHeader: v3colors.gray[300], + asyncTag: v3colors.blue[100] }, text: { primary: v3colors.gray[1200], diff --git a/src/components/common/v3/AsyncTag/AsyncTag.stories.tsx b/src/components/common/v3/AsyncTag/AsyncTag.stories.tsx new file mode 100644 index 000000000..98f5513d4 --- /dev/null +++ b/src/components/common/v3/AsyncTag/AsyncTag.stories.tsx @@ -0,0 +1,28 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { AsyncTag } from "."; +import { BottleneckIcon } from "../../icons/BottleneckIcon"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "common/v3/AsyncTag", + component: AsyncTag, + 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; + +export const Default: Story = { + args: { + content: + }, + parameters: { + design: { + type: "figma" + } + } +}; diff --git a/src/components/common/v3/AsyncTag/index.tsx b/src/components/common/v3/AsyncTag/index.tsx new file mode 100644 index 000000000..12f22bdc7 --- /dev/null +++ b/src/components/common/v3/AsyncTag/index.tsx @@ -0,0 +1,5 @@ +import * as s from "./styles"; + +export const AsyncTag = () => { + return ; +}; diff --git a/src/components/common/v3/AsyncTag/styles.ts b/src/components/common/v3/AsyncTag/styles.ts new file mode 100644 index 000000000..e1284bd7c --- /dev/null +++ b/src/components/common/v3/AsyncTag/styles.ts @@ -0,0 +1,7 @@ +import styled from "styled-components"; +import { Tag as TagCommon } from "../Tag"; + +export const AsyncTag = styled(TagCommon)` + color: ${({ theme }) => theme.colors.v3.text.primary}; + background: ${({ theme }) => theme.colors.v3.surface.asyncTag}; +`; diff --git a/src/components/common/v3/Tag/Tag.stories.tsx b/src/components/common/v3/Tag/Tag.stories.tsx index 4954e6877..2b4315333 100644 --- a/src/components/common/v3/Tag/Tag.stories.tsx +++ b/src/components/common/v3/Tag/Tag.stories.tsx @@ -19,11 +19,6 @@ type Story = StoryObj; export const Default: Story = { args: { content: - }, - parameters: { - design: { - type: "figma" - } } }; @@ -31,11 +26,6 @@ export const HighlightString: Story = { args: { type: "highlight", content: ~30ms - }, - parameters: { - design: { - type: "figma" - } } }; @@ -43,11 +33,6 @@ export const HighSeverity: Story = { args: { type: "highSeverity", content: input - }, - parameters: { - design: { - type: "figma" - } } }; @@ -55,11 +40,6 @@ export const MediumSeverity: Story = { args: { type: "mediumSeverity", content: input - }, - parameters: { - design: { - type: "figma" - } } }; @@ -67,11 +47,6 @@ export const LowSeverity: Story = { args: { type: "lowSeverity", content: Input - }, - parameters: { - design: { - type: "figma" - } } }; @@ -79,10 +54,5 @@ export const Success: Story = { args: { type: "success", content: 10ms - }, - parameters: { - design: { - type: "figma" - } } }; diff --git a/src/components/common/v3/Tag/index.tsx b/src/components/common/v3/Tag/index.tsx index 0d43d9ea0..d3d5ca826 100644 --- a/src/components/common/v3/Tag/index.tsx +++ b/src/components/common/v3/Tag/index.tsx @@ -1,10 +1,12 @@ import * as s from "./styles"; import { TagProps } from "./types"; -export const Tag = (props: TagProps) => { +const TagComponent = (props: TagProps) => { return ( - + {props.content} ); }; + +export const Tag = TagComponent; diff --git a/src/components/common/v3/Tag/types.ts b/src/components/common/v3/Tag/types.ts index ccc288a31..6b233ede5 100644 --- a/src/components/common/v3/Tag/types.ts +++ b/src/components/common/v3/Tag/types.ts @@ -11,6 +11,7 @@ export type TagType = export interface TagProps { content: React.ReactNode; type?: TagType; + className?: string; } export interface ContainerProps { diff --git a/src/styled.d.ts b/src/styled.d.ts index edeb2b8c8..d9961638a 100644 --- a/src/styled.d.ts +++ b/src/styled.d.ts @@ -72,6 +72,7 @@ export interface ThemeColors { brandSecondary: string; brandDark: string; sidePanelHeader: string; + asyncTag: string; }; text: { primary: string; From a2d1ab6d2558220615945332302a87512c03c95f Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 22 Feb 2024 15:15:48 +0200 Subject: [PATCH 04/16] init --- .../common/v3/InsightsHeader/index.tsx | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 src/components/common/v3/InsightsHeader/index.tsx diff --git a/src/components/common/v3/InsightsHeader/index.tsx b/src/components/common/v3/InsightsHeader/index.tsx new file mode 100644 index 000000000..8fb90762c --- /dev/null +++ b/src/components/common/v3/InsightsHeader/index.tsx @@ -0,0 +1,44 @@ +// import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo"; +// import { InfoCircleIcon } from "../../icons/InfoCircleIcon"; +// import { Tag } from "../Tag"; +// import { TagType } from "../Tag/types"; +// import { Tooltip } from "../Tooltip"; +// import * as s from "./styles"; +// import { InsightsHeaderProps } from "./types"; + +// export const getTagType = (importance: number): TagType => { +// if (importance === 0) { +// return "default"; +// } +// if (importance < 3) { +// return "highSeverity"; +// } +// if (importance < 7) { +// return "mediumSeverity"; +// } +// return "lowSeverity"; +// }; + +// export const InsightsHeader = (props: InsightsHeaderProps) => { +// const insightTypeInfo = getInsightTypeInfo(props.insightType); +// const tagType = getTagType(props.importance); + +// return ( +// +// {insightTypeInfo && ( +// } +// > +// )} +// {insightTypeInfo?.label} +// {insightTypeInfo?.description && ( +// }> +// +// +// +// +// )} +// +// ); +// }; From 1ad25172b10c9b621942bb24d16f977924d0d6b0 Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 22 Feb 2024 16:37:25 +0200 Subject: [PATCH 05/16] Insights Header --- .../InsightsHeader/InisghtsHeader.stories.tsx | 26 +++++ .../common/v3/InsightsHeader/index.tsx | 95 +++++++++++-------- .../common/v3/InsightsHeader/styles.ts | 48 ++++++++++ .../common/v3/InsightsHeader/types.ts | 8 ++ src/components/common/v3/Tag/styles.ts | 2 +- 5 files changed, 137 insertions(+), 42 deletions(-) create mode 100644 src/components/common/v3/InsightsHeader/InisghtsHeader.stories.tsx create mode 100644 src/components/common/v3/InsightsHeader/styles.ts create mode 100644 src/components/common/v3/InsightsHeader/types.ts diff --git a/src/components/common/v3/InsightsHeader/InisghtsHeader.stories.tsx b/src/components/common/v3/InsightsHeader/InisghtsHeader.stories.tsx new file mode 100644 index 000000000..d15a48117 --- /dev/null +++ b/src/components/common/v3/InsightsHeader/InisghtsHeader.stories.tsx @@ -0,0 +1,26 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { InsightsHeader } from "."; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "Common/v3/InsightsHeader", + component: InsightsHeader, + 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; + +export const Default: Story = { + args: { + importance: 3, + insightType: "HotSpot", + isNew: true, + isAsync: true, + isActive: true + } +}; diff --git a/src/components/common/v3/InsightsHeader/index.tsx b/src/components/common/v3/InsightsHeader/index.tsx index 8fb90762c..09e1ca324 100644 --- a/src/components/common/v3/InsightsHeader/index.tsx +++ b/src/components/common/v3/InsightsHeader/index.tsx @@ -1,44 +1,57 @@ -// import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo"; -// import { InfoCircleIcon } from "../../icons/InfoCircleIcon"; -// import { Tag } from "../Tag"; -// import { TagType } from "../Tag/types"; -// import { Tooltip } from "../Tooltip"; -// import * as s from "./styles"; -// import { InsightsHeaderProps } from "./types"; +import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo"; +import { InfoCircleIcon } from "../../icons/InfoCircleIcon"; +import { AsyncTag } from "../AsyncTag"; +import { Tag } from "../Tag"; +import { TagType } from "../Tag/types"; +import { Tooltip } from "../Tooltip"; +import * as s from "./styles"; +import { InsightsHeaderProps } from "./types"; -// export const getTagType = (importance: number): TagType => { -// if (importance === 0) { -// return "default"; -// } -// if (importance < 3) { -// return "highSeverity"; -// } -// if (importance < 7) { -// return "mediumSeverity"; -// } -// return "lowSeverity"; -// }; +export const getTagType = (importance: number): TagType => { + if (importance === 0) { + return "default"; + } + if (importance < 3) { + return "highSeverity"; + } + if (importance < 7) { + return "mediumSeverity"; + } + return "lowSeverity"; +}; -// export const InsightsHeader = (props: InsightsHeaderProps) => { -// const insightTypeInfo = getInsightTypeInfo(props.insightType); -// const tagType = getTagType(props.importance); +export const InsightsHeader = (props: InsightsHeaderProps) => { + const insightTypeInfo = getInsightTypeInfo(props.insightType); + const tagType = getTagType(props.importance); -// return ( -// -// {insightTypeInfo && ( -// } -// > -// )} -// {insightTypeInfo?.label} -// {insightTypeInfo?.description && ( -// }> -// -// -// -// -// )} -// -// ); -// }; + return ( + + {insightTypeInfo && ( + } + > + )} + + {insightTypeInfo?.label} + {insightTypeInfo?.description && ( + }> + + + + + )} + + + {props.isAsync && } + {props.isNew && } + {props.isActive && ( + + + Active + + )} + + + ); +}; diff --git a/src/components/common/v3/InsightsHeader/styles.ts b/src/components/common/v3/InsightsHeader/styles.ts new file mode 100644 index 000000000..9dd21d579 --- /dev/null +++ b/src/components/common/v3/InsightsHeader/styles.ts @@ -0,0 +1,48 @@ +import styled from "styled-components"; + +export const Container = styled.div` + display: flex; + flex-direction: row; + padding: 8px; + align-items: center; + gap: 8px; + border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary}; +`; + +export const InfoContainer = styled.div` + display: flex; +`; + +export const Label = styled.div` + display: flex; + flex-direction: row; + gap: 4px; + line-height: 18px; + align-items: center; + font-size: 14px; + font-weight: 600; +`; + +export const Tags = styled.div` + margin-left: auto; + display: flex; + flex-direction: row; + gap: 8px; + height: 24px; +`; + +export const Active = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; + color: ${({ theme }) => theme.colors.v3.text.secondary}; + padding: 4px; +`; + +export const Indicator = styled.div` + border-radius: 50%; + width: 6px; + height: 6px; + background: ${({ theme }) => theme.colors.v3.status.success}; +`; diff --git a/src/components/common/v3/InsightsHeader/types.ts b/src/components/common/v3/InsightsHeader/types.ts new file mode 100644 index 000000000..8d10fa51d --- /dev/null +++ b/src/components/common/v3/InsightsHeader/types.ts @@ -0,0 +1,8 @@ +export interface InsightsHeaderProps { + insightType: string; + isActive?: boolean; + tags?: []; + importance: number; + isAsync?: boolean; + isNew?: boolean; +} diff --git a/src/components/common/v3/Tag/styles.ts b/src/components/common/v3/Tag/styles.ts index e5c918596..c5c7904b0 100644 --- a/src/components/common/v3/Tag/styles.ts +++ b/src/components/common/v3/Tag/styles.ts @@ -53,7 +53,7 @@ export const Container = styled.div` background: ${({ theme, $type }) => getTagTheme(theme, $type).background}; `; -export const ValueContainer = styled.span` +export const ValueContainer = styled.div` display: flex; white-space: nowrap; text-overflow: ellipsis; From 6d5be57f08ff7ce54696a720380baa8b9e972519 Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 22 Feb 2024 17:00:40 +0200 Subject: [PATCH 06/16] Insight card --- .../common/v3/InsightCard/index.tsx | 20 +++++++++++++++++ .../common/v3/InsightCard/styles.ts | 0 src/components/common/v3/InsightCard/types.ts | 22 +++++++++++++++++++ .../InisghtHeader.stories.tsx} | 6 ++--- .../index.tsx | 4 ++-- .../styles.ts | 0 .../types.ts | 2 +- 7 files changed, 48 insertions(+), 6 deletions(-) create mode 100644 src/components/common/v3/InsightCard/index.tsx create mode 100644 src/components/common/v3/InsightCard/styles.ts create mode 100644 src/components/common/v3/InsightCard/types.ts rename src/components/common/v3/{InsightsHeader/InisghtsHeader.stories.tsx => InsightHeader/InisghtHeader.stories.tsx} (83%) rename src/components/common/v3/{InsightsHeader => InsightHeader}/index.tsx (93%) rename src/components/common/v3/{InsightsHeader => InsightHeader}/styles.ts (100%) rename src/components/common/v3/{InsightsHeader => InsightHeader}/types.ts (75%) diff --git a/src/components/common/v3/InsightCard/index.tsx b/src/components/common/v3/InsightCard/index.tsx new file mode 100644 index 000000000..bfe797304 --- /dev/null +++ b/src/components/common/v3/InsightCard/index.tsx @@ -0,0 +1,20 @@ +import { Card } from "../../Card"; +import { InsightHeader } from "../InsightHeader"; +import { InsightCardProps } from "./types"; + +export const InsightCard = (props: InsightCardProps) => { + return ( + + } + content={props.content} + /> + ); +}; diff --git a/src/components/common/v3/InsightCard/styles.ts b/src/components/common/v3/InsightCard/styles.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/common/v3/InsightCard/types.ts b/src/components/common/v3/InsightCard/types.ts new file mode 100644 index 000000000..c6b248998 --- /dev/null +++ b/src/components/common/v3/InsightCard/types.ts @@ -0,0 +1,22 @@ +import { ReactNode } from "react"; +import { InsightType } from "../../../../types"; +import { GenericCodeObjectInsight } from "../../../Insights/types"; + +export interface InsightCardProps { + insight: GenericCodeObjectInsight; + content?: ReactNode; + isNew?: boolean; + isAsync?: boolean; + onDismiss: (insightId: string) => void; + onOpenHistogram: (insightType: InsightType, spanCodeObjectId: string) => void; + onRecalculate: ( + prefixedCodeObjectId: string, + insightType: InsightType + ) => void; + onRefresh: (insightType: InsightType, spanCodeObjectId: string) => void; + onOpenJiraTicket: ( + insight: GenericCodeObjectInsight, + spanCodeObjectId?: string + ) => void; + onPin: (insightId: string) => void; +} diff --git a/src/components/common/v3/InsightsHeader/InisghtsHeader.stories.tsx b/src/components/common/v3/InsightHeader/InisghtHeader.stories.tsx similarity index 83% rename from src/components/common/v3/InsightsHeader/InisghtsHeader.stories.tsx rename to src/components/common/v3/InsightHeader/InisghtHeader.stories.tsx index d15a48117..bb9884162 100644 --- a/src/components/common/v3/InsightsHeader/InisghtsHeader.stories.tsx +++ b/src/components/common/v3/InsightHeader/InisghtHeader.stories.tsx @@ -1,10 +1,10 @@ import { Meta, StoryObj } from "@storybook/react"; -import { InsightsHeader } from "."; +import { InsightHeader } from "."; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction -const meta: Meta = { +const meta: Meta = { title: "Common/v3/InsightsHeader", - component: InsightsHeader, + component: InsightHeader, parameters: { // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout layout: "fullscreen" diff --git a/src/components/common/v3/InsightsHeader/index.tsx b/src/components/common/v3/InsightHeader/index.tsx similarity index 93% rename from src/components/common/v3/InsightsHeader/index.tsx rename to src/components/common/v3/InsightHeader/index.tsx index 09e1ca324..4b7662cc0 100644 --- a/src/components/common/v3/InsightsHeader/index.tsx +++ b/src/components/common/v3/InsightHeader/index.tsx @@ -5,7 +5,7 @@ import { Tag } from "../Tag"; import { TagType } from "../Tag/types"; import { Tooltip } from "../Tooltip"; import * as s from "./styles"; -import { InsightsHeaderProps } from "./types"; +import { InsightHeaderProps } from "./types"; export const getTagType = (importance: number): TagType => { if (importance === 0) { @@ -20,7 +20,7 @@ export const getTagType = (importance: number): TagType => { return "lowSeverity"; }; -export const InsightsHeader = (props: InsightsHeaderProps) => { +export const InsightHeader = (props: InsightHeaderProps) => { const insightTypeInfo = getInsightTypeInfo(props.insightType); const tagType = getTagType(props.importance); diff --git a/src/components/common/v3/InsightsHeader/styles.ts b/src/components/common/v3/InsightHeader/styles.ts similarity index 100% rename from src/components/common/v3/InsightsHeader/styles.ts rename to src/components/common/v3/InsightHeader/styles.ts diff --git a/src/components/common/v3/InsightsHeader/types.ts b/src/components/common/v3/InsightHeader/types.ts similarity index 75% rename from src/components/common/v3/InsightsHeader/types.ts rename to src/components/common/v3/InsightHeader/types.ts index 8d10fa51d..1520ffd21 100644 --- a/src/components/common/v3/InsightsHeader/types.ts +++ b/src/components/common/v3/InsightHeader/types.ts @@ -1,4 +1,4 @@ -export interface InsightsHeaderProps { +export interface InsightHeaderProps { insightType: string; isActive?: boolean; tags?: []; From 5b4379cb8f6b93d02abd3c5294c354b850de3772 Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 22 Feb 2024 17:49:26 +0200 Subject: [PATCH 07/16] Insight card --- .../v3/InsightCard/InsightCard.stories.tsx | 31 +++++++++++++++++++ .../v3/InsightCard/InsightFooter/index.tsx | 0 .../common/v3/InsightCard/index.tsx | 9 +++++- .../common/v3/InsightCard/styles.ts | 7 +++++ .../common/v3/InsightHeader/styles.ts | 2 -- 5 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 src/components/common/v3/InsightCard/InsightCard.stories.tsx create mode 100644 src/components/common/v3/InsightCard/InsightFooter/index.tsx diff --git a/src/components/common/v3/InsightCard/InsightCard.stories.tsx b/src/components/common/v3/InsightCard/InsightCard.stories.tsx new file mode 100644 index 000000000..1a2587e78 --- /dev/null +++ b/src/components/common/v3/InsightCard/InsightCard.stories.tsx @@ -0,0 +1,31 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { InsightCard } from "."; +import { mockedEndpointNPlusOneInsight } from "../../../Insights/EndpointNPlusOneInsight/mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "Common/v3/InsightCard", + component: InsightCard, + 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; + +export const Default: Story = { + args: { + isAsync: true, + isNew: true, + insight: mockedEndpointNPlusOneInsight + } +}; + +export const OnlyContent: Story = { + args: { + content:
Hover me
+ } +}; diff --git a/src/components/common/v3/InsightCard/InsightFooter/index.tsx b/src/components/common/v3/InsightCard/InsightFooter/index.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/common/v3/InsightCard/index.tsx b/src/components/common/v3/InsightCard/index.tsx index bfe797304..d29c63f73 100644 --- a/src/components/common/v3/InsightCard/index.tsx +++ b/src/components/common/v3/InsightCard/index.tsx @@ -1,5 +1,6 @@ -import { Card } from "../../Card"; +import { Card } from "../Card"; import { InsightHeader } from "../InsightHeader"; +import * as s from "./styles"; import { InsightCardProps } from "./types"; export const InsightCard = (props: InsightCardProps) => { @@ -15,6 +16,12 @@ export const InsightCard = (props: InsightCardProps) => { /> } content={props.content} + footer={ + +
Dismiss
+
+ + } /> ); }; diff --git a/src/components/common/v3/InsightCard/styles.ts b/src/components/common/v3/InsightCard/styles.ts index e69de29bb..61a32677c 100644 --- a/src/components/common/v3/InsightCard/styles.ts +++ b/src/components/common/v3/InsightCard/styles.ts @@ -0,0 +1,7 @@ +import styled from "styled-components"; + +export const InsightFooter = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; +`; diff --git a/src/components/common/v3/InsightHeader/styles.ts b/src/components/common/v3/InsightHeader/styles.ts index 9dd21d579..c5243d1f4 100644 --- a/src/components/common/v3/InsightHeader/styles.ts +++ b/src/components/common/v3/InsightHeader/styles.ts @@ -3,10 +3,8 @@ import styled from "styled-components"; export const Container = styled.div` display: flex; flex-direction: row; - padding: 8px; align-items: center; gap: 8px; - border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary}; `; export const InfoContainer = styled.div` From d90b99314546a713872ca5a02b28bd9140102bef Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 22 Feb 2024 18:04:31 +0200 Subject: [PATCH 08/16] added is active --- src/components/common/v3/InsightCard/index.tsx | 2 +- src/components/common/v3/InsightCard/types.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/common/v3/InsightCard/index.tsx b/src/components/common/v3/InsightCard/index.tsx index d29c63f73..01e2692a8 100644 --- a/src/components/common/v3/InsightCard/index.tsx +++ b/src/components/common/v3/InsightCard/index.tsx @@ -8,7 +8,7 @@ export const InsightCard = (props: InsightCardProps) => { void; onOpenHistogram: (insightType: InsightType, spanCodeObjectId: string) => void; onRecalculate: ( From b0d656223d36a08f44d6473185f2c4ffb53ff841 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 23 Feb 2024 17:11:20 +0200 Subject: [PATCH 09/16] init Card --- .../common/icons/16px/HistogramIcon.tsx | 24 +++++++++++++ src/components/common/icons/16px/LiveIcon.tsx | 34 ++++++++++++++++++ src/components/common/icons/16px/PinIcon.tsx | 33 +++++++++++++++++ .../common/icons/16px/RecalculateIcon.tsx | 35 +++++++++++++++++++ .../common/v3/AsyncTag/AsyncTag.stories.tsx | 10 +----- src/components/common/v3/AsyncTag/styles.ts | 1 + src/components/common/v3/Card/styles.ts | 2 +- .../common/v3/InsightCard/index.tsx | 25 +++++++++++-- .../common/v3/InsightCard/styles.ts | 19 ++++++++++ .../common/v3/InsightHeader/index.tsx | 3 +- .../common/v3/InsightHeader/styles.ts | 2 ++ .../common/v3/NewTag/NewTag.stories.tsx | 20 +++++++++++ src/components/common/v3/NewTag/index.tsx | 5 +++ src/components/common/v3/NewTag/styles.ts | 6 ++++ src/components/common/v3/Tag/styles.ts | 2 -- 15 files changed, 206 insertions(+), 15 deletions(-) create mode 100644 src/components/common/icons/16px/HistogramIcon.tsx create mode 100644 src/components/common/icons/16px/LiveIcon.tsx create mode 100644 src/components/common/icons/16px/PinIcon.tsx create mode 100644 src/components/common/icons/16px/RecalculateIcon.tsx create mode 100644 src/components/common/v3/NewTag/NewTag.stories.tsx create mode 100644 src/components/common/v3/NewTag/index.tsx create mode 100644 src/components/common/v3/NewTag/styles.ts diff --git a/src/components/common/icons/16px/HistogramIcon.tsx b/src/components/common/icons/16px/HistogramIcon.tsx new file mode 100644 index 000000000..5b3ce45fc --- /dev/null +++ b/src/components/common/icons/16px/HistogramIcon.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { useIconProps } from "../hooks"; +import { IconProps } from "../types"; + +const HistogramIconComponent = (props: IconProps) => { + const { size, color } = useIconProps(props); + + return ( + + + + + + + ); +}; + +export const HistogramIcon = React.memo(HistogramIconComponent); diff --git a/src/components/common/icons/16px/LiveIcon.tsx b/src/components/common/icons/16px/LiveIcon.tsx new file mode 100644 index 000000000..80e7eee2d --- /dev/null +++ b/src/components/common/icons/16px/LiveIcon.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { useIconProps } from "../hooks"; +import { IconProps } from "../types"; + +const LiveIconComponent = (props: IconProps) => { + const { size, color } = useIconProps(props); + + return ( + + + + + + + + + + + + ); +}; + +export const LiveIcon = React.memo(LiveIconComponent); diff --git a/src/components/common/icons/16px/PinIcon.tsx b/src/components/common/icons/16px/PinIcon.tsx new file mode 100644 index 000000000..e82eb64c4 --- /dev/null +++ b/src/components/common/icons/16px/PinIcon.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { useIconProps } from "../hooks"; +import { IconProps } from "../types"; + +const PinIconComponent = (props: IconProps) => { + const { size, color } = useIconProps(props); + + return ( + + + + + + + + + + + ); +}; + +export const PinIcon = React.memo(PinIconComponent); diff --git a/src/components/common/icons/16px/RecalculateIcon.tsx b/src/components/common/icons/16px/RecalculateIcon.tsx new file mode 100644 index 000000000..0da005c3e --- /dev/null +++ b/src/components/common/icons/16px/RecalculateIcon.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { useIconProps } from "../hooks"; +import { IconProps } from "../types"; + +const RecalculateComponent = (props: IconProps) => { + const { size, color } = useIconProps(props); + + return ( + + + + + + + + + + + + + ); +}; + +export const RecalculateIcon = React.memo(RecalculateComponent); diff --git a/src/components/common/v3/AsyncTag/AsyncTag.stories.tsx b/src/components/common/v3/AsyncTag/AsyncTag.stories.tsx index 98f5513d4..5a508ea73 100644 --- a/src/components/common/v3/AsyncTag/AsyncTag.stories.tsx +++ b/src/components/common/v3/AsyncTag/AsyncTag.stories.tsx @@ -1,6 +1,5 @@ import { Meta, StoryObj } from "@storybook/react"; import { AsyncTag } from "."; -import { BottleneckIcon } from "../../icons/BottleneckIcon"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { @@ -17,12 +16,5 @@ export default meta; type Story = StoryObj; export const Default: Story = { - args: { - content: - }, - parameters: { - design: { - type: "figma" - } - } + args: {} }; diff --git a/src/components/common/v3/AsyncTag/styles.ts b/src/components/common/v3/AsyncTag/styles.ts index e1284bd7c..507738aa6 100644 --- a/src/components/common/v3/AsyncTag/styles.ts +++ b/src/components/common/v3/AsyncTag/styles.ts @@ -4,4 +4,5 @@ import { Tag as TagCommon } from "../Tag"; export const AsyncTag = styled(TagCommon)` color: ${({ theme }) => theme.colors.v3.text.primary}; background: ${({ theme }) => theme.colors.v3.surface.asyncTag}; + font-size: 12px; `; diff --git a/src/components/common/v3/Card/styles.ts b/src/components/common/v3/Card/styles.ts index 9c096661c..51a0a2290 100644 --- a/src/components/common/v3/Card/styles.ts +++ b/src/components/common/v3/Card/styles.ts @@ -5,7 +5,7 @@ export const Container = styled.div` flex-direction: column; border-radius: 4px; border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary}; - background: ${({ theme }) => theme.colors.v3.surface.primary}; + background: ${({ theme }) => theme.colors.v3.surface.secondary}; `; const Section = styled.div` diff --git a/src/components/common/v3/InsightCard/index.tsx b/src/components/common/v3/InsightCard/index.tsx index 01e2692a8..bf91fb1c9 100644 --- a/src/components/common/v3/InsightCard/index.tsx +++ b/src/components/common/v3/InsightCard/index.tsx @@ -1,3 +1,11 @@ +import { NewButton } from "../../NewButton"; +import { TraceIcon } from "../../icons/12px/TraceIcon"; +import { HistogramIcon } from "../../icons/16px/HistogramIcon"; +import { JiraLogoIcon } from "../../icons/16px/JiraLogoIcon"; +import { LiveIcon } from "../../icons/16px/LiveIcon"; +import { PinIcon } from "../../icons/16px/PinIcon"; +import { RecalculateIcon } from "../../icons/16px/RecalculateIcon"; +import { CrossIcon } from "../../icons/CrossIcon"; import { Card } from "../Card"; import { InsightHeader } from "../InsightHeader"; import * as s from "./styles"; @@ -18,8 +26,21 @@ export const InsightCard = (props: InsightCardProps) => { content={props.content} footer={ -
Dismiss
-
+ + + + + + + + + + + } /> diff --git a/src/components/common/v3/InsightCard/styles.ts b/src/components/common/v3/InsightCard/styles.ts index 61a32677c..a7b0cba98 100644 --- a/src/components/common/v3/InsightCard/styles.ts +++ b/src/components/common/v3/InsightCard/styles.ts @@ -1,7 +1,26 @@ import styled from "styled-components"; +import { NewButton } from "../../NewButton"; export const InsightFooter = styled.div` display: flex; flex-direction: row; justify-content: space-between; `; + +export const DismissButton = styled(NewButton)` + &:hover { + color: ${({ theme }) => theme.colors.v3.text.link}; + } + + font-size: 12px; +`; + +export const Actions = styled.div` + display: flex; + flex-direction: row; +`; + +export const MainActions = styled(Actions)` + padding-left: 4px; + gap: 4px; +`; diff --git a/src/components/common/v3/InsightHeader/index.tsx b/src/components/common/v3/InsightHeader/index.tsx index 4b7662cc0..6f52ccebb 100644 --- a/src/components/common/v3/InsightHeader/index.tsx +++ b/src/components/common/v3/InsightHeader/index.tsx @@ -1,6 +1,7 @@ import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo"; import { InfoCircleIcon } from "../../icons/InfoCircleIcon"; import { AsyncTag } from "../AsyncTag"; +import { NewTag } from "../NewTag"; import { Tag } from "../Tag"; import { TagType } from "../Tag/types"; import { Tooltip } from "../Tooltip"; @@ -44,7 +45,7 @@ export const InsightHeader = (props: InsightHeaderProps) => { {props.isAsync && } - {props.isNew && } + {props.isNew && } {props.isActive && ( diff --git a/src/components/common/v3/InsightHeader/styles.ts b/src/components/common/v3/InsightHeader/styles.ts index c5243d1f4..2d40a5e5b 100644 --- a/src/components/common/v3/InsightHeader/styles.ts +++ b/src/components/common/v3/InsightHeader/styles.ts @@ -27,6 +27,8 @@ export const Tags = styled.div` flex-direction: row; gap: 8px; height: 24px; + font-size: 12px; + line-height: 16px; `; export const Active = styled.div` diff --git a/src/components/common/v3/NewTag/NewTag.stories.tsx b/src/components/common/v3/NewTag/NewTag.stories.tsx new file mode 100644 index 000000000..b539d7cbf --- /dev/null +++ b/src/components/common/v3/NewTag/NewTag.stories.tsx @@ -0,0 +1,20 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { NewTag } from "."; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "common/v3/NewTag", + component: NewTag, + 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; + +export const Default: Story = { + args: {} +}; diff --git a/src/components/common/v3/NewTag/index.tsx b/src/components/common/v3/NewTag/index.tsx new file mode 100644 index 000000000..b0a953b46 --- /dev/null +++ b/src/components/common/v3/NewTag/index.tsx @@ -0,0 +1,5 @@ +import * as s from "./styles"; + +export const NewTag = () => { + return ; +}; diff --git a/src/components/common/v3/NewTag/styles.ts b/src/components/common/v3/NewTag/styles.ts new file mode 100644 index 000000000..f6655cf3c --- /dev/null +++ b/src/components/common/v3/NewTag/styles.ts @@ -0,0 +1,6 @@ +import styled from "styled-components"; +import { Tag as TagCommon } from "../Tag"; + +export const NewTag = styled(TagCommon)` + font-size: 12px; +`; diff --git a/src/components/common/v3/Tag/styles.ts b/src/components/common/v3/Tag/styles.ts index c5c7904b0..a3e606e50 100644 --- a/src/components/common/v3/Tag/styles.ts +++ b/src/components/common/v3/Tag/styles.ts @@ -41,8 +41,6 @@ const getTagTheme = ( }; export const Container = styled.div` - font-size: 14px; - font-weight: normal; display: flex; justify-content: center; align-items: center; From 9e634362f461bf0678decd273321af95375323f6 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 23 Feb 2024 17:20:31 +0200 Subject: [PATCH 10/16] make them optional --- src/components/common/v3/InsightCard/index.tsx | 14 ++++++++++---- src/components/common/v3/InsightCard/types.ts | 13 ++++++++----- src/components/common/v3/NewTag/index.tsx | 4 ++-- src/components/common/v3/NewTag/styles.ts | 6 ------ 4 files changed, 20 insertions(+), 17 deletions(-) delete mode 100644 src/components/common/v3/NewTag/styles.ts diff --git a/src/components/common/v3/InsightCard/index.tsx b/src/components/common/v3/InsightCard/index.tsx index bf91fb1c9..56e73a534 100644 --- a/src/components/common/v3/InsightCard/index.tsx +++ b/src/components/common/v3/InsightCard/index.tsx @@ -32,10 +32,16 @@ export const InsightCard = (props: InsightCardProps) => { buttonType="tertiary" /> - - - - + {props.onOpenHistogram && ( + + )} + {props.onRecalculate && ( + + )} + {props.onOpenJiraTicket && ( + + )} + {props.onPin && } diff --git a/src/components/common/v3/InsightCard/types.ts b/src/components/common/v3/InsightCard/types.ts index 774beadbf..223a2d884 100644 --- a/src/components/common/v3/InsightCard/types.ts +++ b/src/components/common/v3/InsightCard/types.ts @@ -9,15 +9,18 @@ export interface InsightCardProps { isAsync?: boolean; isActive?: boolean; onDismiss: (insightId: string) => void; - onOpenHistogram: (insightType: InsightType, spanCodeObjectId: string) => void; - onRecalculate: ( + onOpenHistogram?: ( + insightType: InsightType, + spanCodeObjectId: string + ) => void; + onRecalculate?: ( prefixedCodeObjectId: string, insightType: InsightType ) => void; - onRefresh: (insightType: InsightType, spanCodeObjectId: string) => void; - onOpenJiraTicket: ( + onRefresh?: (insightType: InsightType, spanCodeObjectId: string) => void; + onOpenJiraTicket?: ( insight: GenericCodeObjectInsight, spanCodeObjectId?: string ) => void; - onPin: (insightId: string) => void; + onPin?: (insightId: string) => void; } diff --git a/src/components/common/v3/NewTag/index.tsx b/src/components/common/v3/NewTag/index.tsx index b0a953b46..1b9e4c605 100644 --- a/src/components/common/v3/NewTag/index.tsx +++ b/src/components/common/v3/NewTag/index.tsx @@ -1,5 +1,5 @@ -import * as s from "./styles"; +import { Tag } from "../Tag"; export const NewTag = () => { - return ; + return ; }; diff --git a/src/components/common/v3/NewTag/styles.ts b/src/components/common/v3/NewTag/styles.ts deleted file mode 100644 index f6655cf3c..000000000 --- a/src/components/common/v3/NewTag/styles.ts +++ /dev/null @@ -1,6 +0,0 @@ -import styled from "styled-components"; -import { Tag as TagCommon } from "../Tag"; - -export const NewTag = styled(TagCommon)` - font-size: 12px; -`; From 24eed5a7c45de6f15f980b7d9aa660135c12b6bc Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 23 Feb 2024 19:16:54 +0200 Subject: [PATCH 11/16] SpanNexusInside migration --- .../Insights/SpanNexusInsight/index.tsx | 46 ++++---- .../Insights/SpanNexusInsight/mockData.ts | 1 - .../Insights/SpanNexusInsight/styles.ts | 23 +--- .../common/v3/InsightCard/index.tsx | 108 +++++++++++++++++- .../common/v3/InsightCard/styles.ts | 19 +++ src/components/common/v3/InsightCard/types.ts | 6 +- .../v3/KeyValueContainer/KeyValue/styles.ts | 1 + .../common/v3/KeyValueContainer/styles.ts | 1 - 8 files changed, 153 insertions(+), 52 deletions(-) diff --git a/src/components/Insights/SpanNexusInsight/index.tsx b/src/components/Insights/SpanNexusInsight/index.tsx index 1f3a8dbe0..d6d3ef4e2 100644 --- a/src/components/Insights/SpanNexusInsight/index.tsx +++ b/src/components/Insights/SpanNexusInsight/index.tsx @@ -1,6 +1,6 @@ -import { Tag } from "../../common/Tag"; -import { InsightCard } from "../InsightCard"; -import { Description } from "../styles"; +import { InsightCard } from "../../../components/common/v3/InsightCard"; +import { Tag } from "../../../components/common/v3/Tag"; +import { KeyValue, KeyValueContainer } from "../../common/v3/KeyValueContainer"; import * as s from "./styles"; import { SpanNexusInsightProps } from "./types"; @@ -21,31 +21,29 @@ export const SpanNexusInsight = (props: SpanNexusInsightProps) => { } = insight; return ( - Multiple code flows depend on this location - - - Services - - - - Endpoints - - - - Flows - - + + Multiple code flows depend on this location + + + + + + + {" "} + + + + + {usage && ( - - Usage - - + + + )} - + } onRecalculate={props.onRecalculate} diff --git a/src/components/Insights/SpanNexusInsight/mockData.ts b/src/components/Insights/SpanNexusInsight/mockData.ts index 97d15330c..0dc1395b6 100644 --- a/src/components/Insights/SpanNexusInsight/mockData.ts +++ b/src/components/Insights/SpanNexusInsight/mockData.ts @@ -53,7 +53,6 @@ export const mockedSpanNexusInsight: SpanNexusInsight = { actualStartTime: "2023-08-10T08:04:00Z", flows: 4, services: 3, - usage: "High", entries: 5, isEntriesHigh: false, isFlowsHigh: true, diff --git a/src/components/Insights/SpanNexusInsight/styles.ts b/src/components/Insights/SpanNexusInsight/styles.ts index 5f6c54d93..4fccda7c7 100644 --- a/src/components/Insights/SpanNexusInsight/styles.ts +++ b/src/components/Insights/SpanNexusInsight/styles.ts @@ -1,29 +1,14 @@ import styled from "styled-components"; export const ContentContainer = styled.div` - display: flex; - flex-direction: column; gap: 8px; -`; - -export const Stats = styled.div` display: flex; - border-radius: 4px; - gap: 20px; - justify-content: space-between; + flex-direction: column; `; -export const Stat = styled.div` +export const Description = styled.div` display: flex; - flex-direction: column; gap: 8px; - overflow: hidden; -`; - -export const Key = styled.span` - font-size: 14px; - font-weight: 510; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + font-size: 13px; + color: ${({ theme }) => theme.colors.v3.text.primary}; `; diff --git a/src/components/common/v3/InsightCard/index.tsx b/src/components/common/v3/InsightCard/index.tsx index 56e73a534..2010ca72c 100644 --- a/src/components/common/v3/InsightCard/index.tsx +++ b/src/components/common/v3/InsightCard/index.tsx @@ -1,3 +1,7 @@ +import { useState } from "react"; +import { isString } from "../../../../typeGuards/isString"; +import { formatTimeDistance } from "../../../../utils/formatTimeDistance"; +import { Link } from "../../Link"; import { NewButton } from "../../NewButton"; import { TraceIcon } from "../../icons/12px/TraceIcon"; import { HistogramIcon } from "../../icons/16px/HistogramIcon"; @@ -8,43 +12,137 @@ import { RecalculateIcon } from "../../icons/16px/RecalculateIcon"; import { CrossIcon } from "../../icons/CrossIcon"; import { Card } from "../Card"; import { InsightHeader } from "../InsightHeader"; +import { Tooltip } from "../Tooltip"; import * as s from "./styles"; import { InsightCardProps } from "./types"; +const IS_NEW_TIME_LIMIT = 1000 * 60 * 10; // in milliseconds + export const InsightCard = (props: InsightCardProps) => { + const [isRecalculatingStarted, setIsRecalculatingStarted] = useState(false); + const handleRefreshLinkClick = () => { + props.onRefresh && props.onRefresh(props.insight.type); + }; + + const handleRecalculateClick = () => { + props.insight.prefixedCodeObjectId && + props.onRecalculate && + props.onRecalculate( + props.insight.prefixedCodeObjectId, + props.insight.type + ); + setIsRecalculatingStarted(true); + }; + + const renderRecalculationBlock = ( + actualStartTime: string, + customStartTime: string | null, + isRecalculatingStarted: boolean + ) => { + if (!props.insight.customStartTime && !isRecalculatingStarted) { + return; + } + + if ( + isRecalculatingStarted || + (customStartTime && customStartTime > actualStartTime) + ) { + return ( + + + Applying the new time filter. Wait a few minutes and then refresh. + + + Refresh + + + ); + } + + const areStartTimesEqual = + customStartTime && + new Date(actualStartTime).valueOf() - + new Date(customStartTime).valueOf() === + 0; + + if (areStartTimesEqual) { + const title = new Date(actualStartTime).toString(); + return ( + + Data from:{" "} + + {formatTimeDistance(actualStartTime)} + + + ); + } + }; + + const isNew = isString(props.insight.firstDetected) + ? Date.now() - new Date(props.insight.firstDetected).valueOf() < + IS_NEW_TIME_LIMIT + : false; + return ( } - content={props.content} + content={ + + {props.insight.actualStartTime && + renderRecalculationBlock( + props.insight.actualStartTime, + props.insight.customStartTime, + isRecalculatingStarted + )} + {props.content} + + } footer={ {props.onOpenHistogram && ( )} {props.onRecalculate && ( - + )} {props.onOpenJiraTicket && ( )} {props.onPin && } - - + {props.onGoToTrace && ( + props.onGoToTrace && props.onGoToTrace()} + /> + )} + {props.onGoToLive && ( + props.onGoToLive && props.onGoToLive()} + /> + )} diff --git a/src/components/common/v3/InsightCard/styles.ts b/src/components/common/v3/InsightCard/styles.ts index a7b0cba98..13aca1771 100644 --- a/src/components/common/v3/InsightCard/styles.ts +++ b/src/components/common/v3/InsightCard/styles.ts @@ -7,6 +7,19 @@ export const InsightFooter = styled.div` justify-content: space-between; `; +export const Description = styled.div` + display: flex; + gap: 8px; + font-size: 13px; + color: ${({ theme }) => theme.colors.v3.text.secondary}; +`; + +export const RefreshContainer = styled.div` + display: flex; + flex-direction: column; + gap: 4px; +`; + export const DismissButton = styled(NewButton)` &:hover { color: ${({ theme }) => theme.colors.v3.text.link}; @@ -24,3 +37,9 @@ export const MainActions = styled(Actions)` padding-left: 4px; gap: 4px; `; + +export const ContentContainer = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; diff --git a/src/components/common/v3/InsightCard/types.ts b/src/components/common/v3/InsightCard/types.ts index 223a2d884..28df29513 100644 --- a/src/components/common/v3/InsightCard/types.ts +++ b/src/components/common/v3/InsightCard/types.ts @@ -8,7 +8,7 @@ export interface InsightCardProps { isNew?: boolean; isAsync?: boolean; isActive?: boolean; - onDismiss: (insightId: string) => void; + onDismiss?: (insightId: string) => void; onOpenHistogram?: ( insightType: InsightType, spanCodeObjectId: string @@ -17,10 +17,12 @@ export interface InsightCardProps { prefixedCodeObjectId: string, insightType: InsightType ) => void; - onRefresh?: (insightType: InsightType, spanCodeObjectId: string) => void; + onRefresh?: (insightType: InsightType, spanCodeObjectId?: string) => void; onOpenJiraTicket?: ( insight: GenericCodeObjectInsight, spanCodeObjectId?: string ) => void; onPin?: (insightId: string) => void; + onGoToLive?: () => void; + onGoToTrace?: () => void; } diff --git a/src/components/common/v3/KeyValueContainer/KeyValue/styles.ts b/src/components/common/v3/KeyValueContainer/KeyValue/styles.ts index 78ba455c2..4820bb075 100644 --- a/src/components/common/v3/KeyValueContainer/KeyValue/styles.ts +++ b/src/components/common/v3/KeyValueContainer/KeyValue/styles.ts @@ -9,6 +9,7 @@ export const Container = styled.div` export const Key = styled.div` color: ${({ theme }) => theme.colors.v3.text.secondary}; + font-size: 11px; `; export const Value = styled.div` diff --git a/src/components/common/v3/KeyValueContainer/styles.ts b/src/components/common/v3/KeyValueContainer/styles.ts index 970dbdbad..2fae92a6d 100644 --- a/src/components/common/v3/KeyValueContainer/styles.ts +++ b/src/components/common/v3/KeyValueContainer/styles.ts @@ -4,7 +4,6 @@ export const Container = styled.div` display: flex; align-items: flex-start; gap: 8px; - padding: 8px; justify-content: space-between; align-self: stretch; `; From cfd3aea1a37043b2488813b6aeb86fa3954439c2 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 23 Feb 2024 19:23:00 +0200 Subject: [PATCH 12/16] clean-up --- src/components/common/v3/InsightCard/InsightCard.stories.tsx | 1 - src/components/common/v3/InsightCard/types.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/common/v3/InsightCard/InsightCard.stories.tsx b/src/components/common/v3/InsightCard/InsightCard.stories.tsx index 1a2587e78..6e90721f2 100644 --- a/src/components/common/v3/InsightCard/InsightCard.stories.tsx +++ b/src/components/common/v3/InsightCard/InsightCard.stories.tsx @@ -19,7 +19,6 @@ type Story = StoryObj; export const Default: Story = { args: { isAsync: true, - isNew: true, insight: mockedEndpointNPlusOneInsight } }; diff --git a/src/components/common/v3/InsightCard/types.ts b/src/components/common/v3/InsightCard/types.ts index 28df29513..423347a2d 100644 --- a/src/components/common/v3/InsightCard/types.ts +++ b/src/components/common/v3/InsightCard/types.ts @@ -5,7 +5,6 @@ import { GenericCodeObjectInsight } from "../../../Insights/types"; export interface InsightCardProps { insight: GenericCodeObjectInsight; content?: ReactNode; - isNew?: boolean; isAsync?: boolean; isActive?: boolean; onDismiss?: (insightId: string) => void; From 9f6c849f7189e559e2f7e0670d86d22aee54e4ed Mon Sep 17 00:00:00 2001 From: olehp Date: Tue, 27 Feb 2024 12:51:29 +0200 Subject: [PATCH 13/16] new Span Nexus Insights --- .../Insights/SpanNexusInsight/index.tsx | 47 +++++++------- .../Insights/SpanNexusInsight/styles.ts | 23 +++++-- .../SpanNexusInsight.stories.tsx | 23 +++++++ .../insights/SpanNexusInsight/index.tsx | 55 ++++++++++++++++ .../insights/SpanNexusInsight/mockData.ts | 64 +++++++++++++++++++ .../insights/SpanNexusInsight/styles.ts | 14 ++++ .../common/insights/SpanNexusInsight/types.ts | 5 ++ src/components/Insights/types.ts | 2 + src/components/common/icons/16px/LiveIcon.tsx | 4 +- src/components/common/icons/16px/PinIcon.tsx | 4 +- .../common/icons/16px/RecalculateIcon.tsx | 4 +- .../common/v3/InsightCard/index.tsx | 1 - .../common/v3/InsightHeader/styles.ts | 4 -- 13 files changed, 212 insertions(+), 38 deletions(-) create mode 100644 src/components/Insights/common/insights/SpanNexusInsight/SpanNexusInsight.stories.tsx create mode 100644 src/components/Insights/common/insights/SpanNexusInsight/index.tsx create mode 100644 src/components/Insights/common/insights/SpanNexusInsight/mockData.ts create mode 100644 src/components/Insights/common/insights/SpanNexusInsight/styles.ts create mode 100644 src/components/Insights/common/insights/SpanNexusInsight/types.ts diff --git a/src/components/Insights/SpanNexusInsight/index.tsx b/src/components/Insights/SpanNexusInsight/index.tsx index d6d3ef4e2..233838d40 100644 --- a/src/components/Insights/SpanNexusInsight/index.tsx +++ b/src/components/Insights/SpanNexusInsight/index.tsx @@ -1,13 +1,12 @@ -import { InsightCard } from "../../../components/common/v3/InsightCard"; -import { Tag } from "../../../components/common/v3/Tag"; -import { KeyValue, KeyValueContainer } from "../../common/v3/KeyValueContainer"; +import { Tag } from "../../common/Tag"; +import { InsightCard } from "../InsightCard"; +import { Description } from "../styles"; import * as s from "./styles"; import { SpanNexusInsightProps } from "./types"; const getTagType = (isHigh: boolean) => { return isHigh ? "mediumSeverity" : "default"; }; - export const SpanNexusInsight = (props: SpanNexusInsightProps) => { const { insight } = props; const { @@ -21,29 +20,31 @@ export const SpanNexusInsight = (props: SpanNexusInsightProps) => { } = insight; return ( - - Multiple code flows depend on this location - - - - - - - {" "} - - - - - + Multiple code flows depend on this location + + + Services + + + + Endpoints + + + + Flows + + {usage && ( - - - + + Usage + + )} - + } onRecalculate={props.onRecalculate} diff --git a/src/components/Insights/SpanNexusInsight/styles.ts b/src/components/Insights/SpanNexusInsight/styles.ts index 4fccda7c7..5f6c54d93 100644 --- a/src/components/Insights/SpanNexusInsight/styles.ts +++ b/src/components/Insights/SpanNexusInsight/styles.ts @@ -1,14 +1,29 @@ import styled from "styled-components"; export const ContentContainer = styled.div` - gap: 8px; display: flex; flex-direction: column; + gap: 8px; +`; + +export const Stats = styled.div` + display: flex; + border-radius: 4px; + gap: 20px; + justify-content: space-between; `; -export const Description = styled.div` +export const Stat = styled.div` display: flex; + flex-direction: column; gap: 8px; - font-size: 13px; - color: ${({ theme }) => theme.colors.v3.text.primary}; + overflow: hidden; +`; + +export const Key = styled.span` + font-size: 14px; + font-weight: 510; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; `; diff --git a/src/components/Insights/common/insights/SpanNexusInsight/SpanNexusInsight.stories.tsx b/src/components/Insights/common/insights/SpanNexusInsight/SpanNexusInsight.stories.tsx new file mode 100644 index 000000000..1678f09b0 --- /dev/null +++ b/src/components/Insights/common/insights/SpanNexusInsight/SpanNexusInsight.stories.tsx @@ -0,0 +1,23 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { SpanNexusInsight } from "."; +import { mockedSpanNexusInsight } from "./mockData"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: "Insights/Common/Insights/SpanNexusInsight", + component: SpanNexusInsight, + 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; + +export const Default: Story = { + args: { + insight: mockedSpanNexusInsight + } +}; diff --git a/src/components/Insights/common/insights/SpanNexusInsight/index.tsx b/src/components/Insights/common/insights/SpanNexusInsight/index.tsx new file mode 100644 index 000000000..5f2afd47c --- /dev/null +++ b/src/components/Insights/common/insights/SpanNexusInsight/index.tsx @@ -0,0 +1,55 @@ +import { InsightCard } from "../../../../common/v3/InsightCard"; +import { + KeyValue, + KeyValueContainer +} from "../../../../common/v3/KeyValueContainer"; +import { Tag } from "../../../../common/v3/Tag"; +import * as s from "./styles"; +import { SpanNexusInsightProps } from "./types"; + +const getTagType = (isHigh: boolean) => { + return isHigh ? "mediumSeverity" : "default"; +}; + +export const SpanNexusInsight = (props: SpanNexusInsightProps) => { + const { insight } = props; + const { + entries, + flows, + usage, + services, + isEntriesHigh, + isFlowsHigh, + isServicesHigh + } = insight; + return ( + + + Multiple code flows depend on this location + + + + + + + + + + + + {usage && ( + + + + )} + + + } + onRecalculate={props.onRecalculate} + onRefresh={props.onRefresh} + /> + ); +}; diff --git a/src/components/Insights/common/insights/SpanNexusInsight/mockData.ts b/src/components/Insights/common/insights/SpanNexusInsight/mockData.ts new file mode 100644 index 000000000..c872748d7 --- /dev/null +++ b/src/components/Insights/common/insights/SpanNexusInsight/mockData.ts @@ -0,0 +1,64 @@ +import { InsightType } from "../../../../../types"; +import { + InsightCategory, + InsightScope, + SpanNexusInsight +} from "../../../types"; + +export const mockedSpanNexusInsight: SpanNexusInsight = { + id: "60b54792-8262-4c5d-9628-7cce7979ad6d", + firstDetected: "2023-12-05T17:25:47.010Z", + lastDetected: "2024-01-05T13:14:47.010Z", + criticality: 0, + impact: 0, + firstCommitId: "b3f7b3f", + lastCommitId: "a1b2c3d", + deactivatedCommitId: null, + reopenCount: 0, + ticketLink: null, + name: "Code Nexus Point", + category: InsightCategory.Usage, + specifity: 2, + importance: 3, + scope: InsightScope.Span, + spanInfo: { + name: "HTTP POST /owners/{ownerId}/pets/new", + displayName: "HTTP POST /owners/{ownerId}/pets/new", + instrumentationLibrary: "io.opentelemetry.tomcat-10.0", + spanCodeObjectId: + "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new", + methodCodeObjectId: + "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", + kind: "Server", + codeObjectId: + "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm" + }, + shortDisplayInfo: { + title: "", + targetDisplayName: "", + subtitle: "", + description: "" + }, + codeObjectId: + "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", + decorators: [ + { + title: "Excessive HTTP Calls", + description: "Numerous Http calls to the same endpoint detected " + } + ], + environment: "BOB-LAPTOP[LOCAL]", + severity: 0.0, + isRecalculateEnabled: false, + prefixedCodeObjectId: + "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm", + customStartTime: null, + actualStartTime: "2023-08-10T08:04:00Z", + flows: 4, + services: 3, + entries: 5, + isEntriesHigh: false, + isFlowsHigh: true, + isServicesHigh: false, + type: InsightType.SpanNexus +}; diff --git a/src/components/Insights/common/insights/SpanNexusInsight/styles.ts b/src/components/Insights/common/insights/SpanNexusInsight/styles.ts new file mode 100644 index 000000000..4fccda7c7 --- /dev/null +++ b/src/components/Insights/common/insights/SpanNexusInsight/styles.ts @@ -0,0 +1,14 @@ +import styled from "styled-components"; + +export const ContentContainer = styled.div` + gap: 8px; + display: flex; + flex-direction: column; +`; + +export const Description = styled.div` + display: flex; + gap: 8px; + font-size: 13px; + color: ${({ theme }) => theme.colors.v3.text.primary}; +`; diff --git a/src/components/Insights/common/insights/SpanNexusInsight/types.ts b/src/components/Insights/common/insights/SpanNexusInsight/types.ts new file mode 100644 index 000000000..b0ab27d55 --- /dev/null +++ b/src/components/Insights/common/insights/SpanNexusInsight/types.ts @@ -0,0 +1,5 @@ +import { InsightProps, SpanNexusInsight } from "../../../types"; + +export interface SpanNexusInsightProps extends InsightProps { + insight: SpanNexusInsight; +} diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts index b3d75d9a3..6748f19da 100644 --- a/src/components/Insights/types.ts +++ b/src/components/Insights/types.ts @@ -746,3 +746,5 @@ export interface InsightsQuery { export interface ScopedInsightsQuery extends InsightsQuery { scopedSpanCodeObjectId: string | null; } + +export { InsightType }; diff --git a/src/components/common/icons/16px/LiveIcon.tsx b/src/components/common/icons/16px/LiveIcon.tsx index 80e7eee2d..2a947306e 100644 --- a/src/components/common/icons/16px/LiveIcon.tsx +++ b/src/components/common/icons/16px/LiveIcon.tsx @@ -17,13 +17,13 @@ const LiveIconComponent = (props: IconProps) => { stroke={color} strokeLinecap="round" strokeLinejoin="round" - clipPath="url(#a)" + clipPath="url(#live-clip-1)" > - + diff --git a/src/components/common/icons/16px/PinIcon.tsx b/src/components/common/icons/16px/PinIcon.tsx index e82eb64c4..c5753e754 100644 --- a/src/components/common/icons/16px/PinIcon.tsx +++ b/src/components/common/icons/16px/PinIcon.tsx @@ -17,12 +17,12 @@ const PinIconComponent = (props: IconProps) => { stroke={color} strokeLinecap="round" strokeLinejoin="round" - clipPath="url(#a)" + clipPath="url(#pin-clip-1)" > - + diff --git a/src/components/common/icons/16px/RecalculateIcon.tsx b/src/components/common/icons/16px/RecalculateIcon.tsx index 0da005c3e..837d13ff8 100644 --- a/src/components/common/icons/16px/RecalculateIcon.tsx +++ b/src/components/common/icons/16px/RecalculateIcon.tsx @@ -17,14 +17,14 @@ const RecalculateComponent = (props: IconProps) => { stroke={color} strokeLinecap="round" strokeLinejoin="round" - clipPath="url(#a)" + clipPath="url(#recalculate-clip-1)" > - + diff --git a/src/components/common/v3/InsightCard/index.tsx b/src/components/common/v3/InsightCard/index.tsx index 2010ca72c..c232a6621 100644 --- a/src/components/common/v3/InsightCard/index.tsx +++ b/src/components/common/v3/InsightCard/index.tsx @@ -82,7 +82,6 @@ export const InsightCard = (props: InsightCardProps) => { ? Date.now() - new Date(props.insight.firstDetected).valueOf() < IS_NEW_TIME_LIMIT : false; - return ( theme.colors.v3.text.secondary}; From 14c68b68a4f8b46cf15220aa2091ef75aa8a1641 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt <119138536+kshmidt-digma@users.noreply.github.com> Date: Tue, 27 Feb 2024 12:00:03 +0100 Subject: [PATCH 14/16] Update src/components/common/v3/InsightCard/styles.ts --- src/components/common/v3/InsightCard/styles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/common/v3/InsightCard/styles.ts b/src/components/common/v3/InsightCard/styles.ts index 13aca1771..aa9a00db9 100644 --- a/src/components/common/v3/InsightCard/styles.ts +++ b/src/components/common/v3/InsightCard/styles.ts @@ -3,7 +3,6 @@ import { NewButton } from "../../NewButton"; export const InsightFooter = styled.div` display: flex; - flex-direction: row; justify-content: space-between; `; From 202757004daa2895f7681dd38a60db58c5184970 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt <119138536+kshmidt-digma@users.noreply.github.com> Date: Tue, 27 Feb 2024 12:00:09 +0100 Subject: [PATCH 15/16] Update src/components/common/v3/InsightCard/styles.ts --- src/components/common/v3/InsightCard/styles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/common/v3/InsightCard/styles.ts b/src/components/common/v3/InsightCard/styles.ts index aa9a00db9..776d40f11 100644 --- a/src/components/common/v3/InsightCard/styles.ts +++ b/src/components/common/v3/InsightCard/styles.ts @@ -29,7 +29,6 @@ export const DismissButton = styled(NewButton)` export const Actions = styled.div` display: flex; - flex-direction: row; `; export const MainActions = styled(Actions)` From bb3cc65783ae8c2a5b6ec6eb8b1d2c914bb7a256 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt <119138536+kshmidt-digma@users.noreply.github.com> Date: Tue, 27 Feb 2024 12:00:16 +0100 Subject: [PATCH 16/16] Update src/components/common/v3/InsightHeader/index.tsx --- src/components/common/v3/InsightHeader/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/v3/InsightHeader/index.tsx b/src/components/common/v3/InsightHeader/index.tsx index 6f52ccebb..2e215aed0 100644 --- a/src/components/common/v3/InsightHeader/index.tsx +++ b/src/components/common/v3/InsightHeader/index.tsx @@ -31,7 +31,7 @@ export const InsightHeader = (props: InsightHeaderProps) => { } - > + /> )} {insightTypeInfo?.label}