Backport of UI: fix browser console formatting into release/1.13.x (h…

…ashicorp#20088)

* backport of commit 7e09f99

* UI/add prettier ignore for ui console file (hashicorp#20094)

* fix template-lintrc file

* add prettier ignore

---------

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

changelog/20064.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: fixes browser console formatting for help command output
+```

ui/app/templates/components/console/log-command.hbs

@@ -1,2 +1,2 @@
 {{! using Icon here instead of Chevron because two nested tagless components results in a rendered line break between the tags breaking the layout in the <pre> }}
-<pre class="console-ui-command"><Icon @name="chevron-right" />{{@content}}</pre>
+<p class="console-ui-command is-font-mono"><Icon @name="chevron-right" />{{@content}}</p>

ui/app/templates/components/console/log-help.hbs

@@ -1,8 +1,20 @@
+{{! template-lint-disable no-whitespace-for-layout }}
+{{! prettier-ignore }}
 <div class="console-ui-alert has-text-grey">
-  <Icon @name="info" />
-  <pre>Usage: vault &lt;command&gt; [args] Commands: read Read data and retrieves secrets write Write data, configuration,
-    and secrets delete Delete secrets and configuration list List data or secrets Web CLI Commands: api Navigate to the Vault
-    API explorer. Use 'api [filter]' to prefilter the list. clear Clear output from the log clearall Clear output and command
-    history fullscreen Toggle fullscreen display refresh Refresh the data on the current screen under the CLI window
-  </pre>
+<Icon @name="info" />
+<pre>Usage: vault &lt;command&gt; [args]
+
+Commands:
+  read        Read data and retrieves secrets
+  write       Write data, configuration, and secrets
+  delete      Delete secrets and configuration
+  list        List data or secrets
+
+Web CLI Commands:
+  api         Navigate to the Vault API explorer. Use 'api [filter]' to prefilter the list.
+  clear       Clear output from the log
+  clearall    Clear output and command history
+  fullscreen  Toggle fullscreen display
+  refresh     Refresh the data on the current screen under the CLI window
+</pre>
 </div>

ui/app/templates/components/console/log-list.hbs

@@ -1,8 +1,10 @@
 <div class="console-ui-output has-copy-button">
-  <pre>Keys
+  <pre>
+    Keys
     {{#each this.list as |item|}}
       {{item}}
 
-    {{/each}}</pre>
+    {{/each}}
+  </pre>
   <HoverCopyButton @copyValue={{multi-line-join this.list}} />
 </div>

ui/tests/integration/components/console/log-command-test.js

@@ -11,7 +11,6 @@ module('Integration | Component | console/log command', function (hooks) {
     this.set('content', commandText);
 
     await render(hbs`{{console/log-command content=this.content}}`);
-
-    assert.dom('pre').includesText(commandText);
+    assert.dom('p').includesText(commandText);
   });
 });