Show a loader for running migrations (#84)

widefix · Jul 22, 2024 · ac634fa · ac634fa
1 parent 0203e2f
commit ac634fa
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 13 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const migrationActions = document.querySelectorAll('.migration-action');
+
+  migrationActions.forEach(button => {
+    button.addEventListener('click', function (event) {
+      const originalText = button.value;
+      button.value = 'Loading...';
+      disableButtons();
+
+      const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+
+      fetch(event.target.form.action, { 
+        method: 'POST', 
+        headers: { 
+          'X-Requested-With': 'XMLHttpRequest',
+          'X-CSRF-Token': csrfToken 
+        }
+      })
+      .then(response => {
+        if (response.ok) {
+          window.location.reload();
+        } else {
+          throw new Error('Network response was not ok.');
+        }
+      })
+      .catch(error => {
+        console.error('There has been a problem with your fetch operation:', error);
+        enableButtons();
+        button.value = originalText;
+      });
+
+      event.preventDefault();
+    });
+  });
+
+  function disableButtons() {
+    migrationActions.forEach(button => {
+      button.disabled = true;
+    });
+  }
+
+  function enableButtons() {
+    migrationActions.forEach(button => {
+      button.disabled = false;
+    });
+  }
+});
diff --git a/...s/stylesheets/actual_db_schema/styles.css → app/assets/stylesheets/styles.css b/...s/stylesheets/actual_db_schema/styles.css → app/assets/stylesheets/styles.css
@@ -75,6 +75,12 @@ table {
   background-color: #000;
 }
 
+.button:disabled, .button:hover:disabled {
+  background-color: transparent;
+  color: #666;
+  cursor: not-allowed;
+}
+
 .button-container {
   display: flex;
 }

diff --git a/app/views/actual_db_schema/migrations/index.html.erb b/app/views/actual_db_schema/migrations/index.html.erb
@@ -2,7 +2,9 @@
 <html>
   <head>
     <title>Migrations</title>
-    <%= stylesheet_link_tag 'actual_db_schema/styles', media: 'all' %>
+    <%= csrf_meta_tags %>
+    <%= stylesheet_link_tag 'styles', media: 'all' %>
+    <%= javascript_include_tag 'application' %>
   </head>
   <body>
     <div>
@@ -45,12 +47,12 @@
                     <%= button_to '⎌ Rollback',
                                   rollback_migration_path(id: migration[:version], database: migration[:database]),
                                   method: :post,
-                                  class: 'button',
+                                  class: 'button migration-action',
                                   style: ('display: none;' if migration[:status] == "down") %>
                     <%= button_to '⬆ Migrate',
                                   migrate_migration_path(id: migration[:version], database: migration[:database]),
                                   method: :post,
-                                  class: 'button',
+                                  class: 'button migration-action',
                                   style: ('display: none;' if migration[:status] == "up" || migration[:phantom]) %>
                   </div>
                 </td>

diff --git a/app/views/actual_db_schema/migrations/show.html.erb b/app/views/actual_db_schema/migrations/show.html.erb
@@ -2,7 +2,9 @@
 <html>
   <head>
     <title>Migration Details</title>
-    <%= stylesheet_link_tag 'actual_db_schema/styles', media: 'all' %>
+    <%= csrf_meta_tags %>
+    <%= stylesheet_link_tag 'styles', media: 'all' %>
+    <%= javascript_include_tag 'application' %>
   </head>
   <body>
     <div>
@@ -41,12 +43,12 @@
         <%= button_to '⎌ Rollback',
                       rollback_migration_path(id: migration[:version], database: migration[:database]),
                       method: :post,
-                      class: 'button',
+                      class: 'button migration-action',
                       style: ('display: none;' if migration[:status] == "down") %>
         <%= button_to '⬆ Migrate',
                       migrate_migration_path(id: migration[:version], database: migration[:database]),
                       method: :post,
