Show a pop-up toast for downloading in the background

Author: awwaiid

app/controllers/distributions_controller.rb

@@ -40,6 +40,12 @@ def destroy
   end
 
   def index
+    if params[:export_csv]
+      session[:trigger_csv_download] = true
+      redirect_to distributions_path(request.query_parameters.except("export_csv"))
+      return
+    end
+
     setup_date_range_picker
 
     @highlight_id = session.delete(:created_distribution_id)

app/javascript/controllers/toast_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="toast"
+// Shows a toastr notification when the element is rendered.
+//
+// Usage:
+//   <div data-controller="toast" data-toast-message-value="Hello!" data-toast-type-value="info"></div>
+//
+export default class extends Controller {
+  static values = {
+    message: String,
+    type: { type: String, default: "info" },
+    timeout: { type: Number, default: 5000 },
+    position: { type: String, default: "toast-top-center" }
+  }
+
+  connect() {
+    const previousTimeout = toastr.options.timeOut;
+    const previousPosition = toastr.options.positionClass;
+    toastr.options.timeOut = this.timeoutValue;
+    toastr.options.positionClass = this.positionValue;
+    toastr[this.typeValue](this.messageValue);
+    toastr.options.timeOut = previousTimeout;
+    toastr.options.positionClass = previousPosition;
+  }
+}

app/views/distributions/index.html.erb

@@ -71,7 +71,7 @@
                   <%=
                     if @distributions.any?
                       download_button_to(
-                        distributions_path(format: :csv, filters: filter_params.merge(date_range: date_range_params)),
+                        distributions_path(export_csv: true, filters: filter_params.merge(date_range: date_range_params)),
                         text: "Export Distributions"
                       )
                     end
@@ -152,3 +152,8 @@
     </div>
   </div>
 </section>
+
+<% if session.delete(:trigger_csv_download) %>
+  <iframe src="<%= distributions_path(format: :csv, filters: filter_params.merge(date_range: date_range_params)) %>" class="d-none"></iframe>
+  <div data-controller="toast" data-toast-message-value="Your CSV export is downloading!" class="d-none"></div>
+<% end %>