From eba1b62fd4a16be51c3b697f667de61a099f62ed Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Sun, 5 Apr 2020 23:14:51 -0700
Subject: [PATCH] Enable beautiful json for dashboard metadata editor

---
 superset-frontend/package.json                      |  1 +
 .../src/dashboard/components/PropertiesModal.jsx    | 13 +++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/package.json b/superset-frontend/package.json
index d0a0589f3de1a..360872c8dccb8 100644
--- a/superset-frontend/package.json
+++ b/superset-frontend/package.json
@@ -113,6 +113,7 @@
     "interweave": "^11.2.0",
     "jquery": "^3.4.1",
     "json-bigint": "^0.3.0",
+    "json-stringify-pretty-compact": "^2.0.0",
     "lodash": "^4.17.15",
     "lodash-es": "^4.17.14",
     "mathjs": "^3.20.2",
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal.jsx b/superset-frontend/src/dashboard/components/PropertiesModal.jsx
index 9269299a9c213..e52aab6ebc441 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal.jsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal.jsx
@@ -25,6 +25,7 @@ import AceEditor from 'react-ace';
 import rison from 'rison';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
+import stringify from 'json-stringify-pretty-compact';
 import '../stylesheets/buttons.less';
 
 import getClientErrorObject from '../../utils/getClientErrorObject';
@@ -44,6 +45,14 @@ const defaultProps = {
   show: false,
 };
 
+const prettyJSON = jsonString => {
+  try {
+    return stringify(JSON.parse(jsonString));
+  } catch (err) {
+    return jsonString;
+  }
+};
+
 class PropertiesModal extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -99,7 +108,8 @@ class PropertiesModal extends React.PureComponent {
           ...state.values,
           dashboard_title: dashboard.dashboard_title || '',
           slug: dashboard.slug || '',
-          json_metadata: dashboard.json_metadata || '',
+          // always reformat to pretty json at initial opening
+          json_metadata: prettyJSON(dashboard.json_metadata) || '',
         },
       }));
       const initialSelectedOwners = dashboard.owners.map(owner => ({
@@ -279,7 +289,6 @@ class PropertiesModal extends React.PureComponent {
                     <AceEditor
                       mode="json"
                       name="json_metadata"
-                      defaultValue={this.defaultMetadataValue}
                       value={values.json_metadata}
                       onChange={this.onMetadataChange}
                       theme="textmate"