Add 'Show record' option for variables

[aa3pankaj]

Show record option in "List Variable" table:

"Show Variable" page:

"Edit Variable" page (Existing feature, adding screenshot below to show the difference in formatting compared to "Show variable" page):

closes: #18436

[SangwanP]

Hi @aa3pankaj, thanks for working on this issue, I had initially opened but could never get to working on it.
I just want to confirm one thing — is the formatting of the variable preserved when viewing it through the ‘show view’?

[aa3pankaj]

@SangwanP added screenshot of "Edit Variable" page, there is some difference in formatting but this is better than what we have in the "List Variable"

[SangwanP]

@SangwanP added screenshot of "Edit Variable" page, there is some difference in formatting but this is better than what we have in the "List Variable"

@aa3pankaj -- Is it possible to preserve the formatting while displaying the Variable through the 'Show' page, like it is preserved in the 'Edit' page? As I mentioned in the issue: #18436, the goal is that the Variable can be viewed as-is through this Show page, preserving the formatting, and not having to pass through a json formatter to get the correct indentation.

[ashb]

white-space: pre-wrap; is the CSS style you are looking for I suspect. Make sure it only gets applied to Variables though, not all Show pages.

[ashb]

Looking at this a bit more, this possibly poses a security risk. Right now "sensitive" values are masked (i.e. not shown in the UI) -- try this and create a Variable called "api_key" and you'll see it as *******, but if we add a show page it won't mask it, making the value readable by anyone with read access to Variables which is likely not what we want.

[potiuk]

Yeah. I think this is indeed risky to have it. I would be against having it in this form - but I think it could be shown with masking. You'd just need to take the "masked" string as source for JSON formatter rather than the value of the variable and convert it back to json. I can't imagine "real" situation where masking would break json structure (It would hve to be a really weird combination of parameter containing a " } or similar weird combination (and we always can fall-back to plain string if json formatting fails).

[aa3pankaj]

@ashb please review, updated code for masking secret values

[uranusjr]

Is it possible to truncate the value field in the listing table? Now that it’s easy to view the complete value, we can probably make the table a bit prettier for long values.

[github-actions]

The PR is likely OK to be merged with just subset of tests for default Python and Database versions without running the full matrix of tests, because it does not modify the core of Airflow. If the committers decide that the full tests matrix is needed, they will add the label 'full tests needed'. Then you should rebase to the latest main or amend the last commit of the PR, and push it with --force-with-lease.

[aa3pankaj]

Using style { table-layout: fixed; word-wrap: break-word;} to fix below issue in case of long values:

Before:

After:

[aa3pankaj]

@uranusjr please review, updated code for truncating long values in 'List Variable' table:

Before:

After:

[potiuk]

LGTM but I am not into the UI stuff: @uranusjr @ashb :)?

[bbovenzi]

UI looks good to me. I wonder if some of the styles can be applied to all of our tables but that doesn't need to be this PR.