Repository: novuhq/novu
File: apps/dashboard/src/components/variable/edit-variable-popover-content.tsx (TypeScript)

Code before:
    },
    [parseRawInput]
  );

  const { handleReorder, handleFilterToggle, handleParamChange, getFilteredFilters } = useFilterManager({
    initialFilters: filters,
    onUpdate: setFilters,
  });

  const suggestedFilters = useSuggestedFilters(name, filters);
  const filteredFilters = useMemo(() => getFilteredFilters(searchQuery), [getFilteredFilters, searchQuery]);

  const currentLiquidValue = useMemo(
    () => originalVariable || formatLiquidVariable(name, defaultVal, filters),
    [originalVariable, name, defaultVal, filters]
  );

  const handleSave = useCallback(() => {
    track(TelemetryEvent.VARIABLE_POPOVER_APPLIED, {
      variableName: name,
      hasDefaultValue: !!defaultVal,
      filtersCount: filters.length,
      filters: filters.map((filter) => filter.value),
    });
    onUpdate(formatLiquidVariable(name, defaultVal, filters));
  }, [name, defaultVal, filters, onUpdate, track]);

  return (
    <PopoverContent className="w-72 p-0" onOpenAutoFocus={handlePopoverOpen} onEscapeKeyDown={onEscapeKeyDown}>
      <div className="bg-bg-weak">
        <div className="flex flex-row items-center justify-between space-y-0 p-1.5">
          <div className="flex items-center gap-1">
            <span className="font-subheading-2x-small text-subheading-2xs text-text-soft">CONFIGURE VARIABLE</span>
          </div>
        </div>
      </div>
      <div className="grid">
        <div className="grid gap-2 p-2">
          <FormItem>
            <FormControl>
              <div className="grid gap-1">
                <label className="text-text-sub text-label-xs">Variable name</label>
                <Input value={name} onChange={(e) => handleNameChange(e.target.value)} className="h-7 text-sm" />
              </div>
            </FormControl>
          </FormItem>

          <FormItem>
            <FormControl>
              <div className="grid gap-1">
                <label className="text-text-sub text-label-xs">Default value</label>

Review comment (suggestion):
```suggestion
      setNameError(`Invalid variable. Did you mean payload.${name}?`);
```

Code after:

  const handleRawLiquidChange = useCallback(
    (value: string) => {
      const { parsedName, parsedDefaultValue } = parseRawInput(value);
      setName(parsedName);
      setDefaultVal(parsedDefaultValue);
    },
    [parseRawInput]
  );

  const { handleReorder, handleFilterToggle, handleParamChange, getFilteredFilters } = useFilterManager({
    initialFilters: filters,
    onUpdate: setFilters,
  });

  const suggestedFilters = useSuggestedFilters(name, filters);
  const filteredFilters = useMemo(() => getFilteredFilters(searchQuery), [getFilteredFilters, searchQuery]);

  const currentLiquidValue = useMemo(
    () => originalVariable || formatLiquidVariable(name, defaultVal, filters),
    [originalVariable, name, defaultVal, filters]
  );

  const handleSave = useCallback(() => {
    if (!isAllowedVariable(name)) {
      setNameError('Not a valid variable');
      return;
    }

    track(TelemetryEvent.VARIABLE_POPOVER_APPLIED, {
      variableName: name,
      hasDefaultValue: !!defaultVal,
      filtersCount: filters.length,
      filters: filters.map((filter) => filter.value),
    });
    onUpdate(formatLiquidVariable(name, defaultVal, filters));

    setNameError(undefined);
  }, [name, defaultVal, filters, onUpdate, track]);

  return (
    <PopoverContent className="w-72 p-0" onOpenAutoFocus={handlePopoverOpen} onEscapeKeyDown={onEscapeKeyDown}>
      <div className="bg-bg-weak">
        <div className="flex flex-row items-center justify-between space-y-0 p-1.5">
          <div className="flex items-center gap-1">
            <span className="font-subheading-2x-small text-subheading-2xs text-text-soft">CONFIGURE VARIABLE</span>
          </div>
        </div>
      </div>
      <div className="grid">
        <div className="grid gap-2 p-2">