From 6e149d37bb30a7e42a13f779acf1bcc1aa0bef8f Mon Sep 17 00:00:00 2001
From: Stephan de Wit <stephan.de.wit@deciso.com>
Date: Wed, 21 Aug 2024 15:47:35 +0200
Subject: [PATCH] dashboard: grid header button consistency and behavior
 (https://github.com/opnsense/core/issues/7737)

---
 .../www/js/opnsense_widget_manager.js         | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/opnsense/www/js/opnsense_widget_manager.js b/src/opnsense/www/js/opnsense_widget_manager.js
index c98f7b5c7..1c1dde757 100644
--- a/src/opnsense/www/js/opnsense_widget_manager.js
+++ b/src/opnsense/www/js/opnsense_widget_manager.js
@@ -264,12 +264,14 @@ class WidgetManager  {
             </button>
         `));
         $btn_group.append($(`
-            <button class="btn btn-default" id="add_widget">
+            <button class="btn btn-default" id="add_widget" style="display: none;" data-toggle="tooltip" title="${this.gettext.addwidget}">
                 <i class="fa fa-plus-circle fa-fw"></i>
-                ${this.gettext.addwidget}
             </button>
         `));
-        $btn_group.append($(`<button class="btn btn-secondary" id="restore-defaults">${this.gettext.restore}</button>`));
+        $btn_group.append($(`
+            <button class="btn btn-secondary" style="display:none;" id="restore-defaults" data-toggle="tooltip" title=" ${this.gettext.restore}">
+                <i class="fa fa-window-restore fa-fw"></i>
+            </button>`));
         $btn_group.append($(`
             <button class="btn btn-secondary" id="edit-grid" data-toggle="tooltip" title="${this.gettext.edit}">
                 <i class="fa fa-pencil fa-fw"></i>
@@ -279,6 +281,10 @@ class WidgetManager  {
         // Append the button group to the container
         $btn_group.appendTo($btn_group_container);
 
+        $('#add_widget').tooltip({placement: 'bottom', container: 'body'});
+        $('#restore-defaults').tooltip({placement: 'bottom', container: 'body'});
+        $('#edit-grid').tooltip({placement: 'bottom', container: 'body'});
+
         // Initially hide the save button
         $('#save-grid').hide();
 
@@ -374,6 +380,8 @@ class WidgetManager  {
                 $('.widget-content').css('cursor', 'grab');
                 $('.close-handle').show();
                 $('.edit-handle').show();
+                $('#add_widget').show();
+                $('#restore-defaults').show();
             } else {
                 this.runtimeOptions.editMode = false;
                 this.grid.enableMove(false);
@@ -381,14 +389,14 @@ class WidgetManager  {
                 $('.widget-content').css('cursor', 'default');
                 $('.close-handle').hide();
                 $('.edit-handle').hide();
+                $('#add_widget').hide();
+                $('#restore-defaults').hide();
             }
         });
 
         $('#edit-grid').mouseup(function() {
             $(this).blur();
         });
-
-        $('#edit-grid').tooltip();
     }
 
     /* Executes all widget post-render callbacks asynchronously and in "parallel".
@@ -626,8 +634,13 @@ class WidgetManager  {
                             $('#save-check').toggleClass("show hide");
                             $('#save-btn-text').toggleClass("hide show");
                             $('#save-grid').prop('disabled', false);
+
+                            if ($('#edit-grid').hasClass('active')) {
+                                $('#edit-grid').click();
+                            }
                         }, 500)
                     }
+
                 }, 300); // Artificial delay to give more feedback on button click
             }
         });