diff --git a/frontend/src/component/feature/hooks/useFeatureForm.ts b/frontend/src/component/feature/hooks/useFeatureForm.ts index 451123581e..e76944bab8 100644 --- a/frontend/src/component/feature/hooks/useFeatureForm.ts +++ b/frontend/src/component/feature/hooks/useFeatureForm.ts @@ -3,6 +3,7 @@ import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi'; import useQueryParams from 'hooks/useQueryParams'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { formatUnknownError } from 'utils/formatUnknownError'; +import type { ITag } from 'interfaces/tags'; const useFeatureForm = ( initialName = '', @@ -16,6 +17,7 @@ const useFeatureForm = ( const { validateFeatureToggleName } = useFeatureApi(); const toggleQueryName = params.get('name'); const [type, setType] = useState(initialType); + const [tags, setTags] = useState>(new Set()); const [name, setName] = useState(toggleQueryName || initialName); const [project, setProject] = useState(projectId || initialProject); const [description, setDescription] = useState(initialDescription); @@ -48,11 +50,17 @@ const useFeatureForm = ( }, [initialImpressionData]); const getTogglePayload = () => { + const splitTags: ITag[] = Array.from(tags).map((tag) => { + const [type, value] = tag.split(':'); + return { type, value }; + }); + const tagsPayload = tags.size > 0 ? { tags: splitTags } : {}; return { type, name, description, impressionData, + ...tagsPayload, }; }; @@ -77,6 +85,8 @@ const useFeatureForm = ( return { type, setType, + tags, + setTags, name, setName, project, diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx index f032198490..e361bb9a46 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx @@ -31,7 +31,10 @@ import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons'; import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes'; import { DialogFormTemplate } from 'component/common/DialogFormTemplate/DialogFormTemplate'; import { SingleSelectConfigButton } from 'component/common/DialogFormTemplate/ConfigButtons/SingleSelectConfigButton'; +import useAllTags from 'hooks/api/getters/useAllTags/useAllTags'; +import Label from '@mui/icons-material/Label'; import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon'; +import { MultiSelectConfigButton } from 'component/common/DialogFormTemplate/ConfigButtons/MultiSelectConfigButton'; interface ICreateFeatureDialogProps { open: boolean; @@ -56,6 +59,10 @@ const configButtonData = { icon: , text: 'Projects allow you to group feature flags together in the management UI.', }, + tags: { + icon: