From b05ffa88d5a164f299436cf05a2b7e2b0cc40771 Mon Sep 17 00:00:00 2001
From: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
Date: Wed, 21 Jul 2021 12:47:52 -0700
Subject: [PATCH] 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                           |  3 ++
 ui/app/styles/components/info-table-row.scss  |  2 +-
 .../templates/components/secret-form-show.hbs | 19 +++++++--
 .../templates/components/info-table-row.hbs   | 19 +++++----
 .../components/info-table-row-test.js         | 42 ++++++++++++++++++-
 5 files changed, 72 insertions(+), 13 deletions(-)
 create mode 100644 changelog/12084.txt

diff --git a/changelog/12084.txt b/changelog/12084.txt
new file mode 100644
index 000000000..b2e5d51e9
--- /dev/null
+++ b/changelog/12084.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Render dashes for secret empty states
+```
\ No newline at end of file
diff --git a/ui/app/styles/components/info-table-row.scss b/ui/app/styles/components/info-table-row.scss
index 7fec5aa78..cb8c930f7 100644
--- a/ui/app/styles/components/info-table-row.scss
+++ b/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;
diff --git a/ui/app/templates/components/secret-form-show.hbs b/ui/app/templates/components/secret-form-show.hbs
index dd4b54cd5..543c3c192 100644
--- a/ui/app/templates/components/secret-form-show.hbs
+++ b/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}}
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 f2041d893..4bdb0696a 100644
--- a/ui/lib/core/addon/templates/components/info-table-row.hbs
+++ b/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
diff --git a/ui/tests/integration/components/info-table-row-test.js b/ui/tests/integration/components/info-table-row-test.js
index a0764955e..bf8462089 100644
--- a/ui/tests/integration/components/info-table-row-test.js
+++ b/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');
+  });
 });