FIX: Badge preview not displaying grant count (#23269)

<img width="510" alt="Screenshot 2023-08-25 at 8 19 38 AM" src="https://github.com/discourse/discourse/assets/50783505/9ebf467e-7b3b-49e2-91d9-43e37b838431">

app/assets/javascripts/admin/addon/components/modal/badge-preview.hbs

@@ -5,15 +5,17 @@
 >
   <:body>
     {{#if @model.badge.errors}}
-      <p class="error-header">{{i18n
-          "admin.badges.preview.sql_error_header"
-        }}</p>
+      <p class="error-header">
+        {{i18n "admin.badges.preview.sql_error_header"}}
+      </p>
       <pre class="badge-errors">{{@model.badge.errors}}</pre>
     {{else}}
       <p class="grant-count">
-        {{#if this.count}}
+        {{#if @model.badge.grant_count}}
           {{html-safe
-            (i18n "admin.badges.preview.grant_count" count=@model.badge.count)
+            (i18n
+              "admin.badges.preview.grant_count" count=@model.badge.grant_count
+            )
           }}
         {{else}}
           {{html-safe (i18n "admin.badges.preview.no_grant_count")}}
@@ -32,7 +34,7 @@
         </div>
       {{/if}}
 
-      {{#if this.sample}}
+      {{#if @model.badge.sample}}
         <p class="sample">
           {{i18n "admin.badges.preview.sample"}}
         </p>

app/assets/javascripts/admin/addon/components/modal/badge-preview.js

@@ -33,7 +33,7 @@ export default class BadgePreview extends Component {
         this.args.model.badge.grant_count
       );
     } else {
-      return this.args.model.badge.sample.length !== 10;
+      return this.args.model.badge.sample?.length !== 10;
     }
   }
 

app/assets/javascripts/admin/addon/templates/admin-badges/show.hbs

@@ -175,11 +175,17 @@
         <a
           href
           {{on "click" (fn this.showPreview this.buffered "false")}}
-        >{{i18n "admin.badges.preview.link_text"}}</a>
+          class="preview-badge"
+        >
+          {{i18n "admin.badges.preview.link_text"}}</a>
         |
-        <a href {{on "click" (fn this.showPreview this.buffered "true")}}>{{i18n
-            "admin.badges.preview.plan_text"
-          }}</a>
+        <a
+          href
+          {{on "click" (fn this.showPreview this.buffered "true")}}
+          class="preview-badge-plan"
+        >
+          {{i18n "admin.badges.preview.plan_text"}}
+        </a>
         {{#if this.preview_loading}}
           {{i18n "loading"}}
         {{/if}}

app/assets/javascripts/discourse/tests/acceptance/admin-badges-show-test.js

@@ -3,11 +3,20 @@ import {
   exists,
   query,
 } from "discourse/tests/helpers/qunit-helpers";
-import { click, fillIn, settled, visit } from "@ember/test-helpers";
+import { click, fillIn, visit } from "@ember/test-helpers";
 import { test } from "qunit";
 
 acceptance("Admin - Badges - Show", function (needs) {
   needs.user();
+  needs.settings({
+    enable_badge_sql: true,
+  });
+  needs.pretender((server, helper) => {
+    server.post("/admin/badges/preview.json", () =>
+      helper.response(200, { grant_count: 3, sample: [] })
+    );
+  });
+
   test("new badge page", async function (assert) {
     await visit("/admin/badges/new");
     assert.ok(
@@ -38,11 +47,10 @@ acceptance("Admin - Badges - Show", function (needs) {
       "image uploader becomes visible after clicking the upload image radio button"
     );
 
-    // SQL fields
-    assert.false(exists("label[for=query]"), "sql input is hidden by default");
-    this.siteSettings.enable_badge_sql = true;
-    await settled();
-    assert.true(exists("label[for=query]"), "sql input shows when enabled");
+    assert.true(
+      exists("label[for=query]"),
+      "sql input is visible when enabled"
+    );
 
     assert.false(
       exists("input[name=auto_revoke]"),
@@ -112,4 +120,18 @@ acceptance("Admin - Badges - Show", function (needs) {
     assert.ok(!exists(".image-uploader"), "image uploader becomes hidden");
     assert.strictEqual(query(".icon-picker").textContent.trim(), "fa-rocket");
   });
+
+  test("sql input is hidden by default", async function (assert) {
+    this.siteSettings.enable_badge_sql = false;
+    await visit("/admin/badges/new");
+    assert.dom("label[for=query]").doesNotExist();
+  });
+
+  test("Badge preview displays the grant count", async function (assert) {
+    await visit("/admin/badges/3");
+    await click("a.preview-badge");
+    assert
+      .dom(".badge-query-preview .grant-count")
+      .hasText("3 badges to be assigned.");
+  });
 });

app/assets/javascripts/discourse/tests/fixtures/badges-fixture.js

@@ -1727,6 +1727,7 @@ export default {
         icon: "fa-rocket",
         image_url: "/images/avatar.png?3",
         multiple_grant: true,
+        query: "SELECT 1",
       },
     ],
   },