Merge branch '6.0/dismiss-modal-on-submit'

bestpractical · Sep 10, 2024 · b896c09 · b896c09
2 parents 1d5b343 + 1723352
commit b896c09
Show file tree

Hide file tree

Showing 15 changed files with 49 additions and 85 deletions.
diff --git a/lib/RT/Interface/Web/MenuBuilder.pm b/lib/RT/Interface/Web/MenuBuilder.pm
@@ -217,7 +217,13 @@ sub BuildMainNav {
         my $articles = $top->child( articles => title => loc('Articles'), path => "/Articles/index.html");
         $articles->child( articles => title => loc('Overview'), path => "/Articles/index.html" );
         $articles->child( topics   => title => loc('Topics'),   path => "/Articles/Topics.html" );
-        $articles->child( create   => title => loc('Create'),   path => "/Articles/Article/PreCreate.html" );
+        $articles->child(
+            create     => title => loc('Create'),
+            path       => "/Articles/Article/PreCreate.html",
+            attributes => {
+                'hx-boost' => 'false',
+            },
+        );
         $articles->child( search   => title => loc('Search'),   path => "/Articles/Article/Search.html" );
     }
 
@@ -1113,9 +1119,12 @@ sub _BuildAssetMenuActionSubmenu {
     my $actions = $page->child("actions", title => HTML::Mason::Commands::loc("Actions"));
     $actions->child(
         "create-linked-ticket",
-        class => 'asset-create-linked-ticket',
-        title => HTML::Mason::Commands::loc("Create linked ticket"),
-        path  => ( $is_self_service ? '/SelfService' : '' ) . "/Asset/CreateLinkedTicket.html?Asset=$id"
+        class      => 'asset-create-linked-ticket',
+        title      => HTML::Mason::Commands::loc("Create linked ticket"),
+        path       => ( $is_self_service ? '/SelfService' : '' ) . "/Asset/CreateLinkedTicket.html?Asset=$id",
+        attributes => {
+            'hx-boost' => 'false',
+        },
     );
 
     return if $is_self_service;

diff --git a/share/html/Admin/Users/Modify.html b/share/html/Admin/Users/Modify.html
@@ -231,7 +231,7 @@ <h5 class="modal-title"><&|/l&>Anonymize User</&></h5>
 
           <div class="row mt-2 justify-content-end">
             <div class="col-auto">
-              <button type="Submit" class="button btn-primary btn form-control"><&|/l&>Anonymize</&></button>
+              <button type="Submit" data-bs-dismiss="modal" class="button btn-primary btn form-control"><&|/l&>Anonymize</&></button>
             </div>
           </div>
         </form>

diff --git a/share/html/Articles/Elements/CreateInClass b/share/html/Articles/Elements/CreateInClass
@@ -55,5 +55,5 @@
     </div>
   </div>
 
-  <& /Elements/Submit, Label => loc("Go"), Caption => loc("This will take you to the Create Article page."), FullWidth => 1 &>
+  <& /Elements/Submit, Label => loc("Go"), Caption => loc("This will take you to the Create Article page."), FullWidth => 1, Attributes => q{data-bs-dismiss="modal"} &>
 </form>
diff --git a/share/html/Asset/Elements/CreateLinkedTicket b/share/html/Asset/Elements/CreateLinkedTicket
@@ -116,5 +116,5 @@ foreach my $asset (@asset_objs){
 %     }
 % }
 
-<& /Elements/Submit, Label => loc("Go"), Caption => loc("This will take you to a partially filled ticket creation form."), FullWidth => 1 &>
+<& /Elements/Submit, Label => loc("Go"), Caption => loc("This will take you to a partially filled ticket creation form."), FullWidth => 1, Attributes => q{data-bs-dismiss="modal"} &>
 </form>
diff --git a/share/html/Dashboards/Modify.html b/share/html/Dashboards/Modify.html
@@ -109,7 +109,7 @@ <h5 class="modal-title"><&|/l&>Really Delete?</&></h5>
       <div class="modal-footer">
         <div class="row mt-2 justify-content-end">
           <div class="col-auto">
