Improve UI for canonical Variable values (reference from a variable to another variable)

[yaronuliel]

Is there an existing request for this feature?

• I have searched the existing issues for this feature request and I know that duplicates will be closed

Is your feature request related to a problem?

When entering a variable inside the value input of another variable (e.g. a variable named API_URL received the value {{ API_URL_STAGING }} - The value appears as a simple text, and doesn't provide typeahead/auto-completion

To be clear - the functionality of nesting variable does work, and there is no problem with that (in the previous example - the value of API_URL_STAGING is being used for API_URL as expected)

Describe the solution you'd like

1. While typing the value of a variable, and entering {{ - the autocomplete UI used for variables in other parts of the app should appear.
2. When a variable has another variable in it's value ({{ XYZ }}) it should be visually presented as a variable, with the hover tooltip that shows the value, the text color representing validitiy, etc...
3. The auto-complete UI component that helps select a variable from the list, should show the calculated value that will be used, rather than the raw text (currently it shows the name of the nested variable - screenshot 1)
4. The tooltip that shows the value of the variable should also show the calculated value, rather than the raw text (Screenshot 2).

Screenshot 1

Screenshot 2

Describe alternatives you've considered

No response

Additional context

Nested/canonical variables seems like a hidden feature, that might even not be planned, but still works - and has a great value when you need to store multiple.

P.S I know that the environments feature exists and better be used for the examples I've shown. please focus on the essence and not the example 😄