diff --git a/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.scss b/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.scss index dd698ee331..965519f3b7 100644 --- a/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.scss +++ b/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component.scss @@ -19,7 +19,9 @@ background-color: white; box-shadow: $box-shadow; border-radius: 3px; + width: max-content; min-width: 80px; + max-width: 110px; display: none; z-index: 100; @@ -27,6 +29,15 @@ display: block; } + // Fade out so user can see which option was selected + &.selected { + transition: + opacity 0.2s linear, + visibility 0.2s linear; + opacity: 0; + visibility: hidden; + } + & > a { display: block; padding: 5px 10px; diff --git a/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_controller.js b/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_controller.js index 97b13592bd..fd02f94cf9 100644 --- a/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_controller.js +++ b/app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_controller.js @@ -6,6 +6,9 @@ export default class extends Controller { connect() { super.connect(); window.addEventListener("click", this.#hideIfClickedOutside); + + // Close menu when making a selection + this.contentTarget.addEventListener("click", this.#selected); } disconnect() { @@ -13,17 +16,22 @@ export default class extends Controller { } toggle() { - this.contentTarget.classList.toggle("show"); + this.#toggleShow(); } + #selected = () => { + this.contentTarget.classList.add("selected"); + }; + #hideIfClickedOutside = (event) => { if (this.element.contains(event.target)) { return; } - this.#hide(); + this.#toggleShow(false); }; - #hide() { - this.contentTarget.classList.remove("show"); + #toggleShow(force = undefined) { + this.contentTarget.classList.toggle("show", force); + this.contentTarget.classList.remove("selected"); } } diff --git a/app/views/admin/products_v3/_variant_row.html.haml b/app/views/admin/products_v3/_variant_row.html.haml index a0c59a3131..77153a0536 100644 --- a/app/views/admin/products_v3/_variant_row.html.haml +++ b/app/views/admin/products_v3/_variant_row.html.haml @@ -4,7 +4,7 @@ %td.col-image -# empty - variant.source_variants.each do |source_variant| - = content_tag(:span, "🔗", title: t('admin.products_page.variant_row.sourced_from', source_name: source_variant.display_name, source_id: source_variant.id, hub_name: variant.hub&.name)) + = content_tag(:span, "🔗", title: t('admin.products_page.variant_row.sourced_from', source_name: source_variant.full_name, source_id: source_variant.id, hub_name: variant.hub&.name)) %td.col-name.field.naked_inputs = f.hidden_field :id = f.text_field :display_name, 'aria-label': t('admin.products_page.columns.name'), placeholder: variant.product.name diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 7ea346638a..1a9fd1b755 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -375,6 +375,6 @@ .slide-in { transform-origin: top; - animation: slideInTop 0.5s forwards; + animation: slideInTop 0.5s; } } diff --git a/script/reviewdog.sh b/script/reviewdog.sh index 5bde805fba..a02df06e4f 100755 --- a/script/reviewdog.sh +++ b/script/reviewdog.sh @@ -6,7 +6,7 @@ set -o pipefail -echo "::group:: Running prettier with reviewdog 🐶 ..." +echo -e "\nRunning prettier with reviewdog 🐶 ..." "$(npm root)/.bin/prettier" --check . 2>&1 | sed --regexp-extended 's/(\[warn\].*)$/\1 File is not properly formatted./' \ | reviewdog \ @@ -25,7 +25,7 @@ echo "::group:: Running prettier with reviewdog 🐶 ..." prettier=$? -echo "::group:: Running rubocop with reviewdog 🐶 ..." +echo -e "\nRunning rubocop with reviewdog 🐶 ..." bundle exec rubocop \ --fail-level info \ @@ -39,7 +39,7 @@ bundle exec rubocop \ rubocop=$? -echo "::group:: Running haml-lint with reviewdog 🐶 ..." +echo -e "\nRunning haml-lint with reviewdog 🐶 ..." bundle exec haml-lint \ --fail-level warning \ diff --git a/spec/javascripts/stimulus/vertical_ellipsis_menu_controller_test.js b/spec/javascripts/stimulus/vertical_ellipsis_menu_controller_test.js index 1e8c7d1fbb..5a5956c45b 100644 --- a/spec/javascripts/stimulus/vertical_ellipsis_menu_controller_test.js +++ b/spec/javascripts/stimulus/vertical_ellipsis_menu_controller_test.js @@ -16,12 +16,13 @@ describe("VerticalEllipsisMenuController test", () => {
...
- +
`; const button = document.getElementById("button"); const content = document.getElementById("content"); + const item = document.getElementById("item"); }); it("add show class to content when toggle is called", () => { @@ -43,4 +44,15 @@ describe("VerticalEllipsisMenuController test", () => { document.body.click(); expect(content.classList.contains("show")).toBe(false); }); + + it("adds selected class to content when clicking a menu item", () => { + button.click(); + expect(content.classList.contains("selected")).toBe(false); + item.click(); + expect(content.classList.contains("selected")).toBe(true); + + // and removes it again when clicking button again + button.click(); + expect(content.classList.contains("selected")).toBe(false); + }); }); diff --git a/spec/system/admin/products_v3/actions_spec.rb b/spec/system/admin/products_v3/actions_spec.rb index 2a51a1dfc9..24ad2c6ceb 100644 --- a/spec/system/admin/products_v3/actions_spec.rb +++ b/spec/system/admin/products_v3/actions_spec.rb @@ -295,12 +295,11 @@ RSpec.describe 'As an enterprise user, I can perform actions on the products scr # Close action menu (shouldn't need this, it should close itself) last_box.click - # And I can perform actions on the new product + # And I can perform actions on the new variant within last_box do page.find(".vertical-ellipsis-menu").click expect(page).to have_link "Edit" - # expect(page).to have_link "Clone" # tofix: menu is partially obscured - # expect(page).to have_link "Delete" # it's not a proper link + expect(page).to have_selector "a", text: "Delete" # it's not a proper link fill_in "Name", with: "My copy of Apples" end @@ -339,12 +338,10 @@ RSpec.describe 'As an enterprise user, I can perform actions on the products scr } describe "Actions columns (delete)" do - before do - visit admin_products_url - end - it "shows an actions menu with a delete link when clicking on icon for product. " \ "doesn't show delete link for the single variant" do + visit admin_products_url + within product_selector do page.find(".vertical-ellipsis-menu").click expect(page).to have_css(delete_option_selector)