From a89ea3bbca5ceb14df689eb8e0f6d270faf49f30 Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Sun, 26 Jan 2025 20:24:26 +0200
Subject: [PATCH] feat(dashboard): Liquidjs Filters tooltip NV-5235 (#7561)

---
 .source                                       |  2 +-
 .../variable-popover/variable-popover.tsx     | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/.source b/.source
index 139dc582124..998124fc5c8 160000
--- a/.source
+++ b/.source
@@ -1 +1 @@
-Subproject commit 139dc582124cbeae3eb5f5b510fc209628e079ed
+Subproject commit 998124fc5c815f759f366b1c47c0a6e29511571b
diff --git a/apps/dashboard/src/components/primitives/control-input/variable-popover/variable-popover.tsx b/apps/dashboard/src/components/primitives/control-input/variable-popover/variable-popover.tsx
index 3308ef7e5fe..d468e376fdc 100644
--- a/apps/dashboard/src/components/primitives/control-input/variable-popover/variable-popover.tsx
+++ b/apps/dashboard/src/components/primitives/control-input/variable-popover/variable-popover.tsx
@@ -14,8 +14,9 @@ import { Switch } from '@/components/primitives/switch';
 import { useTelemetry } from '@/hooks/use-telemetry';
 import { TelemetryEvent } from '@/utils/telemetry';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { RiAddFill } from 'react-icons/ri';
+import { RiAddFill, RiQuestionLine } from 'react-icons/ri';
 import { Separator } from '../../separator';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../tooltip';
 import { FilterItem } from './components/filter-item';
 import { FilterPreview } from './components/filter-preview';
 import { FiltersList } from './components/filters-list';
@@ -145,7 +146,21 @@ export function VariablePopover({ variable, onUpdate }: VariablePopoverProps) {
           <FormItem>
             <FormControl>
               <div className="grid gap-1">
-                <label className="text-text-sub text-label-xs">LiquidJS Filters</label>
+                <label className="text-text-sub text-label-xs">
+                  LiquidJS Filters
+                  <Tooltip>
+                    <TooltipTrigger className="relative top-0.5 ml-1 cursor-pointer">
+                      <RiQuestionLine className="text-text-soft h-3 w-3" />
+                    </TooltipTrigger>
+                    <TooltipContent side="right" className="max-w-sm">
+                      <p>
+                        LiquidJS filters modify the variable output in sequence, with each filter using the previous
+                        one’s result. Reorder them by dragging and dropping.
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </label>
+
                 <Popover open={isCommandOpen} onOpenChange={setIsCommandOpen}>
                   <PopoverTrigger asChild>
                     <button className="text-text-soft bg-background flex h-[30px] w-full items-center justify-between rounded-md border px-2 text-sm">