fix: Hides unhealthy tag (#5158)

Flagsmith · Feb 25, 2025 · e4f2a49 · e4f2a49
1 parent 0592f83
commit e4f2a49
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/frontend/web/components/modals/CreateFlag.js b/frontend/web/components/modals/CreateFlag.js
@@ -652,7 +652,6 @@ const CreateFlag = class extends Component {
                 tooltip={Constants.strings.TAGS_DESCRIPTION}
                 component={
                   <AddEditTags
-                    hideTagsByType={['UNHEALTHY']}
                     readOnly={!!identity || !createFeature}
                     projectId={`${this.props.projectId}`}
                     value={this.state.tags}

diff --git a/frontend/web/components/tags/AddEditTags.tsx b/frontend/web/components/tags/AddEditTags.tsx
@@ -10,7 +10,7 @@ import {
   useDeleteTagMutation,
   useGetTagsQuery,
 } from 'common/services/useTag'
-import { TagType, Tag as TTag } from 'common/types/responses'
+import { Tag as TTag } from 'common/types/responses'
 import Tag from './Tag'
 import CreateEditTag from './CreateEditTag'
 import Input from 'components/base/forms/Input'
@@ -20,14 +20,12 @@ import TagUsage from 'components/TagUsage'
 
 type AddEditTagsType = {
   value?: number[]
-  hideTagsByType?: TagType[]
   readOnly?: boolean
   onChange: (value: number[]) => void
   projectId: string
 }
 
 const AddEditTags: FC<AddEditTagsType> = ({
-  hideTagsByType = [],
   onChange,
   projectId,
   readOnly,
@@ -36,11 +34,22 @@ const AddEditTags: FC<AddEditTagsType> = ({
   const { data, isLoading: tagsLoading } = useGetTagsQuery({
     projectId,
   })
+
+  const isFeatureHealthEnabled = Utils.getFlagsmithHasFeature('feature_health')
+
+  const unhealthyTagId = useMemo(() => {
+    return data?.find((tag) => tag?.type === 'UNHEALTHY')?.id
+  }, [data])
+
   const projectTags = useMemo(() => {
+    if (!isFeatureHealthEnabled) {
+      return data
+    }
+
     return data?.filter(
-      (projectTag) => !hideTagsByType.includes(projectTag.type),
+      (projectTag) => !['UNHEALTHY'].includes(projectTag.type),
     )
-  }, [data, hideTagsByType])
+  }, [data, isFeatureHealthEnabled])
 
   const [filter, setFilter] = useState('')
   const [isOpen, setIsOpen] = useState(false)
@@ -142,6 +151,7 @@ const AddEditTags: FC<AddEditTagsType> = ({
       <Row className='inline-tags mt-2'>
         <TagValues
           hideNames={false}
+          hideTags={unhealthyTagId ? [unhealthyTagId] : undefined}
           projectId={projectId}
           onAdd={readOnly ? undefined : toggle}
           value={value}

diff --git a/frontend/web/components/tags/TagValues.tsx b/frontend/web/components/tags/TagValues.tsx
@@ -13,20 +13,24 @@ type TagValuesType = {
   children?: ReactNode
   inline?: boolean
   hideNames?: boolean
+  hideTags?: number[]
 }
 
 const TagValues: FC<TagValuesType> = ({
   children,
   hideNames = true,
+  hideTags = [],
   inline,
   onAdd,
   projectId,
   value,
 }) => {
-  const { data: tags } = useGetTagsQuery({ projectId })
+  const { data } = useGetTagsQuery({ projectId })
   const Wrapper = inline ? Fragment : Row
   const permissionType = 'MANAGE_TAGS'
 
+  const tags = data?.filter((tag) => !hideTags?.includes(tag.id))
+
   const { permission: createEditTagPermission } = useHasPermission({
     id: projectId,
     level: 'project',