Updated code mirror component for consistency (hashicorp#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

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Updated ivy code mirror component for consistency
+```

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);
+ }
+ },
  },
 });

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;

ui/app/templates/components/console/log-json.hbs

@@ -1,5 +1,5 @@
 <div class="console-ui-output has-copy-button">
- <JsonEditor @value={{stringify content}} @options={{hash
+ <JsonEditor @showToolbar={{false}} @value={{stringify content}} @options={{hash
  readOnly=true
  lineNumbers=false
  autoHeight=true

ui/app/templates/components/control-group-success.hbs

@@ -12,6 +12,7 @@
  <div class="has-copy-button">
  <JsonEditor
  data-test-json-viewer
+ @showToolbar={{false}}
  @value={{ stringify unwrapData }}
  @options={{hash
  readOnly=true

ui/app/templates/components/json-editor.hbs

@@ -0,0 +1,32 @@
+{{#if showToolbar }}
+ <div data-test-component="json-editor-toolbar">
+ <Toolbar>
+ <label class="is-label" data-test-component="json-editor-title">
+ {{title}} 
+ {{#if subTitle }}
+ <span class="is-size-9 is-lowercase has-text-grey">({{ subTitle }})</span>
+ {{/if}}
+ </label>
+ <ToolbarActions>
+ {{yield}}
+ <div class="toolbar-separator"></div>
+ <CopyButton class="button is-transparent" @clipboardText={{value}}
+ @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
+ <Icon @glyph="copy-action" aria-label="Copy" />
+ </CopyButton>
+ </ToolbarActions>
+ </Toolbar>
+ </div>
+{{/if}}
+{{ivy-codemirror
+ data-test-component="json-editor" 
+ value=value 
+ options=options
+ valueUpdated=(action "updateValue") 
+ onFocusOut=(action "onFocus") 
+}}
+{{#if helpText }}
+ <div class="box is-shadowless is-fullwidth has-short-padding">
+ <p class="sub-text">{{ helpText }}</p>
+ </div>
+{{/if}}

ui/app/templates/components/secret-edit-display.hbs

@@ -36,18 +36,12 @@
 
  {{#if @showAdvancedMode}}
  <div class="form-section">
- <label class="title is-5">
- {{#if isV2}}
- Version data
- {{else}}
- Secret data
- {{/if}}
- </label>
- <JsonEditor
+ <JsonEditor
+ @title={{if isV2 "Version Data" "Secret Data"}}
  @value={{@codemirrorString}}
- @valueUpdated={{@editActions.codemirrorUpdated}}
- @onFocusOut={{@editActions.formatJSON}}
-  />
+ @valueUpdated={{action @editActions.codemirrorUpdated}}
+ @onFocusOut={{action @editActions.formatJSON}}>
+ </JsonEditor> 
  </div>
  {{else}}
  <div class="form-section">

ui/app/templates/components/transit-key-action/decrypt.hbs

@@ -4,14 +4,14 @@
  <p>You can decrypt ciphertext using <code>{{key.name}}</code> as the encryption key.</p>
  </div>
  <div class="field">
- <label for="ciphertext" class="is-label">Ciphertext</label>
  <div id="ciphertext-control" class="control">
- <IvyCodemirror @valueUpdated={{action (mut ciphertext)}} @options={{hash
- lineNumbers=true
- tabSize=2
- mode='ruby'
- theme='hashi'
- }} @data-test-transit-input="ciphertext" />
+ <JsonEditor
+ @title="Ciphertext"
+ @valueUpdated={{action (mut ciphertext)}} 
+ @options={{hash
+ mode='ruby'
+ }} 
+ @data-test-transit-input="ciphertext" />
  </div>
  </div>
  {{#if key.derived}}

ui/app/templates/components/transit-key-action/encrypt.hbs

@@ -6,16 +6,14 @@
  </div>
  <KeyVersionSelect @key={{key}} @onVersionChange={{action (mut key_version)}} @key_version={{key_version}} />
  <div class="field">
- <label for="plaintext" class="is-label">
- Plaintext
- </label>
  <div id="plaintext-control" class="control is-relative">
- <IvyCodemirror @value={{plaintext}} @valueUpdated={{action (mut plaintext)}} @options={{hash
- lineNumbers=true
- tabSize=2
- mode='ruby'
- theme='hashi'
- }} @data-test-transit-input="plaintext" />
+ <JsonEditor
+ @title="Plaintext"
+ @value={{plaintext}} @valueUpdated={{action (mut plaintext)}} 
+ @options={{hash
+ mode='ruby'
+ }} 
+ @data-test-transit-input="plaintext" />
  </div>
  </div>
  <div class="field">

ui/app/templates/components/transit-key-action/hmac.hbs

@@ -6,16 +6,14 @@
  </div>
  <KeyVersionSelect @key={{key}} @onVersionChange={{action (mut key_version)}} @key_version={{key_version}} />
  <div class="field">
- <label for="input" class="is-label">
- Input
- </label>
  <div id="input-control" class="control is-relative">
- <IvyCodemirror @valueUpdated={{action (mut input)}} @options={{hash
- lineNumbers=true
- tabSize=2
- mode='ruby'
- theme='hashi'
- }} @data-test-transit-input="input" />
+ <JsonEditor
+ @title="Input"
+ @valueUpdated={{action (mut input)}} 
+ @options={{hash
+ mode='ruby'
+ }} 
+ @data-test-transit-input="input" />
  </div>
  </div>
  <div class="field">

ui/app/templates/components/transit-key-action/rewrap.hbs

@@ -6,14 +6,14 @@
  </div>
  <KeyVersionSelect @key={{key}} @onVersionChange={{action (mut key_version)}} @key_version={{key_version}} />
  <div class="field">
- <label for="ciphertext" class="is-label">Ciphertext</label>
  <div class="control is-expanded">
- <IvyCodemirror @valueUpdated={{action (mut ciphertext)}} @options={{hash
- lineNumbers=true
- tabSize=2
- mode='ruby'
- theme='hashi'
- }} />
+ <JsonEditor
+ @title="Ciphertext"
+ @valueUpdated={{action (mut ciphertext)}} 
+ @options={{hash
+ mode='ruby'
+ }} 
+ />
  </div>
  </div>
  {{#if key.derived}}

ui/app/templates/components/transit-key-action/sign.hbs

@@ -6,16 +6,15 @@
  </div>
  <KeyVersionSelect @key={{key}} @onVersionChange={{action (mut key_version)}} @key_version={{key_version}} />
  <div class="field">
- <label for="input" class="is-label">
- Input
- </label>
  <div class="control is-relative">
- <IvyCodemirror @value={{input}} @valueUpdated={{action (mut input)}} @options={{hash
- lineNumbers=true
- tabSize=2
+ <JsonEditor
+ @title="Input"
+ @value={{input}} 
+ @valueUpdated={{action (mut input)}} 
+ @options={{hash
  mode='ruby'
-  theme='hashi'
-  }} @data-test-transit-input="input" />
+ }} 
+ @data-test-transit-input="input" />
  </div>
  </div>
  <div class="field">

ui/app/templates/components/transit-key-action/verify.hbs

@@ -4,16 +4,14 @@
  <p>Check whether the provided signature is valid for the given data.</p>
  </div>
  <div class="field">
- <label for="input" class="is-label">
- Input
- </label>
  <div class="control is-relative">
- <IvyCodemirror @id="input" @value={{input}} @valueUpdated={{action (mut input)}} @options={{hash
- lineNumbers=true
- tabSize=2
- mode='ruby'
- theme='hashi'
- }} @data-test-transit-input="input" />
+ <JsonEditor
+ @title="Input"
+ @value={{input}} @valueUpdated={{action (mut input)}} 
+ @options={{hash
+ mode='ruby'
+ }} 
+ @data-test-transit-input="input" />
  </div>
  </div>
  <div class="field">
@@ -115,25 +113,26 @@
  <div class="column is-two-thirds is-flex-column">
  {{#if (or (and verification (eq verification 'HMAC')) hmac)}}
  <div class="field is-flex-column is-flex-1">
- <label for="hmac" class="is-label">HMAC</label>
  <div class="control is-flex-column is-flex-1">
- <IvyCodemirror @id="hmac" @value={{hmac}} @valueUpdated={{action (mut hmac)}} @options={{hash
- lineNumbers=true
- tabSize=2
- mode='ruby'
- theme='hashi'
- }} />
+ <JsonEditor
+ @title="HMAC"
+ @value={{hmac}} 
+ @valueUpdated={{action (mut hmac)}} 
+ @options={{hash
+ mode='ruby'
+ }} 
+ />
  </div>
  </div>
  {{else}}
  <div class="field is-flex-column is-flex-1">
- <label for="signature" class="is-label">Signature</label>
  <div class="control is-flex-column is-flex-1">
- <IvyCodemirror @id="signature" @value={{signature}} @valueUpdated={{action (mut signature)}} @options={{hash
- lineNumbers=true
- tabSize=2
+ <JsonEditor
+ @title="Signature"
+ @value={{signature}} 
+ @valueUpdated={{action (mut signature)}} 
+ @options={{hash
  mode='ruby'
- theme='hashi'
  }} />
  </div>
  </div>
@@ -142,14 +141,15 @@
  </div>
  {{else}}
  <div class="field">
- <label for="hmac" class="is-label">HMAC</label>
  <div class="control">
- <IvyCodemirror @id="hmac" @value={{hmac}} @valueUpdated={{action (mut hmac)}} @options={{hash
- lineNumbers=true
- tabSize=2
- mode='ruby'
- theme='hashi'
- }} />
+ <JsonEditor
+ @title="HMAC"
+ @value={{hmac}} 
+ @valueUpdated={{action (mut hmac)}} 
+ @options={{hash
+ mode='ruby'
+ }} 
+ />
  </div>
  </div>
  <div class="field">

ui/app/templates/partials/form-field-from-model.hbs

@@ -17,13 +17,15 @@
  (eq attr.type "boolean")
  )
  }}
+ {{#unless (eq attr.type "object")}}
  <label for="{{attr.name}}" class="is-label">
  {{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
  {{#if attr.options.helpText}}
  <InfoTooltip>{{attr.options.helpText}}</InfoTooltip>
  {{/if}}
  </label>
  {{/unless}}
+ {{/unless}}
  {{#if attr.options.possibleValues}}
  <div class="control is-expanded">
  <div class="select is-fullwidth">
@@ -73,6 +75,10 @@
  </label>
  </div>
  {{else if (eq attr.type "object")}}
- <JsonEditor @value={{if (get model attr.name) (stringify (get model attr.name)) emptyData}} @valueUpdated={{action "codemirrorUpdated" attr.name}} />
+ <JsonEditor 
+ @title={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
+ @helpText={{attr.options.helpText}} 
+ @value={{if (get model attr.name) (stringify (get model attr.name)) emptyData}} 
+ @valueUpdated={{action "codemirrorUpdated" attr.name}} />
  {{/if}}
 </div>

ui/app/templates/partials/secret-form-show.hbs

@@ -29,9 +29,15 @@
  </EmptyState>
 {{else}}
  {{#if showAdvancedMode}}
- <JsonEditor @value={{modelForData.dataAsJSONString}} @options={{hash
- readOnly=true
- }} />
+ <div class="has-top-margin-s">
+ <JsonEditor
+ @title={{if isV2 "Version Data" "Secret Data"}} 
+ @value={{modelForData.dataAsJSONString}} 
+ @options={{hash
+ readOnly=true
+ }} 
+ />
+ </div>
  {{else}}
  <div class="table info-table-row-header">
  <div class="info-table-row thead">