UI: fix browser console formatting (#20064)

* fix console formatting for help output

* fix again

* fix again

* fix, add to ignore

* fix, add to ignore

* add to ignore file

* fix formatting, no verify

* remove lib/story.md

* add changelog

* hold off updating ignore list for separate ticket

* fix test

changelog/20064.txt

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

ui/.template-lintrc.js

@@ -47,7 +47,7 @@ module.exports = {
     },
     'require-input-label': 'off',
   },
-  ignore: ['lib/story-md', 'tests/**'],
+  ignore: ['lib/story-md', 'tests/**', 'app/templates/components/console/*'],
   // ember language server vscode extension does not currently respect the ignore field
   // override all rules manually as workaround to align with cli
   overrides: [

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,19 @@
+{{!-- template-lint-disable  --}}
 <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

@@ -16,7 +16,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);
   });
 });