[AIRFLOW-4929] Pretty print JSON Variables in UI (#5573)

- serialize JSON variables with newlines and indentation
- use monospace font family for `val` textarea
- set height of `val` textarea dynamically

airflow/models/variable.py

@@ -129,7 +129,7 @@ class Variable(Base, LoggingMixin):
     ):
 
         if serialize_json:
-            stored_value = json.dumps(value)
+            stored_value = json.dumps(value, indent=2)
         else:
             stored_value = str(value)
 

airflow/www/templates/airflow/variable_edit.html

@@ -0,0 +1,29 @@
+{#
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+#}
+{% extends 'appbuilder/general/model/edit.html' %}
+
+{% block tail %}
+  {{ super() }}
+  <style>
+    #val { font-family: monospace; }
+  </style>
+  <script>
+    const height = Math.min(window.innerHeight * 0.5, val.scrollHeight);
+    document.getElementById('val').style.height = `${height}px`;
+  </script>
+{% endblock %}

airflow/www/views.py

@@ -2191,6 +2191,7 @@ class VariableModelView(AirflowModelView):
     route_base = '/variable'
 
     list_template = 'airflow/variable_list.html'
+    edit_template = 'airflow/variable_edit.html'
 
     datamodel = AirflowModelView.CustomSQLAInterface(models.Variable)
 

tests/core.py

@@ -639,7 +639,7 @@ class CoreTest(unittest.TestCase):
 
         def verify_templated_field(context):
             self.assertEqual(context['ti'].task.some_templated_field,
-                             '{"foo": "bar"}')
+                             '{\n  "foo": "bar"\n}')
 
         t = OperatorSubclass(
             task_id='test_complex_template',
@@ -1858,7 +1858,7 @@ class CliTests(unittest.TestCase):
             'variables', '-i', 'variables1.json']))
 
         self.assertEqual('original', Variable.get('bar'))
-        self.assertEqual('{"foo": "bar"}', Variable.get('foo'))
+        self.assertEqual('{\n  "foo": "bar"\n}', Variable.get('foo'))
         # Second export
         cli.variables(self.parser.parse_args([
             'variables', '-e', 'variables2.json']))
@@ -1872,7 +1872,7 @@ class CliTests(unittest.TestCase):
             'variables', '-i', 'variables2.json']))
 
         self.assertEqual('original', Variable.get('bar'))
-        self.assertEqual('{"foo": "bar"}', Variable.get('foo'))
+        self.assertEqual('{\n  "foo": "bar"\n}', Variable.get('foo'))
 
         # Set a dict
         cli.variables(self.parser.parse_args([