From 408631dce9a2495bf170d93ce56135320bda25d3 Mon Sep 17 00:00:00 2001
From: maria touilzak <mariatouilzak19@gmail.com>
Date: Thu, 19 Dec 2024 11:39:03 +0100
Subject: [PATCH] Bug: Success Message Not Displayed After Deployment

---
 src/dev-center/js/dev-center.js | 57 ++++++++++++++++++++++++++-------
 1 file changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index 8aa2f44540..6b20ff8ced 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -288,6 +288,8 @@ async function create_app(title, source_path = null, items = null) {
     
         })
         .then(async (app) => {
+            $('.new-app-modal').get(0).close();
+            window.location.reload();
             let app_dir;
             // ----------------------------------------------------
             // Create app directory in AppData
@@ -313,6 +315,8 @@ async function create_app(title, source_path = null, items = null) {
                 maximizeOnStart: false,
                 background: false,
             }).then(async (app) => {
+                $('.new-app-modal').get(0).close();
+                window.location.reload();
                 // refresh app list
                 puter.apps.list().then(async (resp) => {
                     apps = resp;
@@ -509,7 +513,7 @@ function generate_edit_app_section(app) {
         </ul>
 
         <div class="section-tab active" data-tab="deploy">
-            <div class="success deploy-success-msg">
+            <div id="deploy-success-msg" class="success deploy-success-msg">
                 New version deployed successfully 🎉<span class="close-success-msg">&times;</span>
                 <p style="margin-bottom:0;"><span class="open-app button button-action" data-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}">Give it a try!</span></p>
             </div>
@@ -802,7 +806,7 @@ async function edit_app_section(cur_app_name) {
                         dropped_items = items[0].path;
                         $('.drop-area').removeClass('drop-area-hover');
                         $('.drop-area').addClass('drop-area-ready-to-deploy');
-                        drop_area_content = `<p style="margin-bottom:0; font-weight: 500;">index.html</p><p>Ready to deploy 🚀</p><p class="reset-deploy"><span>Cancel</span></p>`;
+                        drop_area_content = `<p style="margin-bottom:0; font-weight: 500;">index.html</p><p>Ready to deploy 🚀</p>`;
                         $('.drop-area').html(drop_area_content);
 
                         // enable deploy button
@@ -836,7 +840,7 @@ async function edit_app_section(cur_app_name) {
                         dropped_items = items;
                         $('.drop-area').removeClass('drop-area-hover');
                         $('.drop-area').addClass('drop-area-ready-to-deploy');
-                        drop_area_content = `<p style="margin-bottom:0; font-weight: 500;">${items.length} items</p><p>Ready to deploy 🚀</p><p class="reset-deploy"><span>Cancel</span></p>`;
+                        drop_area_content = `<p style="margin-bottom:0; font-weight: 500;">${items.length} items</p><p>Ready to deploy 🚀</p>`;
                         $('.drop-area').html(drop_area_content);
 
                         // enable deploy button
@@ -877,7 +881,7 @@ async function edit_app_section(cur_app_name) {
 
                             $('.drop-area').removeClass('drop-area-hover');
                             $('.drop-area').addClass('drop-area-ready-to-deploy');
-                            drop_area_content = `<p style="margin-bottom:0; font-weight: 500;">${rootItems}</p><p>Ready to deploy 🚀</p><p class="reset-deploy"><span>Cancel</span></p>`;
+                            drop_area_content = `<p style="margin-bottom:0; font-weight: 500;">${rootItems}</p><p>Ready to deploy 🚀</p>`;
                             $('.drop-area').html(drop_area_content);
 
                             // enable deploy button
@@ -951,7 +955,7 @@ async function edit_app_section(cur_app_name) {
             rootItems = html_encode(rootItems);
             $('.drop-area').removeClass('drop-area-hover');
             $('.drop-area').addClass('drop-area-ready-to-deploy');
-            drop_area_content = `<p style="margin-bottom:0; font-weight: 500;">${rootItems}</p><p>Ready to deploy 🚀</p><p class="reset-deploy"><span>Cancel</span></p>`;
+            drop_area_content = `<p style="margin-bottom:0; font-weight: 500;">${rootItems}</p><p>Ready to deploy 🚀</p>`;
             $('.drop-area').html(drop_area_content);
 
             // enable deploy button
@@ -1645,7 +1649,7 @@ window.deploy = async function (app, items) {
     $('.deploy-btn').addClass('disabled');
 
     // change drop area text
-    $('.drop-area').html(deploying_spinner + ' <div>Deploying <span class="deploy-percent">(0%)</span></div>');
+    $('.drop-area').html(deploying_spinner + ' <div>Deploying <span class="deploy-percent">(0%)</span></div><p class="reset-deploy button button-secondary"><span>Cancel</span></p>');
 
     if (typeof items === 'string' && (items.startsWith('/') || items.startsWith('~'))) {
         $('.drop-area').removeClass('drop-area-hover');
@@ -1725,6 +1729,7 @@ window.deploy = async function (app, items) {
                     // update progress
                     $('.deploy-percent').text(`(${Math.round((files.indexOf(file) / files.length) * 100)}%)`);
                 }
+                
             }
         }
         // --------------------------------------------------------------------
@@ -1761,7 +1766,7 @@ window.deploy = async function (app, items) {
             // set the 'Index URL' field for the 'Settings' tab
             $('#edit-app-index-url').val(protocol + `://${hostname}.` + static_hosting_domain);
             // show success message
-            $('.deploy-success-msg').show();
+            $('#deploy-success-msg').show();
             // reset drop area
             reset_drop_area();
         })
@@ -1829,8 +1834,13 @@ window.deploy = async function (app, items) {
                 createMissingAncestors: true,
                 progress: function (operation_id, op_progress) {
                     $('.deploy-percent').text(`(${op_progress}%)`);
+                    
                 },
             }).then(async (uploaded) => {
+                // show success message
+                $('#deploy-success-msg').show();
+                // reset drop area
+                reset_drop_area()
                 // new hostname
                 let hostname = `${currently_editing_app.name}-${(Math.random() + 1).toString(36).substring(7)}`;
 
@@ -1853,7 +1863,7 @@ window.deploy = async function (app, items) {
                     // set the 'Index URL' field for the 'Settings' tab
                     $('#edit-app-index-url').val(protocol + `://${hostname}.` + static_hosting_domain);
                     // show success message
-                    $('.deploy-success-msg').show();
+                    $('#deploy-success-msg').show();
                     // reset drop area
                     reset_drop_area()
                 })
@@ -2016,7 +2026,7 @@ $(document).on('click', '.insta-deploy-existing-app-deploy-btn', function (e) {
 
     $('.drop-area').removeClass('drop-area-hover');
     $('.drop-area').addClass('drop-area-ready-to-deploy');
-    let drop_area_content = `<p style="margin-bottom:0; font-weight: 500;">Ready to deploy 🚀</p><p class="reset-deploy"><span>Cancel</span></p>`;
+    let drop_area_content = `<p style="margin-bottom:0; font-weight: 500;">Ready to deploy 🚀</p><p class="reset-deploy button button-secondary"><span>Cancel</span></p>`;
     $('.drop-area').html(drop_area_content);
 
     // deploy
@@ -2458,9 +2468,32 @@ function enable_window_settings(){
     $('#edit-app-hide-titlebar').prop('disabled', false);
 }
 
-$(document).on('click', '.reset-deploy', function (e) {
-    reset_drop_area();
-})
+$(document).on('click', '.reset-deploy', async function (e) {
+    // Display a confirmation dialog to ask the user
+    const alert_resp = await puter.ui.alert(
+        'Are you sure you want to cancel the deployment?', 
+        [
+            {
+                label: 'Yes, cancel deployment',
+                value: 'cancel',
+                type: 'danger', // This can style the button as red/danger
+            },
+            {
+                label: 'No, keep it',
+                value: 'keep'
+            }
+        ]
+    );
+
+    if (alert_resp === 'cancel') {
+        // If the user clicks "Yes, cancel deployment", reset the drop area
+        reset_drop_area();
+    } else {
+        // If the user clicks "No, keep it", do nothing or log it
+        console.log('Deployment is not canceled.');
+    }
+});
+
 
 $(document).on('click', '.sidebar-toggle', function (e) {
     $('.sidebar').toggleClass('open');