Fix pin/unpin actions

src/components/Errors/GlobalErrorsList/types.ts

@@ -41,7 +41,7 @@ export interface GlobalErrorData {
       Unhandled: number;
     };
   };
-  isPinned?: boolean;
+  pinnedAt?: string;
 }
 
 export interface SetGlobalErrorsDataPayload {

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 = ({
       ? [
           <NewIconButton
             key={"pin-unpin"}
-            isHighlighted={data.isPinned}
+            isHighlighted={isPinned}
             buttonType={"secondaryBorderless"}
-            icon={PinIcon}
+            icon={isPinned ? PinFillIcon : PinIcon}
             onClick={handlePinUnpinButtonClick}
           />
         ]
@@ -183,7 +185,7 @@ export const NewErrorCard = ({
   ];
 
   return (
-    <s.Container $isCritical={isCritical}>
+    <s.Container $isCritical={isCritical} $isPinned={isPinned}>
       <s.Header>
         <s.TitleContainer>
           <Tooltip title={errorType}>

src/components/Errors/NewErrorCard/styles.ts

@@ -17,8 +17,13 @@ export const Container = styled.div<ContainerProps>`
   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

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 (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 16 16"
+    >
+      <g
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        clipPath="url(#pin-fill-16px-clip-1)"
+      >
+        <path
+          fill={color}
+          d="M14.35 6.15a.5.5 0 0 0 0-.71l-3.79-3.8a.5.5 0 0 0-.7 0l-3.59 3.6s-1.73-.87-3.58.63a.5.5 0 0 0-.04.74l6.74 6.74a.5.5 0 0 0 .75-.05c.52-.7 1.35-2.13.63-3.56l3.58-3.6Z"
+        />
+        <path d="M6.02 9.98 3 13" />
+      </g>
+      <defs>
+        <clipPath id="pin-fill-16px-clip-1">
+          <path fill="#fff" d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const PinFillIcon = React.memo(PinFillIconComponent);

src/featureFlags.ts

@@ -25,7 +25,7 @@ export const featureFlagMinBackendVersions: Record<FeatureFlag, string> = {
   [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 = (