From 1d26f056bc2e7ad4120ce3a885d1d3d6eead3b88 Mon Sep 17 00:00:00 2001 From: Arnav Palnitkar Date: Thu, 6 May 2021 09:59:15 -0700 Subject: [PATCH] Updated code mirror component for consistency (#11500) * Updated code mirror component for consistency - Hide gutters, line number and selection while read only - Show toolbar with copy functionality for all instances * Moved toolbar and actions to json editor component * Updated form-field-from-model template * Added test for toolbar --- changelog/11500.txt | 3 + ui/app/components/json-editor.js | 50 ++++++++++++----- ui/app/models/role-aws.js | 2 + .../templates/components/console/log-json.hbs | 2 +- .../components/control-group-success.hbs | 1 + ui/app/templates/components/json-editor.hbs | 32 +++++++++++ .../components/secret-edit-display.hbs | 16 ++---- .../components/transit-key-action/decrypt.hbs | 14 ++--- .../components/transit-key-action/encrypt.hbs | 16 +++--- .../components/transit-key-action/hmac.hbs | 16 +++--- .../components/transit-key-action/rewrap.hbs | 14 ++--- .../components/transit-key-action/sign.hbs | 15 +++-- .../components/transit-key-action/verify.hbs | 56 +++++++++---------- .../partials/form-field-from-model.hbs | 8 ++- .../templates/partials/secret-form-show.hbs | 12 +++- ui/app/templates/partials/tools/unwrap.hbs | 2 +- ui/app/templates/partials/tools/wrap.hbs | 6 +- .../vault/cluster/policies/create.hbs | 38 ++++++------- .../templates/vault/cluster/policy/edit.hbs | 10 ++-- .../templates/vault/cluster/policy/show.hbs | 17 ++---- .../addon/templates/components/form-field.hbs | 24 ++++---- .../components/json-editor-test.js | 44 +++++++++++++++ ui/tests/pages/components/json-editor.js | 8 +++ 23 files changed, 253 insertions(+), 153 deletions(-) create mode 100644 changelog/11500.txt create mode 100644 ui/app/templates/components/json-editor.hbs create mode 100644 ui/tests/integration/components/json-editor-test.js create mode 100644 ui/tests/pages/components/json-editor.js diff --git a/changelog/11500.txt b/changelog/11500.txt new file mode 100644 index 000000000..e242c6f18 --- /dev/null +++ b/changelog/11500.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Updated ivy code mirror component for consistency +``` \ No newline at end of file diff --git a/ui/app/components/json-editor.js b/ui/app/components/json-editor.js index 48cea1bc6..e77f41b73 100644 --- a/ui/app/components/json-editor.js +++ b/ui/app/components/json-editor.js @@ -1,5 +1,5 @@ -import { assign } from '@ember/polyfills'; -import IvyCodemirrorComponent from './ivy-codemirror'; +import Component from '@ember/component'; + const JSON_EDITOR_DEFAULTS = { // IMPORTANT: `gutters` must come before `lint` since the presence of // `gutters` is cached internally when `lint` is toggled @@ -13,19 +13,41 @@ const JSON_EDITOR_DEFAULTS = { showCursorWhenSelecting: true, }; -export default IvyCodemirrorComponent.extend({ - 'data-test-component': 'json-editor', - updateCodeMirrorOptions() { - const options = assign({}, JSON_EDITOR_DEFAULTS, this.options); - if (options.autoHeight) { - options.viewportMargin = Infinity; - delete options.autoHeight; - } +export default Component.extend({ + showToolbar: true, + title: null, + subTitle: null, + helpText: null, + value: null, + options: null, + valueUpdated: null, + onFocusOut: null, + readOnly: false, - if (options) { - Object.keys(options).forEach(function(option) { - this.updateCodeMirrorOption(option, options[option]); - }, this); + init() { + this._super(...arguments); + this.options = { ...JSON_EDITOR_DEFAULTS, ...this.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; } }, + + actions: { + updateValue(...args) { + if (this.valueUpdated) { + this.valueUpdated(...args); + } + }, + onFocus(...args) { + if (this.onFocusOut) { + this.onFocusOut(...args); + } + }, + }, }); diff --git a/ui/app/models/role-aws.js b/ui/app/models/role-aws.js index 422499b5a..6e5c425d7 100644 --- a/ui/app/models/role-aws.js +++ b/ui/app/models/role-aws.js @@ -49,6 +49,8 @@ export default Model.extend({ }), policyDocument: attr('string', { editType: 'json', + helpText: + 'A policy is an object in AWS that, when associated with an identity or resource, defines their permissions.', }), fields: computed('credentialType', function() { let credentialType = this.credentialType; diff --git a/ui/app/templates/components/console/log-json.hbs b/ui/app/templates/components/console/log-json.hbs index 36f94cb68..a923ea025 100644 --- a/ui/app/templates/components/console/log-json.hbs +++ b/ui/app/templates/components/console/log-json.hbs @@ -1,5 +1,5 @@
- + + + + {{yield}} +
+ + + + + +
+{{/if}} +{{ivy-codemirror + data-test-component="json-editor" + value=value + options=options + valueUpdated=(action "updateValue") + onFocusOut=(action "onFocus") +}} +{{#if helpText }} +
+

{{ helpText }}

+
+{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/secret-edit-display.hbs b/ui/app/templates/components/secret-edit-display.hbs index 7d5b6481d..902dd4798 100644 --- a/ui/app/templates/components/secret-edit-display.hbs +++ b/ui/app/templates/components/secret-edit-display.hbs @@ -36,18 +36,12 @@ {{#if @showAdvancedMode}}
- - + @valueUpdated={{action @editActions.codemirrorUpdated}} + @onFocusOut={{action @editActions.formatJSON}}> +
{{else}}
diff --git a/ui/app/templates/components/transit-key-action/decrypt.hbs b/ui/app/templates/components/transit-key-action/decrypt.hbs index 53662fdb7..d0c2e6197 100644 --- a/ui/app/templates/components/transit-key-action/decrypt.hbs +++ b/ui/app/templates/components/transit-key-action/decrypt.hbs @@ -4,14 +4,14 @@

You can decrypt ciphertext using {{key.name}} as the encryption key.

-
- +
{{#if key.derived}} diff --git a/ui/app/templates/components/transit-key-action/encrypt.hbs b/ui/app/templates/components/transit-key-action/encrypt.hbs index 79b97c0de..0a5e65123 100644 --- a/ui/app/templates/components/transit-key-action/encrypt.hbs +++ b/ui/app/templates/components/transit-key-action/encrypt.hbs @@ -6,16 +6,14 @@
-
- +
diff --git a/ui/app/templates/components/transit-key-action/hmac.hbs b/ui/app/templates/components/transit-key-action/hmac.hbs index 0e9170c68..846a5cd4a 100644 --- a/ui/app/templates/components/transit-key-action/hmac.hbs +++ b/ui/app/templates/components/transit-key-action/hmac.hbs @@ -6,16 +6,14 @@
-
- +
diff --git a/ui/app/templates/components/transit-key-action/rewrap.hbs b/ui/app/templates/components/transit-key-action/rewrap.hbs index 4ae186192..44bc0ae6d 100644 --- a/ui/app/templates/components/transit-key-action/rewrap.hbs +++ b/ui/app/templates/components/transit-key-action/rewrap.hbs @@ -6,14 +6,14 @@
-
- +
{{#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 40177b232..a8a1e4542 100644 --- a/ui/app/templates/components/transit-key-action/sign.hbs +++ b/ui/app/templates/components/transit-key-action/sign.hbs @@ -6,16 +6,15 @@
-
- + }} + @data-test-transit-input="input" />
diff --git a/ui/app/templates/components/transit-key-action/verify.hbs b/ui/app/templates/components/transit-key-action/verify.hbs index fa2189afc..223821f71 100644 --- a/ui/app/templates/components/transit-key-action/verify.hbs +++ b/ui/app/templates/components/transit-key-action/verify.hbs @@ -4,16 +4,14 @@

Check whether the provided signature is valid for the given data.

-
- +
@@ -115,25 +113,26 @@
{{#if (or (and verification (eq verification 'HMAC')) hmac)}}
-
- +
{{else}}
-
-
@@ -142,14 +141,15 @@
{{else}}
-
- +
diff --git a/ui/app/templates/partials/form-field-from-model.hbs b/ui/app/templates/partials/form-field-from-model.hbs index 1d30bb9c1..9fcc55717 100644 --- a/ui/app/templates/partials/form-field-from-model.hbs +++ b/ui/app/templates/partials/form-field-from-model.hbs @@ -17,6 +17,7 @@ (eq attr.type "boolean") ) }} + {{#unless (eq attr.type "object")}} {{/unless}} + {{/unless}} {{#if attr.options.possibleValues}}
@@ -73,6 +75,10 @@
{{else if (eq attr.type "object")}} - + {{/if}}
\ No newline at end of file diff --git a/ui/app/templates/partials/secret-form-show.hbs b/ui/app/templates/partials/secret-form-show.hbs index 40a880a36..e576afb11 100644 --- a/ui/app/templates/partials/secret-form-show.hbs +++ b/ui/app/templates/partials/secret-form-show.hbs @@ -29,9 +29,15 @@ {{else}} {{#if showAdvancedMode}} - +
+ +
{{else}}
diff --git a/ui/app/templates/partials/tools/unwrap.hbs b/ui/app/templates/partials/tools/unwrap.hbs index d6fe83dda..0a429e66b 100644 --- a/ui/app/templates/partials/tools/unwrap.hbs +++ b/ui/app/templates/partials/tools/unwrap.hbs @@ -21,7 +21,7 @@ {{#if (eq unwrapActiveTab "data")}}
-
diff --git a/ui/app/templates/partials/tools/wrap.hbs b/ui/app/templates/partials/tools/wrap.hbs index 79fa1c4fb..6b879d090 100644 --- a/ui/app/templates/partials/tools/wrap.hbs +++ b/ui/app/templates/partials/tools/wrap.hbs @@ -32,9 +32,11 @@
-
- +
-
-
- -
-
-
+ + + +
- - + +
-
-
-
+ + {{#if showFileUpload}} {{else}} - -
-

- You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field -

-
+ }}> + {{/if}}
{{#each model.additionalAttrs as |attr|}} diff --git a/ui/app/templates/vault/cluster/policy/edit.hbs b/ui/app/templates/vault/cluster/policy/edit.hbs index 83d23f436..11c823ca4 100644 --- a/ui/app/templates/vault/cluster/policy/edit.hbs +++ b/ui/app/templates/vault/cluster/policy/edit.hbs @@ -47,13 +47,13 @@
-
-
- -
{{#if model.paths}} diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs index c022209ea..2d05c7ae3 100644 --- a/ui/lib/core/addon/templates/components/form-field.hbs +++ b/ui/lib/core/addon/templates/components/form-field.hbs @@ -17,7 +17,8 @@ ) ) }} -