Replace Rose::CodeEditor with Hds::CodeEditor (#2679)

* chore: 🤖 replace Rose::CodeEditor with Hds::CodeEditor

- Remove CodeEditor 5 dependency

* chore: 🤖 Replace CodeMirror5 dep

remove CodeMirror5 and replace existing editors with HDS::CodeEditor

* chore: 🤖 deleting old codeeditor styles

* feat: 🎸 changing code editor

changing code editor

✅ Closes: 0

* removed unused export

* pr cleanup

* updating tests for new code editor

* responding to PR feedback

* added whitespace

* fixing linting violations

* chore: 🤖 self-review PR

self-review PR in the course of switching to new HDS code editor

* fix: 🐛 fix linting bug

* fix: 🐛 unneeded dependency

remove jslint dependency as this is handled in the new code editor from
HDS

* fix: 🐛 Fixing import bug

Fix import bug caused by importing scss modules that no longer exist

* Fix and refactor code editor acceptance test

* Fix and refactor code editor acceptance test

* chore: 🤖 remove codemirror dependency

* refactor: 💡 fix merge conflict issues

* test: 💍 update e2e test selectors

* test: 💍 fix target spec click event

* refactor: 💡 clean up test selectors for code editor

* refactor: 💡 clean up storage bucket test selectors

* chore: 🤖 remove code mirror modifiers

---------

Co-authored-by: calcaide <ccorvo@hashicorp.com>
Co-authored-by: cameronperera <cameron.perera@hashicorp.com>

ui/admin/.stylelintrc.js

@@ -24,11 +24,11 @@ module.exports = {
     'at-rule-no-vendor-prefix': null,
 
     // As a team we want to stick to using kebab-case as our selector class pattern, but there are a couple
-    // of exceptions in which we overrride CSS from addons like CodeMirror and HDS, in which they use
+    // of exceptions in which we overrride CSS from addons like HDS, in which they use
     // pascal case and a double-kebab-case. This regex checks for all of those 3 patterns and won't fail
     // lint check, but will fail if its any other pattern.
     'selector-class-pattern': [
-      '(^([a-z][a-z0-9]*)(-{1,2}[a-z0-9]+)*$)|(^CodeMirror)',
+      '(^([a-z][a-z0-9]*)(-{1,2}[a-z0-9]+)*$)',
       {
         message: (selector) =>
           `Expected class selector "${selector}" to be kebab-case`,

ui/admin/app/components/form/field/json-secret/index.hbs

@@ -20,17 +20,14 @@
       />
     </Form::Field::JsonSecret::Skeleton>
   {{else}}
-    <Rose::CodeEditor as |c|>
-      <c.fieldEditor
-        class='secret-editor-json'
-        @onInput={{@onInput}}
-        @value={{@value}}
-        @options={{hash
-          mode='application/json'
-          gutters=(array 'CodeMirror-lint-markers')
-          lint='true'
-        }}
-      />
-    </Rose::CodeEditor>
+    <Hds::CodeEditor
+      class='secret-editor-json'
+      @ariaLabel={{t 'form.secret-editor.label'}}
+      @value={{@value}}
+      @isLintingEnabled={{true}}
+      @language='json'
+      @onInput={{@onInput}}
+      data-test-code-editor
+    />
   {{/if}}
 </div>

ui/admin/app/components/form/worker/create-worker-led/index.js

@@ -38,7 +38,7 @@ export default class FormWorkerCreateWorkerLedComponent extends Component {
 
   // =properties
   /**
-   * Returns directory creation text for `<Rose::CodeEditor>`.
+   * Returns directory creation text for `<Hds::CodeBlock>`.
    * @type {string}
    */
   get createConfigText() {
@@ -55,7 +55,7 @@ touch ${this.configFilePath || '<path>'}/pki-worker.hcl`;
   }
 
   /**
-   * Returns config creation text for `<Rose::CodeEditor>`. The user will see
+   * Returns config creation text for `<Hds::CodeBlock>`. The user will see
    * different outputs based on if they are using `hcp` or `oss` binaries.
    * @type {string}
    */
@@ -108,7 +108,7 @@ ${listenerText}
 
   /**
    * Returns boundary installation command and start worker server command
-   * for `<Rose::CodeEditor>`.
+   * for `<Hds::CodeBlock>`.
    * @type {string}
    */
   get installBoundaryText() {
@@ -129,33 +129,6 @@ unzip *.zip ;\\
       : ossContent;
   }
 
-  /**
-   * Returns `shell` configuration object for `<Rose::CodeEditor>`.
-   * @type {Object}
-   */
-  get shellCodeEditor() {
-    return {
-      mode: 'shell',
-      readOnly: true,
-      lineNumbers: false,
-      cursorBlinkRate: -1,
-      styleActiveLine: false,
-    };
-  }
-
-  /**
-   * Returns `hcl` configuration object for `<Rose::CodeEditor>`.
-   * @type {Object}
-   */
-  get hclCodeEditor() {
-    return {
-      mode: 'hcl',
-      readOnly: true,
-      cursorBlinkRate: -1,
-      styleActiveLine: false,
-    };
-  }
-
   //=methods
 
   convertCommaSeparatedValuesToArray(input) {

ui/admin/app/components/worker-filter-generator/index.hbs

@@ -5,20 +5,14 @@
 
 <Hds::Form::Field as |F|>
   <F.Control>
-    <Rose::CodeEditor as |c|>
-      {{#unless @hideToolbar}}
-        <c.toolbar @copyText={{get @model @name}} />
-      {{/unless}}
-      <c.fieldEditor
-        @onInput={{fn this.setWorkerFilter @model @name}}
-        @value={{or (get @model @name) ''}}
-        @options={{hash
-          mode='text/x-sh'
-          gutters=(array 'CodeMirror-lint-markers')
-          lint='true'
-        }}
-      />
-    </Rose::CodeEditor>
+    <Hds::CodeEditor
+      @ariaLabel={{t 'form.worker_filter.label'}}
+      @hasCopyButton={{not @hideToolbar}}
+      @language='shell'
+      @value={{or (get @model @name) ''}}
+      @onInput={{fn this.setWorkerFilter @model @name}}
+      data-test-code-editor
+    />
   </F.Control>
   {{#if (get @model.errors @name)}}
     <F.Error data-test-worker-filter-error as |E|>

ui/admin/app/styles/app.scss

@@ -265,16 +265,9 @@
   margin-bottom: sizing.rems(l);
   width: 100%;
 
-  .secret-editor-json {
-    .CodeMirror {
-      border-radius: var(--token-border-radius-small);
-      height: var(--secret-editor-height);
-      display: block;
-    }
-
-    .CodeMirror-gutters {
-      background: var(--secret-editor-gutter);
-    }
+  /* stylelint-disable-next-line selector-class-pattern */
+  .hds-code-editor__editor {
+    height: var(--secret-editor-height);
   }
 
   .secret-editor-skeleton-wrapper {

ui/admin/tests/acceptance/credential-store/create-test.js

@@ -4,7 +4,14 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, currentURL, click, fillIn } from '@ember/test-helpers';
+import {
+  visit,
+  currentURL,
+  click,
+  fillIn,
+  find,
+  waitFor,
+} from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import { setupSqlite } from 'api/test-support/helpers/sqlite';
 import { Response } from 'miragejs';
@@ -115,13 +122,20 @@ module('Acceptance | credential-stores | create', function (hooks) {
 
     await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
     await click(selectors.TYPE_VAULT);
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      selectors.EDITOR_WORKER_FILTER_VALUE,
-    );
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: selectors.EDITOR_WORKER_FILTER_VALUE,
+      },
+    });
+
     await click(commonSelectors.SAVE_BTN);
 
-    assert.dom(selectors.CODE_BLOCK_BODY).doesNotExist();
+    assert.dom(commonSelectors.CODE_EDITOR_CODE).doesNotExist();
     assert.strictEqual(getVaultCredentialStoresCount(), count + 1);
   });
 

ui/admin/tests/acceptance/credential-store/credentials/create-test.js

@@ -4,7 +4,14 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, currentURL, click, fillIn } from '@ember/test-helpers';
+import {
+  visit,
+  currentURL,
+  click,
+  fillIn,
+  find,
+  waitFor,
+} from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import { setupSqlite } from 'api/test-support/helpers/sqlite';
 import { Response } from 'miragejs';
@@ -426,15 +433,24 @@ module(
       await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_JSON);
 
-      await fillIn(selectors.FIELD_EDITOR, selectors.FIELD_EDITOR_VALUE);
-      assert.dom(selectors.EDITOR).includesText(selectors.FIELD_EDITOR_VALUE);
+      await waitFor(commonSelectors.CODE_EDITOR_CM);
 
-      await click(selectors.TYPE_SELECT);
-      await click(selectors.FIELD_TYPE_USERNAME_PASSWORD);
+      const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+      const editorView = editorElement.editor;
+      editorView.dispatch({
+        changes: {
+          from: editorView.state.selection.main.from,
+          insert: '{"test": "value"}',
+        },
+      });
+
+      assert
+        .dom(commonSelectors.CODE_EDITOR_CODE)
+        .includesText('{"test": "value"}');
 
       await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_JSON);
-      assert.dom(selectors.EDITOR).includesText('{}');
+      assert.dom(commonSelectors.CODE_EDITOR_CODE).includesText('{}');
     });
 
     test('users can cancel creation of new password credential', async function (assert) {

ui/admin/tests/acceptance/credential-store/credentials/selectors.js

@@ -8,6 +8,7 @@ export const FIELD_TYPE_USERNAME_PASSWORD = '[data-option-index="0"]';
 export const FIELD_TYPE_USERNAME_PASSWORD_DOMAIN = '[data-option-index="2"]';
 export const FIELD_TYPE_JSON = '[data-option-index="3"]';
 export const FIELD_TYPE_PASSWORD = '[data-option-index="4"]';
+
 export const FIELD_DOMAIN = '[name=domain]';
 export const FIELD_PASSWORD = '[name=password]';
 export const FIELD_USERNAME = '[name=username]';
@@ -16,8 +17,6 @@ export const FIELD_USERNAME_VALUE = 'username123';
 export const FIELD_PASSWORD_VALUE = 'password123';
 export const FIELD_USERNAME_WITH_DOMAIN_VALUE = 'username@g.com';
 
-export const FIELD_EDITOR = '[data-test-code-editor-field-editor] textarea';
-export const FIELD_EDITOR_VALUE = '{"test": "value"}';
 export const FIELD_PASSWORD_ERROR = '[data-test-error-message-password]';
 export const FIELD_SSH_PRIVATE_KEY = '[name=private_key]';
 export const FIELD_DOMAIN_ERROR = '[data-test-error-message-domain]';
@@ -25,7 +24,6 @@ export const FIELD_SSH_PRIVATE_KEY_ERROR =
   '[data-test-error-message-private-key]';
 export const FIELD_SSH_PRIVATE_KEY_PASSPHRASE = '[name=private_key_passphrase]';
 
-export const EDITOR = '[data-test-code-editor-field-editor]';
 export const MANAGE_DROPDOWN = '[data-test-manage-credentials-dropdown] button';
 export const MANAGE_DROPDOWN_DELETE =
   '[data-test-manage-credentials-dropdown] ul li button';

ui/admin/tests/acceptance/credential-store/update-test.js

@@ -4,7 +4,14 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, currentURL, click, fillIn } from '@ember/test-helpers';
+import {
+  visit,
+  currentURL,
+  click,
+  fillIn,
+  find,
+  waitFor,
+} from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import { setupSqlite } from 'api/test-support/helpers/sqlite';
 import { Response } from 'miragejs';
@@ -467,9 +474,18 @@ module('Acceptance | credential-stores | update', function (hooks) {
     await click(commonSelectors.HREF(urls.workerFilter));
     await click(selectors.MANAGE_DROPDOWN);
     await click(selectors.EDIT_WORKER_FILTER_ACTION);
-    await fillIn(commonSelectors.CODE_EDITOR_CONTENT, '"bar" in "/tags/foo"');
-    await click(commonSelectors.SAVE_BTN);
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
 
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: '"bar" in "/tags/foo"',
+      },
+    });
+
+    await click(commonSelectors.SAVE_BTN);
     assert.dom(selectors.CODE_BLOCK_BODY).exists();
     assert.dom(selectors.CODE_BLOCK_BODY).includesText('"bar" in "/tags/foo"');
   });

ui/admin/tests/acceptance/storage-buckets/create-test.js

@@ -4,7 +4,15 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, currentURL, click, fillIn, select } from '@ember/test-helpers';
+import {
+  visit,
+  currentURL,
+  click,
+  fillIn,
+  select,
+  find,
+  waitFor,
+} from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import { setupSqlite } from 'api/test-support/helpers/sqlite';
 import { Response } from 'miragejs';
@@ -66,14 +74,19 @@ module('Acceptance | storage-buckets | create', function (hooks) {
     const storageBucketCount = getStorageBucketCount();
     await visit(urls.storageBuckets);
 
-    await click(`[href="${urls.newStorageBucket}"]`);
+    await click(commonSelectors.HREF(urls.newStorageBucket));
     await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
     await select(selectors.FIELD_SCOPE, 'global');
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
 
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      selectors.EDITOR_WORKER_FILTER_VALUE,
-    );
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: '"dev" in "/tags/env"',
+      },
+    });
 
     assert.dom(selectors.FIELD_BUCKET_NAME).isNotDisabled();
     assert.dom(selectors.FIELD_BUCKET_PREFIX).isNotDisabled();
@@ -87,9 +100,10 @@ module('Acceptance | storage-buckets | create', function (hooks) {
 
     assert.strictEqual(storageBucket.name, commonSelectors.FIELD_NAME_VALUE);
     assert.strictEqual(storageBucket.scopeId, 'global');
+
     assert
       .dom(selectors.READONLY_WORKER_FILTER)
-      .hasText(selectors.EDITOR_WORKER_FILTER_VALUE);
+      .hasText('"dev" in "/tags/env"');
     assert.strictEqual(getStorageBucketCount(), storageBucketCount + 1);
   });
 
@@ -111,14 +125,19 @@ module('Acceptance | storage-buckets | create', function (hooks) {
     const storageBucketCount = getStorageBucketCount();
     await visit(urls.storageBuckets);
 
-    await click(`[href="${urls.newStorageBucket}"]`);
+    await click(commonSelectors.HREF(urls.newStorageBucket));
     await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
     await select(selectors.FIELD_SCOPE, instances.scopes.org.id);
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
 
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      selectors.EDITOR_WORKER_FILTER_VALUE,
-    );
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: '"dev" in "/tags/env"',
+      },
+    });
 
     assert.dom(selectors.FIELD_BUCKET_NAME).isNotDisabled();
     assert.dom(selectors.FIELD_BUCKET_PREFIX).isNotDisabled();
@@ -157,7 +176,7 @@ module('Acceptance | storage-buckets | create', function (hooks) {
 
     // Navigate to new storage bucket
     await visit(urls.storageBuckets);
-    await click(`[href="${urls.newStorageBucket}"]`);
+    await click(commonSelectors.HREF(urls.newStorageBucket));
 
     // Fill the form
     await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
@@ -173,10 +192,16 @@ module('Acceptance | storage-buckets | create', function (hooks) {
     );
     await fillIn(selectors.FIELD_ACCESS_KEY, selectors.FIELD_ACCESS_KEY_VALUE);
     await fillIn(selectors.FIELD_SECRET_KEY, selectors.FIELD_SECRET_KEY_VALUE);
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      selectors.EDITOR_WORKER_FILTER_VALUE,
-    );
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: '"dev" in "/tags/env"',
+      },
+    });
 
     await click(commonSelectors.SAVE_BTN);
 
@@ -216,7 +241,7 @@ module('Acceptance | storage-buckets | create', function (hooks) {
     const storageBucketCount = getStorageBucketCount();
     await visit(urls.storageBuckets);
 
-    await click(`[href="${urls.newStorageBucket}"]`);
+    await click(commonSelectors.HREF(urls.newStorageBucket));
     await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
 
     // There are 2 credential types
@@ -224,10 +249,16 @@ module('Acceptance | storage-buckets | create', function (hooks) {
 
     await click(selectors.FIELD_DYNAMIC_CREDENTIAL);
     await fillIn(selectors.FIELD_ROLE_ARN, selectors.FIELD_ROLE_ARN_VALUE);
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      selectors.EDITOR_WORKER_FILTER_VALUE,
-    );
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: '"dev" in "/tags/env"',
+      },
+    });
 
     await click(commonSelectors.SAVE_BTN);
     const storageBucket = this.server.schema.storageBuckets.findBy({
@@ -258,17 +289,23 @@ module('Acceptance | storage-buckets | create', function (hooks) {
     const storageBucketCount = getStorageBucketCount();
     await visit(urls.storageBuckets);
 
-    await click(`[href="${urls.newStorageBucket}"]`);
+    await click(commonSelectors.HREF(urls.newStorageBucket));
     await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
     assert.dom(selectors.GROUP_CREDENTIAL_TYPE).exists({ count: 2 });
 
     await click(selectors.FIELD_STATIC_CREDENTIAL);
     await fillIn(selectors.FIELD_ACCESS_KEY, selectors.FIELD_ACCESS_KEY_VALUE);
     await fillIn(selectors.FIELD_SECRET_KEY, selectors.FIELD_SECRET_KEY_VALUE);
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      selectors.EDITOR_WORKER_FILTER_VALUE,
-    );
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: '"dev" in "/tags/env"',
+      },
+    });
 
     await click(commonSelectors.SAVE_BTN);
 
@@ -301,7 +338,7 @@ module('Acceptance | storage-buckets | create', function (hooks) {
 
     // Navigate to new storage bucket
     await visit(urls.storageBuckets);
-    await click(`[href="${urls.newStorageBucket}"]`);
+    await click(commonSelectors.HREF(urls.newStorageBucket));
 
     // Fill the form
     await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
@@ -316,10 +353,16 @@ module('Acceptance | storage-buckets | create', function (hooks) {
     );
     await fillIn(selectors.FIELD_ACCESS_KEY, selectors.FIELD_ACCESS_KEY_VALUE);
     await fillIn(selectors.FIELD_SECRET_KEY, selectors.FIELD_SECRET_KEY_VALUE);
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      selectors.EDITOR_WORKER_FILTER_VALUE,
-    );
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: '"dev" in "/tags/env"',
+      },
+    });
 
     await click(commonSelectors.SAVE_BTN);
 
@@ -358,7 +401,7 @@ module('Acceptance | storage-buckets | create', function (hooks) {
     const storageBucketCount = getStorageBucketCount();
     await visit(urls.storageBuckets);
 
-    await click(`[href="${urls.newStorageBucket}"]`);
+    await click(commonSelectors.HREF(urls.newStorageBucket));
     await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
 
     await click(commonSelectors.CANCEL_BTN);
@@ -403,11 +446,17 @@ module('Acceptance | storage-buckets | create', function (hooks) {
     });
     await visit(urls.storageBuckets);
 
-    await click(`[href="${urls.newStorageBucket}"]`);
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      selectors.EDITOR_WORKER_FILTER_VALUE,
-    );
+    await click(commonSelectors.HREF(urls.newStorageBucket));
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: '"dev" in "/tags/env"',
+      },
+    });
     await click(commonSelectors.SAVE_BTN);
 
     assert

ui/admin/tests/acceptance/storage-buckets/delete-test.js

@@ -90,7 +90,7 @@ module('Acceptance | storage-buckets | delete', function (hooks) {
     const storageBucketCount = getStorageBucketCount();
     await visit(urls.globalScope);
 
-    await click(`[href="${urls.storageBuckets}"]`);
+    await click(commonSelectors.HREF(urls.storageBuckets));
     await click(DROPDOWN_BUTTON_SELECTOR);
     await click(DELETE_DROPDOWN_SELECTOR);
 

ui/admin/tests/acceptance/storage-buckets/selectors.js

@@ -30,7 +30,7 @@ export const FIELD_SECRET_KEY_EDIT_BTN =
 export const FIELD_WORKER_FILTER = '[name=worker_filter]';
 export const FIELD_WORKER_FILTER_ERROR = '[data-test-worker-filter-error]';
 export const READONLY_WORKER_FILTER = '[data-test-worker-filter]';
-export const EDITOR_WORKER_FILTER_VALUE = '"dev" in "/tags/env"';
+
 export const TOAST = '[role=alert] div';
 export const TOAST_SUCCESSFUL_VALUE = 'Saved successfully.';
 

ui/admin/tests/acceptance/storage-buckets/update-test.js

@@ -4,7 +4,7 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, click, fillIn } from '@ember/test-helpers';
+import { visit, click, fillIn, find, waitFor } from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import { setupSqlite } from 'api/test-support/helpers/sqlite';
 import { Response } from 'miragejs';
@@ -71,7 +71,7 @@ module('Acceptance | storage-buckets | update', function (hooks) {
     await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
     await click(commonSelectors.SAVE_BTN, 'Click save');
 
-    assert.dom(`[href="${urls.storageBucket}"]`).isVisible();
+    assert.dom(commonSelectors.HREF(urls.storageBucket)).isVisible();
     assert
       .dom(commonSelectors.FIELD_NAME)
       .hasValue(commonSelectors.FIELD_NAME_VALUE);
@@ -234,12 +234,18 @@ module('Acceptance | storage-buckets | update', function (hooks) {
       );
     });
 
-    await click(`[href="${urls.storageBucket}"]`);
+    await click(commonSelectors.HREF(urls.storageBucket));
     await click(commonSelectors.EDIT_BTN, 'Activate edit mode');
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      selectors.EDITOR_WORKER_FILTER_VALUE,
-    );
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: '"dev" in "/tags/env"',
+      },
+    });
     await click(commonSelectors.SAVE_BTN);
 
     assert
@@ -336,11 +342,11 @@ module('Acceptance | storage-buckets | update', function (hooks) {
     await click(commonSelectors.HREF(urls.storageBucketMinio));
 
     assert.dom(selectors.READONLY_WORKER_FILTER).isVisible();
-    assert.dom(commonSelectors.CODE_EDITOR_CONTENT).doesNotExist();
+    assert.dom(commonSelectors.CODE_EDITOR_CODE).doesNotExist();
 
     await click(commonSelectors.EDIT_BTN, 'Click edit mode');
 
-    assert.dom(commonSelectors.CODE_EDITOR_CONTENT).isVisible();
+    assert.dom(commonSelectors.CODE_EDITOR_CODE).isVisible();
     assert.dom(selectors.READONLY_WORKER_FILTER).doesNotExist();
   });
 });

ui/admin/tests/acceptance/targets/enable-session-recording/create-storage-bucket-test.js

@@ -4,7 +4,14 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, currentURL, click, fillIn } from '@ember/test-helpers';
+import {
+  visit,
+  currentURL,
+  click,
+  fillIn,
+  find,
+  waitFor,
+} from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import { setupSqlite } from 'api/test-support/helpers/sqlite';
 import { Response } from 'miragejs';
@@ -23,7 +30,6 @@ module(
 
     const FIELD_BUCKET_NAME = '[name="bucket_name"]';
     const FIELD_BUCKET_PREFIX = '[name="bucket_prefix"]';
-    const FIELD_EDITOR = '[data-test-code-editor-field-editor] textarea';
     const WORKER_FILTER_VALUE = '"dev" in "/tags/env"';
     const FIELD_SCOPE = (scope) => `[value="${scope}"]`;
 
@@ -90,7 +96,16 @@ module(
         commonSelectors.FIELD_NAME_VALUE,
       );
       await click(FIELD_SCOPE('global'));
-      await fillIn(FIELD_EDITOR, WORKER_FILTER_VALUE);
+      await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+      const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+      const editorView = editorElement.editor;
+      editorView.dispatch({
+        changes: {
+          from: editorView.state.selection.main.from,
+          insert: WORKER_FILTER_VALUE,
+        },
+      });
 
       assert.dom(FIELD_BUCKET_NAME).isNotDisabled();
       assert.dom(FIELD_BUCKET_PREFIX).isNotDisabled();
@@ -131,7 +146,16 @@ module(
         commonSelectors.FIELD_NAME_VALUE,
       );
       await click(FIELD_SCOPE(instances.scopes.org.scope.id));
-      await fillIn(FIELD_EDITOR, WORKER_FILTER_VALUE);
+      await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+      const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+      const editorView = editorElement.editor;
+      editorView.dispatch({
+        changes: {
+          from: editorView.state.selection.main.from,
+          insert: WORKER_FILTER_VALUE,
+        },
+      });
 
       assert.dom(FIELD_BUCKET_NAME).isNotDisabled();
       assert.dom(FIELD_BUCKET_PREFIX).isNotDisabled();
@@ -216,7 +240,16 @@ module(
       await visit(urls.enableSessionRecording);
 
       await click(commonSelectors.HREF(urls.newStorageBucket));
-      await fillIn(FIELD_EDITOR, WORKER_FILTER_VALUE);
+      await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+      const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+      const editorView = editorElement.editor;
+      editorView.dispatch({
+        changes: {
+          from: editorView.state.selection.main.from,
+          insert: WORKER_FILTER_VALUE,
+        },
+      });
       await click(commonSelectors.SAVE_BTN);
 
       assert.dom(commonSelectors.ALERT_TOAST_BODY).hasText(errorMessage);

ui/admin/tests/acceptance/targets/workers-test.js

@@ -4,7 +4,7 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, currentURL, click, fillIn } from '@ember/test-helpers';
+import { visit, currentURL, click, find, waitFor } from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import { setupSqlite } from 'api/test-support/helpers/sqlite';
 import * as commonSelectors from 'admin/tests/helpers/selectors';
@@ -261,11 +261,17 @@ module('Acceptance | targets | workers', function (hooks) {
     await click(commonSelectors.HREF(urls.targetEditIngressFilter));
 
     assert.strictEqual(currentURL(), urls.targetEditIngressFilter);
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: INGRESS_WORKER_FILTER_VALUE,
+      },
+    });
 
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      INGRESS_WORKER_FILTER_VALUE,
-    );
     await click(commonSelectors.SAVE_BTN);
 
     assert.strictEqual(currentURL(), urls.targetWorkers);
@@ -296,11 +302,17 @@ module('Acceptance | targets | workers', function (hooks) {
     await click(commonSelectors.HREF(urls.targetEditIngressFilter));
 
     assert.strictEqual(currentURL(), urls.targetEditIngressFilter);
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: INGRESS_WORKER_FILTER_VALUE,
+      },
+    });
 
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      INGRESS_WORKER_FILTER_VALUE,
-    );
     await click(commonSelectors.CANCEL_BTN);
 
     assert.strictEqual(currentURL(), urls.targetWorkers);
@@ -336,10 +348,17 @@ module('Acceptance | targets | workers', function (hooks) {
 
     assert.strictEqual(currentURL(), urls.targetEditEgressFilter);
 
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      EGRESS_WORKER_FILTER_VALUE,
-    );
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: EGRESS_WORKER_FILTER_VALUE,
+      },
+    });
+
     await click(commonSelectors.SAVE_BTN);
 
     assert.strictEqual(currentURL(), urls.targetWorkers);
@@ -419,11 +438,17 @@ module('Acceptance | targets | workers', function (hooks) {
     await click(commonSelectors.HREF(urls.targetEditEgressFilter));
 
     assert.strictEqual(currentURL(), urls.targetEditEgressFilter);
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: EGRESS_WORKER_FILTER_VALUE,
+      },
+    });
 
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      EGRESS_WORKER_FILTER_VALUE,
-    );
     await click(commonSelectors.CANCEL_BTN);
 
     assert.strictEqual(currentURL(), urls.targetWorkers);
@@ -460,10 +485,16 @@ module('Acceptance | targets | workers', function (hooks) {
     await click(commonSelectors.HREF(urls.targetEditIngressFilter));
 
     assert.strictEqual(currentURL(), urls.targetEditIngressFilter);
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      INGRESS_WORKER_FILTER_VALUE,
-    );
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: INGRESS_WORKER_FILTER_VALUE,
+      },
+    });
     await click(commonSelectors.HREF(urls.target));
 
     assert.dom(commonSelectors.MODAL_WARNING).isVisible();
@@ -501,10 +532,17 @@ module('Acceptance | targets | workers', function (hooks) {
     await click(commonSelectors.HREF(urls.targetEditIngressFilter));
 
     assert.strictEqual(currentURL(), urls.targetEditIngressFilter);
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      INGRESS_WORKER_FILTER_VALUE,
-    );
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: INGRESS_WORKER_FILTER_VALUE,
+      },
+    });
+
     await click(commonSelectors.HREF(urls.target));
 
     assert.dom(commonSelectors.MODAL_WARNING).isVisible();
@@ -541,10 +579,17 @@ module('Acceptance | targets | workers', function (hooks) {
     await click(commonSelectors.HREF(urls.targetEditEgressFilter));
 
     assert.strictEqual(currentURL(), urls.targetEditEgressFilter);
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      EGRESS_WORKER_FILTER_VALUE,
-    );
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: EGRESS_WORKER_FILTER_VALUE,
+      },
+    });
+
     await click(commonSelectors.HREF(urls.target));
 
     assert.dom(commonSelectors.MODAL_WARNING).isVisible();
@@ -581,11 +626,17 @@ module('Acceptance | targets | workers', function (hooks) {
     await click(commonSelectors.HREF(urls.targetEditEgressFilter));
 
     assert.strictEqual(currentURL(), urls.targetEditEgressFilter);
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
+
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
+    const editorView = editorElement.editor;
+    editorView.dispatch({
+      changes: {
+        from: editorView.state.selection.main.from,
+        insert: EGRESS_WORKER_FILTER_VALUE,
+      },
+    });
 
-    await fillIn(
-      commonSelectors.CODE_EDITOR_CONTENT,
-      EGRESS_WORKER_FILTER_VALUE,
-    );
     await click(commonSelectors.HREF(urls.target));
 
     assert.dom(commonSelectors.MODAL_WARNING).isVisible();

ui/admin/tests/helpers/selectors.js

@@ -93,9 +93,14 @@ export const TABLE_SORT_BTN_ARROW_UP = (column) =>
 export const TABLE_SORT_BTN_ARROW_DOWN = (column) =>
   `thead tr th:nth-child(${column}) button .hds-icon-arrow-down`;
 
-export const CODE_EDITOR_CONTENT =
-  '[data-test-code-editor-field-editor] textarea';
-export const CODE_EDITOR_CM = '[data-test-code-editor] .CodeMirror';
+// Code editor selectors
+export const CODE_EDITOR_CODE =
+  '[data-test-code-editor] .hds-code-editor__editor';
+// this selector is for waiting for the code editor to load,
+// it selects the CodeMirror instance which is only
+// present once the editor has loaded
+export const CODE_EDITOR_CM = '[data-test-code-editor] .cm-editor';
+export const CODE_EDITOR_CONTENT = '[data-test-code-editor] .cm-content';
 
 // Toolbar refresher selectors
 export const TOOLBAR_REFRESHER = '.toolbar-refresher';

ui/admin/tests/integration/components/form/field/json-secret-test.js

@@ -5,9 +5,10 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click } from '@ember/test-helpers';
+import { render, click, waitFor } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { setupIntl } from 'ember-intl/test-support';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Integration | Component | form/field/json-secret', function (hooks) {
   setupRenderingTest(hooks);
@@ -30,8 +31,10 @@ module('Integration | Component | form/field/json-secret', function (hooks) {
 
     assert.dom('.secret-editor').isVisible();
     assert.dom('.secret-editor-json').isVisible();
+
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
     assert
-      .dom('.secret-editor-json .CodeMirror-line')
+      .dom(commonSelectors.CODE_EDITOR_CONTENT)
       .hasText(this.model.json_object);
   });
 

ui/admin/tests/integration/components/worker-filter-generator/index-test.js

@@ -5,9 +5,10 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click, fillIn, select } from '@ember/test-helpers';
+import { render, click, fillIn, select, waitFor } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { setupIntl } from 'ember-intl/test-support';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module(
   'Integration | Component | worker-filter-generator/index',
@@ -15,9 +16,6 @@ module(
     setupRenderingTest(hooks);
     setupIntl(hooks, 'en-us');
 
-    const CODE_EDITOR = '[data-test-code-editor-field-editor]';
-    const CODE_EDITOR_LINE =
-      '[data-test-code-editor-field-editor] .CodeMirror-line';
     const FILTER_GENERATOR = '[name="filter_generator"]';
     const SHOW_FILTER_GENERATOR = '[name="show_filter_generator"]';
     const TAG_TYPE_OPTION = '[value="tag"]';
@@ -32,9 +30,12 @@ module(
       await render(
         hbs`<WorkerFilterGenerator @name='egress_worker_filter' @model={{this.model}} />`,
       );
+      await waitFor(commonSelectors.CODE_EDITOR_CM);
 
-      assert.dom(CODE_EDITOR).isVisible();
-      assert.dom(CODE_EDITOR_LINE).hasText(this.model.egress_worker_filter);
+      assert.dom(commonSelectors.CODE_EDITOR_CODE).isVisible();
+      assert
+        .dom(commonSelectors.CODE_EDITOR_CONTENT)
+        .hasText(this.model.egress_worker_filter);
     });
 
     test('it renders correct content when ingress_worker_filter is passed in', async function (assert) {
@@ -42,9 +43,12 @@ module(
       await render(
         hbs`<WorkerFilterGenerator @name='ingress_worker_filter' @model={{this.model}} />`,
       );
+      await waitFor(commonSelectors.CODE_EDITOR_CM);
 
-      assert.dom(CODE_EDITOR).isVisible();
-      assert.dom(CODE_EDITOR_LINE).hasText(this.model.ingress_worker_filter);
+      assert.dom(commonSelectors.CODE_EDITOR_CODE).isVisible();
+      assert
+        .dom(commonSelectors.CODE_EDITOR_CONTENT)
+        .hasText(this.model.ingress_worker_filter);
     });
 
     test('toggleFilterGenerator shows filter generator when toggled on', async function (assert) {