[Bug]: Code snippet does not convert well on to the UI for the action selector

[ramsaptami]

Is there an existing issue for this?

• [X] I have searched the existing issues

Description

Use given snippet on a trigger field of any supported widget and convert to UI mode and observe the UI structure

{{
		showAlert('hi')
		setInterval(() => {console.log('this is an interval')} , 7000, 'id')
		showAlert('hello')
			.then(() => {return Api1.data})
		.then(() => clearInterval('id'))
	}}

Steps To Reproduce

Public Sample App

No response

Environment

Production

Issue video log

No response

Version

Cloud

[satbir121]

This issue was working when we did the testing. We missed it because there was no cypress test for this. @ravikp7

[ramsaptami]

The issue here roots from spaces between the code. Further steps to repro:

1. format a piece of code on the editor so it's got spacing prettified and some more custom indents
2. copy this code to the property pane and observe the UI breaks when settings are toggled

Another sample snippet can be found on #22180

[ravikp7]

@satbir121 @ramsaptami In this case where we're returning Api1.data in the then block after the second showAlert, that syntax is not supported by our code to ui parsing. This is one of the many variations that we'll not be able to support. It's happening due to the use of return keyword being used.

Should we try to disable switching to UI in such cases as soon as we identify one?

[ramsaptami]

I'll let you'll take the call around return keyword since it's quite commonly used on custom snippets. Also, @ravikp7 even the console statement inside a callback was somehow missed because of the spacing.

[ravikp7]

@ramsaptami I agree that those are commonly used scenarios. But we need design updates to support such cases. Right now, it's not supported in the current design. I've disabled the JS toggle for now for such cases.

We can start a discussion to support more commonly used cases.