From d469f305de97fdd398bdfd68f0df8a3458d68936 Mon Sep 17 00:00:00 2001 From: Zack Moore Date: Thu, 5 Mar 2026 19:36:45 -0500 Subject: [PATCH] Replace `Rose::CodeEditor` with `Hds::CodeEditor` (#2679) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: cameronperera --- addons/api/tests/dummy/config/environment.js | 2 +- addons/core/translations/form/en-us.yaml | 1 + .../rose/code-editor/field-editor/index.hbs | 11 -- .../components/rose/code-editor/index.hbs | 13 -- .../rose/code-editor/toolbar/index.hbs | 31 ----- .../rose/code-editor/toolbar/index.js | 14 -- addons/rose/addon/modifiers/code-mirror.js | 99 -------------- .../utilities/register-codemirror-hcl.js | 43 ------ .../rose/app/components/rose/code-editor.js | 6 - .../rose/code-editor/field-editor.js | 6 - .../components/rose/code-editor/toolbar.js | 6 - addons/rose/app/modifiers/code-mirror.js | 6 - .../app/styles/rose/components/_index.scss | 1 - .../rose/components/code-editor/_index.scss | 70 ---------- addons/rose/index.js | 5 - addons/rose/package.json | 2 - .../components/rose/code-editor-test.js | 32 ----- .../rose/code-editor/field-editor-test.js | 74 ----------- .../rose/code-editor/toolbar-test.js | 65 --------- e2e-tests/admin/pages/targets.js | 10 +- .../tests/credential-store-static.spec.js | 4 +- e2e-tests/admin/tests/target.spec.js | 9 +- pnpm-lock.yaml | 64 --------- ui/admin/.stylelintrc.js | 4 +- .../form/field/json-secret/index.hbs | 21 ++- .../form/worker/create-worker-led/index.js | 33 +---- .../worker-filter-generator/index.hbs | 22 ++- ui/admin/app/styles/app.scss | 13 +- .../credential-store/create-test.js | 26 +++- .../credentials/create-test.js | 28 +++- .../credential-store/credentials/selectors.js | 4 +- .../credential-store/update-test.js | 22 ++- .../acceptance/storage-buckets/create-test.js | 125 ++++++++++++------ .../acceptance/storage-buckets/delete-test.js | 2 +- .../acceptance/storage-buckets/selectors.js | 2 +- .../acceptance/storage-buckets/update-test.js | 24 ++-- .../create-storage-bucket-test.js | 43 +++++- .../tests/acceptance/targets/workers-test.js | 117 +++++++++++----- ui/admin/tests/helpers/selectors.js | 11 +- .../components/form/field/json-secret-test.js | 7 +- .../worker-filter-generator/index-test.js | 20 +-- 41 files changed, 354 insertions(+), 744 deletions(-) delete mode 100644 addons/rose/addon/components/rose/code-editor/field-editor/index.hbs delete mode 100644 addons/rose/addon/components/rose/code-editor/index.hbs delete mode 100644 addons/rose/addon/components/rose/code-editor/toolbar/index.hbs delete mode 100644 addons/rose/addon/components/rose/code-editor/toolbar/index.js delete mode 100644 addons/rose/addon/modifiers/code-mirror.js delete mode 100644 addons/rose/addon/utilities/register-codemirror-hcl.js delete mode 100644 addons/rose/app/components/rose/code-editor.js delete mode 100644 addons/rose/app/components/rose/code-editor/field-editor.js delete mode 100644 addons/rose/app/components/rose/code-editor/toolbar.js delete mode 100644 addons/rose/app/modifiers/code-mirror.js delete mode 100644 addons/rose/app/styles/rose/components/code-editor/_index.scss delete mode 100644 addons/rose/tests/integration/components/rose/code-editor-test.js delete mode 100644 addons/rose/tests/integration/components/rose/code-editor/field-editor-test.js delete mode 100644 addons/rose/tests/integration/components/rose/code-editor/toolbar-test.js diff --git a/addons/api/tests/dummy/config/environment.js b/addons/api/tests/dummy/config/environment.js index 788d6099b..e89419e4f 100644 --- a/addons/api/tests/dummy/config/environment.js +++ b/addons/api/tests/dummy/config/environment.js @@ -30,7 +30,7 @@ module.exports = function (environment) { }, mirage: { - enabled: true + enabled: true, }, }; diff --git a/addons/core/translations/form/en-us.yaml b/addons/core/translations/form/en-us.yaml index 0e6cda6d1..9867688d1 100644 --- a/addons/core/translations/form/en-us.yaml +++ b/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: diff --git a/addons/rose/addon/components/rose/code-editor/field-editor/index.hbs b/addons/rose/addon/components/rose/code-editor/field-editor/index.hbs deleted file mode 100644 index 8c6089d10..000000000 --- a/addons/rose/addon/components/rose/code-editor/field-editor/index.hbs +++ /dev/null @@ -1,11 +0,0 @@ -{{! - Copyright IBM Corp. 2021, 2026 - SPDX-License-Identifier: BUSL-1.1 -}} - -
\ No newline at end of file diff --git a/addons/rose/addon/components/rose/code-editor/index.hbs b/addons/rose/addon/components/rose/code-editor/index.hbs deleted file mode 100644 index 0760eb668..000000000 --- a/addons/rose/addon/components/rose/code-editor/index.hbs +++ /dev/null @@ -1,13 +0,0 @@ -{{! - Copyright IBM Corp. 2021, 2026 - SPDX-License-Identifier: BUSL-1.1 -}} - -
- {{yield - (hash - fieldEditor=(component 'rose/code-editor/field-editor' value=@codeValue) - toolbar=(component 'rose/code-editor/toolbar' copyText=@codeValue) - ) - }} -
\ No newline at end of file diff --git a/addons/rose/addon/components/rose/code-editor/toolbar/index.hbs b/addons/rose/addon/components/rose/code-editor/toolbar/index.hbs deleted file mode 100644 index 2f403ac5e..000000000 --- a/addons/rose/addon/components/rose/code-editor/toolbar/index.hbs +++ /dev/null @@ -1,31 +0,0 @@ -{{! - Copyright IBM Corp. 2021, 2026 - SPDX-License-Identifier: BUSL-1.1 -}} - -
-
- {{yield to='action'}} -
- -
- {{#if (has-block 'menu')}} -
- {{yield to='menu'}} -
-
- {{/if}} - -
-
\ No newline at end of file diff --git a/addons/rose/addon/components/rose/code-editor/toolbar/index.js b/addons/rose/addon/components/rose/code-editor/toolbar/index.js deleted file mode 100644 index d91300815..000000000 --- a/addons/rose/addon/components/rose/code-editor/toolbar/index.js +++ /dev/null @@ -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?.(); - } -} diff --git a/addons/rose/addon/modifiers/code-mirror.js b/addons/rose/addon/modifiers/code-mirror.js deleted file mode 100644 index e22538423..000000000 --- a/addons/rose/addon/modifiers/code-mirror.js +++ /dev/null @@ -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: - * ``` - *
- * ``` - * - * @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; - } -} diff --git a/addons/rose/addon/utilities/register-codemirror-hcl.js b/addons/rose/addon/utilities/register-codemirror-hcl.js deleted file mode 100644 index 1ce3a3cb3..000000000 --- a/addons/rose/addon/utilities/register-codemirror-hcl.js +++ /dev/null @@ -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: '#', - }, -}); diff --git a/addons/rose/app/components/rose/code-editor.js b/addons/rose/app/components/rose/code-editor.js deleted file mode 100644 index b4f62629a..000000000 --- a/addons/rose/app/components/rose/code-editor.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright IBM Corp. 2021, 2026 - * SPDX-License-Identifier: BUSL-1.1 - */ - -export { default } from 'rose/components/rose/code-editor'; diff --git a/addons/rose/app/components/rose/code-editor/field-editor.js b/addons/rose/app/components/rose/code-editor/field-editor.js deleted file mode 100644 index 2a391f83d..000000000 --- a/addons/rose/app/components/rose/code-editor/field-editor.js +++ /dev/null @@ -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'; diff --git a/addons/rose/app/components/rose/code-editor/toolbar.js b/addons/rose/app/components/rose/code-editor/toolbar.js deleted file mode 100644 index 2351fb29b..000000000 --- a/addons/rose/app/components/rose/code-editor/toolbar.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright IBM Corp. 2021, 2026 - * SPDX-License-Identifier: BUSL-1.1 - */ - -export { default } from 'rose/components/rose/code-editor/toolbar'; diff --git a/addons/rose/app/modifiers/code-mirror.js b/addons/rose/app/modifiers/code-mirror.js deleted file mode 100644 index 7c7f06f44..000000000 --- a/addons/rose/app/modifiers/code-mirror.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright IBM Corp. 2021, 2026 - * SPDX-License-Identifier: BUSL-1.1 - */ - -export { default } from 'rose/modifiers/code-mirror'; diff --git a/addons/rose/app/styles/rose/components/_index.scss b/addons/rose/app/styles/rose/components/_index.scss index d0448dc46..030d3115a 100644 --- a/addons/rose/app/styles/rose/components/_index.scss +++ b/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'; diff --git a/addons/rose/app/styles/rose/components/code-editor/_index.scss b/addons/rose/app/styles/rose/components/code-editor/_index.scss deleted file mode 100644 index fe5378339..000000000 --- a/addons/rose/app/styles/rose/components/code-editor/_index.scss +++ /dev/null @@ -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); - } - } -} diff --git a/addons/rose/index.js b/addons/rose/index.js index c32f14f7a..a0fb549ce 100644 --- a/addons/rose/index.js +++ b/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); diff --git a/addons/rose/package.json b/addons/rose/package.json index 983c7fa68..32be36207 100644 --- a/addons/rose/package.json +++ b/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" }, diff --git a/addons/rose/tests/integration/components/rose/code-editor-test.js b/addons/rose/tests/integration/components/rose/code-editor-test.js deleted file mode 100644 index a3406651b..000000000 --- a/addons/rose/tests/integration/components/rose/code-editor-test.js +++ /dev/null @@ -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` - - - - - `); - 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); - }); -}); diff --git a/addons/rose/tests/integration/components/rose/code-editor/field-editor-test.js b/addons/rose/tests/integration/components/rose/code-editor/field-editor-test.js deleted file mode 100644 index d220b3d36..000000000 --- a/addons/rose/tests/integration/components/rose/code-editor/field-editor-test.js +++ /dev/null @@ -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` - - `); - 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` - - `); - 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` - - `); - 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); - }); - }, -); diff --git a/addons/rose/tests/integration/components/rose/code-editor/toolbar-test.js b/addons/rose/tests/integration/components/rose/code-editor/toolbar-test.js deleted file mode 100644 index d608ca30f..000000000 --- a/addons/rose/tests/integration/components/rose/code-editor/toolbar-test.js +++ /dev/null @@ -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` - - `); - assert.dom(toolbarSelector).isVisible(); - assert.dom(copyButtonSelector).isVisible(); - assert.dom(menuDividerSelector).doesNotExist(); - }); - - test('it displays action', async function (assert) { - await render(hbs` - - <:action> -
Hello
- - - `); - 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` - - `); - assert.dom(toolbarSelector).isVisible(); - assert.dom(copyButtonSelector).isVisible(); - assert.dom(menuDividerSelector).doesNotExist(); - await click(copyButtonSelector); - assert.true(this.called); - - sinon.restore(); - }); -}); diff --git a/e2e-tests/admin/pages/targets.js b/e2e-tests/admin/pages/targets.js index 597400aca..a71c4749d 100644 --- a/e2e-tests/admin/pages/targets.js +++ b/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(); diff --git a/e2e-tests/admin/tests/credential-store-static.spec.js b/e2e-tests/admin/tests/credential-store-static.spec.js index a95b15431..532f6b7fc 100644 --- a/e2e-tests/admin/tests/credential-store-static.spec.js +++ b/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'; diff --git a/e2e-tests/admin/tests/target.spec.js b/e2e-tests/admin/tests/target.spec.js index d59291340..fe1b1da9d 100644 --- a/e2e-tests/admin/tests/target.spec.js +++ b/e2e-tests/admin/tests/target.spec.js @@ -233,19 +233,16 @@ test( ).toBeVisible(); await expect(page.getByText('"dev" in "/tags/type"')).toBeVisible(); - await page - .locator('.CodeMirror') - .getByRole('textbox') - .click({ force: true }); + await page.locator('.hds-code-editor').getByRole('textbox').click(); 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(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 365906839..5e445a1b2 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/ui/admin/.stylelintrc.js b/ui/admin/.stylelintrc.js index 358e575a0..f899e4dff 100644 --- a/ui/admin/.stylelintrc.js +++ b/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`, diff --git a/ui/admin/app/components/form/field/json-secret/index.hbs b/ui/admin/app/components/form/field/json-secret/index.hbs index 3462cfcc2..3acfb862e 100644 --- a/ui/admin/app/components/form/field/json-secret/index.hbs +++ b/ui/admin/app/components/form/field/json-secret/index.hbs @@ -20,17 +20,14 @@ /> {{else}} - - - + {{/if}}
\ No newline at end of file diff --git a/ui/admin/app/components/form/worker/create-worker-led/index.js b/ui/admin/app/components/form/worker/create-worker-led/index.js index 02752e71a..333b600da 100644 --- a/ui/admin/app/components/form/worker/create-worker-led/index.js +++ b/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 ``. + * Returns directory creation text for ``. * @type {string} */ get createConfigText() { @@ -55,7 +55,7 @@ touch ${this.configFilePath || ''}/pki-worker.hcl`; } /** - * Returns config creation text for ``. The user will see + * Returns config creation text for ``. 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 ``. + * for ``. * @type {string} */ get installBoundaryText() { @@ -129,33 +129,6 @@ unzip *.zip ;\\ : ossContent; } - /** - * Returns `shell` configuration object for ``. - * @type {Object} - */ - get shellCodeEditor() { - return { - mode: 'shell', - readOnly: true, - lineNumbers: false, - cursorBlinkRate: -1, - styleActiveLine: false, - }; - } - - /** - * Returns `hcl` configuration object for ``. - * @type {Object} - */ - get hclCodeEditor() { - return { - mode: 'hcl', - readOnly: true, - cursorBlinkRate: -1, - styleActiveLine: false, - }; - } - //=methods convertCommaSeparatedValuesToArray(input) { diff --git a/ui/admin/app/components/worker-filter-generator/index.hbs b/ui/admin/app/components/worker-filter-generator/index.hbs index 492939feb..232432cda 100644 --- a/ui/admin/app/components/worker-filter-generator/index.hbs +++ b/ui/admin/app/components/worker-filter-generator/index.hbs @@ -5,20 +5,14 @@ - - {{#unless @hideToolbar}} - - {{/unless}} - - + {{#if (get @model.errors @name)}} diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index 2746a917e..558fdd3e8 100644 --- a/ui/admin/app/styles/app.scss +++ b/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 { diff --git a/ui/admin/tests/acceptance/credential-store/create-test.js b/ui/admin/tests/acceptance/credential-store/create-test.js index 5437bef2f..db1059518 100644 --- a/ui/admin/tests/acceptance/credential-store/create-test.js +++ b/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); }); diff --git a/ui/admin/tests/acceptance/credential-store/credentials/create-test.js b/ui/admin/tests/acceptance/credential-store/credentials/create-test.js index 284c3b89a..83f8b2a15 100644 --- a/ui/admin/tests/acceptance/credential-store/credentials/create-test.js +++ b/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) { diff --git a/ui/admin/tests/acceptance/credential-store/credentials/selectors.js b/ui/admin/tests/acceptance/credential-store/credentials/selectors.js index c6d6b7113..52b653c99 100644 --- a/ui/admin/tests/acceptance/credential-store/credentials/selectors.js +++ b/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'; diff --git a/ui/admin/tests/acceptance/credential-store/update-test.js b/ui/admin/tests/acceptance/credential-store/update-test.js index 695df3c10..74b6ba5d2 100644 --- a/ui/admin/tests/acceptance/credential-store/update-test.js +++ b/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"'); }); diff --git a/ui/admin/tests/acceptance/storage-buckets/create-test.js b/ui/admin/tests/acceptance/storage-buckets/create-test.js index 5dbae067b..dc9be0425 100644 --- a/ui/admin/tests/acceptance/storage-buckets/create-test.js +++ b/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 diff --git a/ui/admin/tests/acceptance/storage-buckets/delete-test.js b/ui/admin/tests/acceptance/storage-buckets/delete-test.js index 132853fcf..f71e0e794 100644 --- a/ui/admin/tests/acceptance/storage-buckets/delete-test.js +++ b/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); diff --git a/ui/admin/tests/acceptance/storage-buckets/selectors.js b/ui/admin/tests/acceptance/storage-buckets/selectors.js index 32d65adc6..e5c1602a0 100644 --- a/ui/admin/tests/acceptance/storage-buckets/selectors.js +++ b/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.'; diff --git a/ui/admin/tests/acceptance/storage-buckets/update-test.js b/ui/admin/tests/acceptance/storage-buckets/update-test.js index 83f6f36d2..f3f0bff27 100644 --- a/ui/admin/tests/acceptance/storage-buckets/update-test.js +++ b/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(); }); }); diff --git a/ui/admin/tests/acceptance/targets/enable-session-recording/create-storage-bucket-test.js b/ui/admin/tests/acceptance/targets/enable-session-recording/create-storage-bucket-test.js index fcb51657e..0ca7e6d43 100644 --- a/ui/admin/tests/acceptance/targets/enable-session-recording/create-storage-bucket-test.js +++ b/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); diff --git a/ui/admin/tests/acceptance/targets/workers-test.js b/ui/admin/tests/acceptance/targets/workers-test.js index a029b67e4..1022de7b9 100644 --- a/ui/admin/tests/acceptance/targets/workers-test.js +++ b/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(); diff --git a/ui/admin/tests/helpers/selectors.js b/ui/admin/tests/helpers/selectors.js index 9cb75f73c..7c1c156c9 100644 --- a/ui/admin/tests/helpers/selectors.js +++ b/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'; diff --git a/ui/admin/tests/integration/components/form/field/json-secret-test.js b/ui/admin/tests/integration/components/form/field/json-secret-test.js index c3609f823..fed38be83 100644 --- a/ui/admin/tests/integration/components/form/field/json-secret-test.js +++ b/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); }); diff --git a/ui/admin/tests/integration/components/worker-filter-generator/index-test.js b/ui/admin/tests/integration/components/worker-filter-generator/index-test.js index de0ee637e..346d95d9f 100644 --- a/ui/admin/tests/integration/components/worker-filter-generator/index-test.js +++ b/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``, ); + 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``, ); + 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) {