open-vault/ui/app/components/kv-object-editor.js
Angel Garbarino c013e4a741
UI add custom metadata to KV2 (#12169)
* initial setup

* form field editType kv is very helpful

* setting up things

* setup two routes for metadata

* routing

* clean up routing

* meh router changes not my favorite but its working

* show metadata

* add controller for backendCrumb mixin

* setting up edit metadata and trimming SecretEditMetadata component

* add edit metadata save functionality

* create new version work

* setup model and formfieldgroups for added config data.

* add config network request to secret-engine

* fix validations on config

* add config rows

* breaking up secret edit

* add validation for metadata on create

* stuff, but broken now on metadata tab

* fix metadata route error

* permissions

* saving small text changes

* permissions

* cleanup

* some test fixes and convert secret create or update to glimmer

* all these changes fix secret create kv test

* remove alert banners per design request

* fix error for array instead of object in jsonEditor

* add changelog

* styling

* turn into glimmer component

* cleanup

* test failure fix

* add delete or

* clean up

* remove all hardcoded for api integration

* add helper and fix create mode on create new version

* address chelseas pr comments

* add jsdocs to helper

* fix test
2021-08-31 09:41:41 -06:00

103 lines
2.9 KiB
JavaScript

/**
* @module KvObjectEditor
* KvObjectEditor components are called in FormFields when the editType on the model is kv. They are used to show a key-value input field.
*
* @example
* ```js
* <KvObjectEditor
* @value={{get model valuePath}}
* @onChange={{action "setAndBroadcast" valuePath }}
* @label="some label"
/>
* ```
* @param {string} value - the value is captured from the model.
* @param {function} onChange - function that captures the value on change
* @param {function} onKeyUp - function passed in that handles the dom keyup event. Used for validation on the kv custom metadata.
* @param {string} [label] - label displayed over key value inputs
* @param {string} [warning] - warning that is displayed
* @param {string} [helpText] - helper text. In tooltip.
* @param {string} [subText] - placed under label.
* @param {boolean} [small-label]- change label size.
* @param {boolean} [formSection] - if false the component is meant to live outside of a form, like in the customMetadata which is nested already inside a form-section.
*/
import { isNone } from '@ember/utils';
import { assert } from '@ember/debug';
import Component from '@ember/component';
import { computed } from '@ember/object';
import { guidFor } from '@ember/object/internals';
import KVObject from 'vault/lib/kv-object';
export default Component.extend({
'data-test-component': 'kv-object-editor',
classNames: ['field'],
classNameBindings: ['formSection:form-section'],
formSection: true,
// public API
// Ember Object to mutate
value: null,
label: null,
helpText: null,
subText: null,
// onChange will be called with the changed Value
onChange() {},
init() {
this._super(...arguments);
const data = KVObject.create({ content: [] }).fromJSON(this.value);
this.set('kvData', data);
this.addRow();
},
kvData: null,
kvDataAsJSON: computed('kvData', 'kvData.[]', function() {
return this.kvData.toJSON();
}),
kvDataIsAdvanced: computed('kvData', 'kvData.[]', function() {
return this.kvData.isAdvanced();
}),
kvHasDuplicateKeys: computed('kvData', 'kvData.@each.name', function() {
let data = this.kvData;
return data.uniqBy('name').length !== data.get('length');
}),
addRow() {
let data = this.kvData;
let newObj = { name: '', value: '' };
if (!isNone(data.findBy('name', ''))) {
return;
}
guidFor(newObj);
data.addObject(newObj);
},
actions: {
addRow() {
this.addRow();
},
updateRow() {
let data = this.kvData;
this.onChange(data.toJSON());
},
deleteRow(object, index) {
let data = this.kvData;
let oldObj = data.objectAt(index);
assert('object guids match', guidFor(oldObj) === guidFor(object));
data.removeAt(index);
this.onChange(data.toJSON());
},
handleKeyUp(name, value) {
if (!this.onKeyUp) {
return;
}
this.onKeyUp(name, value);
},
},
});