From cc0cf333fdfae856250a79862fbf57435f24a311 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Fri, 22 Aug 2025 10:46:42 +0200
Subject: [PATCH] feat: add impact metrics section to NewInUnleash

---
 .../NewInUnleash/NewInUnleash.tsx             | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
index c5f3832bc2..7570eec7df 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
@@ -24,6 +24,7 @@ import { useNavigate } from 'react-router-dom';
 import { formatAssetPath } from 'utils/formatPath';
 import FactCheckOutlinedIcon from '@mui/icons-material/FactCheckOutlined';
 import ReleaseTemplatePreviewImage from 'assets/img/releaseTemplatePreview.png';
+import TrendingUpOutlinedIcon from '@mui/icons-material/TrendingUpOutlined';
 
 const StyledNewInUnleash = styled('div')(({ theme }) => ({
     margin: theme.spacing(2, 0, 1, 0),
@@ -81,6 +82,10 @@ const StyledReleaseManagementIcon = styled(FactCheckOutlinedIcon)(
     }),
 );
 
+const StyledImpactMetricsIcon = styled(TrendingUpOutlinedIcon)(({ theme }) => ({
+    color: theme.palette.primary.main,
+}));
+
 const StyledImg = styled('img')(() => ({
     maxWidth: '100%',
 }));
@@ -103,6 +108,7 @@ export const NewInUnleash = ({
     const { isEnterprise } = useUiConfig();
     const signalsEnabled = useUiFlag('signals');
     const releasePlansEnabled = useUiFlag('releasePlans');
+    const impactMetricsEnabled = useUiFlag('impactMetrics');
 
     const items: NewInUnleashItemDetails[] = [
         {
@@ -179,6 +185,23 @@ export const NewInUnleash = ({
             beta: false,
             popout: true,
         },
+        {
+            label: 'Impact metrics',
+            summary: 'Lightweight telemetry for your application',
+            icon: <StyledImpactMetricsIcon />,
+            onCheckItOut: () => navigate('/impact-metrics'),
+            docsLink: 'https://docs.getunleash.io/reference/impact-metrics',
+            show: isEnterprise() && impactMetricsEnabled,
+            beta: false,
+            longDescription: (
+                <p>
+                    Track and visualize key performance indicators and
+                    application metrics in a customizable dashboard. Monitor how
+                    your feature flags impact system performance, user behavior,
+                    and business metrics in real-time.
+                </p>
+            ),
+        },
     ];
 
     const visibleItems = items.filter(