chore: Add existing tag check (#3194)

Author: kyle-ssg

frontend/web/components/tags/CreateEditTag.tsx

@@ -1,18 +1,19 @@
-import React, { FC, KeyboardEvent, useEffect, useState } from 'react'
+import React, { FC, KeyboardEvent, useEffect, useMemo, useState } from 'react'
 import { Tag as TTag } from 'common/types/responses'
 import Constants from 'common/constants'
 import Permission from 'common/providers/Permission'
 import Utils from 'common/utils/utils'
 import {
   useCreateTagMutation,
+  useGetTagsQuery,
   useUpdateTagMutation,
 } from 'common/services/useTag'
 
 import InputGroup from 'components/base/forms/InputGroup'
 import Button from 'components/base/forms/Button'
 import Tag from './Tag'
 import InlineModal from 'components/InlineModal'
-import InfoMessage from 'components/InfoMessage'
+import ErrorMessage from 'components/ErrorMessage'
 
 type CreateEditTagType = {
   projectId: string
@@ -43,6 +44,18 @@ const CreateEditTag: FC<CreateEditTagType> = ({
     editTag,
     { data: editData, isLoading: saving, isSuccess: editSuccess },
   ] = useUpdateTagMutation()
+
+  const { data: tags } = useGetTagsQuery({ projectId })
+  const existingTag = useMemo(() => {
+    if (tag?.label && tags) {
+      const lowercaseTag = tag?.label.toLowerCase()
+      return tags?.find((tag) => {
+        return tag.label.toLowerCase() === lowercaseTag
+      })
+    }
+    return false
+  }, [tags, tag?.label])
+
   const tagsSaving = creating || saving
 
   useEffect(() => {
@@ -115,7 +128,11 @@ const CreateEditTag: FC<CreateEditTagType> = ({
                     onClick={save}
                     type='button'
                     disabled={
-                      tagsSaving || !tag?.color || !tag?.label || !permission
+                      !!existingTag ||
+                      tagsSaving ||
+                      !tag?.color ||
+                      !tag?.label ||
+                      !permission
                     }
                   >
                     Save Tag
@@ -143,7 +160,6 @@ const CreateEditTag: FC<CreateEditTagType> = ({
           onChange={(e: InputEvent) => update('label', e)}
         />
         <InputGroup
-          className='mb-0'
           title='Select a color'
           component={
             <Row className={'gap-3'}>
@@ -160,6 +176,9 @@ const CreateEditTag: FC<CreateEditTagType> = ({
           }
           className='select-colour'
         />
+        {existingTag && (
+          <ErrorMessage error={'A tag already exists with this name'} />
+        )}
       </div>
     </InlineModal>
   )