chore: 🤖 replace Rose::CodeEditor with Hds::CodeBlock on new worker page (#2128)

* chore: 🤖 replace `Rose::CodeEditor` with `Hds::CodeBlock` for new workers

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

@@ -917,7 +917,7 @@ worker:
         title: 1. Configure your new worker
         create_directory: Create a configuration file in a new directory on your server
         create_config: 'Open the file with a text editor, such as Vi. Paste the following configuration into the worker config file:'
-        save_config: Save the configuration in your `pki-worker.hcl` file.
+        save_config: Save the configuration in your <code>pki-worker.hcl</code> file.
       2:
         title: 2. Install & start Boundary on your server
         run_command: 'Run this command on your server to install Boundary:'

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

@@ -108,41 +108,53 @@
       </Hds::Form::Fieldset>
     {{/if}}
 
-    <Rose::CodeEditor @codeValue={{this.createConfigText}} as |c|>
-      <c.toolbar>
-        <:action>
-          <span>{{t 'resources.worker.form.steps.1.create_directory'}}</span>
-        </:action>
-      </c.toolbar>
-      <c.fieldEditor class='rose-autosize' @options={{this.shellCodeEditor}} />
-    </Rose::CodeEditor>
+    <p>
+      {{t 'resources.worker.form.steps.1.create_directory'}}
+    </p>
 
-    <Rose::CodeEditor @codeValue={{this.workerConfigText}} as |c|>
-      <c.toolbar>
-        <:action>
-          <span>{{t 'resources.worker.form.steps.1.create_config'}}</span>
-        </:action>
-      </c.toolbar>
-      <c.fieldEditor class='rose-autosize' @options={{this.hclCodeEditor}} />
-    </Rose::CodeEditor>
-    <p>{{t 'resources.worker.form.steps.1.save_config'}}</p>
+    <Hds::CodeBlock
+      @language='bash'
+      @value={{this.createConfigText}}
+      @hasCopyButton={{true}}
+      @hasLineNumbers={{false}}
+    />
+
+    <p>
+      {{t 'resources.worker.form.steps.1.create_config'}}
+    </p>
+
+    <Hds::CodeBlock
+      @language='hcl'
+      @value={{this.workerConfigText}}
+      @hasCopyButton={{true}}
+      @hasLineNumbers={{false}}
+    />
+
+    <p>
+      {{t 'resources.worker.form.steps.1.save_config' htmlSafe=true}}
+    </p>
   </div>
 
   <h3>{{t 'resources.worker.form.steps.2.title'}}</h3>
   <div class='worker-create-section'>
-    <Rose::CodeEditor @codeValue={{this.installBoundaryText}} as |c|>
-      <c.toolbar>
-        <:action>
-          <span>{{t 'resources.worker.form.steps.2.run_command'}}</span>
-        </:action>
-      </c.toolbar>
-      <c.fieldEditor class='rose-autosize' @options={{this.shellCodeEditor}} />
-    </Rose::CodeEditor>
-    <span>{{t 'resources.worker.form.steps.2.copy_registration_request'}}</span>
-    <code>{{t
-        'resources.worker.form.steps.3.worker_auth_registration_request.label'
-      }}
-    </code>
+
+    <p>
+      {{t 'resources.worker.form.steps.2.run_command'}}
+    </p>
+
+    <Hds::CodeBlock
+      @language='bash'
+      @value={{this.installBoundaryText}}
+      @hasCopyButton={{true}}
+      @hasLineNumbers={{false}}
+    />
+
+    <p>
+      {{t 'resources.worker.form.steps.2.copy_registration_request'}}
+      <code>{{t
+          'resources.worker.form.steps.3.worker_auth_registration_request.label'
+        }}</code>.
+    </p>
   </div>
 
   <h3>{{t 'resources.worker.form.steps.3.title'}}</h3>

ui/admin/app/styles/app.scss

@@ -337,10 +337,11 @@
     margin-bottom: sizing.rems(l);
   }
 
-  > code {
-    background-color: var(--ui-gray-subtler-5);
-    border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
-    color: var(--failure);
+  > p code {
+    background-color: var(--token-color-surface-strong);
+    border-radius: 5px;
+    color: var(--token-color-foreground-primary);
+    padding: sizing.rems(xxxs) sizing.rems(xxs);
   }
 
   .worker-auth-token {