diff --git a/changelog/14659.txt b/changelog/14659.txt
new file mode 100644
index 0000000000..0468cbcd1e
--- /dev/null
+++ b/changelog/14659.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Replaces the IvyCodemirror wrapper with a custom ember modifier.
+```
\ No newline at end of file
diff --git a/ui/app/components/json-editor.js b/ui/app/components/json-editor.js
index 1e57e84ec0..c905410376 100644
--- a/ui/app/components/json-editor.js
+++ b/ui/app/components/json-editor.js
@@ -14,50 +14,24 @@ import { action } from '@ember/object';
* @param {Function} [valueUpdated] - action to preform when you edit the codemirror value.
* @param {Function} [onFocusOut] - action to preform when you focus out of codemirror.
* @param {string} [helpText] - helper text.
- * @param {object} [options] - option object that overrides codemirror default options such as the styling.
+ * @param {Object} [extraKeys] - Provides keyboard shortcut methods for things like saving on shift + enter.
+ * @param {Array} [gutters] - An array of CSS class names or class name / CSS string pairs, each of which defines a width (and optionally a background), and which will be used to draw the background of the gutters.
+ * @param {string} [mode] - The mode defined for styling. Right now we only import ruby so mode must but be ruby or defaults to javascript. If you wanted another language you need to import it into the modifier.
+ * @param {Boolean} [readOnly] - Sets the view to readOnly, allowing for copying but no editing. It also hides the cursor. Defaults to false.
+ * @param {String} [theme] - Specify or customize the look via a named "theme" class in scss.
+ * @param {String} [value] - Value within the display. Generally, a json string.
+ * @param {String} [viewportMargin] - Size of viewport. Often set to "Infinity" to load/show all text regardless of length.
*/
-const JSON_EDITOR_DEFAULTS = {
- // IMPORTANT: `gutters` must come before `lint` since the presence of
- // `gutters` is cached internally when `lint` is toggled
- gutters: ['CodeMirror-lint-markers'],
- tabSize: 2,
- mode: 'application/json',
- lineNumbers: true,
- lint: { lintOnChange: false },
- theme: 'hashi',
- readOnly: false,
- showCursorWhenSelecting: true,
-};
-
export default class JsonEditorComponent extends Component {
- value = null;
- valueUpdated = null;
- onFocusOut = null;
- readOnly = false;
- options = null;
-
- constructor() {
- super(...arguments);
- this.options = { ...JSON_EDITOR_DEFAULTS, ...this.args.options };
- if (this.options.autoHeight) {
- this.options.viewportMargin = Infinity;
- delete this.options.autoHeight;
- }
- if (this.options.readOnly) {
- this.options.readOnly = 'nocursor';
- this.options.lineNumbers = false;
- delete this.options.gutters;
- }
- }
-
get getShowToolbar() {
return this.args.showToolbar === false ? false : true;
}
@action
- updateValue(...args) {
- if (this.args.valueUpdated) {
+ onUpdate(...args) {
+ if (!this.args.readOnly) {
+ // catching a situation in which the user is not readOnly and has not provided a valueUpdated function to the instance
this.args.valueUpdated(...args);
}
}
diff --git a/ui/app/modifiers/code-mirror.js b/ui/app/modifiers/code-mirror.js
new file mode 100644
index 0000000000..f018c09748
--- /dev/null
+++ b/ui/app/modifiers/code-mirror.js
@@ -0,0 +1,68 @@
+import { action } from '@ember/object';
+import { bind } from '@ember/runloop';
+import codemirror from 'codemirror';
+import Modifier from 'ember-modifier';
+
+import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/selection/active-line';
+import 'codemirror/addon/lint/lint.js';
+import 'codemirror/addon/lint/json-lint.js';
+// right now we only use the ruby and javascript, if you use another mode you'll need to import it.
+// https://codemirror.net/mode/
+import 'codemirror/mode/ruby/ruby';
+import 'codemirror/mode/javascript/javascript';
+
+export default class CodeMirrorModifier extends Modifier {
+ didInstall() {
+ this._setup();
+ }
+
+ didUpdateArguments() {
+ this._editor.setOption('readOnly', this.args.named.readOnly);
+ if (!this.args.named.content) {
+ return;
+ }
+ if (this._editor.getValue() !== this.args.named.content) {
+ this._editor.setValue(this.args.named.content);
+ }
+ }
+
+ @action
+ _onChange(editor) {
+ this.args.named.onUpdate(editor.getValue(), this._editor);
+ }
+
+ @action
+ _onFocus(editor) {
+ this.args.named.onFocus(editor.getValue());
+ }
+
+ _setup() {
+ if (!this.element) {
+ throw new Error('CodeMirror modifier has no element');
+ }
+ const editor = codemirror(this.element, {
+ // IMPORTANT: `gutters` must come before `lint` since the presence of
+ // `gutters` is cached internally when `lint` is toggled
+ gutters: this.args.named.gutters || ['CodeMirror-lint-markers'],
+ matchBrackets: true,
+ lint: { lintOnChange: true },
+ showCursorWhenSelecting: true,
+ styleActiveLine: true,
+ tabSize: 2,
+ // all values we can pass into the JsonEditor
+ extraKeys: this.args.named.extraKeys || '',
+ lineNumbers: this.args.named.lineNumbers,
+ mode: this.args.named.mode || 'application/json',
+ readOnly: this.args.named.readOnly || false,
+ theme: this.args.named.theme || 'hashi',
+ value: this.args.named.content || '',
+ viewportMargin: this.args.named.viewportMargin || '',
+ });
+
+ editor.on('change', bind(this, this._onChange));
+ editor.on('focus', bind(this, this._onFocus));
+
+ this._editor = editor;
+ }
+}
diff --git a/ui/app/styles/components/codemirror.scss b/ui/app/styles/components/codemirror.scss
index 023bed8f78..dfc8563873 100644
--- a/ui/app/styles/components/codemirror.scss
+++ b/ui/app/styles/components/codemirror.scss
@@ -51,7 +51,7 @@ $gutter-grey: #2a2f36;
.cm-s-hashi {
&.CodeMirror {
background-color: $black !important;
- resize: vertical;
+ resize: vertical;
color: #cfd2d1 !important;
border: none;
font-family: $family-monospace;
@@ -168,34 +168,14 @@ $gutter-grey: #2a2f36;
}
.readonly-codemirror {
- .CodeMirror-cursors {
+ .CodeMirror-code {
+ cursor: default;
+ }
+ .CodeMirror-cursor {
+ // https://github.com/codemirror/CodeMirror/issues/1099
display: none;
}
-
- .cm-s-hashi {
- span {
- color: $light-grey;
- }
-
- span.cm-string,
- span.cm-string-2 {
- color: $faded-gray;
- }
-
- span.cm-number {
- color: lighten($dark-gray, 30%);
- }
-
- span.cm-property {
- color: white;
- }
-
- span.cm-variable-2 {
- color: $light-grey-blue;
- }
- }
}
-
.cm-s-auto-height.CodeMirror {
height: auto;
}
diff --git a/ui/app/templates/components/console/log-json.hbs b/ui/app/templates/components/console/log-json.hbs
index 76a5b7c383..e2e8f9a4e3 100644
--- a/ui/app/templates/components/console/log-json.hbs
+++ b/ui/app/templates/components/console/log-json.hbs
@@ -2,7 +2,10 @@
\ No newline at end of file
diff --git a/ui/app/templates/components/control-group-success.hbs b/ui/app/templates/components/control-group-success.hbs
index fb690830c7..69a0077175 100644
--- a/ui/app/templates/components/control-group-success.hbs
+++ b/ui/app/templates/components/control-group-success.hbs
@@ -17,7 +17,10 @@
data-test-json-viewer
@showToolbar={{false}}
@value={{stringify this.unwrapData}}
- @options={{hash readOnly=true lineNumbers=false autoHeight=true gutters=false theme="hashi-read-only auto-height"}}
+ @readOnly={{true}}
+ @viewportMargin="Infinity"
+ @gutters={{false}}
+ @theme="hashi-read-only auto-height"
/>
diff --git a/ui/app/templates/components/json-editor.hbs b/ui/app/templates/components/json-editor.hbs
index 03fd3295d4..620057ff8b 100644
--- a/ui/app/templates/components/json-editor.hbs
+++ b/ui/app/templates/components/json-editor.hbs
@@ -23,14 +23,22 @@
{{/if}}
-
-
+
{{#if @helpText}}
diff --git a/ui/app/templates/components/secret-form-show.hbs b/ui/app/templates/components/secret-form-show.hbs
index 05164297d2..cf6c99fb8c 100644
--- a/ui/app/templates/components/secret-form-show.hbs
+++ b/ui/app/templates/components/secret-form-show.hbs
@@ -33,7 +33,7 @@
{{else}}
diff --git a/ui/app/templates/components/tool-unwrap.hbs b/ui/app/templates/components/tool-unwrap.hbs
index 62aa362c66..62e965d96f 100644
--- a/ui/app/templates/components/tool-unwrap.hbs
+++ b/ui/app/templates/components/tool-unwrap.hbs
@@ -45,7 +45,7 @@
{{#if (eq @unwrapActiveTab "data")}}
{{else}}
diff --git a/ui/app/templates/components/transit-key-action/decrypt.hbs b/ui/app/templates/components/transit-key-action/decrypt.hbs
index d3e022456a..85745296ed 100644
--- a/ui/app/templates/components/transit-key-action/decrypt.hbs
+++ b/ui/app/templates/components/transit-key-action/decrypt.hbs
@@ -8,7 +8,7 @@
diff --git a/ui/app/templates/components/transit-key-action/encrypt.hbs b/ui/app/templates/components/transit-key-action/encrypt.hbs
index 507898f334..2a51e3d85a 100644
--- a/ui/app/templates/components/transit-key-action/encrypt.hbs
+++ b/ui/app/templates/components/transit-key-action/encrypt.hbs
@@ -16,7 +16,7 @@
@title="Plaintext"
@value={{@plaintext}}
@valueUpdated={{action (mut @plaintext)}}
- @options={{hash mode="ruby"}}
+ @mode="ruby"
@data-test-transit-input="plaintext"
/>
diff --git a/ui/app/templates/components/transit-key-action/hmac.hbs b/ui/app/templates/components/transit-key-action/hmac.hbs
index 426910e821..e739201e90 100644
--- a/ui/app/templates/components/transit-key-action/hmac.hbs
+++ b/ui/app/templates/components/transit-key-action/hmac.hbs
@@ -11,12 +11,7 @@
diff --git a/ui/app/templates/components/transit-key-action/rewrap.hbs b/ui/app/templates/components/transit-key-action/rewrap.hbs
index 7a3972e92c..0570b8e1c3 100644
--- a/ui/app/templates/components/transit-key-action/rewrap.hbs
+++ b/ui/app/templates/components/transit-key-action/rewrap.hbs
@@ -11,7 +11,7 @@
{{#if @key.derived}}
diff --git a/ui/app/templates/components/transit-key-action/sign.hbs b/ui/app/templates/components/transit-key-action/sign.hbs
index 4fff95c628..9c236e2f07 100644
--- a/ui/app/templates/components/transit-key-action/sign.hbs
+++ b/ui/app/templates/components/transit-key-action/sign.hbs
@@ -28,7 +28,7 @@
@title="Input"
@value={{@input}}
@valueUpdated={{action (mut @input)}}
- @options={{hash mode="ruby"}}
+ @mode="ruby"
@data-test-transit-input="input"
/>
diff --git a/ui/app/templates/vault/cluster/policies/create.hbs b/ui/app/templates/vault/cluster/policies/create.hbs
index 86e5a7bef2..a119b7b7b4 100644
--- a/ui/app/templates/vault/cluster/policies/create.hbs
+++ b/ui/app/templates/vault/cluster/policies/create.hbs
@@ -62,7 +62,8 @@
@showToolbar={{false}}
@value={{this.model.policy}}
@valueUpdated={{action (mut this.model.policy)}}
- @options={{hash mode="ruby" extraKeys=(hash Shift-Enter=(action "savePolicy" this.model))}}
+ @mode="ruby"
+ @extraKeys={{hash Shift-Enter=(action "savePolicy" this.model)}}
/>
{{/if}}
diff --git a/ui/app/templates/vault/cluster/policy/edit.hbs b/ui/app/templates/vault/cluster/policy/edit.hbs
index 9caddba6fc..04933c3923 100644
--- a/ui/app/templates/vault/cluster/policy/edit.hbs
+++ b/ui/app/templates/vault/cluster/policy/edit.hbs
@@ -50,7 +50,8 @@
@title="Policy"
@value={{this.model.policy}}
@valueUpdated={{action (mut this.model.policy)}}
- @options={{hash mode="ruby" extraKeys=(hash Shift-Enter=(action "savePolicy" this.model))}}
+ @mode="ruby"
+ @extraKeys={{hash Shift-Enter=(action "savePolicy" this.model)}}
/>
diff --git a/ui/app/templates/vault/cluster/policy/show.hbs b/ui/app/templates/vault/cluster/policy/show.hbs
index 67a7059864..27dd87463e 100644
--- a/ui/app/templates/vault/cluster/policy/show.hbs
+++ b/ui/app/templates/vault/cluster/policy/show.hbs
@@ -42,7 +42,8 @@
@title="Policy"
@subTitle={{if (eq this.policyType "acl") (concat this.uppercase this.model.format " format")}}
@value={{this.model.policy}}
- @options={{hash readOnly=true mode="ruby"}}
+ @readOnly={{true}}
+ @mode="ruby"
/>
{{#if this.model.paths}}
diff --git a/ui/ember-cli-build.js b/ui/ember-cli-build.js
index 9921cf9ac2..45eaeeb8c0 100644
--- a/ui/ember-cli-build.js
+++ b/ui/ember-cli-build.js
@@ -26,10 +26,6 @@ const appConfig = {
return `${config.rootURL.replace(/\/$/, '')}${filePath}`;
},
},
- codemirror: {
- modes: ['javascript', 'ruby'],
- keyMaps: ['sublime'],
- },
babel: {
plugins: ['@babel/plugin-proposal-object-rest-spread', ['inline-json-import', {}]],
},
@@ -74,8 +70,7 @@ module.exports = function (defaults) {
app.import('node_modules/jsonlint/lib/jsonlint.js');
app.import('node_modules/codemirror/addon/lint/lint.css');
- app.import('node_modules/codemirror/addon/lint/lint.js');
- app.import('node_modules/codemirror/addon/lint/json-lint.js');
+ app.import('node_modules/codemirror/lib/codemirror.css');
app.import('node_modules/text-encoder-lite/text-encoder-lite.js');
app.import('node_modules/jsondiffpatch/dist/jsondiffpatch.umd.js');
app.import('node_modules/jsondiffpatch/dist/formatters-styles/html.css');
diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs
index 2ed0827fae..6cf445825e 100644
--- a/ui/lib/core/addon/templates/components/form-field.hbs
+++ b/ui/lib/core/addon/templates/components/form-field.hbs
@@ -233,7 +233,7 @@
this.attr.options.defaultValue
}}
@valueUpdated={{action "codemirrorUpdated" this.attr.name "string"}}
- @options={{hash theme=(or this.attr.options.theme "hashi")}}
+ @theme={{or this.attr.options.theme "hashi"}}
@helpText={{this.attr.options.helpText}}
>
{{#if this.attr.options.allowReset}}
diff --git a/ui/package.json b/ui/package.json
index 0e4e910195..6cc32aaaa1 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -129,6 +129,7 @@
"ember-maybe-import-regenerator": "^0.1.6",
"ember-maybe-in-element": "^2.0.3",
"ember-modal-dialog": "^3.0.3",
+ "ember-modifier": "^3.1.0",
"ember-page-title": "^6.0.3",
"ember-power-select": "^5.0.3",
"ember-promise-helpers": "^1.0.9",
diff --git a/ui/tests/acceptance/secrets/backend/kv/secret-test.js b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
index 14f06f7755..6843d9d74b 100644
--- a/ui/tests/acceptance/secrets/backend/kv/secret-test.js
+++ b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
@@ -374,13 +374,15 @@ module('Acceptance | secrets/secret/create', function (hooks) {
await listPage.visitRoot({ backend: 'secret' });
await listPage.create();
await editPage.path(secretPath).toggleJSON();
- await editPage.editor.fillIn(this, content);
+ let instance = document.querySelector('.CodeMirror').CodeMirror;
+ instance.setValue(content);
await editPage.save();
assert.equal(currentRouteName(), 'vault.cluster.secrets.backend.show', 'redirects to the show page');
assert.ok(showPage.editIsPresent, 'shows the edit button');
+ let savedInstance = document.querySelector('.CodeMirror').CodeMirror;
assert.equal(
- showPage.editor.content(this),
+ savedInstance.options.value,
JSON.stringify({ bar: 'boo', foo: 'fa' }, null, 2),
'saves the content'
);
diff --git a/ui/tests/integration/components/console/log-json-test.js b/ui/tests/integration/components/console/log-json-test.js
index 1cce65007f..0a30352b30 100644
--- a/ui/tests/integration/components/console/log-json-test.js
+++ b/ui/tests/integration/components/console/log-json-test.js
@@ -19,8 +19,7 @@ module('Integration | Component | console/log json', function (hooks) {
this.set('content', objectContent);
await render(hbs`{{console/log-json content=content}}`);
- const instance = this.codeMirror.instanceFor(find('[data-test-component=json-editor]').id);
-
- assert.equal(instance.getValue(), expectedText);
+ const instance = find('[data-test-component=code-mirror-modifier]').innerText;
+ assert.equal(instance, expectedText);
});
});
diff --git a/ui/tests/integration/components/json-editor-test.js b/ui/tests/integration/components/json-editor-test.js
index 975fe30afa..2bcc6a3b3f 100644
--- a/ui/tests/integration/components/json-editor-test.js
+++ b/ui/tests/integration/components/json-editor-test.js
@@ -1,44 +1,76 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { create } from 'ember-cli-page-object';
-import { render } from '@ember/test-helpers';
+import { render, fillIn, find, waitUntil } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import jsonEditor from '../../pages/components/json-editor';
+import sinon from 'sinon';
const component = create(jsonEditor);
module('Integration | Component | json-editor', function (hooks) {
setupRenderingTest(hooks);
- const setup = async function (context, title, value, options, showToolbar = true) {
- context.set('value', JSON.stringify(value));
- context.set('options', options);
- context.set('title', title);
- context.set('showToolbar', showToolbar);
- await render(hbs`{{json-editor title=title value=value options=options showToolbar=showToolbar}}`);
- };
+ const JSON_BLOB = `{
+ "test": "test"
+ }`;
+ const BAD_JSON_BLOB = `{
+ "test": test
+ }`;
+
+ hooks.beforeEach(function () {
+ this.set('valueUpdated', sinon.spy());
+ this.set('onFocusOut', sinon.spy());
+ this.set('json_blob', JSON_BLOB);
+ this.set('bad_json_blob', BAD_JSON_BLOB);
+ this.set('hashi-read-only-theme', 'hashi-read-only auto-height');
+ });
test('it renders', async function (assert) {
- let value = '';
- await setup(this, 'Test title', value, null);
+ await render(hbs``);
+
assert.equal(component.title, 'Test title', 'renders the provided title');
assert.equal(component.hasToolbar, true, 'renders the toolbar');
- assert.equal(component.hasJSONEditor, true, 'renders the ivy code mirror component');
- assert.equal(component.canEdit, true, 'json editor is in read only mode');
+ assert.equal(component.hasJSONEditor, true, 'renders the code mirror modifier');
+ assert.ok(component.canEdit, 'json editor can be edited');
});
- test('it renders in read only mode', async function (assert) {
- let value = '';
- let options = {
- readOnly: true,
- };
- await setup(this, 'Test title', value, options);
- assert.equal(component.canEdit, false, 'editor is in read only mode');
+ test('it handles editing and linting and styles to json', async function (assert) {
+ await render(hbs``);
+ // check for json styling
+ assert.dom('.cm-property').hasStyle({
+ color: 'rgb(158, 132, 197)',
+ });
+ assert.dom('.cm-string:nth-child(2)').hasStyle({
+ color: 'rgb(29, 219, 163)',
+ });
+
+ await fillIn('textarea', this.bad_json_blob);
+ await waitUntil(() => find('.CodeMirror-lint-marker-error'));
+ assert.dom('.CodeMirror-lint-marker-error').exists('throws linting error');
+ assert.dom('.CodeMirror-linenumber').exists('shows line numbers');
});
- test('it renders the editor without toolbar', async function (assert) {
- let value = '';
- await setup(this, 'Test title', value, null, false);
- assert.equal(component.hasToolbar, false, 'toolbar is not rendered');
+ test('it renders the correct theme and expected styling', async function (assert) {
+ await render(hbs``);
+
+ assert.dom('.cm-s-hashi-read-only').hasStyle({
+ background: 'rgb(247, 248, 250) none repeat scroll 0% 0% / auto padding-box border-box',
+ });
+ assert.dom('.CodeMirror-linenumber').doesNotExist('on readOnly does not show line numbers');
});
});
diff --git a/ui/tests/integration/components/secret-edit-test.js b/ui/tests/integration/components/secret-edit-test.js
index 57c03d8c7c..b35259921c 100644
--- a/ui/tests/integration/components/secret-edit-test.js
+++ b/ui/tests/integration/components/secret-edit-test.js
@@ -1,6 +1,6 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import { render, find, settled } from '@ember/test-helpers';
+import { render, settled } from '@ember/test-helpers';
import { resolve } from 'rsvp';
import { run } from '@ember/runloop';
import Service from '@ember/service';
@@ -55,15 +55,12 @@ module('Integration | Component | secret edit', function (hooks) {
test('it shows an error when creating and data is not an object', async function (assert) {
this.set('mode', 'create');
this.set('model', {
- secretData: {
- int: '2',
- null: 'null',
- float: '1.234',
- },
+ secretData: null,
});
await render(hbs`{{secret-edit mode=mode model=model preferAdvancedEdit=true }}`);
- let instance = this.codeMirror.instanceFor(find('[data-test-component=json-editor]').id);
+
+ let instance = document.querySelector('.CodeMirror').CodeMirror;
instance.setValue(JSON.stringify([{ foo: 'bar' }]));
await settled();
assert.dom('[data-test-error]').includesText('Vault expects data to be formatted as an JSON object');
@@ -99,7 +96,7 @@ module('Integration | Component | secret edit', function (hooks) {
await render(hbs`{{secret-edit mode=mode model=model preferAdvancedEdit=true }}`);
- let instance = this.codeMirror.instanceFor(find('[data-test-component=json-editor]').id);
+ let instance = document.querySelector('.CodeMirror').CodeMirror;
instance.setValue(JSON.stringify([{ foo: 'bar' }]));
await settled();
assert.dom('[data-test-error]').includesText('Vault expects data to be formatted as an JSON object');
diff --git a/ui/tests/pages/components/form-field.js b/ui/tests/pages/components/form-field.js
index b2d52db446..0fb0f43ffc 100644
--- a/ui/tests/pages/components/form-field.js
+++ b/ui/tests/pages/components/form-field.js
@@ -15,7 +15,7 @@ export default {
hasSearchSelect: isPresent('[data-test-component=search-select]'),
hasTextFile: isPresent('[data-test-component=text-file]'),
hasTTLPicker: isPresent('[data-test-toggle-input="Foo"]'),
- hasJSONEditor: isPresent('[data-test-component=json-editor]'),
+ hasJSONEditor: isPresent('[data-test-component="code-mirror-modifier"]'),
hasJSONClearButton: isPresent('[data-test-json-clear-button]'),
hasSelect: isPresent('select'),
hasInput: isPresent('input'),
diff --git a/ui/tests/pages/components/json-editor.js b/ui/tests/pages/components/json-editor.js
index c36de02922..1208110cb0 100644
--- a/ui/tests/pages/components/json-editor.js
+++ b/ui/tests/pages/components/json-editor.js
@@ -1,8 +1,8 @@
-import { isPresent, isVisible, text } from 'ember-cli-page-object';
+import { isPresent, notHasClass, text } from 'ember-cli-page-object';
export default {
title: text('[data-test-component=json-editor-title]'),
hasToolbar: isPresent('[data-test-component=json-editor-toolbar]'),
- hasJSONEditor: isPresent('[data-test-component=json-editor]'),
- canEdit: isVisible('div.CodeMirror-gutters'),
+ hasJSONEditor: isPresent('[data-test-component="code-mirror-modifier"]'),
+ canEdit: notHasClass('readonly-codemirror'),
};
diff --git a/ui/tests/pages/helpers/codemirror.js b/ui/tests/pages/helpers/codemirror.js
deleted file mode 100644
index 2f63f60c4f..0000000000
--- a/ui/tests/pages/helpers/codemirror.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import getCodeMirrorInstance from 'vault/tests/helpers/codemirror';
-// Like fillable, but for the CodeMirror editor
-//
-// Usage: fillIn: codeFillable('[data-test-editor]')
-// Page.fillIn(code);
-export function codeFillable(selector) {
- return {
- isDescriptor: true,
-
- get() {
- return function (context, code) {
- const cm = getCodeMirrorInstance(context, selector);
- cm.setValue(code);
- return this;
- };
- },
- };
-}
-
-// Like text, but for the CodeMirror editor
-//
-// Usage: content: code('[data-test-editor]')
-// Page.code(); // some = [ 'string', 'of', 'code' ]
-export function code(selector) {
- return {
- isDescriptor: true,
- get() {
- return function (context) {
- const cm = getCodeMirrorInstance(context, selector);
- return cm.getValue();
- };
- },
- };
-}
diff --git a/ui/tests/pages/secrets/backend/kv/edit-secret.js b/ui/tests/pages/secrets/backend/kv/edit-secret.js
index 6b0d59c882..de7266ad0a 100644
--- a/ui/tests/pages/secrets/backend/kv/edit-secret.js
+++ b/ui/tests/pages/secrets/backend/kv/edit-secret.js
@@ -1,6 +1,6 @@
import { Base } from '../create';
import { isPresent, clickable, visitable, create, fillable } from 'ember-cli-page-object';
-import { codeFillable } from 'vault/tests/pages/helpers/codemirror';
+
export default create({
...Base,
path: fillable('[data-test-secret-path="true"]'),
@@ -17,9 +17,6 @@ export default create({
hasMetadataFields: isPresent('[data-test-metadata-fields]'),
maxVersion: fillable('[data-test-input="maxVersions"]'),
startCreateSecret: clickable('[data-test-secret-create]'),
- editor: {
- fillIn: codeFillable('[data-test-component="json-editor"]'),
- },
deleteSecret() {
return this.deleteBtn().confirmBtn();
},
diff --git a/ui/tests/pages/secrets/backend/kv/show.js b/ui/tests/pages/secrets/backend/kv/show.js
index 49caf8a50a..101d55b6ca 100644
--- a/ui/tests/pages/secrets/backend/kv/show.js
+++ b/ui/tests/pages/secrets/backend/kv/show.js
@@ -1,6 +1,5 @@
import { Base } from '../show';
import { create, clickable, collection, isPresent, text } from 'ember-cli-page-object';
-import { code } from 'vault/tests/pages/helpers/codemirror';
export default create({
...Base,
@@ -18,9 +17,7 @@ export default create({
editIsPresent: isPresent('[data-test-secret-edit]'),
noReadIsPresent: isPresent('[data-test-write-without-read-empty-message]'),
noReadMessage: text('data-test-empty-state-message'),
- editor: {
- content: code('[data-test-component="json-editor"]'),
- },
+
deleteSecret() {
return this.deleteBtn().confirmBtn();
},
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 5613cda18f..c5bef8056e 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -7974,7 +7974,12 @@ code-point-at@^1.0.0:
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
-codemirror@^5.47.0, codemirror@^5.58.2:
+codemirror@^5.47.0:
+ version "5.65.2"
+ resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.2.tgz#5799a70cb3d706e10f60e267245e3a75205d3dd9"
+ integrity sha512-SZM4Zq7XEC8Fhroqe3LxbEEX1zUPWH1wMr5zxiBuiUF64iYOUH/JI88v4tBag8MiBS8B8gRv8O1pPXGYXQ4ErA==
+
+codemirror@^5.58.2:
version "5.61.0"
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.61.0.tgz#318e5b034a707207948b92ffc2862195e8fdb08e"
integrity sha512-D3wYH90tYY1BsKlUe0oNj2JAhQ9TepkD51auk3N7q+4uz7A/cgJ5JsWHreT0PqieW1QhOuqxQ2reCXV1YXzecg==
@@ -10222,7 +10227,7 @@ ember-cli-typescript@^3.0.0, ember-cli-typescript@^3.1.3, ember-cli-typescript@^
stagehand "^1.0.0"
walk-sync "^2.0.0"
-ember-cli-typescript@^4.1.0, ember-cli-typescript@^4.2.0:
+ember-cli-typescript@^4.1.0, ember-cli-typescript@^4.2.0, ember-cli-typescript@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/ember-cli-typescript/-/ember-cli-typescript-4.2.1.tgz#54d08fc90318cc986f3ea562f93ce58a6cc4c24d"
integrity sha512-0iKTZ+/wH6UB/VTWKvGuXlmwiE8HSIGcxHamwNhEC5x1mN3z8RfvsFZdQWYUzIWFN2Tek0gmepGRPTwWdBYl/A==
@@ -10396,6 +10401,17 @@ ember-compatibility-helpers@^1.2.0, ember-compatibility-helpers@^1.2.1, ember-co
fs-extra "^9.1.0"
semver "^5.4.1"
+ember-compatibility-helpers@^1.2.5:
+ version "1.2.6"
+ resolved "https://registry.yarnpkg.com/ember-compatibility-helpers/-/ember-compatibility-helpers-1.2.6.tgz#603579ab2fb14be567ef944da3fc2d355f779cd8"
+ integrity sha512-2UBUa5SAuPg8/kRVaiOfTwlXdeVweal1zdNPibwItrhR0IvPrXpaqwJDlEZnWKEoB+h33V0JIfiWleSG6hGkkA==
+ dependencies:
+ babel-plugin-debug-macros "^0.2.0"
+ ember-cli-version-checker "^5.1.1"
+ find-up "^5.0.0"
+ fs-extra "^9.1.0"
+ semver "^5.4.1"
+
ember-composable-helpers@^4.3.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/ember-composable-helpers/-/ember-composable-helpers-4.5.0.tgz#94febbdf4348e64f45f7a6f993f326e32540a61e"
@@ -10656,6 +10672,17 @@ ember-modifier@^2.1.0:
ember-destroyable-polyfill "^2.0.2"
ember-modifier-manager-polyfill "^1.2.0"
+ember-modifier@^3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-3.1.0.tgz#ba5b0941302accd787ed3dcfc8d20400b77ffc41"
+ integrity sha512-G5Lj9jVFsD2sVJcRNQfaGKG1p81wT4LGfClBhCuB4TgwP1NGJKdqI+Q8BW2MptONxQt/71UjjUH0YK7Gm9eahg==
+ dependencies:
+ ember-cli-babel "^7.26.6"
+ ember-cli-normalize-entity-name "^1.0.0"
+ ember-cli-string-utils "^1.1.0"
+ ember-cli-typescript "^4.2.1"
+ ember-compatibility-helpers "^1.2.5"
+
ember-native-dom-helpers@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/ember-native-dom-helpers/-/ember-native-dom-helpers-0.7.0.tgz#98a87c11a391cec5c12382a4857e59ea2fb4b00a"