Enable beautiful json for dashboard metadata editor

apache · Apr 12, 2020 · eba1b62 · eba1b62
1 parent a797465
commit eba1b62
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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"