feat: implement call to add release-plan to feature environment (#8778)

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx

@@ -3,6 +3,9 @@ import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { Link, styled } from '@mui/material';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
+import { useReleasePlansApi } from 'hooks/api/actions/useReleasePlansApi/useReleasePlansApi';
+import useToast from 'hooks/useToast';
+import { formatUnknownError } from 'utils/formatUnknownError';
 
 const StyledIcon = styled('div')(({ theme }) => ({
     width: theme.spacing(4),
@@ -57,15 +60,31 @@ export const FeatureReleasePlanCard = ({
 }: IFeatureReleasePlanCardProps) => {
     const Icon = getFeatureStrategyIcon('releasePlanTemplate');
     const { trackEvent } = usePlausibleTracker();
+    const { addReleasePlanToFeature } = useReleasePlansApi();
+    const { setToastApiError, setToastData } = useToast();
+
+    const addReleasePlan = async () => {
+        try {
+            await addReleasePlanToFeature(
+                featureId,
+                releasePlanTemplate.id,
+                projectId,
+                environmentId,
+            );
+            setToastData({
+                type: 'success',
+                title: 'Release plan added',
+            });
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
+        }
 
-    const addReleasePlan = () => {
         trackEvent('release-plans', {
             props: {
                 eventType: 'add',
                 name: releasePlanTemplate.name,
             },
         });
-        console.log('TODO: call and implement addReleasePlan');
     };
 
     return (

frontend/src/hooks/api/actions/useReleasePlansApi/useReleasePlansApi.ts

@@ -0,0 +1,31 @@
+import useAPI from '../useApi/useApi';
+export const useReleasePlansApi = () => {
+    const { makeRequest, makeLightRequest, createRequest, errors, loading } =
+        useAPI({
+            propagateErrors: true,
+        });
+
+    const addReleasePlanToFeature = async (
+        featureName: string,
+        releasePlanTemplateId: string,
+        projectId: string,
+        environment: string,
+    ): Promise<void> => {
+        const requestId = 'createReleasePlanTemplate';
+        const path = `api/admin/projects/${projectId}/features/${featureName}/environments/${environment}/release_plans/${releasePlanTemplateId}`;
+        const req = createRequest(
+            path,
+            {
+                method: 'POST',
+                body: JSON.stringify({}),
+            },
+            requestId,
+        );
+
+        await makeRequest(req.caller, req.id);
+    };
+
+    return {
+        addReleasePlanToFeature,
+    };
+};