Skip to content

Preview JSON fields as inline badges in tables - #72353

Merged
bbovenzi merged 3 commits into
apache:mainfrom
astronomer:dev/json-editor-inline-badges-8bfd08
Sep 9, 2026
Merged

bbovenzi merged 3 commits into
apache:mainfrom
astronomer:dev/json-editor-inline-badges-8bfd08

Conversation

@bbovenzi

@bbovenzi bbovenzi commented Aug 31, 2026 •

Copy link
Copy Markdown
Contributor

Our json preview took up two lines of space but without showing any useful context. Instead, we try to show a badge to preview the information with a "+X More" button similar to our LimitedItemsList component. When expanded, we go back to rendering the json object.

Screenshot 2026-08-31 at 5 16 24 PM
Was generative AI tooling used to co-author this PR?
  • Yes (please specify the tool below)
    Clause Opus 5

  • Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
  • For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
  • When adding dependency, check compliance with the ASF 3rd Party License Policy.
  • For significant user-facing changes create newsfragment: {pr_number}.significant.rst, in airflow-core/newsfragments. You can add this file in a follow-up commit after the PR is created so you know the PR number.

@pierrejeambrun pierrejeambrun left a comment •

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks nice. Tested and working as expected.

It's not showing that for details params, I was expecting the same. Checked against asset event extra, working as expected. We might want to double check all locations

Image

@vatsrahul1001 vatsrahul1001 added the type:misc/internal Changelog: Misc changes that should appear in change log label Sep 7, 2026
@vatsrahul1001

Copy link
Copy Markdown
Contributor

@pierrejeambrun could use a approve if this looks good

A collapsed JSON cell showed an anonymous `{ ... }` over two lines, taking
real estate in every table row while telling the reader nothing about the
payload. Summarising the top-level entries instead lets someone scan a conf
or an audit-log extra without opening anything, and keeps the full editor one
click away for the payloads a single line cannot describe.
@bbovenzi
bbovenzi force-pushed the dev/json-editor-inline-badges-8bfd08 branch from caf07dd to cdd00d9 Compare September 9, 2026 18:18
@bbovenzi

bbovenzi commented Sep 9, 2026

Copy link
Copy Markdown
Contributor Author

Fixed. This is for the preview pages that allow expand/collapse. I'll do a follow up PR to check more places where we show the whole json blob all at once.

@bbovenzi
bbovenzi merged commit 082b596 into apache:main Sep 9, 2026
89 checks passed
@bbovenzi
bbovenzi deleted the dev/json-editor-inline-badges-8bfd08 branch September 9, 2026 19:34
@github-actions

github-actions Bot commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

Backport failed to create: v3-3-test. View the failure log Run details

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

Status Branch Result
❌ v3-3-test Commit Link

You can attempt to backport this manually by running:

cherry_picker 082b596 v3-3-test

This should apply the commit to the v3-3-test branch and leave the commit in conflict state marking
the files that need manual conflict resolution.

After you have resolved the conflicts, you can continue the backport process by running:

cherry_picker --continue

If you don't have cherry-picker installed, see the installation guide.

@bbovenzi bbovenzi added area:UI Related to UI/UX. For Frontend Developers. and removed backport-to-v3-3-test type:misc/internal Changelog: Misc changes that should appear in change log labels Sep 9, 2026
imrichardwu pushed a commit to imrichardwu/airflow that referenced this pull request Sep 11, 2026
* UI: Preview JSON fields as inline badges in tables

A collapsed JSON cell showed an anonymous `{ ... }` over two lines, taking
real estate in every table row while telling the reader nothing about the
payload. Summarising the top-level entries instead lets someone scan a conf
or an audit-log extra without opening anything, and keeps the full editor one
click away for the payloads a single line cannot describe.

* Fix import statement for Chakra UI components

* pnpm format
xvega pushed a commit to xvega/airflow that referenced this pull request Sep 13, 2026
* UI: Preview JSON fields as inline badges in tables

A collapsed JSON cell showed an anonymous `{ ... }` over two lines, taking
real estate in every table row while telling the reader nothing about the
payload. Summarising the top-level entries instead lets someone scan a conf
or an audit-log extra without opening anything, and keeps the full editor one
click away for the payloads a single line cannot describe.

* Fix import statement for Chakra UI components

* pnpm format
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants