From 968a224da60dcf0ef5b3f7919c8e9727edf31828 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 23 Nov 2023 17:29:14 +1100
Subject: [PATCH] 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 |  4 ++++
 .../vertical_ellipsis_menu_component.html.haml     |  4 ++++
 .../vertical_ellipsis_menu_component.scss}         |  0
 .../components/_product_actions.html.haml          | 14 ++++++--------
 app/webpacker/css/admin_v3/all.scss                |  2 +-
 .../vertical_ellipsis_menu_component_spec.rb       | 12 ++++++++++++
 6 files changed, 27 insertions(+), 9 deletions(-)
 create mode 100644 app/components/vertical_ellipsis_menu_component.rb
 create mode 100644 app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.html.haml
 rename app/{webpacker/css/admin_v3/components/vertical_ellipsis_menu.scss => components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.scss} (100%)
 create mode 100644 spec/components/vertical_ellipsis_menu_component_spec.rb

diff --git a/app/components/vertical_ellipsis_menu_component.rb b/app/components/vertical_ellipsis_menu_component.rb
new file mode 100644
index 0000000000..4915eaafb5
--- /dev/null
+++ b/app/components/vertical_ellipsis_menu_component.rb
@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class VerticalEllipsisMenuComponent < ViewComponent::Base
+end
diff --git a/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.html.haml b/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.html.haml
new file mode 100644
index 0000000000..ea67c8ef00
--- /dev/null
+++ b/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
diff --git a/app/webpacker/css/admin_v3/components/vertical_ellipsis_menu.scss b/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.scss
similarity index 100%
rename from app/webpacker/css/admin_v3/components/vertical_ellipsis_menu.scss
rename to app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.scss
diff --git a/app/views/admin/products_v3/components/_product_actions.html.haml b/app/views/admin/products_v3/components/_product_actions.html.haml
index cd50dd497b..a37221695f 100644
--- a/app/views/admin/products_v3/components/_product_actions.html.haml
+++ b/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)
diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index f2d6fe5bd4..ed03376010 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/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";
diff --git a/spec/components/vertical_ellipsis_menu_component_spec.rb b/spec/components/vertical_ellipsis_menu_component_spec.rb
new file mode 100644
index 0000000000..f073cd078e
--- /dev/null
+++ b/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