Repository: novuhq/novu
File: apps/dashboard/src/components/workflow-editor/steps/digest/digest-key.tsx (TypeScript)

Code before:
import { useMemo } from 'react';
import { useFormContext } from 'react-hook-form';
import { X } from 'lucide-react';

import { Code2 } from '@/components/icons/code-2';
import { FormField, FormItem, FormLabel, FormMessage } from '@/components/primitives/form/form';
import { useWorkflow } from '@/components/workflow-editor/workflow-provider';
import { parseStepVariablesToLiquidVariables } from '@/utils/parseStepVariablesToLiquidVariables';
import { VariableSelect } from '../../../conditions-editor/variable-select';
import { useSaveForm } from '@/components/workflow-editor/steps/save-form-context';
import { Button } from '@/components/primitives/button';

function parseLiquidVariables(value: string | undefined): string {
  const matches = value?.match(/{{(.*?)}}/g) || [];
  return matches.map((match) => match.replace(/[{}]/g, '').trim()).join(' ');
}

const FORM_CONTROL_NAME = 'controlValues.digestKey';

export const DigestKey = () => {
  const { step } = useWorkflow();
  const variables = useMemo(
    () =>
      step
        ? parseStepVariablesToLiquidVariables(step.variables).filter((variable) =>
            variable.label.startsWith('payload.')
          )
        : [],
    [step]
  );
  const form = useFormContext();
  const { control, setValue } = form;
  const { saveForm } = useSaveForm();

  return (
    <FormField
      control={control}
      name={FORM_CONTROL_NAME}
      render={({ field }) => (
        <FormItem className="flex w-full flex-col">
          <>

Review comment (suggestion):
VariableSelect is working with simple string variables instead of liquid outputs, so we need to maintain the `{{...}}` on save and dashboard view.  

Code after:
import { useMemo } from 'react';
import { useFormContext } from 'react-hook-form';
import { X } from 'lucide-react';

import { Code2 } from '@/components/icons/code-2';
import { FormField, FormItem, FormLabel, FormMessage } from '@/components/primitives/form/form';
import { useWorkflow } from '@/components/workflow-editor/workflow-provider';
import { VariableSelect } from '../../../conditions-editor/variable-select';
import { useSaveForm } from '@/components/workflow-editor/steps/save-form-context';
import { Button } from '@/components/primitives/button';
import { useParseVariables } from '../../../../hooks/use-parse-variables';

function parseLiquidVariables(value: string | undefined): string {
  const matches = value?.match(/{{(.*?)}}/g) || [];
  return matches.map((match) => match.replace(/[{}]/g, '').trim()).join(' ');
}

const FORM_CONTROL_NAME = 'controlValues.digestKey';

export const DigestKey = () => {
  const { step } = useWorkflow();
  const { variables } = useParseVariables(step?.variables);
  const payloadVariables = useMemo(
    () => variables.filter((variable) => variable.label.startsWith('payload.')),
    [variables]
  );
  const form = useFormContext();
  const { control, setValue } = form;
  const { saveForm } = useSaveForm();

  return (
    <FormField
      control={control}
      name={FORM_CONTROL_NAME}
      render={({ field }) => (
        <FormItem className="flex w-full flex-col">
          <>
            <FormLabel tooltip="Digest is grouped by the subscriberId by default. You can add one more aggregation key to group events further.">
              Group events by
            </FormLabel>
            <div className="flex flex-row gap-1">