Confirmation alert pops up when the user presses delete branch button (#40)

* Confirmation alert pops up when the user presses delete branch button

* Added icon to alert

Co-authored-by: Sarmishta Velury <[email protected]>

Author: isc-svelury

git-webui/release/share/git-webui/webui/css/git-webui.css

@@ -31,12 +31,28 @@ body {
   margin: 0;
   font: 10pt sans-serif;
 }
+
+#confirm-branch-delete p{
+  font-size:105%;
+}
+
+#confirm-delete, #cancel-delete {
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+}
+
+.modal-title pre{
+  display:inline;
+}
 #error-modal .modal-body {
   margin-bottom: 0;
 }
 .modal-header .close {
-  padding: 1rem 1rem;
-  margin: -0.51rem -0.5rem -1rem auto;
+  padding: 1.25rem 1.5rem;
+  margin: -1rem -1rem -1rem auto;
+}
+.alert-dismissible .close {
+  padding: .3rem 1.25rem;
 }
 #help-modal img {
   display: block;

git-webui/release/share/git-webui/webui/js/git-webui.js

@@ -205,16 +205,16 @@ webui.SideBarView = function(mainView) {
                                         '</svg>'+
                                         '</button>' +
                                     '</div>' +
-                                    '<div class="modal-body"><div class="list-group"></div></div>' +
+                                    '<div class="modal-body"></div>' +
                                 '</div>' +
                             '</div>' +
                         '</div>')[0];
         self.element.appendChild(popup);
-        var popupContent = $(".list-group", popup)[0];
+        var popupContent = $(".modal-body", popup)[0];
         $(self.buildAccordion(section, refs, id, undefined, "popup")).appendTo(popupContent);
         $(popupContent).find(".btn-delete-branch, .btn-checkout-local-branch, .btn-checkout-remote-branch").click(function() {
             $(popup).modal('hide');
-        })
+        });
         return popup;
     };
 
