add confirm prompt for template upload via URL

app/controllers/templates_uploads_controller.rb

@@ -5,7 +5,9 @@ class TemplatesUploadsController < ApplicationController
 
   layout 'plain'
 
-  def show; end
+  def show
+    redirect_to root_path if params[:url].blank?
+  end
 
   def create
     url_params = create_file_params_from_url if params[:url].present?

app/javascript/application.js

@@ -54,6 +54,7 @@ import GoogleDriveFilePicker from './elements/google_drive_file_picker'
 import OpenModal from './elements/open_modal'
 import BarChart from './elements/bar_chart'
 import FieldCondition from './elements/field_condition'
+import ConfirmUpload from './elements/confirm_upload'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -146,6 +147,7 @@ safeRegisterElement('google-drive-file-picker', GoogleDriveFilePicker)
 safeRegisterElement('open-modal', OpenModal)
 safeRegisterElement('bar-chart', BarChart)
 safeRegisterElement('field-condition', FieldCondition)
+safeRegisterElement('confirm-upload', ConfirmUpload)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/confirm_upload.js

@@ -0,0 +1,27 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+
+export default targetable(class extends HTMLElement {
+  static [target.static] = [
+    'prompt',
+    'processing',
+    'logo'
+  ]
+
+  connectedCallback () {
+    this.form.addEventListener('submit', this.onSubmit)
+  }
+
+  disconnectedCallback () {
+    this.form.removeEventListener('submit', this.onSubmit)
+  }
+
+  onSubmit = () => {
+    this.prompt.classList.add('hidden')
+    this.processing.classList.remove('hidden')
+    this.logo.classList.add('animate-bounce')
+  }
+
+  get form () {
+    return this.querySelector('form')
+  }
+})

app/views/templates_uploads/show.html.erb

@@ -1,18 +1,30 @@
-<div class="h-screen">
-  <div
-    class="text-center p-8 h-full flex items-center justify-center">
-    <div>
-      <%= render 'shared/logo', width: 50, height: 50, class: 'mx-auto animate-bounce' %>
-      <span>
-        <%= t('processing') %>...
-      </span>
+<confirm-upload>
+  <div class="h-screen">
+    <div class="text-center p-8 h-full flex items-center justify-center">
+      <div class="space-y-4">
+        <div data-target="confirm-upload.logo" class="mx-auto">
+          <%= render 'shared/logo', width: 50, height: 50, class: 'mx-auto' %>
+        </div>
+        <div data-target="confirm-upload.processing" class="hidden">
+          <span><%= t('processing') %>...</span>
+        </div>
+        <div data-target="confirm-upload.prompt">
+          <p class="text-lg">
+            <%= t('open_file_from') %>
+            <a href="<%= params[:url] %>" target="_blank" class="link" rel="noopener noreferrer nofollow">
+              <%= params[:filename].presence || params[:url] %>
+            </a>
+          </p>
+          <div class="flex items-center justify-center gap-2 mt-4">
+            <%= link_to t('cancel'), root_path, class: 'white-button w-44' %>
+            <%= form_for '', url: templates_upload_path, method: :post do |f| %>
+              <input type="hidden" name="url" value="<%= params[:url] %>">
+              <input type="hidden" name="filename" value="<%= params[:filename] %>">
+              <%= f.button button_title(title: t('open')), class: 'base-button w-44' %>
+            <% end %>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
-</div>
-<submit-form>
-  <%= form_for '', url: templates_upload_path, method: :post, class: 'hidden' do %>
-    <button type="submit"></button>
-    <input name="url" value="<%= params[:url] %>">
-    <input name="filename" value="<%= params[:filename] %>">
-  <% end %>
-</submit-form>
+</confirm-upload>