Add available variables dropdown

[thomtrp]

• Add variable dropdown
• Insert variables on click
• Save variable as {{stepName.object.myVar}} and display only myVar

Enregistrement.de.l.ecran.2024-10-22.a.17.30.11.mov

[greptile-apps]

PR Summary

This pull request introduces a new variable dropdown feature for the workflow editor, focusing on enhancing the user experience when working with variables. Here are the key changes:

• Implemented SearchVariablesDropdown component for selecting variables in workflows
• Added VariableTagInput component, combining a Tiptap-based text editor with variable insertion functionality
• Created utility functions for parsing and initializing editor content with variable tags
• Introduced unit tests for initializeEditorContent and parseEditorContent functions
• Updated WorkflowEditActionFormSendEmail to use the new VariableTagInput for email and subject fields

_{14 file(s) reviewed, 22 comment(s)
Edit PR Review Bot Settings | Greptile}

[martmull]

Really cool😍 LGTM

[Devessier]

Awesome work, @thomtrp! That's so nice to see the variable editor in work. You rock!

I wrote a few comments. Some nitpicks not really important, and some comments about Tiptap's use. I'm happy to discuss them with you. Thank you!

[Devessier]

Your updates are awesome. I left a few comments 😄

[Devessier]

I think you need to flush the debouncer to be sure to persist the changes when the right drawer is closed. If the user closes the drawer before the timer ends, the HTTP call will never be made.

I did it that way somewhere else in the application:

  const saveAction = useDebouncedCallback(/* ... */);

  useEffect(() => {
    return () => {
      saveAction.flush();
    };
  }, [saveAction]);

[Devessier]

I think you can make TypeScript happy with the following code. It seems to work still. Does it make sense?

Suggested change

	// @ts-expect-error - addCommands is missing from the NodeConfig type
	addCommands: () => ({
	insertVariableTag:
	(variable: string) =>
	({ commands }: { commands: Partial<RawCommands> }) => {
	return commands.insertContent?.({
	type: 'variableTag',
	attrs: { variable },
	});
	},
	}),
	addCommands: () => ({
	insertVariableTag:
	(variable: string) =>
	({ commands }) => {
	commands.insertContent({
	type: 'variableTag',
	attrs: { variable },
	});
	return true;
	},
	}),

[thomtrp]

🤯 I did try the boolean but I still using : { commands: Partial<RawCommands> } as type. Thank you!

[Devessier]

Haha 😄 I found somewhere in the documentation where they added custom commands and used this syntax.

[Devessier]

Perfect!!