Merge pull request #11577 from jibees/10956-use-cable_ready-instead-o…

…f-morph

Admin, Orders list: when capturing an order, fix an issue that makes the tooltip invisible (+ errors in the console)

app/views/admin/enterprises/form/_address.html.haml

@@ -41,7 +41,7 @@
       = af.label :latitude, t(:latitude)
       \/
       = af.label :longitude, t(:longitude)
-      = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('latitude_longitude_tip')}
+      = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('latitude_longitude_tip')}
     .four.columns
       = af.text_field :latitude, { placeholder: t(:latitude_placeholder) }
     .four.columns.omega

app/views/admin/enterprises/form/_business_details.html.haml

@@ -80,7 +80,7 @@
     %legend= t('.invoice_item_sorting_legend')
   .three.columns.alpha
     %label= t('.sort_items_by_supplier?')
-    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.sort_items_by_supplier_tip')}
+    = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.sort_items_by_supplier_tip')}
   .three.columns
     = f.radio_button :preferred_invoice_order_by_supplier, true
     = f.label :preffered_invoice_order_by_supplier, t('.enabled'), value: :true

app/views/admin/enterprises/form/_contact.html.haml

@@ -6,7 +6,7 @@
 .row
   .alpha.three.columns
     = f.label :email_address, t('.email_address')
-    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.email_address_tip')}
+    = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.email_address_tip')}
 
   .omega.eight.columns
     = f.text_field :email_address, { placeholder: t('.email_address_placeholder') }
@@ -18,7 +18,7 @@
 .row
   .alpha.three.columns
     = f.label :whatsapp_phone, t('.whatsapp_phone')
-    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.whatsapp_phone_tip')}
+    = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.whatsapp_phone_tip')}
 
   .omega.eight.columns
     = f.text_field :whatsapp_phone, { placeholder: t('.whatsapp_phone_placeholder') }

app/views/admin/enterprises/form/_permalink.html.haml

@@ -3,7 +3,7 @@
     .row
       .three.columns.alpha
         = label_tag :permalink, t('.permalink')
-        = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.permalink_tip', link: main_app.root_url)}
+        = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.permalink_tip', link: main_app.root_url)}
       .eight.columns
         = text_field_tag "enterprise[permalink]", @enterprise.permalink, data: { action: "input->permalink#validate", "permalink-target": "permalinkField" }
       .two.columns.omega
@@ -20,13 +20,13 @@
     .row
       .three.columns.alpha
         %label= t('.link_to_front')
-        = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.link_to_front_tip')}
+        = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.link_to_front_tip')}
       .eight.columns.omega
         - front_shop_path = "#{main_app.root_url}#{@enterprise.permalink}/shop"
         = link_to front_shop_path, front_shop_path , target: "_blank"
   .row
     .three.columns.alpha
       = label_tag :id, t('.ofn_uid')
-      = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.ofn_uid_tip')}
+      = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.ofn_uid_tip')}
     .six.columns
       = @enterprise.id

app/views/admin/enterprises/form/_primary_details.html.haml

@@ -8,21 +8,21 @@
   .row
     .three.columns.alpha
       = f.label :group_ids, t('.groups')
-      = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.groups_tip')}
+      = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.groups_tip')}
     .eight.columns.omega
       = f.collection_select :group_ids, @groups, :id, :name, {}, data: { controller: "tom-select", "tom-select-options-value": { plugins: ['remove_button'], maxItems: nil } }, class: "full-width", multiple: true, placeholder: t('.groups_placeholder')
 .row
   .three.columns.alpha
     %label= t('.primary_producer')
-    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.primary_producer_tip')}
+    = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.primary_producer_tip')}
   .five.columns.omega
     = f.check_box :is_primary_producer, data: { action: "change->primary-details#primaryProducerChanged" } 
     = f.label :is_primary_producer, t('.producer')
 - if spree_current_user.admin?
   .row
     .three.columns.alpha
       = f.label :sells, t('.sells')
-      = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.sells_tip')}
+      = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.sells_tip')}
     .two.columns
       = f.radio_button :sells, "none", 'ng-model' => 'Enterprise.sells', data: {action: "change->primary-details#enterpriseSellsChanged"} 
       = f.label :sells, t('.none'), value: "none"
@@ -37,7 +37,7 @@
 .row
   .three.columns.alpha
     %label= t('.visible_in_search')
-    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.visible_in_search_tip')}
+    = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.visible_in_search_tip')}
   .two.columns
     = f.radio_button :visible, "public", 'ng-model' => 'Enterprise.visible'
     = f.label :visible, t('.visible'), value: 'public'

app/views/admin/enterprises/form/_users.html.haml

