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>

addons/api/tests/dummy/config/environment.js

@@ -30,7 +30,7 @@ module.exports = function (environment) {
     },
 
     mirage: {
-      enabled: true
+      enabled: true,
     },
   };
 

addons/core/translations/form/en-us.yaml

@@ -177,6 +177,7 @@ sync-interval:
 tags:
   label: Tags
 secret-editor:
+  label: Secret Editor
   details: This secret is saved but won't be displayed
   edit: Click to replace this secret
 created:

addons/rose/addon/components/rose/code-editor/field-editor/index.hbs

@@ -1,11 +0,0 @@
-{{!
-  Copyright IBM Corp. 2021, 2026
-  SPDX-License-Identifier: BUSL-1.1
-}}
-
-<div
-  data-test-code-editor-field-editor
-  ...attributes
-  class='rose-codemirror-container'
-  {{code-mirror value=@value onInput=@onInput options=@options}}
-></div>

addons/rose/addon/components/rose/code-editor/index.hbs

@@ -1,13 +0,0 @@
-{{!
-  Copyright IBM Corp. 2021, 2026
-  SPDX-License-Identifier: BUSL-1.1
-}}
-
-<div data-test-code-editor>
-  {{yield
-    (hash
-      fieldEditor=(component 'rose/code-editor/field-editor' value=@codeValue)
-      toolbar=(component 'rose/code-editor/toolbar' copyText=@codeValue)
-    )
-  }}
-</div>

addons/rose/addon/components/rose/code-editor/toolbar/index.hbs

