chore(feature flags): tooltip for the Match evaluation column (Post…

…Hog#24862) Co-authored-by: Neil Kakkar <[email protected]>
M3GA-MAK3R · Sep 9, 2024 · d217351 · d217351
1 parent f3b6bc4
commit d217351
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/...snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--light.png b/...snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--light.png
diff --git a/frontend/src/scenes/persons/RelatedFeatureFlags.tsx b/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
@@ -1,4 +1,5 @@
-import { LemonInput, LemonSelect, LemonSnack, LemonTable, LemonTag } from '@posthog/lemon-ui'
+import { IconInfo } from '@posthog/icons'
+import { LemonInput, LemonSelect, LemonSnack, LemonTable, LemonTag, Link, Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { LemonTableColumns } from 'lib/lemon-ui/LemonTable'
 import { LemonTableLink } from 'lib/lemon-ui/LemonTable/LemonTableLink'
@@ -89,7 +90,33 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
             },
         },
         {
-            title: 'Match evaluation',
+            title: (
+                <div className="inline-flex items-center space-x-1">
+                    <div className="">Match evaluation</div>
+                    <Tooltip
+                        title={
+                            <div className="space-y-2">
+                                <div>
+                                    This column simulates the feature flag evaluation based on the selected distinct ID,
+                                    current properties, and groups associated with the user. If the actual flag value
+                                    differs, it could be due to different inputs used during evaluation.
+                                </div>
+                                <div>
+                                    If you are using local flag evaluation, you must ensure that you provide any person
+                                    properties, groups, or group properties used to evaluate the release conditions of
+                                    the flag. Read more in the{' '}
+                                    <Link to="https://posthog.com/docs/feature-flags/local-evaluation#step-3-evaluate-your-feature-flag">
+                                        documentation.
+                                    </Link>
+                                </div>
+                            </div>
+                        }
+                        closeDelayMs={200}
+                    >
+                        <IconInfo className="text-muted-alt text-base ml-1" />
+                    </Tooltip>
+                </div>
+            ),
             dataIndex: 'evaluation',
             width: 150,
             render: function Render(_, featureFlag: RelatedFeatureFlag) {