Skip to content

fix(ui): pretty print JSON annotations in application summary#28232

Open
shhivakr wants to merge 1 commit into
argoproj:masterfrom
shhivakr:fix-pretty-print-annotations
Open

fix(ui): pretty print JSON annotations in application summary#28232
shhivakr wants to merge 1 commit into
argoproj:masterfrom
shhivakr:fix-pretty-print-annotations

Conversation

@shhivakr

Copy link
Copy Markdown

Fixes #27836

What does this PR do?

Annotations in the Application Summary view are currently rendered as plain strings, which makes JSON annotation values difficult to read.

This PR adds formatting for annotation values that contain valid JSON objects or arrays. When a valid JSON value is detected, it is pretty-printed with indentation to improve readability. Non-JSON annotation values continue to be rendered unchanged.

The annotations section is rendered inside a <pre> element to preserve indentation and line breaks while remaining within the existing expandable view.

Testing

  • Ran pnpm lint
  • Ran pnpm build

Checklist:

  • Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
  • The title of the PR states what changed and the related issues number (used for the release note).
  • The title of the PR conforms to the Title of the PR.
  • I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
  • I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
  • Does this PR require documentation updates?
  • I've updated documentation as required by this PR.
  • I have signed off all my commits as required by DCO.
  • I have written unit and/or e2e tests for my change.
  • My build is green.
  • My new feature complies with the feature status guidelines.
  • I have added a brief description of why this PR is necessary and/or what this PR solves.
  • Optional. My organization is added to USERS.md.
  • Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

Signed-off-by: Shiva Kumar <shivakrwpa1@gmail.com>
@shhivakr shhivakr requested review from a team as code owners June 10, 2026 20:03
Copilot AI review requested due to automatic review settings June 10, 2026 20:03
@bunnyshell

bunnyshell Bot commented Jun 10, 2026

Copy link
Copy Markdown

❗ Preview Environment stop on Bunnyshell failed

See: Environment Details | Pipeline Logs

Available commands (reply to this comment):

  • 🔴 /bns:stop to stop again the environment
  • 🔵 /bns:start to start the environment
  • 🚀 /bns:deploy to redeploy the environment
  • /bns:delete to remove the environment

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates the Application Summary annotations display to be more readable by rendering annotations in a <pre> block with line breaks and pretty-printing JSON-looking values.

Changes:

  • Added formatAnnotationValue() to pretty-print JSON annotation values.
  • Switched ANNOTATIONS rendering from a single-line space-joined string to a multi-line <pre> with newline separation.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +63 to +75
function formatAnnotationValue(value: string) {
const trimmed = value.trim();

try {
if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
return JSON.stringify(JSON.parse(trimmed), null, 2);
}
} catch {
// Ignore invalid JSON and return original value
}

return value;
}
Comment on lines +131 to +132
.map(annotation => `${annotation}=${formatAnnotationValue(app.metadata.annotations[annotation])}`)
.join('\n\n')}
Comment on lines +130 to +132
{Object.keys(app.metadata.annotations || {})
.map(annotation => `${annotation}=${formatAnnotationValue(app.metadata.annotations[annotation])}`)
.join('\n\n')}
@codecov

codecov Bot commented Jun 10, 2026

Copy link
Copy Markdown

Bundle Report

Changes will increase total bundle size by 205 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
argo-cd-ui-array-push 10.67MB 205 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: argo-cd-ui-array-push

Assets Changed:

Asset Name Size Change Total Size Change (%)
main.*.js 205 bytes 3.46MB 0.01%

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ApplicationSet UI improvements

2 participants