fix(dashboard): multiple lines and indentation when editing json (#11501)

* multiple lines and indentation when editing json

* fix tests, address pr feedback

* remove json minification
This commit is contained in:
David Aaron Suddjian 2020-11-02 13:39:04 -08:00 committed by GitHub
parent a874b14a8a
commit d7aa3d792b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 5 deletions

View File

@ -33109,6 +33109,11 @@
"integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
"dev": true
},
"json-stringify-pretty-compact": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
"integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
},
"json-stringify-safe": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",

View File

@ -113,6 +113,7 @@
"interweave": "^11.2.0",
"jquery": "^3.5.1",
"json-bigint": "^1.0.0",
"json-stringify-pretty-compact": "^2.0.0",
"lodash": "^4.17.20",
"lodash-es": "^4.17.14",
"mathjs": "^3.20.2",

View File

@ -87,14 +87,14 @@ describe('PropertiesModal', () => {
const modalInstance = wrapper.find('PropertiesModal').instance();
modalInstance.setState({
values: {
json_metadata: '{"color_scheme":"foo"}',
json_metadata: '{"color_scheme": "foo"}',
},
});
it('will update the metadata', () => {
const spy = jest.spyOn(modalInstance, 'onMetadataChange');
modalInstance.onColorSchemeChange('SUPERSET_DEFAULT');
expect(spy).toHaveBeenCalledWith(
'{"color_scheme":"SUPERSET_DEFAULT"}',
'{"color_scheme": "SUPERSET_DEFAULT"}',
);
});
});
@ -176,7 +176,7 @@ describe('PropertiesModal', () => {
expect(modalInstance.state.values.dashboard_title).toEqual('New Title');
expect(modalInstance.state.values.slug).toEqual('/new');
expect(modalInstance.state.values.json_metadata).toEqual(
'{"something":"foo"}',
'{"something": "foo"}',
);
});

View File

@ -19,6 +19,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col, FormControl } from 'react-bootstrap';
import jsonStringify from 'json-stringify-pretty-compact';
import Button from 'src/components/Button';
import Dialog from 'react-bootstrap-dialog';
import { AsyncSelect } from 'src/components/Select';
@ -119,7 +120,7 @@ class PropertiesModal extends React.PureComponent {
Object.keys(jsonMetadataObj).includes('color_scheme')
) {
jsonMetadataObj.color_scheme = value;
this.onMetadataChange(JSON.stringify(jsonMetadataObj));
this.onMetadataChange(jsonStringify(jsonMetadataObj));
}
this.updateFormState('colorScheme', value);
@ -157,7 +158,10 @@ class PropertiesModal extends React.PureComponent {
...state.values,
dashboard_title: dashboard.dashboard_title || '',
slug: dashboard.slug || '',
json_metadata: dashboard.json_metadata || '',
// format json with 2-space indentation
json_metadata: dashboard.json_metadata
? jsonStringify(jsonMetadataObj)
: '',
colorScheme: jsonMetadataObj.color_scheme,
},
}));