Replace codemirror 6 code editor with HDS CodeEditor component by zamoore · Pull Request #30188 · hashicorp/vault

zamoore · 2025-04-04T16:32:23Z

Description

This PR will update the use of the Code Mirror 5 code editor to the new Hds::CodeEditor
component.

This changes the internals of the JsonEditor component to use the Hds::CodeBlock component for readonly views and the new Hds::CodeEditor component for editing code.

Screenshots

Create/Edit Policy - ACL (also applies to RGP and EDL)

Before:

After:

Create/Edit Secret - Cubbyhole

Before:

After:

Wrap Data

Before:

After:

Sign Key - SSH

Before:

After:

Web REPL

Before:

After:

Control Group Success

Before:

After:

OIDC - Create Scope

Before:

After:

Form field - KV - Create New Version (also applies to Patching)

Before:

After:

TODO

Add changelog
Screenshots for each instance and smoke test them.
Enterprise tests run on -server and on headless

(Current to latest test updates on 07/16)
Then get the version of this PR to a point where we can "easily" backport to 1.19.x. Only 1.19.x as that is LTS.
Once we backport, then do clean up PR that does not need to be backported. Specifically test clean up using selectors and newer patterns.

github-actions · 2025-04-04T16:56:47Z

CI Results:
All Go tests succeeded! ✅

zamoore · 2025-04-15T17:30:48Z

We no longer prevent tab from changing focus within the editor as this behavior has accessibility concerns.

beagins

looks good to me! great work!! 🎉

beagins

Just one outstanding question, otherwise looks good! :)

beagins · 2025-07-22T16:51:18Z

+      await click(GENERAL.ttl.toggle('Automate secret deletion'));
+      await fillIn(GENERAL.selectByAttr('ttl-unit'), 's');
+      await fillIn(GENERAL.ttl.input('Automate secret deletion'), '1');
+


beagins · 2025-07-22T21:03:50Z

      await click(GENERAL.submitButton);
-      await waitUntil(() => find('.CodeMirror'));
+      /* eslint-disable-next-line ember/no-settled-after-test-helper */
+      await settled();


I believe that we are trying to avoid await settled() where possible. I can see that waitUntil wasn't working for some reason, would using a assert.dom('.CodeMirror').exists(); instead work?

Good catch! I think the await settled() might have been overkill. There is another waitUntil further down that seems to work just fine.

beagins · 2025-07-22T21:05:53Z

+      await click(SS.secretLink('1/2/3/'));
      assert.dom('[data-test-component="navigate-input"]').hasValue('1/2/3/');
-      assert.dom('[data-test-secret-link]').exists({ count: 2 });
+      assert.dom(SS.secretLink()).exists({ count: 2 });


This PR is already big, so I wouldn't address this here - but it would be nice if we could replace all instances of the SECRET_ENGINE_SELECTORS (SS) with general selectors in a follow up pr.

* Completed initial replacement of editor * fixing ts issues * removing codemirror modifier and deps * working on replacing the code editor * addressing linting concerns * cleaning up policy-form editor * fixing linting issues * fixing linting issues * fixing tests * fixing tests * fixing tests * fixing tests * fixing failing tests * cleaning up PR * fixing tests * remove outdated message for navigating editor * fix linting in tests * add changelog * fix tests * update naming * remove unused lint param + name changes * update test selector usage * update test selector usage * update test selector usage * lint fixes * replace page object selectors * lint fix * fix lint * fix lint after merge * update tests * remove import --------- Co-authored-by: Lane Wetmore <lane.wetmore@hashicorp.com>