@@ -1,31 +0,0 @@
-{{!
-  Copyright IBM Corp. 2021, 2026
-  SPDX-License-Identifier: BUSL-1.1
-}}
-
-<div class='rose-code-editor-toolbar' data-test-code-editor-toolbar>
-  <div data-test-code-editor-toolbar-action class='code-editor-toolbar__action'>
-    {{yield to='action'}}
-  </div>
-
-  <div class='rose-code-editor-toolbar__right-aligned'>
-    {{#if (has-block 'menu')}}
-      <div
-        data-test-code-editor-toolbar-menu
-        class='rose-code-editor-toolbar__menu'
-      >
-        {{yield to='menu'}}
-      </div>
-      <div
-        class='rose-code-editor-toolbar__menu-divider'
-        data-test-code-editor-toolbar-menu-divider
-      ></div>
-    {{/if}}
-    <Hds::Copy::Button
-      @text='Copy code'
-      @textToCopy={{@copyText}}
-      @onSuccess={{this.copied}}
-      data-test-code-editor-toolbar-copy-button
-    />
-  </div>
-</div>

addons/rose/addon/components/rose/code-editor/toolbar/index.js

@@ -1,14 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2026
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-
-export default class RoseCodeEditorToolbarComponent extends Component {
-  @action
-  copied() {
-    this.args.onCopy?.();
-  }
-}

addons/rose/addon/modifiers/code-mirror.js

@@ -1,99 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2026
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Modifier from 'ember-modifier';
-import codemirror from 'codemirror';
-
-import '../utilities/register-codemirror-hcl';
-import 'codemirror/mode/go/go';
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/shell/shell';
-import 'codemirror/addon/edit/matchbrackets';
-import 'codemirror/addon/edit/closebrackets';
-import 'codemirror/addon/selection/active-line';
-import 'codemirror/addon/display/autorefresh';
-import 'codemirror/addon/lint/lint';
-import 'codemirror/addon/lint/json-lint';
-
-// Here we define default options for the editor.
-// These should follow the codemirror configuration types
-//
-const _PRESET_DEFAULTS = {
-  theme: 'monokai',
-  lineNumbers: true,
-  cursorBlinkRate: 500,
-  matchBrackets: true,
-  autoCloseBrackets: true,
-  styleActiveLine: true,
-  mode: 'hcl',
-};
-
-/**
- *
- * `CodeMirror` implements a modifier that creates a CodeMirror instance on the provided element.
- *
- * The supported modes for the editor are currently: hcl, shell, go, javascript
- * The supported themes are: monokai
- *
- * Sample usage:
- * ```
- * <div
- *   {{code-mirror value=@value onInput=@onInput options=@options}}
- * />
- * ```
- *
- * @class CodeMirror
- *
- */
-export default class CodeMirrorModifier extends Modifier {
-  _editor;
-  didSetup = false;
-
-  modify(element, _, named) {
-    if (!this.didSetup) {
-      this._setup(element, named);
-      this.didSetup = true;
-    }
-
-    if (this._editor?.getValue() !== named.value) {
-      this._editor?.setValue(named.value);
-    }
-  }
-
-  /**
-   * Called when editor contents change.
-   * @method CodeMirror#_onChange
-   * See documentation for the CodeMirror editor events, specifically 'change' event here https://codemirror.net/doc/manual.html#events.
-   */
-  _onChange(editor, named) {
-    const { onInput } = named;
-    const newVal = editor.getValue();
-
-    onInput && onInput(newVal);
-  }
-
-  /**
-   * Initializes the editor with default configuration merged with consumer-provided configuration.
-   * Also registers a 'change' event on the editor.
-   * @method CodeMirror#_setup
-   */
-  _setup(element, named) {
-    if (!element) {
-      throw new Error('CodeMirror modifier has no element');
-    }
-
-    const editor = codemirror(element, {
-      ..._PRESET_DEFAULTS,
-      ...(named.options || {}),
-      value: named.value,
-    });
-
-    editor.on('change', (editor) => {
-      this._onChange(editor, named);
-    });
-
-    this._editor = editor;
-  }
-}

addons/rose/addon/utilities/register-codemirror-hcl.js

@@ -1,43 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2026
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import codemirror from 'codemirror';
-import 'codemirror/addon/mode/simple';
-
-// This utility defines 'hcl' mode for a codemirror editor and enables correct syntax highlighting.
-// Importing this file in the codemirror modifier will allow 'hcl' to be selected as a mode:
-// import 'cloud-ui-core/utils/register-codemirror-hcl'
-codemirror.defineSimpleMode('hcl', {
-  start: [
-    { regex: /"(?:[^\\]|\\.)*?(?:"|$)/, token: 'string' }, // strings
-    { regex: /(\w+)(\s+)(=)/, token: ['keyword', 'null', 'null'] }, // assignment of variables
-    {
-      regex: /(build|deploy|release|hook|registry|type|runner|url)( )({)/,
-      token: ['keyword', 'null', 'null'],
-    }, // top level keywords
-    { regex: /(variable)\b/, token: 'keyword' }, // input variable keyword
-    { regex: /true|false|null|undefined/, token: 'atom' }, // bool keywords
-    {
-      regex: /0x[a-f\d]+|[-+]?(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i,
-      token: 'number',
-    }, // numbers
-    { regex: /(#|\/\/)(\s*\S*)/, token: 'comment' }, // single line comments
-    { regex: /(path)(.)/, token: ['variable-2', 'null'] }, // path variables
-    { regex: /(workspace)(.)(\S*)/, token: ['string', 'null', 'string'] }, // workspace variables
-    { regex: /\/\*/, token: 'comment', next: 'comment' }, // multi-line comment
-    { regex: /[-+/*=<>!]+/, token: 'operator' }, // operators
-    { regex: /[{[(]/, indent: true }, // for auto indent
-    { regex: /[}\])]/, dedent: true },
-  ],
-  // The multi-line comment state.
-  comment: [
-    { regex: /.*?\*\//, token: 'comment', next: 'start' },
-    { regex: /.*/, token: 'comment' },
-  ],
-  meta: {
-    dontIndentStates: ['comment'],
-    lineComment: '#',
-  },
-});

addons/rose/app/components/rose/code-editor.js

@@ -1,6 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2026
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'rose/components/rose/code-editor';

addons/rose/app/components/rose/code-editor/field-editor.js

@@ -1,6 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2026
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'rose/components/rose/code-editor/field-editor';

addons/rose/app/components/rose/code-editor/toolbar.js

@@ -1,6 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2026
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'rose/components/rose/code-editor/toolbar';

addons/rose/app/modifiers/code-mirror.js

@@ -1,6 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2026
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'rose/modifiers/code-mirror';

addons/rose/app/styles/rose/components/_index.scss

@@ -5,7 +5,6 @@
 
 // This list is sorted in ascending order to improve readability
 
-@use 'code-editor';
 @use 'form';
 @use 'frame';
 @use 'layout';

addons/rose/app/styles/rose/components/code-editor/_index.scss

@@ -1,70 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2026
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-/* stylelint-disable selector-class-pattern */
-@use '../../variables/sizing';
-
-// Codemirror overrides
-.rose-codemirror-container {
-  width: 100%;
-}
-
-.CodeMirror {
-  max-width: 100%;
-  display: flex;
-  flex: 1;
-  font-family: var(--token-typography-font-stack-code);
-}
-
-.rose-autosize {
-  .CodeMirror {
-    height: auto;
-  }
-}
-
-.CodeMirror-scroll {
-  width: 100%;
-}
-
-.CodeMirror-sizer {
-  border-right-width: 0 !important;
-}
-
-// Toolbar
-.rose-code-editor-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--ui-gray-subtler-3);
-  height: 2.75rem;
-
-  &__action {
-    margin-left: sizing.rems(s);
-  }
-
-  &__right-aligned {
-    display: flex;
-    height: 100%;
-    align-items: center;
-  }
-
-  &__menu {
-    margin-right: sizing.rems(s);
-
-    .pds-dropdownTrigger {
-      box-shadow: none;
-
-      &__layoutWrapper {
-        padding-left: sizing.rems(s);
-        padding-right: sizing.rems(s);
-      }
-    }
-
-    &-divider {
-      border-right: 1px solid var(--ui-gray-subtler-3);
-      height: sizing.rems(xl);
-    }
-  }
-}

addons/rose/index.js

@@ -12,11 +12,6 @@ module.exports = {
   included(app) {
     this._super.included.apply(this, arguments);
 
-    this.import('node_modules/codemirror/lib/codemirror.css');
-    this.import('node_modules/codemirror/theme/monokai.css');
-    this.import('node_modules/codemirror/addon/lint/lint.css');
-    this.import('node_modules/jsonlint/lib/jsonlint.js');
-
     this.includeHDSStyles(app);
     this.includeFlightIcons(app);
     this.includePublic(app);

addons/rose/package.json

@@ -34,14 +34,12 @@
     "@hashicorp/design-system-tokens": "^2.3.0",
     "@hashicorp/flight-icons": "^3.10.0",
     "@nullvoxpopuli/ember-composable-helpers": "^5.2.10",
-    "codemirror": "5.65.7",
     "ember-auto-import": "^2.10.0",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-htmlbars": "^6.3.0",
     "ember-cli-sass": "^11.0.1",
     "ember-focus-trap": "^1.0.1",
     "ember-named-blocks-polyfill": "^0.2.5",
-    "jsonlint": "^1.6.3",
     "sass": "^1.69.5",
     "uuid": "^14.0.0"
   },

addons/rose/tests/integration/components/rose/code-editor-test.js

@@ -1,32 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2026
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | rose/code-editor', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    const codeValue = 'export HCP_CLIENT_ID = {place your client_id here}';
-    this.set('codeValue', codeValue);
-
-    await render(hbs`
-      <Rose::CodeEditor
-        @codeValue={{this.codeValue}}
-        as |c|
-      >
-        <c.toolbar />
-        <c.fieldEditor />
-      </Rose::CodeEditor>
-    `);
-    assert.dom('[data-test-code-editor]').isVisible();
-    assert.dom('[data-test-code-editor-toolbar]').isVisible();
-    assert.dom('[data-test-code-editor-field-editor]').isVisible();
-    assert.dom('[data-test-code-editor-field-editor]').includesText(codeValue);
-  });
-});

addons/rose/tests/integration/components/rose/code-editor/field-editor-test.js

@@ -1,74 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2026
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { typeIn, render, waitUntil } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module(
-  'Integration | Component | rose/code-editor/field-editor',
-  function (hooks) {
-    setupRenderingTest(hooks);
-    const editorSelector = '[data-test-code-editor-field-editor]';
-
-    test('it renders', async function (assert) {
-      const codeValue = `export HCP_CLIENT_ID = {place your client_id here}`;
-      this.set('codeValue', codeValue);
-      await render(hbs`
-      <Rose::CodeEditor::FieldEditor @value={{this.codeValue}} />
-    `);
-      assert.dom(editorSelector).isVisible();
-      assert.dom(editorSelector).includesText(codeValue);
-
-      const myNewCode = 'NEW CODE';
-      await typeIn(`${editorSelector} textarea`, myNewCode);
-      assert.dom(editorSelector).includesText(myNewCode);
-    });
-
-    test('it renders readonly', async function (assert) {
-      const codeValue = `export HCP_CLIENT_ID = {place your client_id here}`;
-      this.set('codeValue', codeValue);
-      this.set('options', {
-        readOnly: true,
-      });
-      await render(hbs`
-      <Rose::CodeEditor::FieldEditor @value={{this.codeValue}} @options={{this.options}} />
-    `);
-      assert.dom(editorSelector).isVisible();
-      assert.dom(editorSelector).includesText(codeValue);
-
-      const myNewCode = 'NEW CODE';
-      waitUntil(async () => {
-        try {
-          // This should fail if the textarea is readonly
-          await typeIn(`${editorSelector} textarea`, myNewCode);
-        } catch {
-          return true;
-        }
-      });
-      assert.dom(editorSelector).doesNotIncludeText(myNewCode);
-    });
-
-    test('it calls onInput on change', async function (assert) {
-      const codeValue = `export HCP_CLIENT_ID = {place your client_id here}`;
-      const onInput = () => {
-        this.set('called', true);
-      };
-      this.set('codeValue', codeValue);
-      this.set('onInput', onInput);
-      await render(hbs`
-      <Rose::CodeEditor::FieldEditor @value={{this.codeValue}} @onInput={{this.onInput}} />
-    `);
-      assert.dom(editorSelector).isVisible();
-      assert.dom(editorSelector).includesText(codeValue);
-
-      const myNewCode = 'NEW CODE';
-      await typeIn(`${editorSelector} textarea`, myNewCode);
-      assert.dom(editorSelector).includesText(myNewCode);
-      assert.true(this.called);
-    });
-  },
-);

addons/rose/tests/integration/components/rose/code-editor/toolbar-test.js

@@ -1,65 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2026
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { click, render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-import sinon from 'sinon';
-
-module('Integration | Component | rose/code-editor/toolbar', function (hooks) {
-  setupRenderingTest(hooks);
-  const toolbarSelector = '[data-test-code-editor-toolbar]';
-  const copyButtonSelector = '[data-test-code-editor-toolbar-copy-button]';
-  const menuDividerSelector = '[data-test-code-editor-toolbar-menu-divider]';
-
-  hooks.beforeEach(function () {
-    const copyText = 'copyText';
-    this.set('copyText', copyText);
-  });
-
-  test('it renders', async function (assert) {
-    await render(hbs`
-      <Rose::CodeEditor::Toolbar @copyText={{this.copyText}} />
-    `);
-    assert.dom(toolbarSelector).isVisible();
-    assert.dom(copyButtonSelector).isVisible();
-    assert.dom(menuDividerSelector).doesNotExist();
-  });
-
-  test('it displays action', async function (assert) {
-    await render(hbs`
-      <Rose::CodeEditor::Toolbar @onCopy={{this.copyText}}>
-        <:action>
-          <div data-test-my-action>Hello</div>
-        </:action>
-      </Rose::CodeEditor::Toolbar>
-    `);
-    assert.dom(toolbarSelector).isVisible();
-    assert.dom(copyButtonSelector).isVisible();
-    assert.dom(menuDividerSelector).doesNotExist();
-    assert.dom('[data-test-my-action]').isVisible();
-  });
-
-  test('it calls onCopy callback', async function (assert) {
-    // `writeText` could fail if the document is not in focus which is common during test runs
-    sinon.stub(window.navigator.clipboard, 'writeText').resolves();
-
-    const onCopy = () => {
-      this.set('called', true);
-    };
-    this.set('onCopy', onCopy);
-    await render(hbs`
-      <Rose::CodeEditor::Toolbar @copyText={{this.copyText}} @onCopy={{this.onCopy}} />
-    `);
-    assert.dom(toolbarSelector).isVisible();
-    assert.dom(copyButtonSelector).isVisible();
-    assert.dom(menuDividerSelector).doesNotExist();
-    await click(copyButtonSelector);
-    assert.true(this.called);
-
-    sinon.restore();
-  });
-});

e2e-tests/admin/pages/targets.js

@@ -145,7 +145,10 @@ export class TargetsPage extends BaseResourcePage {
         .getByText('Edit Ingress Worker Filter'),
     ).toBeVisible();
 
-    await this.page.locator('.CodeMirror').getByRole('textbox').fill(filter);
+    await this.page
+      .locator('.hds-code-editor')
+      .getByRole('textbox')
+      .fill(filter);
 
     await this.page.getByRole('button', { name: 'Save', exact: true }).click();
     await this.dismissSuccessAlert();
@@ -174,7 +177,10 @@ export class TargetsPage extends BaseResourcePage {
         .getByText('Edit Egress Worker Filter'),
     ).toBeVisible();
 
-    await this.page.locator('.CodeMirror').getByRole('textbox').fill(filter);
+    await this.page
+      .locator('.hds-code-editor')
+      .getByRole('textbox')
+      .fill(filter);
 
     await this.page.getByRole('button', { name: 'Save', exact: true }).click();
     await this.dismissSuccessAlert();

e2e-tests/admin/tests/credential-store-static.spec.js

@@ -195,7 +195,9 @@ test(
       await page.getByLabel('Description').fill('This is an automated test');
       await page.getByRole('combobox', { name: 'Type' }).click();
       await page.getByRole('option', { name: 'JSON' }).click();
-      await page.getByText('{}').click();
+      await page.locator('.hds-code-editor').getByRole('textbox').click();
+      // Move cursor to middle of '{}' to avoid typing outside of the braces
+      await page.keyboard.press('ArrowLeft');
       const testName = 'name-json';
       const testPassword = 'password-json';
       const testId = 'id-json';

e2e-tests/admin/tests/target.spec.js

@@ -233,19 +233,16 @@ test(
       ).toBeVisible();
       await expect(page.getByText('"dev" in "/tags/type"')).toBeVisible();
 
-      await page
+      await page.locator('.hds-code-editor').getByRole('textbox').click();
-        .locator('.CodeMirror')
-        .getByRole('textbox')
-        .click({ force: true });
       await expect(
-        page.locator('.CodeMirror').getByRole('textbox'),
+        page.locator('.hds-code-editor').getByRole('textbox'),
       ).toBeFocused();
       const selectAllShortcut =
         process.platform === 'darwin' ? 'Meta+A' : 'Control+A';
       await page.keyboard.press(selectAllShortcut);
       await page.keyboard.press('Backspace');
       await page
-        .locator('.CodeMirror')
+        .locator('.hds-code-editor')
         .getByRole('textbox')
         .fill('"prod" in "/tags/type"');
       await page.getByRole('button', { name: 'Save' }).click();

pnpm-lock.yaml

@@ -580,9 +580,6 @@ importers:
       '@nullvoxpopuli/ember-composable-helpers':
         specifier: ^5.2.10
         version: 5.2.10(@babel/core@7.27.1)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.105.4(esbuild@0.25.9)))
-      codemirror:
-        specifier: 5.65.7
-        version: 5.65.7
       ember-auto-import:
         specifier: ^2.10.0
         version: 2.10.0(@glint/template@1.5.2)(webpack@5.105.4(esbuild@0.25.9))
@@ -601,9 +598,6 @@ importers:
       ember-named-blocks-polyfill:
         specifier: ^0.2.5
         version: 0.2.5
-      jsonlint:
-        specifier: ^1.6.3
-        version: 1.6.3
       sass:
         specifier: ^1.69.5
         version: 1.88.0
@@ -3211,9 +3205,6 @@ packages:
   '@xtuc/long@4.2.2':
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
 
-  JSV@4.0.2:
-    resolution: {integrity: sha512-ZJ6wx9xaKJ3yFUhq5/sk82PJMuUyLk277I8mQeyDgCTjGdjWJIvPfaU5LIXaMuaN2UO1X3kZH4+lgphublZUHw==}
-
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
@@ -3330,10 +3321,6 @@ packages:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
     engines: {node: '>=12'}
 
-  ansi-styles@1.0.0:
-    resolution: {integrity: sha512-3iF4FIKdxaVYT3JqQuY3Wat/T2t7TRbbQ94Fu50ZUCbLy4TFbTzr90NOHQodQkNqmeEGCw8WbeP78WNi6SKYUA==}
-    engines: {node: '>=0.8.0'}
-
   ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
@@ -3883,10 +3870,6 @@ packages:
   ccount@1.1.0:
     resolution: {integrity: sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==}
 
-  chalk@0.4.0:
-    resolution: {integrity: sha512-sQfYDlfv2DGVtjdoQqxS0cEZDroyG8h6TamA6rvxwlrU5BaSLDx9xhatBYl2pxZ7gmpNaPFVwBtdGdu5rQ+tYQ==}
-    engines: {node: '>=0.8.0'}
-
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -4031,9 +4014,6 @@ packages:
   codemirror-lang-hcl@0.0.0-beta.2:
     resolution: {integrity: sha512-R3ew7Z2EYTdHTMXsWKBW9zxnLoLPYO+CrAa3dPZjXLrIR96Q3GR4cwJKF7zkSsujsnWgwRQZonyWpXYXfhQYuQ==}
 
-  codemirror@5.65.7:
-    resolution: {integrity: sha512-zb67cXzgugIQmb6tfD4G11ILjYoMfTjwcjn+cWsa4GewlI2adhR/h3kolkoCQTm1msD/1BuqVTKuO09ELsS++A==}
-
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -6005,10 +5985,6 @@ packages:
     resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
     engines: {node: '>= 0.4'}
 
-  has-color@0.1.7:
-    resolution: {integrity: sha512-kaNz5OTAYYmt646Hkqw50/qyxP2vFnTVu5AQ1Zmk22Kk5+4Qx6BpO8+u7IKsML5fOsFk0ZT0AcCJNYwcvaLBvw==}
-    engines: {node: '>=0.10.0'}
-
   has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
@@ -6614,11 +6590,6 @@ packages:
   jsonify@0.0.1:
     resolution: {integrity: sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==}
 
-  jsonlint@1.6.3:
-    resolution: {integrity: sha512-jMVTMzP+7gU/IyC6hvKyWpUU8tmTkK5b3BPNuMI9U8Sit+YAWLlZwB6Y6YrdCxfg2kNz05p3XY3Bmm4m26Nv3A==}
-    engines: {node: '>= 0.6'}
-    hasBin: true
-
   junk@3.1.0:
     resolution: {integrity: sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==}
     engines: {node: '>=8'}
@@ -7259,10 +7230,6 @@ packages:
     resolution: {integrity: sha512-3l4E8uMPY1HdMMryPRUAl+oIHtXtyiTlIiESNSVSNxcPfzAFzeTbXFQkZfAwBbo0B1qMSG8nUABx+Gd+YrbKrQ==}
     engines: {node: '>=6'}
 
-  nomnom@1.8.1:
-    resolution: {integrity: sha512-5s0JxqhDx9/rksG2BTMVN1enjWSvPidpoSgViZU4ZXULyTe+7jxcCRLB6f42Z0l1xYJpleCBtSyY6Lwg3uu5CQ==}
-    deprecated: Package no longer supported. Contact support@npmjs.com for more info.
-
   nopt@3.0.6:
     resolution: {integrity: sha512-4GUt3kSEYmk4ITxzB/b9vaIDfUVWN/Ml1Fwl11IlnIG2iaJ9O6WXZ9SrYM9NLI8OCBieN2Y8SWC2oJV0RQ7qYg==}
     hasBin: true
@@ -8556,11 +8523,6 @@ packages:
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
-  strip-ansi@0.1.1:
-    resolution: {integrity: sha512-behete+3uqxecWlDAm5lmskaSaISA+ThQ4oNNBDTBJt0x2ppR6IPqfZNuj6BLaLJ/Sji4TPZlcRyOis8wXQTLg==}
-    engines: {node: '>=0.8.0'}
-    hasBin: true
-
   strip-ansi@4.0.0:
     resolution: {integrity: sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==}
     engines: {node: '>=4'}
@@ -12079,8 +12041,6 @@ snapshots:
 
   '@xtuc/long@4.2.2': {}
 
-  JSV@4.0.2: {}
-
   abbrev@1.1.1: {}
 
   accepts@1.3.8:
@@ -12179,8 +12139,6 @@ snapshots:
 
   ansi-regex@6.0.1: {}
 
-  ansi-styles@1.0.0: {}
-
   ansi-styles@3.2.1:
     dependencies:
       color-convert: 1.9.3
@@ -13057,12 +13015,6 @@ snapshots:
 
   ccount@1.1.0: {}
 
-  chalk@0.4.0:
-    dependencies:
-      ansi-styles: 1.0.0
-      has-color: 0.1.7
-      strip-ansi: 0.1.1
-
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -13188,8 +13140,6 @@ snapshots:
       '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.2
 
-  codemirror@5.65.7: {}
-
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -15996,8 +15946,6 @@ snapshots:
 
   has-bigints@1.1.0: {}
 
-  has-color@0.1.7: {}
-
   has-flag@3.0.0: {}
 
   has-flag@4.0.0: {}
@@ -16605,11 +16553,6 @@ snapshots:
 
   jsonify@0.0.1: {}
 
-  jsonlint@1.6.3:
-    dependencies:
-      JSV: 4.0.2
-      nomnom: 1.8.1
-
   junk@3.1.0: {}
 
   just-extend@6.2.0: {}
@@ -17322,11 +17265,6 @@ snapshots:
 
   node-watch@0.7.3: {}
 
-  nomnom@1.8.1:
-    dependencies:
-      chalk: 0.4.0
-      underscore: 1.13.8
-
   nopt@3.0.6:
     dependencies:
       abbrev: 1.1.1
@@ -18729,8 +18667,6 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
-  strip-ansi@0.1.1: {}
-
   strip-ansi@4.0.0:
     dependencies:
       ansi-regex: 3.0.1

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|>
+    <Hds::CodeEditor
-      <c.fieldEditor
+      class='secret-editor-json'
-        class='secret-editor-json'
+      @ariaLabel={{t 'form.secret-editor.label'}}
-        @onInput={{@onInput}}
+      @value={{@value}}
-        @value={{@value}}
+      @isLintingEnabled={{true}}
-        @options={{hash
+      @language='json'
-          mode='application/json'
+      @onInput={{@onInput}}
-          gutters=(array 'CodeMirror-lint-markers')
+      data-test-code-editor
-          lint='true'
+    />
-        }}
-      />
-    </Rose::CodeEditor>
   {{/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|>
+    <Hds::CodeEditor
-      {{#unless @hideToolbar}}
+      @ariaLabel={{t 'form.worker_filter.label'}}
-        <c.toolbar @copyText={{get @model @name}} />
+      @hasCopyButton={{not @hideToolbar}}
-      {{/unless}}
+      @language='shell'
-      <c.fieldEditor
+      @value={{or (get @model @name) ''}}
-        @onInput={{fn this.setWorkerFilter @model @name}}
+      @onInput={{fn this.setWorkerFilter @model @name}}
-        @value={{or (get @model @name) ''}}
+      data-test-code-editor
-        @options={{hash
+    />
-          mode='text/x-sh'
-          gutters=(array 'CodeMirror-lint-markers')
-          lint='true'
-        }}
-      />
-    </Rose::CodeEditor>
   </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 {
+  /* stylelint-disable-next-line selector-class-pattern */
-    .CodeMirror {
+  .hds-code-editor__editor {
-      border-radius: var(--token-border-radius-small);
+    height: var(--secret-editor-height);
-      height: var(--secret-editor-height);
-      display: block;
-    }
-
-    .CodeMirror-gutters {
-      background: var(--secret-editor-gutter);
-    }
   }
 
   .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(
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
-      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: 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);
+      await waitFor(commonSelectors.CODE_EDITOR_CM);
-      assert.dom(selectors.EDITOR).includesText(selectors.FIELD_EDITOR_VALUE);
 
-      await click(selectors.TYPE_SELECT);
+      const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
-      await click(selectors.FIELD_TYPE_USERNAME_PASSWORD);
+      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 waitFor(commonSelectors.CODE_EDITOR_CM);
-    await click(commonSelectors.SAVE_BTN);
 
+    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(
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
-      commonSelectors.CODE_EDITOR_CONTENT,
+    const editorView = editorElement.editor;
-      selectors.EDITOR_WORKER_FILTER_VALUE,
+    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(
+    const editorElement = find(commonSelectors.CODE_EDITOR_CODE);
-      commonSelectors.CODE_EDITOR_CONTENT,
+    const editorView = editorElement.editor;
-      selectors.EDITOR_WORKER_FILTER_VALUE,
+    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(
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
-      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"',
+      },
+    });
 
     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(
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
-      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"',
+      },
+    });
 
     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(
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
-      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"',
+      },
+    });
 
     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(
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
-      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"',
+      },
+    });
 
     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 click(commonSelectors.HREF(urls.newStorageBucket));
