52 json diff patch

.babelrc

@@ -2,6 +2,7 @@
   "presets": [
     "es2015",
     "react",
-    "stage-2"
+    "stage-2",
+    "stage-0"
   ]
 }

app/components/Secrets/Generic/Generic.jsx

@@ -318,6 +318,7 @@ class GenericSecretBackend extends React.Component {
                 modal={false}
                 actions={actions}
                 open={this.state.openEditObjectModal}
+                autoDetectWindowHeight={true}
                 autoScrollBodyContent={true}
                 onRequestClose={() => {
                     this.setState({ openEditObjectModal: false, secretContent: '' })

app/components/shared/JsonEditor.jsx

@@ -1,5 +1,8 @@
 import React, { PropTypes } from 'react';
 import JSONEditor from 'jsoneditor';
+import JsonDiffReact from 'jsondiffpatch-for-react';
+import Checkbox from 'material-ui/Checkbox';
+import Divider from 'material-ui/Divider';
 import 'jsoneditor/src/css/reset.css';
 import 'jsoneditor/src/css/jsoneditor.css';
 import 'jsoneditor/src/css/menu.css';
@@ -32,6 +35,8 @@ class JsonEditor extends React.Component {
 
     state = {
         hasValue: false,
+        initialValue: this.props.value,
+        showDiff: true
     };
 
     constructor(props) {
@@ -81,9 +86,32 @@ class JsonEditor extends React.Component {
         this._jsoneditor.destroy();
     }
 
+    renderDiff = () => {
+        if (_.isEqual(this.state.initialValue, this.props.value)) {
+            return <div>No difference detected.</div>;
+        } else {
+            return (
+                <JsonDiffReact
+                    left={this.state.initialValue}
+                    right={this.props.value}
+                    annotated={true}
+                />
+            );
+        }
+    }
+
     render() {
         return (
+            <div>
               <div style={this.props.height ? {height: this.props.height} : null} ref={(c) => { this.editorEl = c; }} />
+                <Divider/>
+                <Checkbox
+                    label="Show Diff"
+                    checked={this.state.showDiff}
+                    onCheck={(e,isChecked) => this.setState({showDiff: isChecked})}
+                />
+                {this.state.showDiff && this.renderDiff()}
+            </div>
         );
     }
 }

package.json

@@ -34,6 +34,7 @@
     "babel-loader": "^6.2.7",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-0": "^6.22.0",
     "babel-preset-stage-2": "^6.18.0",
     "css-loader": "^0.25.0",
     "eslint": "^3.14.0",
@@ -59,6 +60,8 @@
     "hbs": "^4.0.1",
     "hcl-to-json": "0.0.4",
     "immutability-helper": "^2.1.2",
+    "jsondiffpatch": "^0.2.4",
+    "jsondiffpatch-for-react": "^1.0.1",
     "jsoneditor": "^5.5.11",
     "lodash": "^4.16.6",
     "material-ui": "^0.16.1",