From a1e0981fee2cd69d50d876599afb078b46d4ddd1 Mon Sep 17 00:00:00 2001
From: murin <murin@elins.ru>
Date: Fri, 8 Nov 2024 10:51:32 +0300
Subject: Add tooltips for overflowing options of selects with
 available/selected columns in the query form

Marks options of selects with the "js-overflow-to-tooltip" class. Class is used to enable the use of this mechanism in other places.

If the content of an element, marked with the "js-overflow-to-tooltip" class, exits element boundaries and is clipped, a "title" attribute is set for the element with its text content as a value.
If an element already has a "title" attribute with non-empty value, it remains untouched.
---
 app/assets/javascripts/application.js  | 18 +++++++++++++++---
 app/helpers/queries_helper.rb          |  8 ++++++--
 app/views/my/blocks/_issues.erb        |  2 +-
 app/views/queries/_query_form.html.erb |  3 ++-
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 068ac98d8..f17d782e2 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -110,7 +110,8 @@ function hideFieldset(el) {
 
 // columns selection
 function moveOptions(theSelFrom, theSelTo) {
-  $(theSelFrom).find('option:selected').detach().prop("selected", false).appendTo($(theSelTo));
+  $(theSelFrom).find('option:selected').detach().prop("selected", false).appendTo($(theSelTo)).
+    filter('[title]').tooltip("close");
 }
 
 function moveOptionUp(theSel) {
@@ -1139,7 +1140,16 @@ function setupWikiTableSortableHeader() {
   });
 }
 
-$(function () {
+function initTooltips() {
+  $(".js-overflow-to-tooltip").each(function () {
+    const currentTitle = this.getAttribute('title');
+    if ((this.scrollWidth > this.clientWidth ||
+            this.scrollHeight > this.clientHeight) &&
+        !currentTitle) {
+      this.setAttribute('title', this.textContent);
+    }
+  });
+
   $("[title]:not(.no-tooltip)").tooltip({
     show: {
       delay: 400
@@ -1149,7 +1159,9 @@ $(function () {
       at: "center top"
     }
   });
-});
+}
+
+$(initTooltips);
 
 function inlineAutoComplete(element) {
     'use strict';
diff --git a/app/helpers/queries_helper.rb b/app/helpers/queries_helper.rb
index d2991fd25..70375e496 100644
--- a/app/helpers/queries_helper.rb
+++ b/app/helpers/queries_helper.rb
@@ -129,12 +129,16 @@ module QueriesHelper
 
   def query_available_inline_columns_options(query)
     (query.available_inline_columns - query.columns).
-      reject(&:frozen?).collect {|column| [column.caption, column.name]}
+      reject(&:frozen?).collect {|column| column_select_option(column)}
   end
 
   def query_selected_inline_columns_options(query)
     (query.inline_columns & query.available_inline_columns).
-      reject(&:frozen?).collect {|column| [column.caption, column.name]}
+      reject(&:frozen?).collect {|column| column_select_option(column)}
+  end
+
+  def column_select_option(column)
+    [column.caption, column.name, {class: 'js-overflow-to-tooltip'}]
   end
 
   def render_query_columns_selection(query, options={})
diff --git a/app/views/my/blocks/_issues.erb b/app/views/my/blocks/_issues.erb
index 33da64cd2..d114a3773 100644
--- a/app/views/my/blocks/_issues.erb
+++ b/app/views/my/blocks/_issues.erb
@@ -1,5 +1,5 @@
 <div class="contextual">
-  <%= link_to_function sprite_icon('settings', l(:label_options)), "$('##{block}-settings').toggle();", :class => 'icon-only icon-settings', :title => l(:label_options) %>
+  <%= link_to_function sprite_icon('settings', l(:label_options)), "$('##{block}-settings').toggle(); initTooltips();", :class => 'icon-only icon-settings', :title => l(:label_options) %>
 </div>
 
 <h3>
diff --git a/app/views/queries/_query_form.html.erb b/app/views/queries/_query_form.html.erb
index 68bc483a4..66a98426a 100644
--- a/app/views/queries/_query_form.html.erb
+++ b/app/views/queries/_query_form.html.erb
@@ -16,7 +16,7 @@
 
   <% if @query.available_columns.any? %>
     <fieldset id="options" class="collapsible collapsed">
-      <legend onclick="toggleFieldset(this);" class="icon icon-collapsed">
+      <legend onclick="toggleFieldset(this); initTooltips();" class="icon icon-collapsed">
         <%= sprite_icon("angle-right") %>
         <%= l(:label_options) %>
       </legend>
@@ -84,6 +84,7 @@ $(function ($) {
   $('input[name=display_type]').change(function (e) {
     if ($("#display_type_list").is(':checked')) {
       $('table#list-definition').show();
+      initTooltips();
     } else {
       $('table#list-definition').hide();
     }
-- 
2.25.1