Remove Ivy Codemirror

changelog/14659.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Replaces the IvyCodemirror wrapper with a custom ember modifier.
+```

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] - to provide 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] - right now we only import ruby so must mode but be ruby or defaults to javascript. If you wanted another language you need to import it into the modifier.
+ * @param {Boolean} [readOnly] - defaults to false.
+ * @param {String} [theme] - specify or customize the look via css.
+ * @param {String} [value] - value within the display.
+ * @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);
     }
   }

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

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,10 +168,14 @@ $gutter-grey: #2a2f36;
 }
 
 .readonly-codemirror {
-  .CodeMirror-cursors {
+  .CodeMirror-code {
+    cursor: default;
+  }
+  .CodeMirror-cursor {
+    // https://github.com/codemirror/CodeMirror/issues/1099
     display: none;
   }
-
+  // css for a specific theme
   .cm-s-hashi {
     span {
       color: $light-grey;
@@ -195,7 +199,6 @@ $gutter-grey: #2a2f36;
     }
   }
 }
-
 .cm-s-auto-height.CodeMirror {
   height: auto;
 }

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

@@ -2,7 +2,10 @@
   <JsonEditor
     @showToolbar={{false}}
     @value={{stringify this.content}}
-    @options={{hash readOnly=true lineNumbers=false autoHeight=true gutters=false theme="hashi auto-height"}}
+    @readOnly={{true}}
+    @viewportMargin="Infinity"
+    @gutters={{false}}
+    @theme="hashi auto-height"
   />
   <HoverCopyButton @copyValue={{stringify this.content}} />
 </div>

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"
         />
         <HoverCopyButton @copyValue={{stringify this.unwrapData}} />
       </div>

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

@@ -23,14 +23,22 @@
       </Toolbar>
     </div>
   {{/if}}
-
-  <IvyCodemirror
-    @data-test-component="json-editor"
-    @value={{@value}}
-    @options={{this.options}}
-    @valueUpdated={{action "updateValue"}}
-    @onFocusOut={{action "onFocus"}}
-  />
+  <div
+    {{code-mirror
+      content=@value
+      extraKeys=@extraKeys
+      gutters=@gutters
+      lineNumbers=(if @readOnly false true)
+      mode=@mode
+      readOnly=@readOnly
+      theme=@theme
+      viewportMarg=@viewportMargin
+      onUpdate=this.onUpdate
+      onFocus=this.onFocus
+    }}
+    class={{if @readOnly "readonly-codemirror"}}
+    data-test-component="code-mirror-modifier"
+  ></div>
 
   {{#if @helpText}}
     <div class="box is-shadowless is-fullwidth has-short-padding">

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

@@ -33,7 +33,7 @@
       <JsonEditor
         @title={{if @isV2 "Version Data" "Secret Data"}}
         @value={{@modelForData.dataAsJSONString}}
-        @options={{hash readOnly=true}}
+        @readOnly={{true}}
       />
     </div>
   {{else}}

ui/app/templates/components/tool-unwrap.hbs

@@ -45,7 +45,7 @@
     {{#if (eq @unwrapActiveTab "data")}}
       <div class="field">
         <div class="control">
-          <JsonEditor @title="Unwrapped Data" @value={{stringify @unwrap_data}} @options={{hash readOnly=true}} />
+          <JsonEditor @title="Unwrapped Data" @value={{stringify @unwrap_data}} @readOnly={{true}} />
         </div>
       </div>
     {{else}}

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

@@ -8,7 +8,7 @@
         <JsonEditor
           @title="Ciphertext"
           @valueUpdated={{action (mut @ciphertext)}}
-          @options={{hash mode="ruby"}}
+          @mode="ruby"
           @data-test-transit-input="ciphertext"
         />
       </div>

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"
         />
       </div>

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

@@ -11,12 +11,7 @@
     <KeyVersionSelect @key={{@key}} @onVersionChange={{action (mut @key_version)}} @key_version={{@key_version}} />
     <div class="field">
       <div id="input-control" class="control is-relative">
-        <JsonEditor
-          @title="Input"
-          @valueUpdated={{action (mut @input)}}
-          @options={{hash mode="ruby"}}
-          @data-test-transit-input="input"
-        />
+        <JsonEditor @title="Input" @valueUpdated={{action (mut @input)}} @mode="ruby" @data-test-transit-input="input" />
       </div>
     </div>
     <div class="field">

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

@@ -11,7 +11,7 @@
     <KeyVersionSelect @key={{@key}} @onVersionChange={{action (mut @key_version)}} @key_version={{@key_version}} />
     <div class="field">
       <div class="control is-expanded">
-        <JsonEditor @title="Ciphertext" @valueUpdated={{action (mut @ciphertext)}} @options={{hash mode="ruby"}} />
+        <JsonEditor @title="Ciphertext" @valueUpdated={{action (mut @ciphertext)}} @mode="ruby" />
       </div>
     </div>
     {{#if @key.derived}}

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"
         />
       </div>

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

@@ -23,7 +23,7 @@
           @title="Input"
           @value={{@input}}
           @valueUpdated={{action (mut @input)}}
-          @options={{hash mode="ruby"}}
+          @mode="ruby"
           @data-test-transit-input="input"
         />
       </div>
@@ -140,12 +140,7 @@
           {{#if (or (and @verification (eq @verification "HMAC")) @hmac)}}
             <div class="field is-flex-column is-flex-1">
               <div class="control is-flex-column is-flex-1">
-                <JsonEditor
-                  @title="HMAC"
-                  @value={{@hmac}}
-                  @valueUpdated={{action (mut @hmac)}}
-                  @options={{hash mode="ruby"}}
-                />
+                <JsonEditor @title="HMAC" @value={{@hmac}} @valueUpdated={{action (mut @hmac)}} @mode="ruby" />
               </div>
             </div>
           {{else}}
@@ -155,7 +150,7 @@
                   @title="Signature"
                   @value={{@signature}}
                   @valueUpdated={{action (mut @signature)}}
-                  @options={{hash mode="ruby"}}
+                  @mode="ruby"
                 />
               </div>
             </div>
@@ -165,7 +160,7 @@
     {{else}}
       <div class="field">
         <div class="control">
-          <JsonEditor @title="HMAC" @value={{@hmac}} @valueUpdated={{action (mut @hmac)}} @options={{hash mode="ruby"}} />
+          <JsonEditor @title="HMAC" @value={{@hmac}} @valueUpdated={{action (mut @hmac)}} @mode="ruby" />
         </div>
       </div>
       <div class="field">

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}}
     </div>

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)}}
       />
       <div class="box is-shadowless is-fullwidth has-short-padding">
         <p class="help-text has-text-grey-dark is-size-7">

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"
     />
   </div>
   {{#if this.model.paths}}

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');

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}}