-                      class: 'button',
+                      class: 'button migration-action',
                       style: ('display: none;' if migration[:status] == "up" || migration[:phantom]) %>
       </div>
     </div>

diff --git a/app/views/actual_db_schema/phantom_migrations/index.html.erb b/app/views/actual_db_schema/phantom_migrations/index.html.erb
@@ -2,15 +2,20 @@
 <html>
   <head>
     <title>Phantom Migrations</title>
-    <%= stylesheet_link_tag 'actual_db_schema/styles', media: 'all' %>
+    <%= csrf_meta_tags %>
+    <%= stylesheet_link_tag 'styles', media: 'all' %>
+    <%= javascript_include_tag 'application' %>
   </head>
   <body>
     <div>
       <h2>Phantom Migrations</h2>
       <div class="top-buttons">
         <%= link_to 'All Migrations', migrations_path, class: "top-button" %>
         <% if phantom_migrations.present? %>
-          <%= button_to '⎌ Rollback all', rollback_all_phantom_migrations_path, method: :post, class: 'button' %>
+          <%= button_to '⎌ Rollback all',
+                        rollback_all_phantom_migrations_path,
+                        method: :post,
+                        class: 'button migration-action' %>
         <% end %>
       </div>
       <% if phantom_migrations.present? %>
@@ -39,8 +44,13 @@
                 <td><%= migration[:database] %></td>
                 <td>
                   <div class='button-container'>
-                    <%= link_to '👁 Show', phantom_migration_path(id: migration[:version], database: migration[:database]), class: 'button' %>
-                    <%= button_to '⎌ Rollback', rollback_phantom_migration_path(id: migration[:version], database: migration[:database]), method: :post, class: 'button' %>
+                    <%= link_to '👁 Show',
+                                phantom_migration_path(id: migration[:version], database: migration[:database]),
+                                class: 'button' %>
+                    <%= button_to '⎌ Rollback',
+                                  rollback_phantom_migration_path(id: migration[:version], database: migration[:database]),
+                                  method: :post,
+                                  class: 'button migration-action' %>
                   </div>
                 </td>
               </tr>

diff --git a/app/views/actual_db_schema/phantom_migrations/show.html.erb b/app/views/actual_db_schema/phantom_migrations/show.html.erb
@@ -2,7 +2,9 @@
 <html>
   <head>
     <title>Phantom Migration Details</title>
-    <%= stylesheet_link_tag 'actual_db_schema/styles', media: 'all' %>
+    <%= csrf_meta_tags %>
+    <%= stylesheet_link_tag 'styles', media: 'all' %>
+    <%= javascript_include_tag 'application' %>
   </head>
   <body>
     <div>
@@ -38,7 +40,10 @@
       </div>
       <div class='button-container'>
         <%= link_to '← Back', phantom_migrations_path, class: 'button' %>
-        <%= button_to '⎌ Rollback', rollback_phantom_migration_path(id: params[:id], database: params[:database]), method: :post, class: 'button' %>
+        <%= button_to '⎌ Rollback',
+                      rollback_phantom_migration_path(id: params[:id], database: params[:database]),
+                      method: :post,
+                      class: 'button migration-action' %>
       </div>
     </div>
     <% flash.each do |key, message| %>

diff --git a/lib/actual_db_schema/engine.rb b/lib/actual_db_schema/engine.rb
@@ -11,7 +11,7 @@ class Engine < ::Rails::Engine
           mount ActualDbSchema::Engine => "/rails"
         end
 
-        app.config.assets.precompile += %w[actual_db_schema/styles.css]
+        app.config.assets.precompile += %w[styles.css application.js]
       end
     end
   end
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ class Engine < ::Rails::Engine @@
               mount ActualDbSchema::Engine => "/rails"
             end
-            app.config.assets.precompile += %w[actual_db_schema/styles.css]
+            app.config.assets.precompile += %w[styles.css application.js]
           end
         end
       end
@@ Expand Down @@