Improve Secret Empty States (#12084)

* adds conditional to render 'minus plain' icon when key doesn't exist

* shows a hyphen when KV secret doesn't have a key and/or value

* fixes tests

changelog/12084.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Render dashes for secret empty states
+```

ui/app/styles/components/info-table-row.scss

@@ -18,7 +18,7 @@
 
   .column {
     align-self: center;
-
+    padding-left: 0px;
     &.info-table-row-edit {
       padding-bottom: 0.3rem;
       padding-top: 0.3rem;

ui/app/templates/components/secret-form-show.hbs

@@ -49,10 +49,21 @@
         </div>
       </div>
     </div>
-    {{#each @modelForData.secretKeyAndValue as |secret|}}
-      <InfoTableRow @label={{secret.key}} @value={{secret.value}} @alwaysRender={{true}}>
-        <MaskedInput @value={{secret.value}} @displayOnly={{true}} @allowCopy={{true}} />
+    {{#if @modelForData.secretKeyAndValue}}
+      {{#each @modelForData.secretKeyAndValue as |secret|}}
+        <InfoTableRow @label={{secret.key}} @value={{secret.value}} @alwaysRender={{true}}>
+          {{#if secret.value}}
+            <MaskedInput @value={{secret.value}} @displayOnly={{true}} @allowCopy={{true}}/>
+          {{else}}
+            <Icon @size="s" @glyph="minus-plain"/>
+          {{/if}}
+        </InfoTableRow>
+      {{/each}}
+    {{else}}
+    {{!-- In the case of no key or value <InfoTableRow> will still render --}}
+      <InfoTableRow @label="" @value="" @alwaysRender={{true}}>
+        <Icon @size="s" @glyph="minus-plain"/>
       </InfoTableRow>
-    {{/each}}
+    {{/if}}
   {{/if}}
 {{/if}}

ui/lib/core/addon/templates/components/info-table-row.hbs

@@ -1,15 +1,17 @@
 {{#if (or alwaysRender value)}}
-  {{#if label}}
-    <div class="column is-one-quarter">
+  <div class="column is-one-quarter" data-test-label-div>
+    {{#if label}}
       <span class="is-label has-text-grey-dark" data-test-row-label="{{label}}">{{label}}</span>
       {{#if helperText}}
-        <div>
+        <div> 
           <span class="is-label helper-text has-text-grey">{{helperText}}</span>
         </div>
       {{/if}}
-    </div>
-  {{/if}}
-  <div class="column is-flex">
+    {{else}}
+      <Icon @size="s" @glyph="minus-plain"/>
+    {{/if}}
+  </div>
+  <div class="column is-flex" data-test-value-div>
     {{#if (has-block)}}
       {{yield}}
     {{else if valueIsBoolean}}
@@ -28,8 +30,11 @@
           @glyph="cancel-square-outline"
         /> No
       {{/if}}
-    {{else if (and (not value) (and alwaysRender defaultShown))}}
+    {{!-- alwaysRender is still true --}}
+    {{else if (and (not value) defaultShown)}}
       <span data-test-row-value="{{label}}">{{defaultShown}}</span>
+    {{else if (eq value "")}} 
+      <Icon @size="s" @glyph="minus-plain"/>
     {{else}}
       {{#if (eq type 'array')}}
         <InfoTableItemArray

ui/tests/integration/components/info-table-row-test.js

@@ -38,6 +38,8 @@ module('Integration | Component | InfoTableItem', function(hooks) {
   });
 
   test('it renders', async function(assert) {
+    this.set('alwaysRender', true);
+
     await render(hbs`<InfoTableRow
         @value={{value}}
         @label={{label}}
@@ -46,10 +48,13 @@ module('Integration | Component | InfoTableItem', 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');
+
+    this.set('value', '');
+    assert.dom('[data-test-label-div]').doesNotExist('does not render if no value and alwaysRender is false');
   });
 
   test('it renders a string with no link if isLink is true and the item type is not an array.', async function(assert) {
-    // This could be changed in the component so that it adds a link for any item type, but right it should only add a link if item type is an array.
+    // This could be changed in the component so that it adds a link for any item type, but right now it should only add a link if item type is an array.
     await render(hbs`<InfoTableRow
         @value={{value}}
         @label={{label}}
@@ -70,4 +75,39 @@ module('Integration | Component | InfoTableItem', function(hooks) {
 
     assert.dom('[data-test-item="array"]').hasText('valueArray', 'Confirm link with item value exist');
   });
+
+  test('it renders a dash (-) if a label and/or value do not exist', async function(assert) {
+    this.set('value', VALUE);
+    this.set('label', '');
+
+    await render(hbs`<InfoTableRow
+      @value={{value}}
+      @label={{label}}
+      @alwaysRender={{true}}
+    />`);
+    assert.dom('[data-test-label-div]').exists('renders label div');
+    assert.dom('[data-test-value-div]').exists('renders value div');
+    assert.dom('div.column span').hasClass('hs-icon-s', 'Renders a dash (-) for the label');
+
+    this.set('value', '');
+    this.set('label', LABEL);
+    assert.dom('div.column.is-flex span').hasClass('hs-icon-s', 'Renders a dash (-) for the value');
+
+    this.set('value', '');
+    this.set('label', '');
+    let dashCount = document.querySelectorAll('.hs-icon-s').length;
+    assert.equal(dashCount, 2, 'Renders dash (-) when both label and value do not exist');
+  });
+
+  test('block content overrides any passed in value content', async function(assert) {
+    await render(hbs`<InfoTableRow
+      @value={{value}}
+      @label={{label}}
+      @alwaysRender={{true}}>
+      Block content is here 
+      </InfoTableRow>`);
+
+    let block = document.querySelector('[data-test-value-div]').textContent.trim();
+    assert.equal(block, 'Block content is here', 'renders block passed through');
+  });
 });