From 924325f62311e7239b910daef109819c198b7137 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Fri, 29 Aug 2025 11:26:11 +0200
Subject: [PATCH] feat: make impact metrics config save call (#10576)

---
 .../FeatureMetrics/FeatureImpactMetrics.tsx   | 10 ++++--
 .../useImpactMetricsApi.ts                    | 32 +++++++++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts

diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
index e431c8eb90..17674218b9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
@@ -3,8 +3,10 @@ import { PageHeader } from '../../../common/PageHeader/PageHeader.tsx';
 import { Button, styled, Typography } from '@mui/material';
 import Add from '@mui/icons-material/Add';
 import { useImpactMetricsMetadata } from 'hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts';
-import { useMemo, useState } from 'react';
+import { type FC, useMemo, useState } from 'react';
 import { ChartConfigModal } from '../../../impact-metrics/ChartConfigModal/ChartConfigModal.tsx';
+import { useImpactMetricsApi } from 'hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts';
+import { useRequiredPathParam } from 'hooks/useRequiredPathParam.ts';
 
 const StyledHeaderTitle = styled(Typography)(({ theme }) => ({
     fontSize: theme.fontSizes.mainHeader,
@@ -12,8 +14,10 @@ const StyledHeaderTitle = styled(Typography)(({ theme }) => ({
     lineHeight: theme.spacing(5),
 }));
 
-export const FeatureImpactMetrics = () => {
+export const FeatureImpactMetrics: FC = () => {
+    const feature = useRequiredPathParam('featureId');
     const [modalOpen, setModalOpen] = useState(false);
+    const { createImpactMetric } = useImpactMetricsApi();
 
     const {
         metadata,
@@ -56,7 +60,7 @@ export const FeatureImpactMetrics = () => {
             <ChartConfigModal
                 open={modalOpen}
                 onClose={() => setModalOpen(false)}
-                onSave={() => {}}
+                onSave={(data) => createImpactMetric({ ...data, feature })}
                 initialConfig={undefined}
                 metricSeries={metricSeries}
                 loading={metadataLoading}
diff --git a/frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts b/frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts
new file mode 100644
index 0000000000..5a9edf1073
--- /dev/null
+++ b/frontend/src/hooks/api/actions/useImpactMetricsSettingsApi/useImpactMetricsApi.ts
@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import useAPI from '../useApi/useApi.js';
+import type { ImpactMetricsConfigSchema } from 'openapi/models/impactMetricsConfigSchema.js';
+
+export const useImpactMetricsApi = () => {
+    const { makeRequest, createRequest, errors, loading } = useAPI({
+        propagateErrors: true,
+    });
+
+    const createImpactMetric = useCallback(
+        async (config: ImpactMetricsConfigSchema) => {
+            const path = `api/admin/impact-metrics/config`;
+            const req = createRequest(
+                path,
+                {
+                    method: 'POST',
+                    body: JSON.stringify(config),
+                },
+                'updateImpactMetric',
+            );
+
+            return makeRequest(req.caller, req.id);
+        },
+        [makeRequest, createRequest],
+    );
+
+    return {
+        createImpactMetric,
+        errors,
+        loading,
+    };
+};