feat: show available parent dependency options (#4837)

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

@@ -3,6 +3,7 @@ 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';
+import { useParentOptions } from 'hooks/api/getters/useParentOptions/useParentOptions';
 
 interface IAddDependencyDialogueProps {
     featureId: string;
@@ -15,6 +16,11 @@ const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
     marginBottom: theme.spacing(1.5),
 }));
 
+const REMOVE_DEPENDENCY_OPTION = {
+    key: 'none (remove dependency)',
+    label: 'none (remove dependency)',
+};
+
 export const AddDependencyDialogue = ({
     featureId,
     showDependencyDialogue,
@@ -22,6 +28,13 @@ export const AddDependencyDialogue = ({
 }: IAddDependencyDialogueProps) => {
     const [parent, setParent] = useState('');
     const { addDependency, removeDependencies } = useDependentFeaturesApi();
+    const { parentOptions } = useParentOptions(featureId);
+    const options = parentOptions
+        ? [
+              REMOVE_DEPENDENCY_OPTION,
+              ...parentOptions.map(parent => ({ key: parent, label: parent })),
+          ]
+        : [REMOVE_DEPENDENCY_OPTION];
 
     return (
         <Dialogue
@@ -29,7 +42,7 @@ export const AddDependencyDialogue = ({
             title="Add parent feature dependency"
             onClose={onClose}
             onClick={async () => {
-                if (parent === '') {
+                if (parent === REMOVE_DEPENDENCY_OPTION.key) {
                     await removeDependencies(featureId);
                 } else {
                     await addDependency(featureId, { feature: parent });
@@ -47,11 +60,7 @@ export const AddDependencyDialogue = ({
                 <Typography>What feature do you want to depend on?</Typography>
                 <StyledSelect
                     fullWidth
-                    options={[
+                    options={options}
-                        { key: 'colors', label: 'colors' },
-                        { key: 'parent', label: 'parent' },
-                        { key: 'empty', label: '' },
-                    ]}
                     value={parent}
                     onChange={setParent}
                 />

frontend/src/hooks/api/getters/useParentOptions/useParentOptions.ts

@@ -0,0 +1,25 @@
+import useSWR, { SWRConfiguration } from 'swr';
+import { formatApiPath } from 'utils/formatPath';
+import handleErrorResponses from '../httpErrorResponseHandler';
+
+export const useParentOptions = (
+    childFeatureId: string,
+    options: SWRConfiguration = {}
+) => {
+    const path = formatApiPath(
+        `/api/admin/projects/default/features/${childFeatureId}/parents`
+    );
+    const { data, error, mutate } = useSWR(path, fetcher, options);
+
+    return {
+        parentOptions: data,
+        error,
+        loading: !error && !data,
+    };
+};
+
+const fetcher = async (path: string): Promise<string[]> => {
+    const res = await fetch(path).then(handleErrorResponses('Parent Options'));
+    const data = await res.json();
+    return data;
+};