From 913ca889f7100e4e33847a3308abe3efa000f75b Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Fri, 9 Aug 2024 13:03:42 +0200 Subject: [PATCH] Add status indicator to the Insight Compact card --- .../common/TableInsightStatusBadge/index.tsx | 2 +- .../common/TableInsightStatusBadge/styles.ts | 2 +- .../InsightCard/InsightHeader/index.tsx | 2 +- .../InsightStatusBadge.stories.tsx | 2 +- .../getInsightStatusInfo.ts | 2 +- .../InsightStatusBadge/index.tsx | 4 ++-- .../InsightStatusBadge/styles.ts | 2 +- .../InsightStatusBadge/types.ts | 3 ++- .../common/IssueCompactCard/index.tsx | 22 +++++++++++++++++-- .../common/IssueCompactCard/styles.ts | 6 ++--- 10 files changed, 33 insertions(+), 14 deletions(-) rename src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/{InsightCard/InsightHeader => }/InsightStatusBadge/InsightStatusBadge.stories.tsx (94%) rename src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/{InsightCard/InsightHeader => }/InsightStatusBadge/getInsightStatusInfo.ts (93%) rename src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/{InsightCard/InsightHeader => }/InsightStatusBadge/index.tsx (83%) rename src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/{InsightCard/InsightHeader => }/InsightStatusBadge/styles.ts (89%) rename src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/{InsightCard/InsightHeader => }/InsightStatusBadge/types.ts (66%) diff --git a/src/components/Highlights/common/TableInsightStatusBadge/index.tsx b/src/components/Highlights/common/TableInsightStatusBadge/index.tsx index a2414c598..d2dae4ddd 100644 --- a/src/components/Highlights/common/TableInsightStatusBadge/index.tsx +++ b/src/components/Highlights/common/TableInsightStatusBadge/index.tsx @@ -1,5 +1,5 @@ import { useTheme } from "styled-components"; -import { getInsightStatusInfo } from "../../../Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo"; +import { getInsightStatusInfo } from "../../../Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/getInsightStatusInfo"; import { Tooltip } from "../../../common/v3/Tooltip"; import * as s from "./styles"; import { TableInsightStatusBadgeProps } from "./types"; diff --git a/src/components/Highlights/common/TableInsightStatusBadge/styles.ts b/src/components/Highlights/common/TableInsightStatusBadge/styles.ts index aa316c9e9..bc535a4dc 100644 --- a/src/components/Highlights/common/TableInsightStatusBadge/styles.ts +++ b/src/components/Highlights/common/TableInsightStatusBadge/styles.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { InsightStatusBadge } from "../../../Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge"; +import { InsightStatusBadge } from "../../../Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge"; export const Badge = styled(InsightStatusBadge)` font-size: inherit; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx index edbc52224..b575382db 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx @@ -10,9 +10,9 @@ import { GenericCodeObjectInsight, InsightStatus } from "../../../../../../types"; +import { InsightStatusBadge } from "../../InsightStatusBadge"; import { AsyncTag } from "./AsyncTag"; import { InsightIcon } from "./InsightIcon"; -import { InsightStatusBadge } from "./InsightStatusBadge"; import { InsightStatusTooltipContent } from "./InsightStatusTooltipContent"; import * as s from "./styles"; import { InsightHeaderProps } from "./types"; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/InsightStatusBadge.stories.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/InsightStatusBadge.stories.tsx similarity index 94% rename from src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/InsightStatusBadge.stories.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/InsightStatusBadge.stories.tsx index 6904e7f42..1c245251c 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/InsightStatusBadge.stories.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/InsightStatusBadge.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from "@storybook/react"; import { InsightStatusBadge } from "."; -import { InsightStatus } from "../../../../../../../types"; +import { InsightStatus } from "../../../../../types"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/getInsightStatusInfo.ts similarity index 93% rename from src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/getInsightStatusInfo.ts index f1a9b6d16..ee5b7b0fb 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/getInsightStatusInfo.ts @@ -1,5 +1,5 @@ import { DefaultTheme } from "styled-components/dist/types"; -import { InsightStatus } from "../../../../../../../types"; +import { InsightStatus } from "../../../../../types"; interface InsightStatusInfo { label: string; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/index.tsx similarity index 83% rename from src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/index.tsx rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/index.tsx index 8c1e252a9..0c57a0f02 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/index.tsx @@ -5,7 +5,7 @@ import * as s from "./styles"; import { InsightStatusBadgeProps } from "./types"; export const InsightStatusBadgeComponent = ( - { status, className }: InsightStatusBadgeProps, + { status, className, withLabel = true }: InsightStatusBadgeProps, ref: ForwardedRef ) => { const theme = useTheme(); @@ -19,7 +19,7 @@ export const InsightStatusBadgeComponent = ( return ( - {statusInfo.label} + {withLabel && {statusInfo.label}} ); }; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/styles.ts similarity index 89% rename from src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/styles.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/styles.ts index e37ad4915..a3435177c 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/styles.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/styles.ts @@ -1,5 +1,5 @@ import styled, { css } from "styled-components"; -import { footnoteRegularTypography } from "../../../../../../../../common/App/typographies"; +import { footnoteRegularTypography } from "../../../../../../common/App/typographies"; import { getInsightStatusInfo } from "./getInsightStatusInfo"; import { IndicatorProps } from "./types"; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/types.ts similarity index 66% rename from src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/types.ts rename to src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/types.ts index e5ffc5445..95ffeed70 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/types.ts +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/types.ts @@ -1,8 +1,9 @@ -import { InsightStatus } from "../../../../../../../types"; +import { InsightStatus } from "../../../../../types"; export interface InsightStatusBadgeProps { status: InsightStatus; className?: string; + withLabel?: boolean; } export interface IndicatorProps { diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx index 4a40c0b8d..54ee26ca1 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx @@ -13,12 +13,15 @@ import { ThreeDotsIcon } from "../../../../../../common/icons/ThreeDotsIcon"; import { NewPopover } from "../../../../../../common/NewPopover"; import { Link } from "../../../../../../common/v3/Link"; import { NewIconButton } from "../../../../../../common/v3/NewIconButton"; +import { Tag } from "../../../../../../common/v3/Tag"; import { Tooltip } from "../../../../../../common/v3/Tooltip"; import { MenuList } from "../../../../../../Navigation/common/MenuList"; import { MenuItem } from "../../../../../../Navigation/common/MenuList/types"; import { trackingEvents } from "../../../../../tracking"; import { isEndpointInsight, isSpanInsight } from "../../../../../typeGuards"; import { InsightIcon } from "../InsightCard/InsightHeader/InsightIcon"; +import { KeyValue } from "../InsightCard/InsightHeader/InsightStatusTooltipContent/KeyValue"; +import { getInsightStatusInfo } from "../InsightStatusBadge/getInsightStatusInfo"; import * as s from "./styles"; import { IssueCompactCardProps } from "./types"; @@ -34,14 +37,17 @@ export const IssueCompactCard = ({ onTicketOpen, isCritical }: IssueCompactCardProps) => { + const theme = useTheme(); const isJaegerEnabled = useGlobalStore.use.isJaegerEnabled(); const [isKebabMenuOpen, setIsKebabMenuOpen] = useState(false); const insightTypeInfo = getInsightTypeInfo(insight.type, insight.subType); + const statusInfo = insight.status + ? getInsightStatusInfo(insight.status, theme) + : undefined; const spanInfo = isSpanInsight(insight) || isEndpointInsight(insight) ? insight.spanInfo : undefined; - const theme = useTheme(); const isTicketLinkAttached = Boolean(insight.ticketLink); const handleContainerClick = () => { sendUserActionTrackingEvent(trackingEvents.ISSUE_CARD_CLICKED, { @@ -162,7 +168,19 @@ export const IssueCompactCard = ({ /> )} {insightTypeInfo?.label} - {metric && } + {insight.status && statusInfo && ( + {statusInfo.label}} + placement={"top"} + fullWidth={true} + > + + + )} + {metric && } ` @@ -59,8 +59,8 @@ export const Title = styled.span` color: ${({ theme }) => theme.colors.v3.text.primary}; `; -export const MetricTag = styled(Tag)` - margin-left: 4px; +export const StyledInsightStatusBadge = styled(InsightStatusBadge)` + padding: 10px; `; export const StyledCopyButton = styled(CopyButton)`