feat: Add search functionality for variables in workflow (calcom#23191)

* Add search functionality for variables in workflow

* feat: Add search functionality for variables in workflow - updated

* fix failing test

* fix UI of AddVariable

* fix: clear stale input value

* fix: locale

* fix: locale

* chore

---------

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>

Author: ivaibhavm

apps/web/public/static/locales/en/common.json

@@ -3583,5 +3583,7 @@
   "you_have_one_team": "You have one team",
   "consider_consolidating_one_team_org": "Consider setting up an organization to unify billing, admin tools, and analytics across your team.",
   "consider_consolidating_multi_team_org": "Consider setting up an organization to unify billing, admin tools, and analytics across your teams.",
+  "search_variables": "Search variables",
+  "no_variables_found": "No variables found",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/ui/components/editor/plugins/AddVariablesDropdown.tsx

@@ -1,5 +1,6 @@
+import { useMemo, useState } from "react";
+
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import classNames from "@calcom/ui/classNames";
 
 import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown";
 import { Icon } from "../../icon";
@@ -14,9 +15,24 @@ interface IAddVariablesDropdown {
 
 export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
   const { t } = useLocale();
+  const [query, setQuery] = useState("");
+
+  const filteredVariables = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return props.variables;
+    return props.variables.filter((variable) => {
+      const key = variable.toLowerCase();
+      const name = t(`${variable}_variable`).toLowerCase();
+      const info = t(`${variable}_info`).toLowerCase();
+      return key.includes(q) || name.includes(q) || info.includes(q);
+    });
+  }, [props.variables, query, t]);
 
   return (
-    <Dropdown>
+    <Dropdown
+      onOpenChange={(open) => {
+        if (!open) setQuery("");
+      }}>
       <DropdownMenuTrigger aria-label="Add variable" className="focus:bg-muted pt-[6px]">
         <div className="items-center">
           {props.isTextEditor ? (
@@ -49,25 +65,42 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
           <div className="text-subtle mb-3 text-left text-xs font-medium uppercase tracking-wide">
             {t("add_dynamic_variables")}
           </div>
+          <div className="mb-2 px-2">
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={t("search_variables")}
+              aria-label={t("search_variables")}
+              className="border-subtle bg-default focus:ring-brand-800 w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-1"
+            />
+          </div>
           <div className="max-h-64 overflow-y-auto md:max-h-80">
-            {props.variables.map((variable) => (
-              <DropdownMenuItem key={variable} className="hover:ring-0">
-                <button
-                  key={variable}
-                  type="button"
-                  className="hover:bg-muted w-full rounded-md px-3 py-2 text-left transition-colors"
-                  onClick={() => props.addVariable(t(`${variable}_variable`))}>
-                  <div className="flex flex-col space-y-1">
-                    <div className="text-default font-mono text-sm">
-                      {`{${t(`${variable}_variable`).toUpperCase().replace(/ /g, "_")}}`}
+            {filteredVariables.length === 0 ? (
+              <div className="text-subtle px-4 py-2 text-center text-sm">{t("no_variables_found")}</div>
+            ) : (
+              filteredVariables.map((variable) => (
+                <DropdownMenuItem key={variable} className="hover:ring-0">
+                  <button
+                    key={variable}
+                    type="button"
+                    className="hover:bg-muted w-full rounded-md px-3 py-2 text-left transition-colors"
+                    onClick={() => {
+                      props.addVariable(t(`${variable}_variable`));
+                      setQuery("");
+                    }}>
+                    <div className="flex flex-col space-y-1">
+                      <div className="text-default font-mono text-sm">
+                        {`{${t(`${variable}_variable`).toUpperCase().replace(/ /g, "_")}}`}
+                      </div>
+                      <div className="text-muted-foreground hidden text-xs sm:block">
+                        {t(`${variable}_info`)}
+                      </div>
                     </div>
-                    <div className="text-muted-foreground hidden text-xs sm:block">
-                      {t(`${variable}_info`)}
-                    </div>
-                  </div>
-                </button>
-              </DropdownMenuItem>
-            ))}
+                  </button>
+                </DropdownMenuItem>
+              ))
+            )}
           </div>
         </div>
       </DropdownMenuContent>