From d098bb19f1d4758c49e079d0c03d3fd661f61339 Mon Sep 17 00:00:00 2001
From: Jordan Reimer <zofskeez@gmail.com>
Date: Fri, 22 Oct 2021 15:16:02 -0600
Subject: [PATCH] Info table row typography (#12908)

* updates info table row value font

* adds changelog

* updates tests

* attempts to fix flaky mount-secret-backend acceptance test
---
 changelog/12908.txt                                       | 3 +++
 ui/lib/core/addon/templates/components/info-table-row.hbs | 4 ++--
 ui/tests/acceptance/settings/mount-secret-backend-test.js | 2 +-
 ui/tests/integration/components/info-table-row-test.js    | 6 ++----
 4 files changed, 8 insertions(+), 7 deletions(-)
 create mode 100644 changelog/12908.txt

diff --git a/changelog/12908.txt b/changelog/12908.txt
new file mode 100644
index 000000000..2e542174f
--- /dev/null
+++ b/changelog/12908.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Updates font for table row value fields 
+```
\ No newline at end of file
diff --git a/ui/lib/core/addon/templates/components/info-table-row.hbs b/ui/lib/core/addon/templates/components/info-table-row.hbs
index 676bea71f..24fed394d 100644
--- a/ui/lib/core/addon/templates/components/info-table-row.hbs
+++ b/ui/lib/core/addon/templates/components/info-table-row.hbs
@@ -55,7 +55,7 @@
             @horizontalPosition="left"
             as |T|>
             <T.trigger @tabindex=false>
-              <code class="is-word-break has-text-black" data-test-row-value="{{label}}">{{value}}</code>  
+              <span class="is-word-break has-text-black" data-test-row-value="{{label}}">{{value}}</span>  
             </T.trigger>
             <T.content @class="tool-tip">
               <CopyButton
@@ -73,7 +73,7 @@
             </T.content>
           </ToolTip>
         {{else}}
-          <code class="is-word-break has-text-black" data-test-row-value="{{label}}">{{value}}</code>
+          <span class="is-word-break has-text-black" data-test-row-value="{{label}}">{{value}}</span>
         {{/if}}
       {{/if}}
     {{/if}}
diff --git a/ui/tests/acceptance/settings/mount-secret-backend-test.js b/ui/tests/acceptance/settings/mount-secret-backend-test.js
index 17c0eddea..aa9926409 100644
--- a/ui/tests/acceptance/settings/mount-secret-backend-test.js
+++ b/ui/tests/acceptance/settings/mount-secret-backend-test.js
@@ -128,7 +128,7 @@ module('Acceptance | settings/mount-secret-backend', function(hooks) {
       `write sys/policies/acl/kv-v2-degrade policy=${btoa(V2_POLICY)}`,
       'write -field=client_token auth/token/create policies=kv-v2-degrade',
     ]);
-
+    await settled();
     let userToken = consoleComponent.lastLogOutput;
     await logout.visit();
     await authPage.login(userToken);
diff --git a/ui/tests/integration/components/info-table-row-test.js b/ui/tests/integration/components/info-table-row-test.js
index b24f48f5a..d59761720 100644
--- a/ui/tests/integration/components/info-table-row-test.js
+++ b/ui/tests/integration/components/info-table-row-test.js
@@ -47,8 +47,7 @@ module('Integration | Component | InfoTableRow', function(hooks) {
       />`);
 
     assert.dom('[data-test-component="info-table-row"]').exists();
-    let string = document.querySelector('code').textContent;
-    assert.equal(string, VALUE, 'renders value as passed through');
+    assert.dom('[data-test-row-value]').hasText(VALUE, 'renders value as passed through');
 
     this.set('value', '');
     assert
@@ -101,8 +100,7 @@ module('Integration | Component | InfoTableRow', function(hooks) {
         @label={{label}}
         @isLink={{true}}
       />`);
-    let string = document.querySelector('code').textContent;
-    assert.equal(string, VALUE, 'renders value in code element and not in a tag');
+    assert.dom('[data-test-row-value]').hasText(VALUE, 'renders value in code element and not in a tag');
   });
 
   test('it renders links if isLink is true and type is array', async function(assert) {