-            <input type="submit" class="button btn btn-primary" name="Delete" value="<% loc('Delete') %>" />
+            <input type="submit" data-bs-dismiss="modal" class="button btn btn-primary" name="Delete" value="<% loc('Delete') %>" />
           </div>
         </div>
       </div>

diff --git a/share/html/Elements/AuthToken/Create b/share/html/Elements/AuthToken/Create
@@ -109,7 +109,7 @@
             </div>
           </div>
 
-          <& /Elements/Submit, Label => loc("Create"), Name => 'Create', FullWidth => 1 &>
+          <& /Elements/Submit, Label => loc("Create"), Name => 'Create', FullWidth => 1, Attributes => q{data-bs-dismiss="modal"} &>
         </form>
       </div>
     </div>

diff --git a/share/html/Elements/AuthToken/Edit b/share/html/Elements/AuthToken/Edit
@@ -69,8 +69,8 @@
 
           <div class="row mt-2 justify-content-end">
             <div class="col-auto">
-              <input type="submit" class="button btn btn-primary" name="Revoke" value="<% loc('Revoke') %>" />
-              <input type="submit" class="button btn btn-primary" name="Update" value="<% loc('Update') %>" />
+              <input type="submit" data-bs-dismiss="modal" class="button btn btn-primary" name="Revoke" value="<% loc('Revoke') %>" />
+              <input type="submit" data-bs-dismiss="modal" class="button btn btn-primary" name="Update" value="<% loc('Update') %>" />
             </div>
           </div>
         </form>

diff --git a/share/html/Elements/Header b/share/html/Elements/Header
@@ -148,6 +148,8 @@
   <& /Widgets/Spinner &>
 </div>
 
+<div class="modal" id="dynamic-modal"></div>
+
 <%INIT>
 my $lang = 'en';
 $lang = $session{'CurrentUser'}->LanguageHandle->language_tag

diff --git a/share/html/Elements/ShortcutHelp b/share/html/Elements/ShortcutHelp
@@ -52,7 +52,7 @@ $show_ticket_reply    => 0
 $show_ticket_comment  => 0
 </%args>
 
-<div class="modal-dialog modal-dialog-centered" role="document">
+<div class="modal-dialog modal-dialog-centered keyboard-shortcuts" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title"><&|/l&>Keyboard Shortcuts</&></h5>

diff --git a/share/html/Elements/Submit b/share/html/Elements/Submit
@@ -71,10 +71,10 @@ id="<%$id%>"
 
 % if ($AlternateLabel) {
   <span class="caption"><%$AlternateCaption%></span>
-  <input type="submit" <% $OnClick ? qq[ onclick="$OnClick"] : '' | n %> <% $Name ? qq[ name="$Name"] : '' | n %> <% $SubmitId ? qq[ id="$SubmitId"] : '' | n %> value="<%$AlternateLabel%>" class="btn btn-primary form-control button" />
+  <input type="submit" <% $Attributes // '' |n %> <% $OnClick ? qq[ onclick="$OnClick"] : '' | n %> <% $Name ? qq[ name="$Name"] : '' | n %> <% $SubmitId ? qq[ id="$SubmitId"] : '' | n %> value="<%$AlternateLabel%>" class="btn btn-primary form-control button" />
 % } else {
   <span class="caption"><%$Caption%></span>
-  <input type="submit" <% $OnClick ? qq[ onclick="$OnClick"] : '' | n %> <% $Name ? qq[ name="$Name"] : '' | n %> <% $SubmitId ? qq[ id="$SubmitId"] : '' | n %> value="<%$Label%>" class="button btn btn-primary form-control" />
+  <input type="submit" <% $Attributes // '' |n %> <% $OnClick ? qq[ onclick="$OnClick"] : '' | n %> <% $Name ? qq[ name="$Name"] : '' | n %> <% $SubmitId ? qq[ id="$SubmitId"] : '' | n %> value="<%$Label%>" class="button btn btn-primary form-control" />
 % }
 
 % if ( $Back ) {
@@ -120,6 +120,7 @@ $ResetLabel => loc('Reset')
 $SubmitId => undef
 $FullWidth => undef
 $id => undef
+$Attributes => ''
 </%ARGS>
 <%init>
 my $match;

diff --git a/share/html/Helpers/SavedSearchOptions b/share/html/Helpers/SavedSearchOptions
@@ -66,7 +66,7 @@
       </&>
       <div class="row mt-2 justify-content-end">
         <div class="col-auto">
-          <& /Elements/Submit, Label => loc('Save'), Name => 'SavedSearchOptionsSave' &>
+          <& /Elements/Submit, Label => loc('Save'), Name => 'SavedSearchOptionsSave', Attributes => q{data-bs-dismiss="modal"} &>
         </div>
       </div>
     </form>
@@ -105,7 +105,6 @@ if ( $SavedSearchId ) {
                                             $date->DurationAsString($new_value)
                                         )
                                     ],