* Replace codemirror 6 code editor with HDS CodeEditor component (#30188) * Completed initial replacement of editor * fixing ts issues * removing codemirror modifier and deps * working on replacing the code editor * addressing linting concerns * cleaning up policy-form editor * fixing linting issues * fixing linting issues * fixing tests * fixing tests * fixing tests * fixing tests * fixing failing tests * cleaning up PR * fixing tests * remove outdated message for navigating editor * fix linting in tests * add changelog * fix tests * update naming * remove unused lint param + name changes * update test selector usage * update test selector usage * update test selector usage * lint fixes * replace page object selectors * lint fix * fix lint * fix lint after merge * update tests * remove import --------- Co-authored-by: Lane Wetmore <lane.wetmore@hashicorp.com> * add import * fix test selector mismatches * lint fix * fix timing issue * lint * lint + fix flake --------- Co-authored-by: Zack Moore <zack.moore89@gmail.com>

…corp#30188) * Completed initial replacement of editor * fixing ts issues * removing codemirror modifier and deps * working on replacing the code editor * addressing linting concerns * cleaning up policy-form editor * fixing linting issues * fixing linting issues * fixing tests * fixing tests * fixing tests * fixing tests * fixing failing tests * cleaning up PR * fixing tests * remove outdated message for navigating editor * fix linting in tests * add changelog * fix tests * update naming * remove unused lint param + name changes * update test selector usage * update test selector usage * update test selector usage * lint fixes * replace page object selectors * lint fix * fix lint * fix lint after merge * update tests * remove import --------- Co-authored-by: Lane Wetmore <lane.wetmore@hashicorp.com>

github-actions Bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label Apr 4, 2025

zamoore force-pushed the zamoore/hds-4340/code-editor branch 2 times, most recently from c054a3c to c400092 Compare April 15, 2025 16:39

zamoore commented Apr 15, 2025

View reviewed changes

zamoore force-pushed the zamoore/hds-4340/code-editor branch 2 times, most recently from d7ce5a6 to 3b16d45 Compare April 18, 2025 00:30

zamoore commented Apr 21, 2025

View reviewed changes

Comment thread ui/tests/integration/components/json-editor-test.js

zamoore force-pushed the zamoore/hds-4340/code-editor branch from 0ddfaa9 to 746c217 Compare April 21, 2025 18:37

zamoore changed the title ~~Completed initial replacement of editor~~ Replace codemirror 6 code editor with HDS CodeEditor component Apr 21, 2025

zamoore force-pushed the zamoore/hds-4340/code-editor branch from fe8b386 to a5ebc41 Compare April 21, 2025 21:39

Monkeychip modified the milestones: 1.20.0-rc, 1.19.3 Apr 22, 2025

Monkeychip added the ui label Apr 22, 2025

anwittin modified the milestones: 1.19.3, 1.19.4 Apr 29, 2025

zamoore marked this pull request as ready for review April 29, 2025 16:16

zamoore requested a review from a team as a code owner April 29, 2025 16:16

zamoore marked this pull request as draft April 29, 2025 16:16

zamoore added 10 commits June 26, 2025 14:01

Completed initial replacement of editor

a9552e5

fixing ts issues

f035745

removing codemirror modifier and deps

fd8810c

working on replacing the code editor

90c6b94

addressing linting concerns

a55a785

cleaning up policy-form editor

058a6da

fixing linting issues

710db1f

fixing linting issues

788351d

fixing tests

ab41216

fixing tests

970a50b

lane-wetmore requested review from beagins, emoncuso and hellobontempo July 16, 2025 15:36

Merge branch 'main' into zamoore/hds-4340/code-editor

c68aea3

vercel Bot deployed to Preview July 16, 2025 15:43 View deployment

lane-wetmore added 2 commits July 16, 2025 10:51

lint fix

24edd33

fix lint

cae9da3

beagins previously approved these changes Jul 16, 2025

View reviewed changes

Merge branch 'main' into zamoore/hds-4340/code-editor

70f4b40

lane-wetmore dismissed beagins’s stale review via 70f4b40 July 21, 2025 16:14

vercel Bot deployed to Preview July 21, 2025 16:21 View deployment

lane-wetmore added 3 commits July 21, 2025 17:12

fix lint after merge

3e60df5

update tests

66082b3

remove import

6a96601

lane-wetmore enabled auto-merge (squash) July 22, 2025 16:34

lane-wetmore requested a review from beagins July 22, 2025 16:34

beagins reviewed Jul 22, 2025

View reviewed changes

lane-wetmore added 2 commits July 23, 2025 11:02

remove await settled

2dd22cd

lint

55f8629

lane-wetmore requested a review from beagins July 23, 2025 18:05

beagins approved these changes Jul 23, 2025

View reviewed changes

lane-wetmore merged commit e6ce95a into main Jul 23, 2025
32 checks passed

lane-wetmore deleted the zamoore/hds-4340/code-editor branch July 23, 2025 18:12

lane-wetmore added backport/1.20.x and removed backport/1.20.x+ent labels Aug 4, 2025

hc-github-team-secure-vault-core mentioned this pull request Aug 4, 2025

Backport of Replace codemirror 6 code editor with HDS CodeEditor component into release/1.20.x #31417

Closed

5 tasks

lane-wetmore mentioned this pull request Aug 4, 2025

Backport pr 30188 1.20.x #31419

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace codemirror 6 code editor with HDS CodeEditor component#30188

Replace codemirror 6 code editor with HDS CodeEditor component#30188
lane-wetmore merged 37 commits into
mainfrom
zamoore/hds-4340/code-editor

zamoore commented Apr 4, 2025 •

edited by lane-wetmore

Loading

Uh oh!

github-actions Bot commented Apr 4, 2025 •

edited

Loading

Uh oh!

zamoore Apr 15, 2025

Uh oh!

Uh oh!

beagins left a comment

Uh oh!

beagins left a comment

Uh oh!

beagins Jul 22, 2025

Uh oh!

beagins Jul 22, 2025

Uh oh!

lane-wetmore Jul 23, 2025

Uh oh!

beagins Jul 22, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

zamoore commented Apr 4, 2025 • edited by lane-wetmore Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

Uh oh!

github-actions Bot commented Apr 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zamoore Apr 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

beagins left a comment

Choose a reason for hiding this comment

Uh oh!

beagins left a comment

Choose a reason for hiding this comment

Uh oh!

beagins Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

beagins Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

lane-wetmore Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

beagins Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

zamoore commented Apr 4, 2025 •

edited by lane-wetmore

Loading

github-actions Bot commented Apr 4, 2025 •

edited

Loading