chore: Quick create tag (#3556)

Flagsmith · Mar 7, 2024 · 92d825a · 92d825a
1 parent 63df651
commit 92d825a
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 5 deletions.
diff --git a/frontend/web/components/tags/AddEditTags.tsx b/frontend/web/components/tags/AddEditTags.tsx
@@ -5,13 +5,16 @@ import Utils from 'common/utils/utils'
 import InlineModal from 'components/InlineModal'
 import Constants from 'common/constants'
 import TagValues from './TagValues'
-import { useDeleteTagMutation, useGetTagsQuery } from 'common/services/useTag'
+import {
+  useCreateTagMutation,
+  useDeleteTagMutation,
+  useGetTagsQuery,
+} from 'common/services/useTag'
 import { Tag as TTag } from 'common/types/responses'
 import Tag from './Tag'
 import CreateEditTag from './CreateEditTag'
 import Input from 'components/base/forms/Input'
 import Button from 'components/base/forms/Button'
-import ModalHR from 'components/modals/ModalHR'
 import Icon from 'components/Icon'
 
 type AddEditTagsType = {
@@ -35,6 +38,7 @@ const AddEditTags: FC<AddEditTagsType> = ({
   const [tag, setTag] = useState<TTag>()
   const [tab, setTab] = useState<'SELECT' | 'CREATE' | 'EDIT'>('SELECT')
   const [deleteTag] = useDeleteTagMutation()
+  const [createTag] = useCreateTagMutation()
   const { permission: projectAdminPermission } = useHasPermission({
     id: projectId,
     level: 'project',
@@ -89,7 +93,28 @@ const AddEditTags: FC<AddEditTagsType> = ({
     return projectTags || []
   }, [filter, projectTags])
 
+  const exactTag = useMemo(() => {
+    const _filter = filter.toLowerCase()
+    if (_filter) {
+      return projectTags?.find((tag) => tag.label === filter)
+    }
+    return null
+  }, [filter, projectTags])
   const noTags = projectTags && !projectTags.length
+
+  const color =
+    Constants.tagColors[projectTags?.length || 0] || Constants.tagColors[0]
+  const submit = () => {
+    createTag({
+      projectId,
+      tag: { color, description: '', label: filter, project: projectId },
+    }).then((res) => {
+      if (!res?.error && res.data) {
+        selectTag(res.data)
+        setFilter('')
+      }
+    })
+  }
   return (
     <div>
       <Row className='inline-tags mt-2'>
@@ -107,6 +132,11 @@ const AddEditTags: FC<AddEditTagsType> = ({
             <Input
               autoFocus
               value={filter}
+              onKeyPress={(e) => {
+                if (e.key === 'Enter') {
+                  submit()
+                }
+              }}
               onChange={(e: InputEvent) =>
                 setFilter(Utils.safeParseEventValue(e))
               }
@@ -183,9 +213,19 @@ const AddEditTags: FC<AddEditTagsType> = ({
                     </Row>
                   </div>
                 ))}
-              {projectTags && projectTags.length && !filteredTags.length ? (
-                <div className='text-center text-dark mt-4'>
-                  No results for "<strong>{filter}</strong>"
+              {!!filter && !exactTag ? (
+                <div
+                  onClick={submit}
+                  className='text-center flex-row text-dark justify-content-center'
+                >
+                  <div className='me-2'>Create</div>
+                  <Tag
+                    className='truncated-tag'
+                    tag={{
+                      color,
+                      label: filter,
+                    }}
+                  />
                 </div>
               ) : null}
               {noTags && (

diff --git a/frontend/web/styles/project/_tags.scss b/frontend/web/styles/project/_tags.scss
@@ -88,3 +88,9 @@
   height: 16px;
   border-radius: 8px;
 }
+
+.truncated-tag {
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}