From 70e9558ceceaf23fe8c0b50309a9b2a68b1e2869 Mon Sep 17 00:00:00 2001
From: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
Date: Tue, 11 Apr 2023 10:42:50 -0700
Subject: [PATCH] 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                           |  3 +++
 ui/.template-lintrc.js                        |  2 +-
 .../components/console/log-command.hbs        |  2 +-
 .../templates/components/console/log-help.hbs | 23 ++++++++++++++-----
 .../templates/components/console/log-list.hbs |  6 +++--
 .../components/console/log-command-test.js    |  3 +--
 6 files changed, 27 insertions(+), 12 deletions(-)
 create mode 100644 changelog/20064.txt

diff --git a/changelog/20064.txt b/changelog/20064.txt
new file mode 100644
index 000000000..c539119f7
--- /dev/null
+++ b/changelog/20064.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: fixes browser console formatting for help command output
+```
\ No newline at end of file
diff --git a/ui/.template-lintrc.js b/ui/.template-lintrc.js
index 354052189..7bb9d6e36 100644
--- a/ui/.template-lintrc.js
+++ b/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: [
diff --git a/ui/app/templates/components/console/log-command.hbs b/ui/app/templates/components/console/log-command.hbs
index 4a75ec88c..e282e32cb 100644
--- a/ui/app/templates/components/console/log-command.hbs
+++ b/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>
\ No newline at end of file
+<p class="console-ui-command is-font-mono"><Icon @name="chevron-right" />{{@content}}</p>
\ No newline at end of file
diff --git a/ui/app/templates/components/console/log-help.hbs b/ui/app/templates/components/console/log-help.hbs
index ea9ead3d7..63f1aa3f7 100644
--- a/ui/app/templates/components/console/log-help.hbs
+++ b/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>
\ No newline at end of file
diff --git a/ui/app/templates/components/console/log-list.hbs b/ui/app/templates/components/console/log-list.hbs
index b9ebd68a6..600d413b8 100644
--- a/ui/app/templates/components/console/log-list.hbs
+++ b/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>
\ No newline at end of file
diff --git a/ui/tests/integration/components/console/log-command-test.js b/ui/tests/integration/components/console/log-command-test.js
index f13f8b676..9797f2d85 100644
--- a/ui/tests/integration/components/console/log-command-test.js
+++ b/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);
   });
 });