Replace codemirror 6 code editor with HDS CodeEditor component

changelog/30188.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Use the Helios Design System Code Block component for all readonly code editors and use its Code Editor component for all other code editors
+```

ui/app/components/generate-credentials.js

@@ -143,12 +143,12 @@ export default class GenerateCredentials extends Component {
   }
 
   @action
-  codemirrorUpdated(attr, val, codemirror) {
-    codemirror.performLint();
-    const hasErrors = codemirror.state.lint.marked.length > 0;
-
-    if (!hasErrors) {
+  editorUpdated(attr, val) {
+    // wont set invalid JSON to the model
+    try {
       this.model[attr] = JSON.parse(val);
+    } catch {
+      // linting is handled by the component
     }
   }
 

ui/app/components/policy-form.hbs

@@ -23,13 +23,7 @@
       </div>
     {{/if}}
     <div class="field">
-      {{#unless this.showFileUpload}}
-        <span class="is-size-9 has-text-grey has-bottom-margin-l has-top-margin-xs" data-test-alt-tab-message>
-          You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field.
-        </span>
-      {{/unless}}
       <Toolbar aria-label="toolbar for managing {{or @model.name 'new'}} policy">
-        <label class="has-text-weight-bold has-right-margin-4">Policy</label>
         {{#if @renderPolicyExampleModal}}
           {{! only true in policy create and edit routes }}
           <ToolbarFilters aria-label="help tools for managing {{or @model.name 'new'}} policy">
@@ -43,9 +37,8 @@
             />
           </ToolbarFilters>
         {{/if}}
-        <ToolbarActions aria-label="actions for managing {{or @model.name 'new'}} policy">
-          <div class="toolbar-separator"></div>
-          {{#if @model.isNew}}
+        {{#if @model.isNew}}
+          <ToolbarActions aria-label="actions for managing {{or @model.name 'new'}} policy">
             <div class="control is-flex">
               <Input
                 id="fileUploadToggle"
@@ -58,20 +51,8 @@
               />
               <label for="fileUploadToggle" class="has-text-weight-bold is-size-8">Upload file</label>
             </div>
-          {{else}}
-            {{! EDITING - no file upload toggle}}
-            <Hds::Copy::Button
-              @text="Copy"
-              @isIconOnly={{true}}
-              @textToCopy={{@model.policy}}
-              @onError={{(fn
-                (set-flash-message "Clipboard copy failed. The Clipboard API requires a secure context." "danger")
-              )}}
-              class="transparent"
-              data-test-copy-button
-            />
-          {{/if}}
-        </ToolbarActions>
+          </ToolbarActions>
+        {{/if}}
       </Toolbar>
       {{#if this.showFileUpload}}
         <div class="has-top-margin-xs">
@@ -80,15 +61,13 @@
       {{else}}
         <JsonEditor
           @title="Policy"
-          @showToolbar={{false}}
           @value={{@model.policy}}
           @valueUpdated={{action (mut @model.policy)}}
           @mode="ruby"
           @extraKeys={{hash Shift-Enter=(perform this.save)}}
           data-test-policy-editor
         />
       {{/if}}
-
     </div>
     {{#each @model.additionalAttrs as |attr|}}
       <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />

ui/app/components/role-aws-edit.js

@@ -43,12 +43,12 @@ export default RoleEdit.extend({
       });
     },
 
-    codemirrorUpdated(attr, val, codemirror) {
-      codemirror.performLint();
-      const hasErrors = codemirror.state.lint.marked.length > 0;
-
-      if (!hasErrors) {
-        set(this.model, attr, val);
+    editorUpdated(attr, val) {
+      // wont set invalid JSON to the model
+      try {
+        set(this.model, attr, JSON.parse(val));
+      } catch {
+        // linting is handled by the component
       }
     },
   },

ui/app/components/role-edit.js

@@ -102,12 +102,12 @@ export default Component.extend(FocusOnInsertMixin, {
       });
     },
 
-    codemirrorUpdated(attr, val, codemirror) {
-      codemirror.performLint();
-      const hasErrors = codemirror.state.lint.marked.length > 0;
-
-      if (!hasErrors) {
+    editorUpdated(attr, val) {
+      // wont set invalid JSON to the model
+      try {
         set(this.model, attr, JSON.parse(val));
+      } catch {
+        // linting is handled by the component
       }
     },
   },

ui/app/components/secret-create-or-update.js

@@ -42,7 +42,7 @@ const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
 const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
 
 export default class SecretCreateOrUpdate extends Component {
-  @tracked codemirrorString = null;
+  @tracked editorString = null;
   @tracked error = null;
   @tracked secretPaths = null;
   @tracked pathWhiteSpaceWarning = false;
@@ -58,7 +58,7 @@ export default class SecretCreateOrUpdate extends Component {
 
   @action
   setup(elem, [secretData, mode]) {
-    this.codemirrorString = secretData.toJSONString();
+    this.editorString = secretData.toJSONString();
     this.validationMessages = {
       path: '',
     };
@@ -160,21 +160,19 @@ export default class SecretCreateOrUpdate extends Component {
     }
     this.checkRows();
   }
+
   @action
-  codemirrorUpdated(val, codemirror) {
-    this.error = null;
-    codemirror.performLint();
-    const noErrors = codemirror.state.lint.marked.length === 0;
-    if (noErrors) {
-      try {
-        this.args.secretData.fromJSONString(val);
-        set(this.args.modelForData, 'secretData', this.args.secretData.toJSON());
-      } catch (e) {
-        this.error = e.message;
-      }
+  editorUpdated(val) {
+    try {
+      this.args.secretData.fromJSONString(val);
+      set(this.args.modelForData, 'secretData', this.args.secretData.toJSON());
+    } catch (e) {
+      this.error = e.message;
     }
-    this.codemirrorString = val;
+
+    this.editorString = val;
   }
+
   @action
   createOrUpdateKey(type, event) {
     event.preventDefault();
@@ -204,21 +202,25 @@ export default class SecretCreateOrUpdate extends Component {
     this.checkRows();
     this.handleChange();
   }
+
   @action
   formatJSON() {
-    this.codemirrorString = this.args.secretData.toJSONString(true);
+    this.editorString = this.args.secretData.toJSONString(true);
   }
+
   @action
   handleMaskedInputChange(secret, index, value) {
     const row = { ...secret, value };
     set(this.args.secretData, index, row);
     this.handleChange();
   }
+
   @action
   handleChange() {
-    this.codemirrorString = this.args.secretData.toJSONString(true);
+    this.editorString = this.args.secretData.toJSONString(true);
     set(this.args.modelForData, 'secretData', this.args.secretData.toJSON());
   }
+
   @action
   updateValidationErrorCount(errorCount) {
     this.validationErrorCount = errorCount;

ui/app/components/secret-edit.js

@@ -35,13 +35,13 @@ export default class SecretEdit extends Component {
   @service store;
 
   @tracked secretData = null;
-  @tracked codemirrorString = null;
+  @tracked editorString = null;
 
   // fired on did-insert from render modifier
   @action
   createKvData(elem, [model]) {
     this.secretData = KVObject.create({ content: [] }).fromJSON(model.secretData);
-    this.codemirrorString = this.secretData.toJSONString();
+    this.editorString = this.secretData.toJSONString();
   }
   // TODO move this to the secret model
   @maybeQueryRecord(

ui/app/components/tools/wrap.hbs

@@ -53,7 +53,7 @@
           @title="Data to wrap"
           @subTitle="json-formatted"
           @value={{this.stringifiedWrapData}}
-          @valueUpdated={{this.codemirrorUpdated}}
+          @valueUpdated={{this.editorUpdated}}
         />
       {{else}}
         <KvObjectEditor

ui/app/components/tools/wrap.ts

@@ -13,7 +13,6 @@ import type ApiService from 'vault/services/api';
 import type FlashMessageService from 'vault/services/flash-messages';
 import type { TtlEvent } from 'vault/app-types';
 import type { HTMLElementEvent } from 'vault/forms';
-import type { Editor } from 'codemirror';
 
 /**
  * @module ToolsWrap
@@ -68,10 +67,14 @@ export default class ToolsWrap extends Component {
   }
 
   @action
-  codemirrorUpdated(val: string, codemirror: Editor) {
-    codemirror.performLint();
-    this.hasLintingErrors = codemirror?.state.lint.marked?.length > 0;
-    if (!this.hasLintingErrors) this.wrapData = JSON.parse(val);
+  editorUpdated(val: string) {
+    this.hasLintingErrors = false;
+
+    try {
+      this.wrapData = JSON.parse(val);
+    } catch {
+      this.hasLintingErrors = true;
+    }
   }
 
   @action

ui/app/controllers/vault/cluster/secrets/backend/sign.js

@@ -19,12 +19,12 @@ export default Controller.extend({
       });
     },
 
-    codemirrorUpdated(attr, val, codemirror) {
-      codemirror.performLint();
-      const hasErrors = codemirror.state.lint.marked.length > 0;
-
-      if (!hasErrors) {
+    editorUpdated(attr, val) {
+      // wont set invalid JSON to the model
+      try {
         set(this.model, attr, JSON.parse(val));
+      } catch {
+        // linting is handled by the component
       }
     },