From 32392f201f3110d1c94d6095f15024ea2d150a25 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 27 Aug 2025 13:24:41 +0200
Subject: [PATCH] feat: add feature impact metrics initial area (#10548)

---
 ...Metrics.tsx => FeatureExposureMetrics.tsx} |  2 +-
 .../FeatureMetrics/FeatureImpactMetrics.tsx   | 32 +++++++++++++++++++
 .../FeatureMetrics/FeatureMetricsOverview.tsx | 15 +++++++++
 .../feature/FeatureView/FeatureView.tsx       |  4 +--
 4 files changed, 50 insertions(+), 3 deletions(-)
 rename frontend/src/component/feature/FeatureView/FeatureMetrics/{FeatureMetrics.tsx => FeatureExposureMetrics.tsx} (99%)
 create mode 100644 frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
 create mode 100644 frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsOverview.tsx

diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureExposureMetrics.tsx
similarity index 99%
rename from frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
rename to frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureExposureMetrics.tsx
index bca2ba69a7..04ffae7ec9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureExposureMetrics.tsx
@@ -23,7 +23,7 @@ import {
 import { aggregateFeatureMetrics } from './aggregateFeatureMetrics.ts';
 import { PageHeader } from 'component/common/PageHeader/PageHeader.tsx';
 
-export const FeatureMetrics = () => {
+export const FeatureExposureMetrics = () => {
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
     const environments = useFeatureMetricsEnvironments(projectId, featureId);
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
new file mode 100644
index 0000000000..401516886e
--- /dev/null
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
@@ -0,0 +1,32 @@
+import { PageContent } from 'component/common/PageContent/PageContent.tsx';
+import { PageHeader } from '../../../common/PageHeader/PageHeader.tsx';
+import { Button, styled, Typography } from '@mui/material';
+import Add from '@mui/icons-material/Add';
+
+const StyledHeaderTitle = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.mainHeader,
+    fontWeight: 'normal',
+    lineHeight: theme.spacing(5),
+}));
+
+export const FeatureImpactMetrics = () => {
+    return (
+        <PageContent>
+            <PageHeader
+                titleElement={
+                    <StyledHeaderTitle>Impact Metrics</StyledHeaderTitle>
+                }
+                actions={
+                    <Button
+                        variant='contained'
+                        startIcon={<Add />}
+                        onClick={() => {}}
+                        disabled={false}
+                    >
+                        Add Chart
+                    </Button>
+                }
+            />
+        </PageContent>
+    );
+};
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsOverview.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsOverview.tsx
new file mode 100644
index 0000000000..df828a8637
--- /dev/null
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsOverview.tsx
@@ -0,0 +1,15 @@
+import { FeatureExposureMetrics } from './FeatureExposureMetrics.tsx';
+import { FeatureImpactMetrics } from './FeatureImpactMetrics.tsx';
+import { useUiFlag } from 'hooks/useUiFlag.ts';
+import { Stack } from '@mui/material';
+
+export const FeatureMetricsOverview = () => {
+    const impactMetricsEnabled = useUiFlag('impactMetrics');
+
+    return (
+        <Stack spacing={2}>
+            {impactMetricsEnabled ? <FeatureImpactMetrics /> : null}
+            <FeatureExposureMetrics />
+        </Stack>
+    );
+};
diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx
index 29a36c75f2..758f59ae22 100644
--- a/frontend/src/component/feature/FeatureView/FeatureView.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx
@@ -3,13 +3,13 @@ import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import FeatureLog from './FeatureLog/FeatureLog.tsx';
 import { FeatureOverview } from './FeatureOverview/FeatureOverview.tsx';
 import { FeatureEnvironmentVariants } from './FeatureVariants/FeatureEnvironmentVariants/FeatureEnvironmentVariants.tsx';
-import { FeatureMetrics } from './FeatureMetrics/FeatureMetrics.tsx';
 import { FeatureSettings } from './FeatureSettings/FeatureSettings.tsx';
 import useLoading from 'hooks/useLoading';
 import { FeatureNotFound } from 'component/feature/FeatureView/FeatureNotFound/FeatureNotFound';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { FeatureViewHeader } from './FeatureViewHeader.tsx';
 import { styled } from '@mui/material';
+import { FeatureMetricsOverview } from './FeatureMetrics/FeatureMetricsOverview.tsx';
 
 export const StyledLink = styled(Link)(() => ({
     maxWidth: '100%',
@@ -42,7 +42,7 @@ export const FeatureView = () => {
         <div ref={ref}>
             <FeatureViewHeader feature={feature} />
             <Routes>
-                <Route path='metrics' element={<FeatureMetrics />} />
+                <Route path='metrics' element={<FeatureMetricsOverview />} />
                 <Route path='logs' element={<FeatureLog />} />
                 <Route
                     path='variants'