Show "no data" for empty titled sections

assets/javascripts/discourse/components/hledger-dashboard.gjs

@@ -3,7 +3,7 @@ import { tracked } from "@glimmer/tracking";
 import { fn } from "@ember/helper";
 import { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
-import { eq } from "discourse/truth-helpers";
+import { and, eq, isEmpty } from "discourse/truth-helpers";
 import DButton from "discourse/ui-kit/d-button";
 import DConditionalLoadingSpinner from "discourse/ui-kit/d-conditional-loading-spinner";
 import DDatePicker from "discourse/ui-kit/d-date-picker";
@@ -51,6 +51,7 @@ export default class HledgerDashboard extends Component {
     return {
       total: i18n("hledger.total"),
       net: i18n("hledger.net"),
+      noData: i18n("hledger.no_data"),
       holder: i18n("hledger.equity.holder"),
       amount: i18n("hledger.equity.amount"),
       share: i18n("hledger.equity.share"),
@@ -198,29 +199,33 @@ export default class HledgerDashboard extends Component {
                     class="hledger-dashboard__section-title"
                   >{{section.title}}</h3>
                 {{/if}}
-                <table class="hledger-dashboard__table">
-                  <tbody>
-                    {{#each section.rows as |row|}}
-                      <tr>
-                        <HledgerAccountCell
-                          @row={{row}}
-                          @boldRoot={{row.root}}
-                        />
-                        <td class="hledger-dashboard__amount">{{amountText
-                            row.amounts
-                          }}</td>
-                      </tr>
-                    {{/each}}
-                    {{#if section.total}}
-                      <tr class="hledger-dashboard__total">
-                        <td>{{this.labels.total}}</td>
-                        <td class="hledger-dashboard__amount">{{amountText
-                            section.total
-                          }}</td>
-                      </tr>
-                    {{/if}}
-                  </tbody>
-                </table>
+                {{#if (and section.title (isEmpty section.rows))}}
+                  <p class="hledger-dashboard__empty">{{this.labels.noData}}</p>
+                {{else}}
+                  <table class="hledger-dashboard__table">
+                    <tbody>
+                      {{#each section.rows as |row|}}
+                        <tr>
+                          <HledgerAccountCell
+                            @row={{row}}
+                            @boldRoot={{row.root}}
+                          />
+                          <td class="hledger-dashboard__amount">{{amountText
+                              row.amounts
+                            }}</td>
+                        </tr>
+                      {{/each}}
+                      {{#if section.total}}
+                        <tr class="hledger-dashboard__total">
+                          <td>{{this.labels.total}}</td>
+                          <td class="hledger-dashboard__amount">{{amountText
+                              section.total
+                            }}</td>
+                        </tr>
+                      {{/if}}
+                    </tbody>
+                  </table>
+                {{/if}}
               </div>
             {{/each}}
             {{#if this.report.net}}

assets/stylesheets/hledger.scss

@@ -108,6 +108,12 @@
     color: var(--primary-medium);
   }
 
+  &__empty {
+    margin: 0.25em 0;
+    font-size: var(--font-down-1);
+    color: var(--primary-medium);
+  }
+
   &__error {
     margin: 0;
   }

config/locales/client.en.yml

@@ -13,6 +13,7 @@ en:
         equity: "Equity"
       total: "Total"
       net: "Net"
+      no_data: "No data"
       filters:
         begin: "From"
         end: "To"

test/javascripts/acceptance/hledger-test.js

@@ -310,6 +310,21 @@ acceptance("Hledger plugin", function (needs) {
       "indents below the heading's first level"
     );
 
+    assert
+      .dom(".hledger-dashboard__empty")
+      .exists({ count: 1 }, "shows a placeholder for the empty section");
+    assert.dom(".hledger-dashboard__empty").hasText("No data");
+    assert
+      .dom(
+        ".hledger-dashboard__section:nth-of-type(2) .hledger-dashboard__table"
+      )
+      .doesNotExist("omits the table for the empty section");
+    assert
+      .dom(
+        ".hledger-dashboard__section:nth-of-type(1) .hledger-dashboard__table"
+      )
+      .exists("keeps the table for the populated section");
+
     await click(".hledger-dashboard__toolbar .btn:nth-of-type(3)");
 
     assert