vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.0k Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Vaibhav
2025-08-30 22:06:53 +05:30
committed by GitHub
co-authored by Kartik Saini
parent 4960c4b97c
commit d44a41c587
2 changed files with 54 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/public/static/locales/en/common.json
+2
View File
@@ -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
+52 -19
View File
@@ -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>