@@ -6,7 +6,7 @@
     =f.label :owner_id, t('.owner')
     - if full_permissions
       %span.required *
-    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.owner_tip')}
+    = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.owner_tip')}
   .eight.columns.omega
     - if full_permissions
       = f.hidden_field :owner_id, class: "select2 fullwidth", 'user-select' => 'Enterprise.owner', 'ng-model' => 'Enterprise.owner'
@@ -18,7 +18,7 @@
     =f.label :user_ids, t('.notifications')
     - if full_permissions
       %span.required *
-    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.contact_tip')}
+    = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.contact_tip')}
   .eight.columns.omega
     - if full_permissions
       %select.select2.fullwidth{id: 'receives_notifications_dropdown', name: 'receives_notifications', ng: {model: 'receivesNotifications', init: "receivesNotifications = '#{@enterprise.contact.id}'"}}
@@ -32,7 +32,7 @@
     =f.label :user_ids, t('.managers')
     - if full_permissions
       %span.required *
-    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.managers_tip')}
+    = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.managers_tip')}
   .eight.columns.omega
     - if full_permissions
       %table.managers
@@ -63,7 +63,7 @@
       .three.columns.alpha
         %label
           = t('.invite_manager')
-        = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.invite_manager_tip')}
+        = render partial: 'admin/shared/whats_this_tooltip', locals: {tooltip_text: t('.invite_manager_tip')}
       .eight.columns.omega
         .row
           %a.button{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "invite-manager-modal" }

app/views/admin/shared/_tooltip.html.haml

@@ -1,6 +1,6 @@
 %div{"data-controller": "tooltip"}
-  %a{"data-tooltip-target": "element"}
-    = t('admin.whats_this')
+  %a{"data-tooltip-target": "element", href: link, class: link_class}
+    = link_text 
   .tooltip-container
     .tooltip{"data-tooltip-target": "tooltip"}
       = sanitize tooltip_text

app/views/admin/shared/_tooltip_button.html.haml

@@ -0,0 +1,7 @@
+%div{ "data-controller": "tooltip" }
+  %button{class: button_class, "data-reflex": button_reflex, "data-id": reflex_data_id, "data-tooltip-target": "element" }
+  .tooltip-container
+    .tooltip{"data-tooltip-target": "tooltip"}
+      = sanitize tooltip_text
+      .arrow{"data-tooltip-target": "arrow"}
+

app/views/admin/shared/_whats_this_tooltip.html.haml

@@ -0,0 +1 @@
+= render partial: 'admin/shared/tooltip', locals: {link_class: "" ,link: nil, link_text: t('admin.whats_this'),  tooltip_text: tooltip_text}

app/views/spree/admin/orders/_table_row.html.haml

@@ -14,6 +14,10 @@
         %div{ "data-controller": "tooltip", "data-tooltip-tip-value": order.special_instructions.to_s }
           %span.icon-warning-sign{ "data-tooltip-target": "element" }
             = t('spree.admin.orders.index.note')
+            .tooltip-container
+              .tooltip{"data-tooltip-target": "tooltip"}
+                = sanitize order.special_instructions.to_s
+                .arrow{"data-tooltip-target": "arrow"}
   %td.align-left
     %span.state{ class: order.state.to_s }
       = t('js.admin.orders.order_state.' + order.state.to_s)
@@ -41,13 +45,8 @@
     %div.row-loading-icons
       - if local_assigns[:success]
         %i.success.icon-ok-sign{"data-controller": "ephemeral"}
-    %a.icon_link.with-tip.icon-edit.no-text{href: edit_admin_order_path(order), "data-controller": "tooltip", "data-tooltip-tip-value": t('spree.admin.orders.index.edit'), "data-tooltip-target": "element"}
+    = render partial: 'admin/shared/tooltip', locals: {link_class: "icon_link with-tip icon-edit no-text" ,link: edit_admin_order_path(order), link_text: "",  tooltip_text: t('spree.admin.orders.index.edit')}
     - if order.ready_to_ship?
-      %div{ "data-controller": "tooltip", "data-tooltip-tip-value": t('spree.admin.orders.index.ship') }
-        %button.icon-road.icon_link.with-tip.no-text{"data-reflex": "click->Admin::OrdersReflex#ship", "data-id": order.id.to_s,
-        "data-tooltip-target": "element" }
-
+      = render partial: 'admin/shared/tooltip_button', locals: {button_class: "icon-road icon_link with-tip no-text", button_reflex: "click->Admin::OrdersReflex#ship", reflex_data_id: order.id.to_s,  tooltip_text: t('spree.admin.orders.index.ship')}
     - if order.payment_required? && order.pending_payments.reject(&:requires_authorization?).any?