-    await fillIn(
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
-      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"',
+      },
+    });
     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(
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
-      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"',
+      },
+    });
     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(
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
-      commonSelectors.CODE_EDITOR_CONTENT,
+
-      EGRESS_WORKER_FILTER_VALUE,
+    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(
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
-      commonSelectors.CODE_EDITOR_CONTENT,
+
-      INGRESS_WORKER_FILTER_VALUE,
+    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(
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
-      commonSelectors.CODE_EDITOR_CONTENT,
+
-      INGRESS_WORKER_FILTER_VALUE,
+    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(
+    await waitFor(commonSelectors.CODE_EDITOR_CM);
-      commonSelectors.CODE_EDITOR_CONTENT,
+
-      EGRESS_WORKER_FILTER_VALUE,
+    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 =
+// Code editor selectors
-  '[data-test-code-editor-field-editor] textarea';
+export const CODE_EDITOR_CODE =
-export const CODE_EDITOR_CM = '[data-test-code-editor] .CodeMirror';
+  '[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(commonSelectors.CODE_EDITOR_CODE).isVisible();
-      assert.dom(CODE_EDITOR_LINE).hasText(this.model.egress_worker_filter);
+      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(commonSelectors.CODE_EDITOR_CODE).isVisible();
-      assert.dom(CODE_EDITOR_LINE).hasText(this.model.ingress_worker_filter);
+      assert
+        .dom(commonSelectors.CODE_EDITOR_CONTENT)
+        .hasText(this.model.ingress_worker_filter);
     });
 
     test('toggleFilterGenerator shows filter generator when toggled on', async function (assert) {