From 7d2872c42f7f4ab4fe10bb5e59703c1c93c8ccf1 Mon Sep 17 00:00:00 2001 From: Mateo Silguero Date: Mon, 12 Nov 2018 14:27:41 -0300 Subject: [PATCH 1/2] user can edit keys and values --- src/js/components/DataTypes/Object.js | 29 +++++++++++ .../ObjectKeyModal/AddKeyRequest.js | 1 - .../ObjectKeyModal/EditKeyRequest.js | 52 +++++++++++++++++++ .../ObjectKeyModal/ObjectKeyModal.js | 6 ++- src/js/components/VariableEditor.js | 31 ++++++++++- src/js/index.js | 32 +++++++++--- src/js/stores/ObjectAttributes.js | 26 ++++++++-- src/style/scss/global.scss | 5 +- .../ObjectKeyModal/EditKeyRequest-test.js | 38 ++++++++++++++ 9 files changed, 205 insertions(+), 15 deletions(-) create mode 100644 src/js/components/ObjectKeyModal/EditKeyRequest.js create mode 100644 test/tests/js/components/ObjectKeyModal/EditKeyRequest-test.js diff --git a/src/js/components/DataTypes/Object.js b/src/js/components/DataTypes/Object.js index c14a3ff5..474459ea 100644 --- a/src/js/components/DataTypes/Object.js +++ b/src/js/components/DataTypes/Object.js @@ -1,6 +1,7 @@ import React from 'react'; import {polyfill} from 'react-lifecycles-compat'; import { toType } from './../../helpers/util'; +import dispatcher from './../../helpers/dispatcher'; //data type components import { JsonObject } from './DataTypes'; @@ -15,6 +16,7 @@ import AttributeStore from './../../stores/ObjectAttributes'; //icons import { CollapsedIcon, ExpandedIcon } from './../ToggleIcons'; +import { Edit } from './../icons'; //theme import Theme from './../../themes/getStyle'; @@ -130,6 +132,32 @@ class RjvObject extends React.PureComponent { return ; } + getEditIcon = () => { + const { theme, name, namespace, src, rjvId } = this.props; + return ( +
+ { + e.stopPropagation(); + dispatcher.dispatch({ + name: 'UPDATE_VARIABLE_KEY_REQUEST', + rjvId: rjvId, + data: { + name, + namespace: namespace.splice(0, namespace.length -1), + existing_value: src, + _removed: false, + key_name: name + } + }); + }} + /> +
+ ); + } + getBraceStart(object_type, expanded) { const { src, theme, iconStyle, parent_type } = this.props; @@ -154,6 +182,7 @@ class RjvObject extends React.PureComponent { }} {...Theme(theme, 'brace-row')} > + {this.getEditIcon()}
+ ) : null; + } + + isValid = (input) => { + const {rjvId} = this.props; + const request = ObjectAttributes.get( + rjvId, 'action', 'edit-key-request' + ); + return ( + input != '' + ); + } + + submit = (input) => { + const { rjvId } = this.props; + let request = ObjectAttributes.get( + rjvId, 'action', 'edit-key-request' + ); + request.key_name = input; + request.new_value = request.existing_value; + request.variable_key_updated = true; + dispatcher.dispatch({ + name: 'VARIABLE_KEY_UPDATED', + rjvId: rjvId, + data: request + }); + } +} diff --git a/src/js/components/ObjectKeyModal/ObjectKeyModal.js b/src/js/components/ObjectKeyModal/ObjectKeyModal.js index 81f261ff..f698ce03 100644 --- a/src/js/components/ObjectKeyModal/ObjectKeyModal.js +++ b/src/js/components/ObjectKeyModal/ObjectKeyModal.js @@ -12,10 +12,14 @@ export default class extends React.PureComponent { constructor(props) { super(props); this.state = { - input: props.input ? props.input : '' + input: '' }; } + componentDidMount() { + this.setState({ input: this.props.input }); + } + render() { const {theme, rjvId, isValid} = this.props; const {input} = this.state; diff --git a/src/js/components/VariableEditor.js b/src/js/components/VariableEditor.js index 60497bac..c430c3ac 100644 --- a/src/js/components/VariableEditor.js +++ b/src/js/components/VariableEditor.js @@ -66,6 +66,9 @@ class VariableEditor extends React.PureComponent { class="variable-row" key={variable.name} > + {onEdit !== false && editMode == false + ? this.getEditKeyIcon() + : null} {type == 'array' ? ( +
{ + const { variable: { name, value }, theme, namespace, rjvId } = this.props; + return ( +
+ { + e.stopPropagation(); + dispatcher.dispatch({ + name: 'UPDATE_VARIABLE_KEY_REQUEST', + rjvId: rjvId, + data: { + name, + namespace: namespace, + existing_value: value, + variable_removed: false, + key_name: name + } + }); + }} + /> +
+ ); + } + prepopInput = variable => { if (this.props.onEdit !== false) { const stringifiedValue = stringifyVariable(variable.value); diff --git a/src/js/index.js b/src/js/index.js index 64773a3a..23ff2cce 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -2,6 +2,7 @@ import React from 'react'; import {polyfill} from 'react-lifecycles-compat'; import JsonViewer from './components/JsonViewer'; import AddKeyRequest from './components/ObjectKeyModal/AddKeyRequest'; +import EditKeyRequest from './components/ObjectKeyModal/EditKeyRequest'; import ValidationFailure from './components/ValidationFailure'; import {toType, isTheme} from './helpers/util'; import ObjectAttributes from './stores/ObjectAttributes'; @@ -139,7 +140,8 @@ class ReactJsonView extends React.PureComponent { return { 'reset': this.resetState, 'variable-update': this.updateSrc, - 'add-key-request': this.addKeyRequest + 'add-key-request': this.addKeyRequest, + 'edit-key-request': this.editKeyRequest }; } //make sure props are passed in as expected @@ -182,6 +184,7 @@ class ReactJsonView extends React.PureComponent { validationFailure, validationMessage, addKeyRequest, + editKeyRequest, theme, src, name @@ -211,6 +214,11 @@ class ReactJsonView extends React.PureComponent { theme={theme} rjvId={this.rjvId} defaultValue={defaultValue} /> +
); } @@ -230,17 +238,20 @@ class ReactJsonView extends React.PureComponent { const on_edit_payload = { existing_src: src, - new_value: new_value, - updated_src: updated_src, - name: name, - namespace: namespace, - existing_value: existing_value, + new_value, + updated_src, + name, + namespace, + existing_value, }; switch (type) { case 'variable-added': result = onAdd(on_edit_payload); break; + case 'variable-update-key': + result = onEdit(on_edit_payload); + break; case 'variable-edited': result = onEdit(on_edit_payload); break; @@ -267,10 +278,17 @@ class ReactJsonView extends React.PureComponent { }); } + editKeyRequest = () => { + this.setState({ + editKeyRequest: true + }); + } + resetState = () => { this.setState({ validationFailure: false, - addKeyRequest: false + addKeyRequest: false, + editKeyRequest: false }); } } diff --git a/src/js/stores/ObjectAttributes.js b/src/js/stores/ObjectAttributes.js index 14987e8b..7a3dbb70 100644 --- a/src/js/stores/ObjectAttributes.js +++ b/src/js/stores/ObjectAttributes.js @@ -63,16 +63,27 @@ class ObjectAttributes extends EventEmitter { ); this.emit('variable-update-' + rjvId); break; + case 'VARIABLE_KEY_UPDATED': + action.data.updated_src = this.updateSrc( + rjvId, data + ); + this.set(rjvId, 'action', 'variable-update',{...data, type:'variable-key-added'}); + this.emit('variable-update-' + rjvId); + break; case 'ADD_VARIABLE_KEY_REQUEST': this.set(rjvId, 'action', 'new-key-request', data); this.emit('add-key-request-' + rjvId); break; + case 'UPDATE_VARIABLE_KEY_REQUEST': + this.set(rjvId, 'action', 'edit-key-request', data); + this.emit('edit-key-request-' + rjvId); + break; } } updateSrc = (rjvId, request) => { let { - name, namespace, new_value, existing_value, variable_removed + name, namespace, new_value, existing_value, variable_key_updated, variable_removed, key_name } = request; namespace.shift(); @@ -88,19 +99,26 @@ class ObjectAttributes extends EventEmitter { walk = walk[idx]; } - - if (variable_removed) { + if(variable_key_updated) { if (toType(walk) == 'array') { walk.splice(name, 1); } else { + walk[key_name] = existing_value; delete walk[name]; } + } else if (variable_removed) { + if (toType(walk) == 'array') { + walk.splice(name, 1); + } else { + if(walk) delete walk[name]; + } } else { //update copied variable at specified namespace if (name !== null) { walk[name] = new_value; } else { - updated_src = new_value; + walk[new_value] = existing_value; + //updated_src = new_value; } } diff --git a/src/style/scss/global.scss b/src/style/scss/global.scss index 8f65e092..4667f366 100644 --- a/src/style/scss/global.scss +++ b/src/style/scss/global.scss @@ -14,7 +14,7 @@ } .object-key-val { - &:hover > span > .object-meta-data { + &:hover > span > .object-meta-data, &:hover > span > span { & > .copy-to-clipboard-container { display: inline-block; } @@ -24,6 +24,9 @@ & > .click-to-remove { display: inline-block; } + & > .click-to-edit { + display: inline-block; + } } } diff --git a/test/tests/js/components/ObjectKeyModal/EditKeyRequest-test.js b/test/tests/js/components/ObjectKeyModal/EditKeyRequest-test.js new file mode 100644 index 00000000..9d36351b --- /dev/null +++ b/test/tests/js/components/ObjectKeyModal/EditKeyRequest-test.js @@ -0,0 +1,38 @@ +import React from "react" +import { shallow, render, mount } from "enzyme" +import { expect } from "chai" + +import EditKeyRequest from "./../../../../../src/js/components/ObjectKeyModal/EditKeyRequest" +import ObjectAttributes from "./../../../../../src/js/stores/ObjectAttributes" + +describe("", function() { + const rjvId = 1 + + it("EditKeyRequest should not render input when inactive", function() { + ObjectAttributes.set(rjvId, "action", "new-key-request", { + existing_value: { test: true }, + namespace: [], + new_value: { test: null } + }) + ObjectAttributes.set(rjvId, "global", "src", { test: true }) + const wrapper = mount( + + ) + + expect(wrapper.find(".key-modal-input").length).to.equal(0) + }) + + it("EditKeyRequest should render input when active", function() { + ObjectAttributes.set(rjvId, "action", "new-key-request", { + existing_value: { test: true }, + namespace: [], + new_value: { test: null } + }) + ObjectAttributes.set(rjvId, "global", "src", { test: true }) + const wrapper = mount( + + ) + + expect(wrapper.find(".key-modal-input").length).to.equal(1) + }) +}) From 37838234ef04baf0488c5dfd1acbb5783ad30c0f Mon Sep 17 00:00:00 2001 From: Mateo Silguero Date: Tue, 13 Nov 2018 10:24:16 -0300 Subject: [PATCH 2/2] disabled edit array keys --- src/js/components/VariableEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/components/VariableEditor.js b/src/js/components/VariableEditor.js index c430c3ac..405f9302 100644 --- a/src/js/components/VariableEditor.js +++ b/src/js/components/VariableEditor.js @@ -66,7 +66,7 @@ class VariableEditor extends React.PureComponent { class="variable-row" key={variable.name} > - {onEdit !== false && editMode == false + {isNaN(Number(variable.name)) && onEdit !== false && editMode == false ? this.getEditKeyIcon() : null} {type == 'array' ? (