Merge pull request #11848 from dacook/vertical_ellipsis_menu_component

Vertical ellipsis menu component

.rubocop_styleguide.yml

@@ -70,6 +70,10 @@ Rails/SkipsModelValidations:
     - "update_column"
     - "update_columns"
 
+Rails/OutputSafety:
+  Exclude:
+    - 'spec/**/*'
+
 Style/Documentation:
   Enabled: false
 

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/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.scss

@@ -30,7 +30,7 @@
       display: block;
     }
 
-    .vertical-ellipsis-menu-content-item {
+    & > a {
       display: block;
       padding: 5px 10px;
       cursor: pointer;

app/views/admin/products_v3/_table.html.haml

@@ -67,7 +67,10 @@
             %td.align-left
               .content= product.inherits_properties ? 'YES' : 'NO' #TODO: consider using https://github.com/RST-J/human_attribute_values, else use I18n.t (also below)
             %td.align-right
-              = render partial: 'admin/products_v3/components/product_actions', locals: { product: product }
+              = render(VerticalEllipsisMenuComponent.new) do
+                = 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)
+
           - product.variants.each do |variant|
             = form.fields_for("products][][variants_attributes][", variant, index: nil) do |variant_form|
               %tr.condensed
@@ -94,4 +97,5 @@
                 %td.align-left
                   -# empty
                 %td.align-right
-                  = render partial: 'admin/products_v3/components/product_actions', locals: { product: product, variant: variant }
+                  = render(VerticalEllipsisMenuComponent.new) do
+                    = link_to t('admin.products_page.actions.edit'), edit_admin_product_variant_path(product, variant)

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

@@ -1,8 +0,0 @@
-.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), class: "vertical-ellipsis-menu-content-item"
-    - else
-      = link_to t('admin.products_page.actions.edit'), edit_admin_product_path(product), class: "vertical-ellipsis-menu-content-item"
-      = link_to t('admin.products_page.actions.clone'), clone_admin_product_path(product), class: "vertical-ellipsis-menu-content-item"

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";

config/application.rb

@@ -248,5 +248,7 @@ module Openfoodnetwork
     config.active_storage.url_options = config.action_controller.default_url_options
 
     config.exceptions_app = self.routes
+
+    config.view_component.generate.sidecar = true # Always generate components in subfolders
   end
 end

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