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

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

- Remove CodeEditor 5 dependency

* chore: 🤖 Replace CodeMirror5 dep

remove CodeMirror5 and replace existing editors with HDS::CodeEditor

* chore: 🤖 deleting old codeeditor styles

* feat: 🎸 changing code editor

changing code editor

✅ Closes: 0

* removed unused export

* pr cleanup

* updating tests for new code editor

* responding to PR feedback

* added whitespace

* fixing linting violations

* chore: 🤖 self-review PR

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

* fix: 🐛 fix linting bug

* fix: 🐛 unneeded dependency

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

* fix: 🐛 Fixing import bug

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

* Fix and refactor code editor acceptance test

* Fix and refactor code editor acceptance test

* chore: 🤖 remove codemirror dependency

* refactor: 💡 fix merge conflict issues

* test: 💍 update e2e test selectors

* test: 💍 fix target spec click event

* refactor: 💡 clean up test selectors for code editor

* refactor: 💡 clean up storage bucket test selectors

* chore: 🤖 remove code mirror modifiers

---------

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

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

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

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

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

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

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