whoops

ui/app/json-example.json

@@ -0,0 +1,7 @@
+{
+  "languages": {
+    "+2": "blah",
+    "_t": "a",
+    "_2": "b"
+  }
+}

ui/app/modifiers/code-mirror.js

@@ -0,0 +1,79 @@
+import { getOwner } from '@ember/application';
+import { guidFor } from '@ember/object/internals';
+import Modifier from 'ember-modifier';
+import codemirror from 'codemirror';
+import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/selection/active-line';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/ruby/ruby';
+// import '@hashicorp/sentinel-codemirror/sentinel';
+import 'codemirror/keymap/sublime';
+import 'codemirror/addon/search/search';
+import 'codemirror/addon/search/searchcursor';
+import 'codemirror/addon/dialog/dialog';
+
+export default class CodeMirrorModifier extends Modifier {
+  get cmService() {
+    return getOwner(this).lookup('service:code-mirror');
+  }
+
+  didInstall() {
+    this._setup();
+  }
+
+  willRemove() {
+    this._cleanup();
+  }
+
+  didUpdateArguments() {
+    if (this._editor.getValue() !== this.args.named.value) {
+      this._editor.setValue(this.args.named.value);
+    }
+  }
+
+  _onChange(editor) {
+    if (this.args.named.valueUpdated) {
+      this.args.named.valueUpdated(editor.getValue());
+    }
+  }
+
+  _setup() {
+    if (!this.element) {
+      throw new Error('CodeMirror modifier has no element');
+    }
+
+    // Assign an ID to this element if there is none. This is to
+    // ensure that there are unique IDs in the code-mirror service
+    // registry.
+    if (!this.element.id) {
+      this.element.id = guidFor(this.element);
+    }
+
+    let editor = codemirror(
+      this.element,
+      Object.assign(
+        {
+          value: this.args.named.value ? this.args.named.value : '',
+          inputStyle: 'contenteditable',
+        },
+        this.args.named.options
+      )
+    );
+
+    editor.on('change', editor => {
+      this._onChange(editor);
+    });
+
+    if (this.cmService) {
+      this.cmService.registerInstance(this.element.id, editor);
+    }
+
+    this._editor = editor;
+  }
+
+  _cleanup() {
+    if (this.cmService) {
+      this.cmService.unregisterInstance(this.element.id);
+    }
+  }
+}

ui/app/services/code-mirror.js

@@ -0,0 +1,20 @@
+import Service from '@ember/service';
+
+// This service chiefly exists now for testing purposes.
+export default class CodeMirror extends Service {
+  _instances = Object.create(null);
+
+  instanceFor(id) {
+    return this._instances[id];
+  }
+
+  registerInstance(id, instance) {
+    this._instances[id] = instance;
+
+    return instance;
+  }
+
+  unregisterInstance(id) {
+    delete this._instances[id];
+  }
+}

ui/app/styles/components/json-editor.scss

