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 = (