EmptyStateText

web/app/components/custom-editable-field.hbs

@@ -12,7 +12,7 @@
           {{F.value}}
         </p>
       {{else}}
-        <CustomEditableFields::EmptyState />
+        <EmptyStateText />
       {{/if}}
     </:default>
     <:editing as |F|>
@@ -48,7 +48,7 @@
             {{/each}}
           </ol>
         {{else}}
-          <CustomEditableFields::EmptyState />
+          <EmptyStateText />
         {{/if}}
       </:default>
       <:editing as |F|>

web/app/components/document/sidebar.hbs

@@ -231,7 +231,7 @@
                   {{/each}}
                 </ol>
               {{else}}
-                <em>No contributors</em>
+                <EmptyStateText />
               {{/if}}
             </:default>
             <:editing as |F|>
@@ -274,7 +274,7 @@
                   {{/each}}
                 </ol>
               {{else}}
-                <em>No approvers</em>
+                <EmptyStateText />
               {{/if}}
             </:default>
             <:editing as |F|>

web/app/components/document/sidebar/related-resources/list.hbs

@@ -2,7 +2,7 @@
   <div {{did-insert this.enableAnimation}}>
     {{#if this.listIsEmpty}}
       <div class="mt-1.5" data-test-related-resources-list-empty-state>
-        <CustomEditableFields::EmptyState />
+        <EmptyStateText />
       </div>
     {{else}}
       <ul class="related-resources-list" ...attributes>

web/app/components/empty-state-text.gts

@@ -0,0 +1,24 @@
+import Component from "@glimmer/component";
+import or from "ember-truth-helpers/helpers/or";
+
+interface EmptyStateTextComponentSignature {
+  Element: HTMLSpanElement;
+  Args: {
+    value?: string;
+  };
+  Blocks: {};
+}
+
+export default class EmptyStateTextComponent extends Component<EmptyStateTextComponentSignature> {
+  <template>
+    <span class="empty-state-text text-color-foreground-disabled" ...attributes>
+      {{or @value "None"}}
+    </span>
+  </template>
+}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    EmptyStateText: typeof EmptyStateTextComponent;
+  }
+}

web/app/components/inputs/product-select/item.hbs

@@ -1,6 +1,6 @@
 <div
   data-test-product-select-item
-  class="relative flex w-full product-select-item"
+  class="product-select-item relative flex w-full"
   ...attributes
 >
   <FlightIcon
@@ -9,14 +9,14 @@
     @name={{or (get-product-id @product) "folder"}}
   />
 
-  <span data-test-product-select-item-value class="flex ml-2.5 leading-none">
+  <span data-test-product-select-item-value class="ml-2.5 flex leading-none">
     {{@product}}
   </span>
 
   {{#if @abbreviation}}
     <span
       data-test-product-select-item-abbreviation
-      class="opacity-50 inline-flex ml-2 text-body-100 leading-none"
+      class="ml-2 inline-flex text-body-100 leading-none opacity-50"
     >
       {{@abbreviation}}
     </span>

web/tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  content: ["./app/**/*.{html,js,hbs}"],
+  content: ["./app/**/*.{html,js,hbs,gts}"],
   theme: {
     fontSize: {
       "display-500": [

web/tests/integration/components/custom-editable-field-test.ts

@@ -40,14 +40,14 @@ module("Integration | Component | custom-editable-field", function (hooks) {
       />
     `);
 
-    assert.dom("[data-test-custom-string-field]").hasText("---");
+    assert.dom("[data-test-custom-string-field]").hasText("None");
     assert.dom("[data-test-custom-people-field]").doesNotExist();
 
     this.set("attributes", {
       type: "PEOPLE",
     });
 
-    assert.dom("[data-test-custom-people-field]").hasText("---");
+    assert.dom("[data-test-custom-people-field]").hasText("None");
     assert.dom("[data-test-custom-string-field]").doesNotExist();
   });
 

web/tests/integration/components/empty-state-text-test.ts

@@ -0,0 +1,18 @@
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+
+module("Integration | Component | empty-state-text", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders as expected", async function (assert) {
+    await render(hbs`
+      <EmptyStateText data-test-one />
+      <EmptyStateText data-test-two @value="foo" />
+    `);
+
+    assert.dom("[data-test-one]").hasText("None");
+    assert.dom("[data-test-two]").hasText("foo");
+  });
+});

web/tests/integration/components/inputs/product-select/item-test.ts

@@ -21,8 +21,7 @@ module(
       this.set("product", "Vault");
       this.set("isSelected", false);
 
-      await render(hbs`
-      {{! @glint-nocheck: not typesafe yet }}
+      await render<InputsProductSelectItemContext>(hbs`
       <Inputs::ProductSelect::Item
         @product={{this.product}}
         @isSelected={{this.isSelected}}
@@ -35,7 +34,7 @@ module(
         .hasAttribute(
           "data-test-icon",
           "vault",
-          "the correct product icon is shown"
+          "the correct product icon is shown",
         );
 
       assert
@@ -58,8 +57,8 @@ module(
         .hasAttribute(
           "data-test-icon",
           "folder",
-          "the correct product icon is shown"
+          "the correct product icon is shown",
         );
     });
-  }
+  },
 );