@@ -0,0 +1,169 @@
+// Prevent jsondiffpatch output from expanding its container
+.jsondiffpatch-node {
+  pre,
+  .jsondiffpatch-textdiff-deleted,
+  .jsondiffpatch-textdiff-added {
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+}
+
+// Standardize on the same monospace font used elsewhere
+.jsondiffpatch-delta,
+.jsondiffpatch-delta pre {
+  font: 1rem/1.4 $family-monospace !important;
+}
+
+.json-editor-toolbar {
+  background-color: blue;
+}
+
+.jsondiffpatch-delta {
+  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace;
+  font-size: 12px;
+  margin: 0;
+  padding: 0 0 0 12px;
+  display: inline-block;
+}
+.jsondiffpatch-delta pre {
+  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace;
+  font-size: 12px;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+}
+ul.jsondiffpatch-delta {
+  list-style-type: none;
+  padding: 0 0 0 20px;
+  margin: 0;
+}
+.jsondiffpatch-delta ul {
+  list-style-type: none;
+  padding: 0 0 0 20px;
+  margin: 0;
+}
+.jsondiffpatch-added .jsondiffpatch-property-name,
+.jsondiffpatch-added .jsondiffpatch-value pre,
+.jsondiffpatch-modified .jsondiffpatch-right-value pre,
+.jsondiffpatch-textdiff-added {
+  background: #bbffbb;
+}
+.jsondiffpatch-deleted .jsondiffpatch-property-name,
+.jsondiffpatch-deleted pre,
+.jsondiffpatch-modified .jsondiffpatch-left-value pre,
+.jsondiffpatch-textdiff-deleted {
+  background: #ffbbbb;
+  text-decoration: line-through;
+}
+.jsondiffpatch-unchanged,
+.jsondiffpatch-movedestination {
+  color: gray;
+}
+.jsondiffpatch-unchanged,
+.jsondiffpatch-movedestination > .jsondiffpatch-value {
+  transition: all 0.5s;
+  -webkit-transition: all 0.5s;
+  overflow-y: hidden;
+}
+.jsondiffpatch-unchanged-showing .jsondiffpatch-unchanged,
+.jsondiffpatch-unchanged-showing .jsondiffpatch-movedestination > .jsondiffpatch-value {
+  max-height: 100px;
+}
+.jsondiffpatch-unchanged-hidden .jsondiffpatch-unchanged,
+.jsondiffpatch-unchanged-hidden .jsondiffpatch-movedestination > .jsondiffpatch-value {
+  max-height: 0;
+}
+.jsondiffpatch-unchanged-hiding .jsondiffpatch-movedestination > .jsondiffpatch-value,
+.jsondiffpatch-unchanged-hidden .jsondiffpatch-movedestination > .jsondiffpatch-value {
+  display: block;
+}
+.jsondiffpatch-unchanged-visible .jsondiffpatch-unchanged,
+.jsondiffpatch-unchanged-visible .jsondiffpatch-movedestination > .jsondiffpatch-value {
+  max-height: 100px;
+}
+.jsondiffpatch-unchanged-hiding .jsondiffpatch-unchanged,
+.jsondiffpatch-unchanged-hiding .jsondiffpatch-movedestination > .jsondiffpatch-value {
+  max-height: 0;
+}
+.jsondiffpatch-unchanged-showing .jsondiffpatch-arrow,
+.jsondiffpatch-unchanged-hiding .jsondiffpatch-arrow {
+  display: none;
+}
+.jsondiffpatch-value {
+  display: inline-block;
+}
+.jsondiffpatch-property-name {
+  display: inline-block;
+  padding-right: 5px;
+  vertical-align: top;
+}
+.jsondiffpatch-property-name:after {
+  content: ': ';
+}
+.jsondiffpatch-child-node-type-array > .jsondiffpatch-property-name:after {
+  content: ': [';
+}
+.jsondiffpatch-child-node-type-array:after {
+  content: '],';
+}
+div.jsondiffpatch-child-node-type-array:before {
+  content: '[';
+}
+div.jsondiffpatch-child-node-type-array:after {
+  content: ']';
+}
+.jsondiffpatch-child-node-type-object > .jsondiffpatch-property-name:after {
+  content: ': {';
+}
+.jsondiffpatch-child-node-type-object:after {
+  content: '},';
+}
+div.jsondiffpatch-child-node-type-object:before {
+  content: '{';
+}
+div.jsondiffpatch-child-node-type-object:after {
+  content: '}';
+}
+.jsondiffpatch-value pre:after {
+  content: ',';
+}
+li:last-child > .jsondiffpatch-value pre:after,
+.jsondiffpatch-modified > .jsondiffpatch-left-value pre:after {
+  content: '';
+}
+.jsondiffpatch-modified .jsondiffpatch-value {
+  display: inline-block;
+}
+.jsondiffpatch-modified .jsondiffpatch-right-value {
+  margin-left: 5px;
+}
+.jsondiffpatch-moved .jsondiffpatch-value {
+  display: none;
+}
+.jsondiffpatch-moved .jsondiffpatch-moved-destination {
+  display: inline-block;
+  background: #ffffbb;
+  color: #888;
+}
+.jsondiffpatch-moved .jsondiffpatch-moved-destination:before {
+  content: ' => ';
+}
+ul.jsondiffpatch-textdiff {
+  padding: 0;
+}
+.jsondiffpatch-textdiff-location {
+  color: #bbb;
+  display: inline-block;
+  min-width: 60px;
+}
+.jsondiffpatch-textdiff-line {
+  display: inline-block;
+}
+.jsondiffpatch-textdiff-line-number:after {
+  content: ',';
+}
+.jsondiffpatch-error {
+  background: red;
+  color: white;
+  font-weight: bold;
+}

ui/app/templates/components/secret-create-or-update.hbs

@@ -33,7 +33,8 @@
           <AlertBanner
             @type="warning"
             @message="Your secret path contains whitespace. If this is desired, you'll need to encode it with %20 in API calls."
-            @marginTop=true  
+            @marginTop=true
+            data-test-whitespace-warning
           />
         </div>
       {{/if}}