feat: Connect add dependency api (#4831)

frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx

@@ -2,8 +2,10 @@ import React, { useState } from 'react';
 import { Box, styled, Typography } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
+import { useDependentFeaturesApi } from 'hooks/api/actions/useDependentFeaturesApi/useDependentFeaturesApi';
 
 interface IAddDependencyDialogueProps {
+    featureId: string;
     showDependencyDialogue: boolean;
     onClose: () => void;
 }
@@ -14,18 +16,27 @@ const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
 }));
 
 export const AddDependencyDialogue = ({
+    featureId,
     showDependencyDialogue,
     onClose,
 }: IAddDependencyDialogueProps) => {
-    const [dependency, setDependency] = useState('');
+    const [parent, setParent] = useState('');
+    const { addDependency, removeDependencies } = useDependentFeaturesApi();
 
     return (
         <Dialogue
             open={showDependencyDialogue}
             title="Add parent feature dependency"
             onClose={onClose}
-            onClick={() => {}}
+            onClick={async () => {
-            primaryButtonText={'Add'}
+                if (parent === '') {
+                    await removeDependencies(featureId);
+                } else {
+                    await addDependency(featureId, { feature: parent });
+                }
+                onClose();
+            }}
+            primaryButtonText="Add"
             secondaryButtonText="Cancel"
         >
             <Box>
@@ -37,11 +48,12 @@ export const AddDependencyDialogue = ({
                 <StyledSelect
                     fullWidth
                     options={[
-                        { key: 'a', label: 'featureA' },
+                        { key: 'colors', label: 'colors' },
+                        { key: 'parent', label: 'parent' },
                         { key: 'empty', label: '' },
                     ]}
-                    value={dependency}
+                    value={parent}
-                    onChange={setDependency}
+                    onChange={setParent}
                 />
             </Box>
         </Dialogue>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails.tsx

@@ -94,6 +94,7 @@ export const FeatureOverviewSidePanelDetails = ({
                 }
             />
             <AddDependencyDialogue
+                featureId={feature.name}
                 onClose={() => setShowDependencyDialogue(false)}
                 showDependencyDialogue={
                     dependentFeatures && showDependencyDialogue

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

@@ -1,4 +1,7 @@
 import useAPI from '../useApi/useApi';
+import useToast from '../../../useToast';
+import { formatUnknownError } from '../../../../utils/formatUnknownError';
+import { useCallback } from 'react';
 
 // TODO: generate from orval
 interface IParentFeaturePayload {
@@ -8,6 +11,7 @@ export const useDependentFeaturesApi = () => {
     const { makeRequest, createRequest, errors, loading } = useAPI({
         propagateErrors: true,
     });
+    const { setToastData, setToastApiError } = useToast();
 
     const addDependency = async (
         childFeature: string,
@@ -22,13 +26,67 @@ export const useDependentFeaturesApi = () => {
         );
         try {
             await makeRequest(req.caller, req.id);
-        } catch (e) {
+
-            throw e;
+            setToastData({
+                title: 'Dependency added',
+                type: 'success',
+            });
+        } catch (error) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 
+    const removeDependency = async (
+        childFeature: string,
+        parentFeature: string
+    ) => {
+        const req = createRequest(
+            `/api/admin/projects/default/features/${childFeature}/dependencies/${parentFeature}`,
+            {
+                method: 'DELETE',
+            }
+        );
+        try {
+            await makeRequest(req.caller, req.id);
+
+            setToastData({
+                title: 'Dependency removed',
+                type: 'success',
+            });
+        } catch (error) {
+            setToastApiError(formatUnknownError(error));
+        }
+    };
+
+    const removeDependencies = async (childFeature: string) => {
+        const req = createRequest(
+            `/api/admin/projects/default/features/${childFeature}/dependencies`,
+            {
+                method: 'DELETE',
+            }
+        );
+        try {
+            await makeRequest(req.caller, req.id);
+
+            setToastData({
+                title: 'Dependencies removed',
+                type: 'success',
+            });
+        } catch (error) {
+            setToastApiError(formatUnknownError(error));
+        }
+    };
+
+    const callbackDeps = [
+        createRequest,
+        makeRequest,
+        setToastData,
+        formatUnknownError,
+    ];
     return {
-        addDependency,
+        addDependency: useCallback(addDependency, callbackDeps),
+        removeDependency: useCallback(removeDependency, callbackDeps),
+        removeDependencies: useCallback(removeDependencies, callbackDeps),
         errors,
         loading,
     };