Update Button styles

.vscode/settings.json

@@ -6,7 +6,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "stylelint.validate": ["typescript"],
   "cSpell.words": [
-    "Checkmark",
+    "borderless",
+    "checkmark",
     "digma",
     "digmathon",
     "digmo",

package.json

@@ -103,7 +103,7 @@
     "@floating-ui/react": "^0.25.1",
     "@tanstack/react-table": "^8.7.8",
     "allotment": "^1.19.0",
-    "axios": "^1.7.2",
+    "axios": "^1.7.4",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^2.29.3",
     "free-email-domains": "^1.2.5",

src/components/Assets/index.tsx

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore";
+import { getFeatureFlagValue } from "../../featureFlags";
 import { useDebounce } from "../../hooks/useDebounce";
 import { usePrevious } from "../../hooks/usePrevious";
+import { FeatureFlag } from "../../types";
 import { sendUserActionTrackingEvent } from "../../utils/actions/sendUserActionTrackingEvent";
 import { useHistory } from "../Main/useHistory";
 import { EmptyState } from "../common/EmptyState";
@@ -40,6 +42,11 @@ export const Assets = () => {
     useState<DataRefresher | null>(null);
   const { goTo } = useHistory();
   const isBackendUpgradeMessageVisible = false;
+  const backendInfo = useGlobalStore.use.backendInfo();
+  const areExtendedAssetsFiltersEnabled = getFeatureFlagValue(
+    backendInfo,
+    FeatureFlag.ARE_EXTENDED_ASSETS_FILTERS_ENABLED
+  );
 
   useEffect(() => {
     if (!scope?.span) {
@@ -174,9 +181,12 @@ export const Assets = () => {
           <AssetsFilter
             onApply={handleApplyFilters}
             filters={selectedFilters}
-            // Temporarily disabled passing of assetScopeOption and searchQuery due to issues on the backend side
-            assetScopeOption={null}
-            searchQuery={""}
+            assetScopeOption={
+              areExtendedAssetsFiltersEnabled ? assetScopeOption : null
+            }
+            searchQuery={
+              areExtendedAssetsFiltersEnabled ? debouncedSearchInputValue : ""
+            }
           />
           <Tooltip title={"Refresh"}>
             <s.RefreshButton

src/components/Highlights/Impact/index.tsx

@@ -5,7 +5,6 @@ import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore";
 import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { SCOPE_CHANGE_EVENTS } from "../../Main/types";
-import { getImpactScoreLabel } from "../../common/ImpactScore";
 import { InfinityIcon } from "../../common/icons/16px/InfinityIcon";
 import { RefreshIcon } from "../../common/icons/16px/RefreshIcon";
 import { TargetIcon } from "../../common/icons/16px/TargetIcon";
@@ -47,6 +46,22 @@ const demoData: EnvironmentImpactData[] = [
   }
 ];
 
+const getImpactScoreLabel = (score: number) => {
+  if (score <= 0) {
+    return "Waiting for data";
+  }
+
+  if (score < 0.4) {
+    return "Low";
+  }
+
+  if (score < 0.8) {
+    return "Medium";
+  }
+
+  return "High";
+};
+
 const getRankTagType = (normalizedRank: number) => {
   if (normalizedRank >= 0.9) {
     return "highSeverity";

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx

@@ -75,6 +75,7 @@ export const SpanScalingInsightCard = ({
                 ticketLink={insight.ticketLink}
                 isHintEnabled={isJiraHintEnabled && i === 0}
                 insightType={insight.type}
+                type={"icon"}
               />
             ];
 

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/index.tsx

@@ -0,0 +1,32 @@
+import { isUndefined } from "../../../../../../../../typeGuards/isUndefined";
+import { NewButton } from "../../../../../../../common/v3/NewButton";
+import { NewIconButton } from "../../../../../../../common/v3/NewIconButton";
+import { Tooltip } from "../../../../../../../common/v3/Tooltip";
+import { ActionButtonProps } from "./types";
+
+export const ActionButton = ({
+  type,
+  icon,
+  label,
+  title,
+  onClick,
+  isDisabled
+}: ActionButtonProps) => (
+  <Tooltip title={title} isDisabled={isUndefined(title)}>
+    {type === "icon" ? (
+      <NewIconButton
+        icon={icon}
+        onClick={onClick}
+        isDisabled={isDisabled}
+        buttonType={"secondaryBorderless"}
+      />
+    ) : (
+      <NewButton
+        icon={icon}
+        label={label}
+        onClick={onClick}
+        isDisabled={isDisabled}
+      />
+    )}
+  </Tooltip>
+);

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/types.ts

@@ -0,0 +1,13 @@
+import { ComponentType, ReactNode } from "react";
+import { IconProps } from "../../../../../../../common/icons/types";
+
+export type ActionButtonType = "icon" | "regular";
+
+export interface ActionButtonProps {
+  type?: ActionButtonType;
+  icon: ComponentType<IconProps>;
+  label: string;
+  title?: ReactNode;
+  onClick: () => void;
+  isDisabled?: boolean;
+}