opens feature health tab when clicking warning description

Flagsmith · Feb 24, 2025 · e3b026f · e3b026f
1 parent 7ef0b63
commit e3b026f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/frontend/web/components/FeatureRow.tsx b/frontend/web/components/FeatureRow.tsx
@@ -198,6 +198,14 @@ const FeatureRow: FC<FeatureRowProps> = ({
     )
   }
 
+  const openFeatureHealthTab = (id: number) => {
+    editFeature(
+      projectFlag,
+      environmentFlags?.[id],
+      Constants.featurePanelTabs.FEATURE_HEALTH,
+    )
+  }
+
   const isReadOnly = readOnly || Utils.getFlagsmithHasFeature('read_only_mode')
   const isFeatureHealthEnabled = Utils.getFlagsmithHasFeature('feature_health')
 
@@ -244,13 +252,9 @@ const FeatureRow: FC<FeatureRowProps> = ({
       key={id}
       space
       data-test={`feature-item-${index}`}
-      onClick={() => {
-        const tab =
-          isFeatureHealthEnabled && featureUnhealthyEvents?.length
-            ? Constants.featurePanelTabs.FEATURE_HEALTH
-            : undefined
-        !isReadOnly && editFeature(projectFlag, environmentFlags?.[id], tab)
-      }}
+      onClick={() =>
+        !isReadOnly && editFeature(projectFlag, environmentFlags?.[id])
+      }
     >
       <Flex className='table-column'>
         <Row>
@@ -329,13 +333,21 @@ const FeatureRow: FC<FeatureRowProps> = ({
               {isFeatureHealthEnabled && !!isCompact && (
                 <UnhealthyFlagWarning
                   featureUnhealthyEvents={featureUnhealthyEvents}
+                  onClick={(e) => {
+                    e?.stopPropagation()
+                    openFeatureHealthTab(id)
+                  }}
                 />
               )}
             </Row>
             {!isCompact && <StaleFlagWarning projectFlag={projectFlag} />}
             {isFeatureHealthEnabled && !isCompact && (
               <UnhealthyFlagWarning
                 featureUnhealthyEvents={featureUnhealthyEvents}
+                onClick={(e) => {
+                  e?.stopPropagation()
+                  openFeatureHealthTab(id)
+                }}
               />
             )}
             {description && !isCompact && (

diff --git a/frontend/web/components/UnhealthyFlagWarning.tsx b/frontend/web/components/UnhealthyFlagWarning.tsx
@@ -6,10 +6,12 @@ import { warning } from 'ionicons/icons'
 
 type UnhealthyFlagWarningType = {
   featureUnhealthyEvents?: HealthEvent[]
+  onClick?: (e?: React.MouseEvent) => void
 }
 
 const UnhealthyFlagWarning: FC<UnhealthyFlagWarningType> = ({
   featureUnhealthyEvents,
+  onClick,
 }) => {
   if (!featureUnhealthyEvents?.length) return null
 
@@ -18,7 +20,7 @@ const UnhealthyFlagWarning: FC<UnhealthyFlagWarningType> = ({
   return (
     <Tooltip
       title={
-        <div className='fs-caption' style={{ color }}>
+        <div className='fs-caption' style={{ color }} onClick={onClick}>
           <div>
             This feature has {featureUnhealthyEvents?.length} active alert
             {featureUnhealthyEvents?.length > 1 ? 's' : ''}. Check them in the