From 28ecc176ccbd6d3c3bb664468f81ae2a9d524696 Mon Sep 17 00:00:00 2001
From: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
Date: Thu, 14 Oct 2021 13:14:33 -0700
Subject: [PATCH] UI/remove empty rows from DB config pages (#12819)

* adds helper so only rows with values display

* adds changelog

* add argument to is-empty-value helper to check for default

* adds test to helper for added named argument
---
 changelog/12819.txt                           |  3 ++
 ui/app/helpers/is-empty-value.js              |  5 ++-
 .../components/database-connection.hbs        |  6 ++--
 .../helpers/is-empty-value-test.js            | 31 ++++++++++++++++---
 4 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 changelog/12819.txt

diff --git a/changelog/12819.txt b/changelog/12819.txt
new file mode 100644
index 0000000000000..80e772b4827bd
--- /dev/null
+++ b/changelog/12819.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Removes empty rows from DB config views
+```
diff --git a/ui/app/helpers/is-empty-value.js b/ui/app/helpers/is-empty-value.js
index 2c43bdd99bcb0..6f3de8abd1495 100644
--- a/ui/app/helpers/is-empty-value.js
+++ b/ui/app/helpers/is-empty-value.js
@@ -1,6 +1,9 @@
 import { helper } from '@ember/component/helper';
 
-export default helper(function isEmptyValue([value] /*, hash*/) {
+export default helper(function isEmptyValue([value], { hasDefault = false }) {
+  if (hasDefault) {
+    value = hasDefault;
+  }
   if (typeof value === 'object' && value !== null) {
     return Object.keys(value).length === 0;
   }
diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs
index 19aee380418fc..69b34a7c33f77 100644
--- a/ui/app/templates/components/database-connection.hbs
+++ b/ui/app/templates/components/database-connection.hbs
@@ -310,14 +310,14 @@
     {{#let attr.options.defaultShown as |defaultDisplay|}}
       {{#if (eq attr.type "object")}}
         <InfoTableRow
-          @alwaysRender={{true}}
+          @alwaysRender={{not (is-empty-value (get @model attr.name) hasDefault=defaultDisplay)}}
           @defaultShown={{defaultDisplay}}
           @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
           @value={{stringify (get @model attr.name)}}
         />
       {{else if (eq attr.type "array")}}
         <InfoTableRow
-          @alwaysRender={{true}}
+          @alwaysRender={{not (is-empty-value (get @model attr.name) hasDefault=defaultDisplay)}}
           @defaultShown={{defaultDisplay}}
           @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
           @value={{get @model attr.name}}
@@ -327,7 +327,7 @@
         />
       {{else}}
         <InfoTableRow
-          @alwaysRender={{true}}
+          @alwaysRender={{not (is-empty-value (get @model attr.name) hasDefault=defaultDisplay)}}
           @defaultShown={{defaultDisplay}}
           @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
           @value={{get @model attr.name}}
diff --git a/ui/tests/integration/helpers/is-empty-value-test.js b/ui/tests/integration/helpers/is-empty-value-test.js
index 16ab5eb2aaef9..6ad8e3f535f16 100644
--- a/ui/tests/integration/helpers/is-empty-value-test.js
+++ b/ui/tests/integration/helpers/is-empty-value-test.js
@@ -4,7 +4,7 @@ import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 const template = hbs`
-{{#if (is-empty-value inputValue)}}
+{{#if (is-empty-value inputValue hasDefault=defaultValue)}}
 Empty
 {{else}}
 Full
@@ -18,34 +18,55 @@ const nonEmptyObject = { thing: 0 };
 module('Integration | Helper | is-empty-value', function(hooks) {
   setupRenderingTest(hooks);
 
-  test('it is truthy if the value evaluated is undefined', async function(assert) {
+  test('it is truthy if the value evaluated is undefined and no default', async function(assert) {
     this.set('inputValue', undefined);
+    this.set('defaultValue', false);
 
     await render(template);
 
     assert.dom(this.element).hasText('Empty');
   });
 
-  test('it is truthy if the value evaluated is an empty string', async function(assert) {
+  test('it is truthy if the value evaluated is an empty string and no default', async function(assert) {
     this.set('inputValue', '');
+    this.set('defaultValue', false);
 
     await render(template);
 
     assert.dom(this.element).hasText('Empty');
   });
 
-  test('it is truthy if the value evaluated is an empty object', async function(assert) {
+  test('it is truthy if the value evaluated is an empty object and no default', async function(assert) {
     this.set('inputValue', emptyObject);
+    this.set('defaultValue', false);
 
     await render(template);
 
     assert.dom(this.element).hasText('Empty');
   });
-  test('it is falsy if the value evaluated is not an empty object', async function(assert) {
+
+  test('it is falsy if the value evaluated is not an empty object and no default', async function(assert) {
     this.set('inputValue', nonEmptyObject);
+    this.set('defaultValue', false);
 
     await render(template);
 
     assert.dom(this.element).hasText('Full');
   });
+
+  test('it is falsy if the value evaluated is empty but a default exists', async function(assert) {
+    this.set('defaultValue', 'Some default');
+    this.set('inputValue', emptyObject);
+
+    await render(template);
+    assert.dom(this.element).hasText('Full', 'shows default when value is empty object');
+
+    this.set('inputValue', '');
+    await render(template);
+    assert.dom(this.element).hasText('Full', 'shows default when value is empty string');
+
+    this.set('inputValue', undefined);
+    await render(template);
+    assert.dom(this.element).hasText('Full', 'shows default when value is undefined');
+  });
 });