OverflowMenu refactor

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

@@ -30,11 +30,7 @@
       </ExternalLink>
     {{/if}}
     {{#unless @editingIsDisabled}}
-      <Document::Sidebar::RelatedResources::ListItem::OverflowMenu
-        @resource={{@resource}}
-        @onRemoveClick={{@removeResource}}
-        @onEditClick={{this.showModal}}
-      />
+      <RelatedResources::OverflowMenu @items={{this.overflowMenuItems}} />
     {{/unless}}
   </div>
 </li>

web/app/components/document/sidebar/related-resources/list-item.ts

@@ -7,6 +7,7 @@ import {
   RelatedHermesDocument,
   RelatedResource,
 } from "hermes/components/related-resources";
+import { OverflowItem } from "hermes/components/related-resources/overflow-menu";
 
 interface DocumentSidebarRelatedResourcesListItemComponentSignature {
   Element: HTMLLIElement;
@@ -33,6 +34,37 @@ export default class DocumentSidebarRelatedResourcesListItemComponent extends Co
    */
   private _itemIsExternalResource = "url" in this.args.resource;
 
+  /**
+   * The items to display in the overflow menu.
+   * If the resource is an external resource, the "edit" item is included.
+   */
+  protected get overflowMenuItems(): Record<string, OverflowItem> {
+    let maybeEditItem = null;
+
+    if ("url" in this.args.resource) {
+      maybeEditItem = {
+        edit: {
+          label: "Edit",
+          icon: "edit",
+          action: () => this.showModal(),
+        },
+      };
+    }
+
+    const deleteItem = {
+      delete: {
+        label: "Remove",
+        icon: "trash",
+        action: () => this.args.removeResource(this.args.resource),
+      },
+    };
+
+    return {
+      ...maybeEditItem,
+      ...deleteItem,
+    };
+  }
+
   /**
    * The resource's googleFileID, if it exists.
    * Used in the template to determine internal or external routing.

web/app/components/document/sidebar/related-resources/list-item/overflow-menu.hbs → web/app/components/related-resources/overflow-menu.hbs

@@ -1,9 +1,10 @@
 <X::DropdownList
-  @items={{this.items}}
+  @items={{@items}}
   @renderOut={{true}}
   @placement="bottom-end"
   @offset={{hash mainAxis=-3 crossAxis=-3}}
   data-test-related-resources-list-item-overflow-menu
+  ...attributes
 >
   <:anchor as |dd|>
     <div
@@ -22,16 +23,15 @@
   </:anchor>
   <:item as |dd|>
     <dd.Action
-      data-test-overflow-menu-action={{if
-        (eq dd.attrs.label "Edit")
-        "edit"
-        "remove"
-      }}
+      data-test-action
+      data-test-overflow-menu-action={{dasherize dd.attrs.label}}
       {{on "click" dd.attrs.action}}
       class="related-resources-overflow-menu-item-button"
     >
-      <FlightIcon @name={{dd.attrs.icon}} />
-      <span>{{dd.attrs.label}}</span>
+      <FlightIcon @name={{dd.attrs.icon}} class="shrink-0" />
+      <span data-test-label>
+        {{dd.attrs.label}}
+      </span>
     </dd.Action>
   </:item>
 </X::DropdownList>

web/app/components/related-resources/overflow-menu.ts

@@ -0,0 +1,22 @@
+import Component from "@glimmer/component";
+
+export interface OverflowItem {
+  label: string;
+  icon: string;
+  action: any;
+}
+
+interface RelatedResourcesOverflowMenuComponentSignature {
+  Element: HTMLDivElement;
+  Args: {
+    items: Record<string, OverflowItem>;
+  };
+}
+
+export default class RelatedResourcesOverflowMenuComponent extends Component<RelatedResourcesOverflowMenuComponentSignature> {}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "RelatedResources::OverflowMenu": typeof RelatedResourcesOverflowMenuComponent;
+  }
+}

web/tests/integration/components/related-resources/overflow-menu-test.ts

@@ -0,0 +1,74 @@
+import { TestContext, click, findAll, render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupRenderingTest } from "ember-qunit";
+import { OverflowItem } from "hermes/components/related-resources/overflow-menu";
+import { module, test } from "qunit";
+
+const POPOVER = "[data-test-related-resources-list-item-overflow-menu]";
+const TOGGLE = "[data-test-x-dropdown-list-toggle-action]";
+const ACTION = `${POPOVER} [data-test-action]`;
+const ICON = `${POPOVER} .flight-icon`;
+const LABEL = `${POPOVER} [data-test-label]`;
+
+interface RelatedResourcesOverflowMenuTestContext extends TestContext {
+  items: Record<string, OverflowItem>;
+}
+
+module("Integration | Component | related-resources/add", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it creates a menu from a list of items", async function (this: RelatedResourcesOverflowMenuTestContext, assert) {
+    let actionOneCount = 0;
+    let actionTwoCount = 0;
+
+    this.set("items", {
+      item1: {
+        label: "Item 1",
+        icon: "square",
+        action: () => actionOneCount++,
+      },
+      item2: {
+        label: "Item 2",
+        icon: "circle",
+        action: () => actionTwoCount++,
+      },
+    });
+
+    await render<RelatedResourcesOverflowMenuTestContext>(hbs`
+      <RelatedResources::OverflowMenu
+        data-test-overflow-popover
+        @items={{this.items}}
+      />
+    `);
+
+    assert.dom(POPOVER).doesNotExist();
+
+    await click(TOGGLE);
+
+    assert.dom(POPOVER).exists();
+
+    const expectedLabels = ["Item 1", "Item 2"];
+    const expectedIcons = ["square", "circle"];
+
+    const actualLabels = findAll(LABEL).map((el) => el.textContent?.trim());
+    const actualIcons = findAll(ICON).map(
+      (el) => el.getAttribute("data-test-icon")?.trim(),
+    );
+
+    assert.deepEqual(actualLabels, expectedLabels);
+    assert.deepEqual(actualIcons, expectedIcons);
+
+    // Click the first action
+    await click(ACTION);
+
+    assert.equal(actionOneCount, 1);
+    assert.dom(POPOVER).doesNotExist();
+
+    // Reopen the menu and click the second action
+
+    await click(TOGGLE);
+    await click(`${POPOVER} li:nth-child(2) button`);
+
+    assert.equal(actionTwoCount, 1);
+  });
+});