feat: add tags selection to feature creation (#7674)

![image](https://github.com/user-attachments/assets/539bd2a0-d036-4a8d-9752-fd60c7e4bf24)

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<Set<string>>(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,

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: <ProjectIcon />,
         text: 'Projects allow you to group feature flags together in the management UI.',
     },
+    tags: {
+        icon: <Label />,
+        text: 'Tags are used to group flags together in Unleash.',
+    },
     type: {
         icon: <FlagIcon />,
         text: "A flag's type conveys its purpose.",
@@ -79,6 +86,8 @@ export const CreateFeatureDialog = ({
     const {
         type,
         setType,
+        tags,
+        setTags,
         name,
         setName,
         project,
@@ -150,6 +159,7 @@ export const CreateFeatureDialog = ({
         useGlobalFeatureSearch();
 
     const { project: projectInfo } = useProjectOverview(project);
+    const { tags: allTags } = useAllTags();
 
     const resourceLimitsEnabled = useUiFlag('resourceLimits');
 
@@ -262,6 +272,34 @@ export const CreateFeatureDialog = ({
                                     />
                                 }
                             />
+                            <MultiSelectConfigButton
+                                tooltip={{
+                                    header: 'Select tags',
+                                }}
+                                description={configButtonData.tags.text}
+                                selectedOptions={tags}
+                                options={allTags.map((tag) => ({
+                                    label: `${tag.type}:${tag.value}`,
+                                    value: `${tag.type}:${tag.value}`,
+                                }))}
+                                onChange={setTags}
+                                button={{
+                                    label:
+                                        tags.size > 0
+                                            ? `${tags.size} selected`
+                                            : 'Tags',
+                                    labelWidth: `${'nn selected'.length}ch`,
+                                    icon: <Label />,
+                                }}
+                                search={{
+                                    label: 'Filter tags',
+                                    placeholder: 'Select tags',
+                                }}
+                                onOpen={() =>
+                                    setDocumentation(configButtonData.tags)
+                                }
+                                onClose={clearDocumentationOverride}
+                            />
                             <SingleSelectConfigButton
                                 tooltip={{
                                     header: 'Select a flag type',