diff --git a/frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx b/frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx index 241c9b977e..de55602c47 100644 --- a/frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx +++ b/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 ( { - if (parent === '') { + if (parent === REMOVE_DEPENDENCY_OPTION.key) { await removeDependencies(featureId); } else { await addDependency(featureId, { feature: parent }); @@ -47,11 +60,7 @@ export const AddDependencyDialogue = ({ What feature do you want to depend on? diff --git a/frontend/src/hooks/api/getters/useParentOptions/useParentOptions.ts b/frontend/src/hooks/api/getters/useParentOptions/useParentOptions.ts new file mode 100644 index 0000000000..5d1eddb54c --- /dev/null +++ b/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 => { + const res = await fetch(path).then(handleErrorResponses('Parent Options')); + const data = await res.json(); + return data; +};