-      %div{ "data-controller": "tooltip", "data-tooltip-tip-value": t('spree.admin.orders.index.capture') }
-        %button.icon-capture.icon_link.no-text{"data-reflex": "click->Admin::OrdersReflex#capture", "data-id": order.id.to_s,
-        "data-tooltip-target": "element" }
+      = render partial: 'admin/shared/tooltip_button', locals: {button_class: "icon-capture icon_link no-text", button_reflex: "click->Admin::OrdersReflex#capture", reflex_data_id: order.id.to_s,  tooltip_text: t('spree.admin.orders.index.capture')}

app/webpacker/controllers/tooltip_controller.js

@@ -1,16 +1,28 @@
 import { Controller } from "stimulus";
 import { computePosition, offset, arrow } from "@floating-ui/dom";
 
+// This is meant to be used with the follwing html where element can be a
+// "div", "a", "span" or "button", etc... :
+//
+//  <div data-controller="tooltip">
+//    <element data-tooltip-target="element">
+//    <div class="tooltip-container">
+//      <div class="tooltip" data-tooltip-target="tooltip">
+//        tooltip_text
+//        <div class=arrow data-tooltip-target="arrow"></div>
+//      </div>
+//    </div>
+//  </div>
+//
+//  You can also use this partial app/views/admin/shared/_tooltip.html.haml
+
 export default class extends Controller {
   static targets = ["element", "tooltip", "arrow"];
   static values = {
-    tip: String,
     placement: { type: String, default: "top" },
   };
 
   connect() {
-    if (this.hasTipValue) { this.insertToolTipMarkup() }
-
     this.elementTarget.addEventListener("mouseenter", this.showTooltip);
     this.elementTarget.addEventListener("mouseleave", this.hideTooltip);
   }
@@ -56,23 +68,4 @@ export default class extends Controller {
   hideTooltip = () => {
     this.tooltipTarget.style.display = "";
   };
-
-  insertToolTipMarkup() {
-    let container = document.createElement("div");
-    let tooltip = document.createElement("div");
-    let arrow = document.createElement("div");
-    let text = document.createTextNode(this.tipValue);
-
-    container.classList.add("tooltip-container");
-    tooltip.classList.add("tooltip");
-    tooltip.setAttribute("data-tooltip-target", "tooltip");
-    arrow.classList.add("arrow");
-    arrow.setAttribute("data-tooltip-target", "arrow");
-
-    container.appendChild(tooltip);
-    tooltip.appendChild(text);
-    tooltip.appendChild(arrow);
-
-    this.elementTarget.appendChild(container);
-  }
 }

app/webpacker/css/admin/shared/tables.scss

@@ -84,7 +84,7 @@ table {
         background-color: $color-notice;
         color: $color-1;
       }
-      .icon-edit:hover, .icon-capture:hover, .icon-ok:hover, .icon-plus:hover {
+      .icon-edit:hover, .icon-capture:hover, .icon-ok:hover, .icon-plus:hover, .icon-road:hover {
         background-color: $color-success;
         color: $color-1;
       }

spec/system/admin/orders_spec.rb

@@ -443,8 +443,9 @@
 
         it "displays a note with order instructions" do
           within "tr#order_#{order3.id}" do
-            expect(page).to have_content I18n.t('spree.admin.orders.index.note')
-            expect(page).to have_css "[data-tooltip-tip-value='#{order3.special_instructions}']"
+            expect(page).to have_content "Note"
+            find(".icon-warning-sign").hover
+            expect(page).to have_content /#{order3.special_instructions}/i
           end
         end
       end
@@ -750,6 +751,33 @@
           end
         end
 
+        it "displays Ship and Edit tooltips, after capturing a payment" do
+          within "tr#order_#{order.id}" do
+            # checks the order has an uncaptured payment
+            find(".icon-capture").hover
+            expect(page).to have_content "Capture"
+
+            # captures the payment
+            find(".icon-capture").click
+            expect(page).not_to have_content "Capture"
+
+            # checks shipment state
+            expect(page).to have_content "READY"
+
+            # move away from the Ship button so we can trigger the mouseenter event by moving back.
+            # We are already on the "Ship" button when it gets rendered because of
+            # the previous click
+            find(".icon-edit").hover
+            # mouse-hovers and finds Ship tooltip
+            find(".icon-road").hover
+            expect(page).to have_content "Ship"
+
+            # mouse-hovers and finds Edit tooltip
+            find(".icon-edit").hover
+            expect(page).to have_content "Edit"
+          end
+        end
+
         it "displays Edit tooltip" do
           within "tr#order_#{order.id}" do
             # checks shipment state