Info table row typography (hashicorp#12908)

* updates info table row value font * adds changelog * updates tests * attempts to fix flaky mount-secret-backend acceptance test
qk4l · Feb 4, 2022 · 7c86a99 · 7c86a99
1 parent a71e0d3
commit 7c86a99
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/changelog/12908.txt b/changelog/12908.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Updates font for table row value fields 
+```
diff --git 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
@@ -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
@@ -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) {