chore: Show tag usage when deleting (#3573)

Co-authored-by: Matthew Elwell <[email protected]>

frontend/common/types/requests.ts

@@ -131,7 +131,12 @@ export type Req = {
     environment: string
     user: string
   }
-  getProjectFlags: { project: string; environmentId?: string }
+  getProjectFlags: {
+    project: string
+    environmentId?: string
+    tags?: string[]
+    is_archived?: boolean
+  }
   getProjectFlag: { project: string; id: string }
   getRolesPermissionUsers: { organisation_id: string; role_id: string }
   deleteRolesPermissionUsers: {

frontend/web/components/TagUsage.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react'
+import { useGetProjectFlagsQuery } from 'common/services/useProjectFlag'
+import WarningMessage from './WarningMessage'
+
+type TagUsageType = {
+  projectId: string
+  tag: string
+}
+
+const TagUsage: FC<TagUsageType> = ({ projectId, tag }) => {
+  const { data } = useGetProjectFlagsQuery(
+    {
+      is_archived: false,
+      project: projectId,
+      tags: [tag],
+    },
+    { refetchOnMountOrArgChange: true },
+  )
+  if (!data?.count) {
+    return null
+  }
+  return (
+    <div className='mt-4'>
+      <WarningMessage
+        warningMessage={`${data?.count} feature${
+          data?.count !== 1 ? 's are' : ' is'
+        } using this tag.`}
+      />
+    </div>
+  )
+}
+
+export default TagUsage

frontend/web/components/tags/AddEditTags.tsx

@@ -16,6 +16,7 @@ import CreateEditTag from './CreateEditTag'
 import Input from 'components/base/forms/Input'
 import Button from 'components/base/forms/Button'
 import Icon from 'components/Icon'
+import TagUsage from 'components/TagUsage'
 
 type AddEditTagsType = {
   value?: number[]
@@ -71,6 +72,7 @@ const AddEditTags: FC<AddEditTagsType> = ({
             <Tag tag={tag} />
           </div>
           ? This action cannot be undone.
+          <TagUsage projectId={projectId} tag={tag.id} />
         </div>
       ),
       destructive: true,