@@ -1819,13 +1819,58 @@ $(function () {
 
     $(document).on('click', '.btn-delete-branch', function(e) {
         e.preventDefault();
+        $("#confirm-branch-delete").remove(); //removes any remaining modals. If there are more than one modals, the ids are duplicated and event listeners won't work.
         var refName = $(this).parent().parent().parent().siblings(
             ".card-header").children("button").html();
 
-        webui.git("branch -d " + refName, function() {
-            webui.showWarning("Local branch " + refName + " deleted.");
-            updateSideBar();
+        console.log($(this).parent().parent().parent()[0]);
+
+        var popup = $(  '<div class="modal fade" id="confirm-branch-delete" role="dialog">' +
+                            '<div class="modal-dialog modal-md">' +
+                                '<div class="modal-content">' +
+                                    '<div class="modal-header">' +
+                                        '<h5 class="modal-title">Confirm <pre>'+refName+' </pre>Deletion</h5>' +
+                                        '<button type="button" class="btn btn-default close" data-dismiss="modal">'+
+                                        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">'+
+                                        '<path fill-rule="evenodd" clip-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z" fill="#000"/>'+
+                                        '<path fill-rule="evenodd" clip-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z" fill="#000"/>'+
+                                        '</svg>'+
+                                        '</button>' +
+                                    '</div>' +
+                                    '<div class="modal-body"></div>' +
+                                '</div>' +
+                            '</div>' +
+                        '</div>')[0];
+        
+        $("body").append(popup); 
+        var popupContent = $(".modal-body", popup)[0];
+        
+        $('<div class="row"><div class="col-sm-1">'+
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#dc3545" class="bi bi-exclamation-circle-fill" viewBox="0 0 16 16">'+
+            '<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>'+
+        '</svg></div>'+
+        '<div class="col-sm-11">By deleting this branch, you might lose uncommitted work. <br/> Do you want to proceed?</div></div>'+
+        '<button class="btn btn-sm btn-danger float-right" id="confirm-delete">Delete Branch</button>'+
+        '<button class="btn btn-sm btn-secondary float-right" id="cancel-delete">Cancel</button>').appendTo(popupContent);
+        $(popup).modal('show');
+
+        $("#confirm-branch-delete").on('click', '#confirm-delete', function(e){
+            $(popup).children( ".modal-fade").modal('hide');
+            $(".modal-backdrop").remove();
+            $("#confirm-branch-delete").remove();
+            webui.git("branch -d " + refName, function() {
+                webui.showWarning("Local branch " + refName + " deleted.");
+                updateSideBar();
+            });
+            
+        }); 
+
+        $("#confirm-branch-delete").find("#cancel-delete, .close").click(function() {
+            $(popup).children( ".modal-fade").modal('hide');
+            $(".modal-backdrop").remove();
+            $("#confirm-branch-delete").remove();
         });
+        
     });
 
     $(document).on('click', '.btn-checkout-remote-branch', function(e) {

git-webui/src/share/git-webui/webui/js/git-webui.js

@@ -205,16 +205,16 @@ webui.SideBarView = function(mainView) {
                                         '</svg>'+
                                         '</button>' +
                                     '</div>' +
-                                    '<div class="modal-body"><div class="list-group"></div></div>' +
+                                    '<div class="modal-body"></div>' +
                                 '</div>' +
                             '</div>' +
                         '</div>')[0];
         self.element.appendChild(popup);
-        var popupContent = $(".list-group", popup)[0];
+        var popupContent = $(".modal-body", popup)[0];
         $(self.buildAccordion(section, refs, id, undefined, "popup")).appendTo(popupContent);
         $(popupContent).find(".btn-delete-branch, .btn-checkout-local-branch, .btn-checkout-remote-branch").click(function() {
             $(popup).modal('hide');
-        })
+        });
         return popup;
     };
 
@@ -1819,13 +1819,58 @@ $(function () {
 
     $(document).on('click', '.btn-delete-branch', function(e) {
         e.preventDefault();
+        $("#confirm-branch-delete").remove(); //removes any remaining modals. If there are more than one modals, the ids are duplicated and event listeners won't work.
         var refName = $(this).parent().parent().parent().siblings(
             ".card-header").children("button").html();
 
-        webui.git("branch -d " + refName, function() {
-            webui.showWarning("Local branch " + refName + " deleted.");
-            updateSideBar();
+        console.log($(this).parent().parent().parent()[0]);
+
+        var popup = $(  '<div class="modal fade" id="confirm-branch-delete" role="dialog">' +
+                            '<div class="modal-dialog modal-md">' +
+                                '<div class="modal-content">' +
+                                    '<div class="modal-header">' +
+                                        '<h5 class="modal-title">Confirm <pre>'+refName+' </pre>Deletion</h5>' +
+                                        '<button type="button" class="btn btn-default close" data-dismiss="modal">'+
+                                        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">'+
+                                        '<path fill-rule="evenodd" clip-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z" fill="#000"/>'+
+                                        '<path fill-rule="evenodd" clip-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z" fill="#000"/>'+
+                                        '</svg>'+
+                                        '</button>' +
+                                    '</div>' +
+                                    '<div class="modal-body"></div>' +
+                                '</div>' +
+                            '</div>' +
+                        '</div>')[0];
+        
+        $("body").append(popup); 
+        var popupContent = $(".modal-body", popup)[0];
+        
+        $('<div class="row"><div class="col-sm-1">'+
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#dc3545" class="bi bi-exclamation-circle-fill" viewBox="0 0 16 16">'+
+            '<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>'+
+        '</svg></div>'+
+        '<div class="col-sm-11">By deleting this branch, you might lose uncommitted work. <br/> Do you want to proceed?</div></div>'+
+        '<button class="btn btn-sm btn-danger float-right" id="confirm-delete">Delete Branch</button>'+
+        '<button class="btn btn-sm btn-secondary float-right" id="cancel-delete">Cancel</button>').appendTo(popupContent);
+        $(popup).modal('show');
+
+        $("#confirm-branch-delete").on('click', '#confirm-delete', function(e){
+            $(popup).children( ".modal-fade").modal('hide');
+            $(".modal-backdrop").remove();
+            $("#confirm-branch-delete").remove();
+            webui.git("branch -d " + refName, function() {
+                webui.showWarning("Local branch " + refName + " deleted.");
+                updateSideBar();
+            });
+            
+        }); 
+
+        $("#confirm-branch-delete").find("#cancel-delete, .close").click(function() {
+            $(popup).children( ".modal-fade").modal('hide');
+            $(".modal-backdrop").remove();
+            $("#confirm-branch-delete").remove();
         });
+        
     });
 
     $(document).on('click', '.btn-checkout-remote-branch', function(e) {