diff --git a/src/components/Errors/GlobalErrorsList/types.ts b/src/components/Errors/GlobalErrorsList/types.ts index 4bf9c3d83..0c21511c9 100644 --- a/src/components/Errors/GlobalErrorsList/types.ts +++ b/src/components/Errors/GlobalErrorsList/types.ts @@ -41,7 +41,7 @@ export interface GlobalErrorData { Unhandled: number; }; }; - isPinned?: boolean; + pinnedAt?: string; } export interface SetGlobalErrorsDataPayload { diff --git a/src/components/Errors/NewErrorCard/index.tsx b/src/components/Errors/NewErrorCard/index.tsx index a9ab7413e..840743863 100644 --- a/src/components/Errors/NewErrorCard/index.tsx +++ b/src/components/Errors/NewErrorCard/index.tsx @@ -11,6 +11,7 @@ import { } from "../../common/AffectedEndpointsSelector"; import { Option } from "../../common/AffectedEndpointsSelector/types"; import { HistogramIcon } from "../../common/icons/16px/HistogramIcon"; +import { PinFillIcon } from "../../common/icons/16px/PinFillIcon"; import { PinIcon } from "../../common/icons/16px/PinIcon"; import { NewIconButton } from "../../common/v3/NewIconButton"; import { Tooltip } from "../../common/v3/Tooltip"; @@ -120,7 +121,7 @@ export const NewErrorCard = ({ }; const handlePinUnpinButtonClick = () => { - const value = !data.isPinned; + const value = !data.pinnedAt; sendUserActionTrackingEvent( trackingEvents.ERROR_CARD_PIN_UNPIN_BUTTON_CLICKED, { @@ -152,6 +153,7 @@ export const NewErrorCard = ({ }; const isCritical = score.score > HIGH_SEVERITY_SCORE_THRESHOLD; + const isPinned = Boolean(data.pinnedAt); const selectorValue = selectedEndpoint ? getEndpointKey(selectedEndpoint) @@ -162,9 +164,9 @@ export const NewErrorCard = ({ ? [ ] @@ -183,7 +185,7 @@ export const NewErrorCard = ({ ]; return ( - + diff --git a/src/components/Errors/NewErrorCard/styles.ts b/src/components/Errors/NewErrorCard/styles.ts index df2233d5e..a74f4eb59 100644 --- a/src/components/Errors/NewErrorCard/styles.ts +++ b/src/components/Errors/NewErrorCard/styles.ts @@ -17,8 +17,13 @@ export const Container = styled.div` gap: 16px; border-radius: 4px; padding: 12px; - border: ${({ theme, $isPinned }) => - $isPinned ? `1px solid ${theme.colors.v3.stroke.primary}` : "none"}; + border: 1px solid + ${({ theme, $isPinned, $isCritical }) => + $isPinned + ? theme.colors.v3.stroke.primary + : $isCritical + ? theme.colors.v3.pieChart.darkRed + : theme.colors.v3.surface.secondary}; background: ${({ theme, $isCritical }) => $isCritical ? theme.colors.v3.pieChart.darkRed diff --git a/src/components/common/icons/16px/PinFillIcon.tsx b/src/components/common/icons/16px/PinFillIcon.tsx new file mode 100644 index 000000000..cf829433d --- /dev/null +++ b/src/components/common/icons/16px/PinFillIcon.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import { useIconProps } from "../hooks"; +import { IconProps } from "../types"; + +const PinFillIconComponent = (props: IconProps) => { + const { size, color } = useIconProps(props); + + return ( + + + + + + + + + + + + ); +}; + +export const PinFillIcon = React.memo(PinFillIconComponent); diff --git a/src/featureFlags.ts b/src/featureFlags.ts index 423a44cf4..003b645ff 100644 --- a/src/featureFlags.ts +++ b/src/featureFlags.ts @@ -25,7 +25,7 @@ export const featureFlagMinBackendVersions: Record = { [FeatureFlag.IS_ERROR_OCCURRENCE_CHART_ENABLED]: "0.3.141-alpha.3", [FeatureFlag.ARE_GLOBAL_ERRORS_CRITICALITY_AND_UNHANDLED_FILTERS_ENABLED]: "0.3.145", - [FeatureFlag.IS_GLOBAL_ERROR_PIN_ENABLED]: "0.3.147" // TODO: Verify this value after release + [FeatureFlag.IS_GLOBAL_ERROR_PIN_ENABLED]: "0.3.147" }; export const getFeatureFlagValue = (