Add EmptyStateAddButton component

web/app/components/document/sidebar/empty-state-add-button.gts

@@ -0,0 +1,40 @@
+import Component from "@glimmer/component";
+import Action from "hermes/components/action";
+import EmptyStateText from "hermes/components/empty-state-text";
+import FlightIcon from "@hashicorp/ember-flight-icons/components/flight-icon";
+import { on } from "@ember/modifier";
+
+interface DocumentSidebarEmptyStateAddButtonSignature {
+  Element: HTMLButtonElement | HTMLDivElement;
+  Args: {
+    isReadOnly?: boolean;
+    action: () => void;
+  };
+}
+
+export default class DocumentSidebarEmptyStateAddButton extends Component<DocumentSidebarEmptyStateAddButtonSignature> {
+  <template>
+    <div class="editable-field-container">
+      <div class="editable-field button-affordance">
+        {{#if @isReadOnly}}
+          <div class="field-toggle read-only" ...attributes>
+            <EmptyStateText />
+          </div>
+        {{else}}
+          <Action {{on "click" @action}} class="field-toggle" ...attributes>
+            <EmptyStateText />
+            <span class="edit-affordance light-gray">
+              <FlightIcon @name="plus" class="text-color-foreground-faint" />
+            </span>
+          </Action>
+        {{/if}}
+      </div>
+    </div>
+  </template>
+}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "Document::Sidebar::EmptyStateAddButton": typeof DocumentSidebarEmptyStateAddButton;
+  }
+}

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

@@ -1,26 +1,11 @@
 <AnimatedContainer data-test-related-resources-list class="w-full">
   <div {{did-insert this.enableAnimation}}>
     {{#if this.listIsEmpty}}
-      <div class="editable-field-container">
-        <div class="editable-field button-affordance">
-          {{#if @editingIsDisabled}}
-            <div class="field-toggle read-only pl-[5px]">
-              <EmptyStateText />
-            </div>
-          {{else}}
-            <Action
-              data-test-related-resources-list-empty-state
-              {{on "click" this.showModal}}
-              class="field-toggle group pl-[5px]"
-            >
-              <EmptyStateText />
-              <span class="edit-affordance light-gray">
-                <FlightIcon @name="plus" class="text-color-foreground-faint" />
-              </span>
-            </Action>
-          {{/if}}
-        </div>
-      </div>
+      <Document::Sidebar::EmptyStateAddButton
+        @isReadOnly={{@editingIsDisabled}}
+        @action={{this.showModal}}
+        data-test-related-resources-list-empty-state
+      />
     {{else}}
       <ul class="related-resources-list" ...attributes>
         {{#animated-each

web/package.json

@@ -50,6 +50,7 @@
     "@types/ember__destroyable": "latest",
     "@types/ember__engine": "latest",
     "@types/ember__error": "latest",
+    "@types/ember__modifier": "latest",
     "@types/ember__object": "latest",
     "@types/ember__polyfills": "latest",
     "@types/ember__routing": "latest",

web/tests/integration/components/document/sidebar/empty-state-add-button-test.ts

@@ -0,0 +1,48 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { TestContext, click, render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+
+interface DocumentSidebarEmptyStateAddButtonTestContext extends TestContext {
+  action: () => void;
+  isReadOnly: boolean;
+}
+
+module(
+  "Integration | Component | document/sidebar/empty-state-add-button",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("it runs the passed-in function on click", async function (this: DocumentSidebarEmptyStateAddButtonTestContext, assert) {
+      let count = 0;
+
+      this.set("action", () => {
+        count++;
+      });
+
+      await render<DocumentSidebarEmptyStateAddButtonTestContext>(hbs`
+        <Document::Sidebar::EmptyStateAddButton
+          @action={{this.action}}
+        />
+      `);
+
+      await click("button");
+
+      assert.equal(count, 1);
+    });
+
+    test("it can be rendered read-only", async function (this: DocumentSidebarEmptyStateAddButtonTestContext, assert) {
+      this.set("action", () => {});
+
+      await render<DocumentSidebarEmptyStateAddButtonTestContext>(hbs`
+        <Document::Sidebar::EmptyStateAddButton
+          @isReadOnly={{true}}
+          @action={{this.action}}
+        />
+      `);
+
+      assert.dom("button").doesNotExist();
+      assert.dom(".field-toggle").hasClass("read-only");
+    });
+  },
+);

web/tests/integration/components/document/sidebar/related-resources/list-test.ts

@@ -26,12 +26,6 @@ module(
     `);
 
       assert.dom(".related-resources-list").exists("list is rendered");
-
-      this.set("items", []);
-
-      assert
-        .dom("[data-test-related-resources-list-empty-state]")
-        .exists("empty state is rendered when the list is empty");
     });
 
     test("it shows an empty state when the list is empty", async function (this: DocumentSidebarRelatedResourcesListTestContext, assert) {
@@ -49,5 +43,5 @@ module(
 
       assert.dom("[data-test-related-resources-list-empty-state]").exists();
     });
-  }
+  },
 );

web/yarn.lock

@@ -3262,6 +3262,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/ember__modifier@npm:latest":
+  version: 4.0.7
+  resolution: "@types/ember__modifier@npm:4.0.7"
+  dependencies:
+    "@types/ember": "*"
+    "@types/ember__owner": "*"
+  checksum: 29716c3b7b21712691b08ed96bb0060c32e06713e6ae4fb7e092b60d74e6798d68ef60ab34b4fda8310d1e30cdc9f9c8e30527929e2048e78c98993e66520c29
+  languageName: node
+  linkType: hard
+
 "@types/ember__object@npm:*, @types/ember__object@npm:latest":
   version: 4.0.5
   resolution: "@types/ember__object@npm:4.0.5"
@@ -12176,6 +12186,7 @@ __metadata:
     "@types/ember__destroyable": latest
     "@types/ember__engine": latest
     "@types/ember__error": latest
+    "@types/ember__modifier": latest
     "@types/ember__object": latest
     "@types/ember__polyfills": latest
     "@types/ember__routing": latest