Move vertical ellipsis menu to a ViewComponent

Javascript hasn't been moved in, as we don't seem to be set up for that yet.

We could make it smarter, and pass in an array of parameters to build the links (as in _order_links.html.haml). But why make it complicated if we don't need to?

app/components/vertical_ellipsis_menu_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class VerticalEllipsisMenuComponent < ViewComponent::Base
+end

app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.html.haml

@@ -0,0 +1,4 @@
+.vertical-ellipsis-menu{ "data-controller": "vertical-ellipsis-menu" }
+  %i.fa.fa-ellipsis-v{ "data-action": "click->vertical-ellipsis-menu#toggle" }
+  .vertical-ellipsis-menu-content{ "data-vertical-ellipsis-menu-target": "content" }
+    = content

app/views/admin/products_v3/components/_product_actions.html.haml

@@ -1,8 +1,6 @@
-.vertical-ellipsis-menu{ "data-controller": "vertical-ellipsis-menu" }
-  %i.fa.fa-ellipsis-v{ "data-action": "click->vertical-ellipsis-menu#toggle" }
-  .vertical-ellipsis-menu-content{ "data-vertical-ellipsis-menu-target": "content" }
-    - if defined?(variant)
-      = link_to t('admin.products_page.actions.edit'), edit_admin_product_variant_path(product, variant)
-    - else
-      = link_to t('admin.products_page.actions.edit'), edit_admin_product_path(product)
-      = link_to t('admin.products_page.actions.clone'), clone_admin_product_path(product)
+= render(VerticalEllipsisMenuComponent.new) do
+  - if defined?(variant)
+    = link_to t('admin.products_page.actions.edit'), edit_admin_product_variant_path(product, variant)
+  - else
+    = link_to t('admin.products_page.actions.edit'), edit_admin_product_path(product)
+    = link_to t('admin.products_page.actions.clone'), clone_admin_product_path(product)

app/webpacker/css/admin_v3/all.scss

@@ -113,7 +113,6 @@
 @import "../admin/reports";
 @import "components/select2"; // admin_v3
 @import "components/sidebar-item"; // admin_v3
-@import "components/vertical_ellipsis_menu"; // admin_v3 and only V3
 @import "../admin/side_menu";
 @import "../admin/tables";
 @import "../admin/tag_rules";
@@ -130,4 +129,5 @@
 
 @import "app/components/help_modal_component/help_modal_component";
 @import "app/components/confirm_modal_component/confirm_modal_component";
+@import "app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component"; // admin_v3 and only V3
 @import "app/webpacker/css/admin/trix.scss";

spec/components/vertical_ellipsis_menu_component_spec.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+describe VerticalEllipsisMenuComponent, type: :component do
+  it "displays the included links" do
+    content = "<a href>Edit</a>"
+    render_inline(VerticalEllipsisMenuComponent.new.with_content(content.html_safe))
+
+    expect(page).to have_selector "a", text: "Edit"
+  end
+end