feat: Prettify JSON input in variable and minify on submit

[dingo4dev]

This pull request introduces improved handling and formatting for JSON values in the variable management UI, making it easier for users to input, validate, and format JSON data. The changes include a new ValueField component with formatting and validation features, utility functions for JSON validation and formatting, and automated minification of JSON before submission. Comprehensive tests for these utilities are also added.

JSON Utility Functions:

• Created isJsonString, prettifyJson, and minifyJson utility functions in utils/json.ts for validating, formatting, and minifying JSON strings.
• Exported these JSON utilities from the main utils/index.ts file for use throughout the codebase.

Form Submission Enhancement:

• Updated the variable form submission logic to automatically minify valid JSON values before sending them to the backend, ensuring consistent data formatting.

Testing:

• Added comprehensive tests for the new JSON utility functions in utils/json.test.ts, covering validation, formatting, and minification scenarios.

---

---

Was generative AI tooling used to co-author this PR?

• Yes (please specify the tool below)
  Generated-by: copilot

[Copilot]

Pull request overview

This PR enhances the Variables “Manage Variable” UI to better support JSON values by adding shared JSON utilities (validate/prettify/minify), formatting controls in the value textarea, and automatic JSON minification before submission.

Changes:

• Added isJsonString, prettifyJson, and minifyJson utilities and exported them from src/utils.
• Updated the Variables form value input to support JSON prettifying (on blur / via a format button) and warn on invalid JSON.
• Added Vitest coverage for the JSON utilities.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
airflow-core/src/airflow/ui/src/utils/json.ts	Introduces JSON validation/formatting/minification helpers.
airflow-core/src/airflow/ui/src/utils/json.test.ts	Adds unit tests for the new JSON helpers.
airflow-core/src/airflow/ui/src/utils/index.ts	Re-exports the JSON utilities for broader usage.
airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/VariableForm.tsx	Adds a ValueField with prettify/format UI and minifies JSON on submit.

---

You can also share your feedback on Copilot code review. Take the survey.

[pierrejeambrun]

IT seems that the PR comments above were all ignored. (mark as resolved without addressing it)

Do you think those were not relevant, can you give more context? I think you'll be able to remove the useEffect.

[dingo4dev]

@pierrejeambrun Thank you for the review. That's definitely my mistake, previously I only focus on the code change by copilot review. I will unresolve them and make suggestion change.

[pierrejeambrun]

Thanks for the PR.

There is no way to know if the user is trying to input a Json or just a regular text. This PRs rely on some arbitrary criteria for instance starts with { or [ but that's no bulletproof. ("a": "b", "c": "d"} would fail detection).

Another option would be a checkbox to activate 'json' linting for instance.

Also across the entire app json validation and display is now done through @monaco-editor/react and we probably should use this here for consistency and also to not re-implement all that IDE features. This would make the PR substantially less complex.