Make OverflowMenu a more generic component (#391)

* Make `OverflowMenu` a generic component * Update related-resources.scss * Update app.scss
hashicorp-forge · Oct 27, 2023 · ea8e325 · ea8e325
1 parent 76114a0
commit ea8e325
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 63 deletions.
diff --git a/web/app/components/document/sidebar/related-resources/list-item.hbs b/web/app/components/document/sidebar/related-resources/list-item.hbs
@@ -30,7 +30,7 @@
       </ExternalLink>
     {{/if}}
     {{#unless @editingIsDisabled}}
-      <RelatedResources::OverflowMenu @items={{this.overflowMenuItems}} />
+      <OverflowMenu @items={{this.overflowMenuItems}} />
     {{/unless}}
   </div>
 </li>

diff --git a/web/app/components/document/sidebar/related-resources/list-item.ts b/web/app/components/document/sidebar/related-resources/list-item.ts
@@ -7,7 +7,7 @@ import {
   RelatedHermesDocument,
   RelatedResource,
 } from "hermes/components/related-resources";
-import { OverflowItem } from "hermes/components/related-resources/overflow-menu";
+import { OverflowItem } from "hermes/components/overflow-menu";
 
 interface DocumentSidebarRelatedResourcesListItemComponentSignature {
   Element: HTMLLIElement;

diff --git a/...nents/related-resources/overflow-menu.hbs → web/app/components/overflow-menu.hbs b/...nents/related-resources/overflow-menu.hbs → web/app/components/overflow-menu.hbs
@@ -3,18 +3,16 @@
   @renderOut={{true}}
   @placement="bottom-end"
   @offset={{hash mainAxis=-3 crossAxis=-3}}
-  data-test-related-resources-list-item-overflow-menu
+  data-test-overflow-menu
   ...attributes
 >
   <:anchor as |dd|>
     <div
-      class="related-resources-overflow-button-container
+      class="overflow-button-container
         {{if dd.contentIsShown 'visible' 'invisible'}}
         "
     >
-      <dd.ToggleAction
-        class="related-resource-overflow-button {{if dd.contentIsShown 'open'}}"
-      >
+      <dd.ToggleAction class="overflow-button {{if dd.contentIsShown 'open'}}">
         <div class="button-affordance">
           <FlightIcon @name="more-vertical" />
         </div>
@@ -26,7 +24,7 @@
       data-test-action
       data-test-overflow-menu-action={{dasherize dd.attrs.label}}
       {{on "click" dd.attrs.action}}
-      class="related-resources-overflow-menu-item-button"
+      class="overflow-menu-item-button"
     >
       <FlightIcon @name={{dd.attrs.icon}} class="shrink-0" />
       <span data-test-label>

diff --git a/...onents/related-resources/overflow-menu.ts → web/app/components/overflow-menu.ts b/...onents/related-resources/overflow-menu.ts → web/app/components/overflow-menu.ts
@@ -6,17 +6,17 @@ export interface OverflowItem {
   action: any;
 }
 
-interface RelatedResourcesOverflowMenuComponentSignature {
+interface OverflowMenuComponentSignature {
   Element: HTMLDivElement;
   Args: {
     items: Record<string, OverflowItem>;
   };
 }
 
-export default class RelatedResourcesOverflowMenuComponent extends Component<RelatedResourcesOverflowMenuComponentSignature> {}
+export default class OverflowMenuComponent extends Component<OverflowMenuComponentSignature> {}
 
 declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry {
-    "RelatedResources::OverflowMenu": typeof RelatedResourcesOverflowMenuComponent;
+    OverflowMenu: typeof OverflowMenuComponent;
   }
 }
diff --git a/web/app/styles/app.scss b/web/app/styles/app.scss
@@ -21,6 +21,7 @@
 @use "components/editable-field";
 @use "components/modal-dialog";
 @use "components/multiselect";
+@use "components/overflow-menu";
 @use "components/page";
 @use "components/row-results";
 @use "components/header/active-filter-list";

diff --git a/web/app/styles/components/document/related-resources.scss b/web/app/styles/components/document/related-resources.scss
@@ -46,50 +46,13 @@
 
   &::after {
     @apply border-color-border-highlight bg-color-surface-highlight;
-    animation: fadeIn 400ms ease-out, scaleIn 500ms ease-out,
+    animation:
+      fadeIn 400ms ease-out,
+      scaleIn 500ms ease-out,
       fadeOut 500ms ease-out 600ms forwards;
   }
 }
 
-.related-resources-overflow-menu-item-button {
-  @apply flex w-full space-x-2 py-2 px-4 leading-none;
-
-  > .flight-icon {
-    @apply text-inherit;
-  }
-}
-
-.related-resources-overflow-button-container {
-  @apply pointer-events-none absolute top-0 -right-1;
-  @apply flex w-16 justify-end rounded-tr;
-  @apply bg-gradient-to-l from-color-surface-interactive-hover via-color-surface-interactive-hover to-transparent;
-  @apply group-focus-within:visible group-hover:visible;
-
-  &:hover,
-  &:focus-within {
-    @apply visible;
-  }
-}
-
-.related-resource-overflow-button {
-  @apply pointer-events-auto relative p-[3px];
-
-  &:hover,
-  &:focus,
-  &:active,
-  &:focus-visible,
-  &.open {
-    .button-affordance {
-      @apply border-color-border-strong bg-color-surface-faint;
-    }
-  }
-
-  .button-affordance {
-    @apply top-[4px] right-0 flex rounded p-1;
-    @apply border border-transparent text-color-foreground-primary;
-  }
-}
-
 .related-resource-link {
   @apply relative grid items-start gap-2 rounded border border-transparent py-[5px];
   @apply -ml-[8px] -mr-[4px] w-[calc(100%+12px)] pl-[8px] pr-3;

diff --git a/web/app/styles/components/overflow-menu.scss b/web/app/styles/components/overflow-menu.scss
@@ -0,0 +1,38 @@
+.overflow-button {
+  @apply pointer-events-auto relative p-[3px];
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-visible,
+  &.open {
+    .button-affordance {
+      @apply border-color-border-strong bg-color-surface-faint;
+    }
+  }
+
+  .button-affordance {
+    @apply top-[4px] right-0 flex rounded p-1;
+    @apply border border-transparent text-color-foreground-primary;
+  }
+}
+
+.overflow-menu-item-button {
+  @apply flex w-full space-x-2 py-2 px-4 leading-none;
+
+  > .flight-icon {
+    @apply text-inherit;
+  }
+}
+
+.overflow-button-container {
+  @apply pointer-events-none absolute top-0 -right-1;
+  @apply flex w-16 justify-end rounded-tr;
+  @apply bg-gradient-to-l from-color-surface-interactive-hover via-color-surface-interactive-hover to-transparent;
+  @apply group-focus-within:visible group-hover:visible;
+
+  &:hover,
+  &:focus-within {
+    @apply visible;
+  }
+}
diff --git a/web/tests/integration/components/document/sidebar/related-resources-test.ts b/web/tests/integration/components/document/sidebar/related-resources-test.ts
@@ -22,7 +22,7 @@ const EXTERNAL_RESOURCE_SELECTOR = ".external-resource";
 const HEADER_SELECTOR = ".sidebar-section-header";
 const ERROR_MESSAGE_SELECTOR = ".failed-to-load-text";
 const ERROR_BUTTON_SELECTOR = "[data-test-related-resources-error-button]";
-const OVERFLOW_BUTTON_SELECTOR = ".related-resource-overflow-button";
+const OVERFLOW_BUTTON_SELECTOR = ".overflow-button";
 const EDIT_BUTTON_SELECTOR = "[data-test-overflow-menu-action='edit']";
 const REMOVE_BUTTON_SELECTOR = "[data-test-overflow-menu-action='remove']";
 const EDIT_MODAL_SELECTOR = "[data-test-add-or-edit-external-resource-modal]";

diff --git a/web/tests/integration/components/document/sidebar/related-resources/list-item-test.ts b/web/tests/integration/components/document/sidebar/related-resources/list-item-test.ts
@@ -11,11 +11,9 @@ import htmlElement from "hermes/utils/html-element";
 
 const RELATED_RESOURCE_SELECTOR = ".related-resource";
 const RELATED_RESOURCE_LINK_SELECTOR = ".related-resource-link";
-const OVERFLOW_BUTTON_SELECTOR = ".related-resource-overflow-button";
-const OVERFLOW_MENU_BUTTON_SELECTOR =
-  ".related-resources-overflow-menu-item-button";
-const OVERFLOW_MENU_SELECTOR =
-  "[data-test-related-resources-list-item-overflow-menu]";
+const OVERFLOW_BUTTON_SELECTOR = ".overflow-button";
+const OVERFLOW_MENU_BUTTON_SELECTOR = ".overflow-menu-item-button";
+const OVERFLOW_MENU_SELECTOR = "[data-test-overflow-menu]";
 const DROPDOWN_LIST_ITEM_SELECTOR = ".x-dropdown-list-item";
 
 const RESOURCE_TITLE_SELECTOR = "[data-test-resource-title]";

diff --git a/web/tests/integration/components/related-resources/overflow-menu-test.ts b/web/tests/integration/components/related-resources/overflow-menu-test.ts
@@ -1,23 +1,23 @@
 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 { OverflowItem } from "hermes/components/overflow-menu";
 import { module, test } from "qunit";
 
-const POPOVER = "[data-test-related-resources-list-item-overflow-menu]";
+const POPOVER = "[data-test-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 {
+interface OverflowMenuTestContext 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) {
+  test("it creates a menu from a list of items", async function (this: OverflowMenuTestContext, assert) {
     let actionOneCount = 0;
     let actionTwoCount = 0;
 
@@ -34,8 +34,8 @@ module("Integration | Component | related-resources/add", function (hooks) {
       },
     });
 
-    await render<RelatedResourcesOverflowMenuTestContext>(hbs`
-      <RelatedResources::OverflowMenu
+    await render<OverflowMenuTestContext>(hbs`
+      <OverflowMenu
         data-test-overflow-popover
         @items={{this.items}}
       />