-                                    hideModal => 1,
                                 },
                                 utf8 => 1,
                             );

diff --git a/share/html/Search/Elements/EditSearches b/share/html/Search/Elements/EditSearches
@@ -155,7 +155,7 @@
       <div class="modal-footer">
         <div class="row mt-2 justify-content-end">
           <div class="col-auto">
-            <input type="submit" class="button btn btn-primary" name="SavedSearchDelete" value="<% loc('Delete') %>" />
+            <input type="submit" class="button btn btn-primary" data-bs-dismiss="modal" name="SavedSearchDelete" value="<% loc('Delete') %>" />
           </div>
         </div>
       </div>

diff --git a/share/static/js/assets.js b/share/static/js/assets.js
@@ -1,16 +1,4 @@
 htmx.onLoad(function(elt) {
-    var showModal = function(html) {
-        var modal = jQuery("<div class='modal'></div>");
-        modal.append(html).appendTo("body");
-        modal.bind('modal:close', function(ev) { modal.remove(); })
-        modal.on('hide.bs.modal', function(ev) { modal.remove(); })
-        modal.modal('show');
-
-        // We need to refresh the select picker plugin on AJAX calls
-        // since the plugin only runs on page load.
-        refreshSelectpicker();
-    };
-
     const form = elt.closest(".ticket-assets") ? jQuery(elt).find("form") : jQuery(elt).find(".ticket-assets form");
     form.each(function(){
         this.addEventListener('htmx:configRequest', function(evt) {
@@ -28,10 +16,10 @@ htmx.onLoad(function(elt) {
         ev.preventDefault();
         var url = this.href.replace(/\/Asset\/CreateLinkedTicket\.html\?/g,
                                     '/Asset/Helpers/CreateLinkedTicket?');
-        jQuery.get(
-            url,
-            showModal
-        );
+
+        htmx.ajax('GET', url, '#dynamic-modal').then(() => {
+            bootstrap.Modal.getOrCreateInstance('#dynamic-modal').show();
+        });
     });
     jQuery(elt).find("#bulk-update-create-linked-ticket").click(function(ev){
         ev.preventDefault();
@@ -47,9 +35,8 @@ htmx.onLoad(function(elt) {
         }
         /* selected = chkArray.join(','); */
         var url = RT.Config.WebHomePath + '/Asset/Helpers/CreateLinkedTicket?' + selected;
-        jQuery.post(
-            url,
-            showModal
-        );
+        htmx.ajax('GET', url, '#dynamic-modal').then(() => {
+            bootstrap.Modal.getOrCreateInstance('#dynamic-modal').show();
+        });
     });
 });
diff --git a/share/static/js/keyboard-shortcuts.js b/share/static/js/keyboard-shortcuts.js
@@ -43,26 +43,11 @@ htmx.onLoad(function() {
                   '&show_ticket_reply=' + ( is_ticket_reply ? '1' : '0' ) +
                   '&show_ticket_comment=' + ( is_ticket_comment ? '1' : '0' );
 
-        jQuery.ajax({
-            url: url,
-            success: showModal,
-            error: function(xhr, reason) {
-                // give the browser a chance to redraw the readout
-                setTimeout(function () {
-                    alert(loc_key("shortcut_help_error") + " " + reason);
-                }, 100);
-            }
+        htmx.ajax('GET', url, '#dynamic-modal').then(() => {
+            bootstrap.Modal.getOrCreateInstance('#dynamic-modal').show();
         });
     };
 
-    var showModal = function(html) {
-       var modal = jQuery("<div class='modal keyboard-shortcuts'></div>");
-       modal.append(html).appendTo("body");
-       modal.bind('modal:close', function() { modal.remove(); })
-       modal.on('hide.bs.modal', function() { modal.remove(); })
-       modal.modal('show');
-    };
-
     Mousetrap.bind('g b', goBack);
     Mousetrap.bind('g f', goForward);
     Mousetrap.bind('g h', goHome);

diff --git a/share/static/js/util.js b/share/static/js/util.js
@@ -35,19 +35,6 @@ function toggle_upgrade_history(widget, selector) {
     jQuery(widget).toggleClass("rolled-up");
 }
 
-var showModal = function(html) {
-    var modal = jQuery("<div class='modal'></div>");
-    modal.append(html).appendTo("body");
-    modal.bind('modal:close', function(ev) { modal.remove(); })
-    modal.on('hide.bs.modal', function(ev) { modal.remove(); })
-    modal.modal('show');
-
-    // We need to refresh the select picker plugin on AJAX calls
-    // since the plugin only runs on page load.
-    refreshSelectpicker();
-    RT.Autocomplete.bind(modal);
-};
-
 /* Classes */
 function jQueryWrap( id ) {
     return typeof id == 'object' ? jQuery(id) : jQuery('#'+id);
@@ -782,14 +769,6 @@ jQuery(function() {
         jQuery(evt.detail.historyElt).find('.selectpicker').selectpicker('destroy').addClass('selectpicker');
     });
 
-    document.body.addEventListener('hideModal', function(evt) {
-        // Close modal after successful save
-        const modal = evt.detail.elt.closest('.modal.show');
-        if ( modal ) {
-            bootstrap.Modal.getInstance(modal).hide();
-        }
-    });
-
     document.body.addEventListener('actionsChanged', function(evt) {
         if ( evt.detail.value ) {
             for ( const action of evt.detail.value ) {
@@ -880,10 +859,9 @@ htmx.onLoad(function(elt) {
 
     jQuery(elt).find("#articles-create, .article-create-modal").click(function(ev){
         ev.preventDefault();
-        jQuery.get(
-            RT.Config.WebHomePath + "/Articles/Helpers/CreateInClass",
-            showModal
-        );
+        htmx.ajax('GET', RT.Config.WebHomePath + "/Articles/Helpers/CreateInClass", '#dynamic-modal').then(() => {
+            bootstrap.Modal.getOrCreateInstance('#dynamic-modal').show();
+        });
     });
 
     jQuery(elt).find(".card .card-header .toggle").each(function() {
@@ -1078,12 +1056,15 @@ htmx.onLoad(function(elt) {
     // Handle implicit form submissions like hitting Return/Enter on text inputs
     jQuery(elt).find('form[name=search-results-filter]').submit(filterSearchResults);
     jQuery(elt).find('a.permalink').click(function() {
-        var link = jQuery(this);
-        jQuery.get(
-            RT.Config.WebPath + "/Helpers/Permalink",
-            { Code: link.data('code'), URL: link.data('url') },
-            showModal
-        );
+        htmx.ajax('GET', RT.Config.WebPath + "/Helpers/Permalink", {
+            target: '#dynamic-modal',
+            values: {
+                Code: link.getAttribute('data-code'),
+                URL: this.getAttribute('data-url')
+            },
+        }).then(() => {
+            bootstrap.Modal.getOrCreateInstance('#dynamic-modal').show();
+        });
         return false;
     });