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">
+<confirm-upload>
-  <div
+  <div class="h-screen">
-    class="text-center p-8 h-full flex items-center justify-center">
+    <div class="text-center p-8 h-full flex items-center justify-center">
-    <div>
+      <div class="space-y-4">
-      <%= render 'shared/logo', width: 50, height: 50, class: 'mx-auto animate-bounce' %>
+        <div data-target="confirm-upload.logo" class="mx-auto">
-      <span>
+          <%= render 'shared/logo', width: 50, height: 50, class: 'mx-auto' %>
-        <%= t('processing') %>...
+        </div>
-      </span>
+        <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>
+</confirm-upload>
-<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>

config/locales/i18n.yml

@@ -937,6 +937,9 @@ en: &en
   your_email_address_has_been_changed: Your email address has been changed
   the_email_address_for_your_account_has_been_changed_to_new_email: The email address for your account has been changed to %{new_email}.
   if_you_did_not_make_this_change_please_contact_us_by_replying_to_this_email: If you did not make this change, please contact us by replying to this email.
+  open_file_from: 'Open file from'
+  cancel: Cancel
+  open: Open
   devise:
     confirmations:
       confirmed: Your email address has been successfully confirmed.
@@ -1987,6 +1990,9 @@ es: &es
   your_email_address_has_been_changed: Tu dirección de correo electrónico ha sido cambiada
   the_email_address_for_your_account_has_been_changed_to_new_email: La dirección de correo electrónico de tu cuenta ha sido cambiada a %{new_email}.
   if_you_did_not_make_this_change_please_contact_us_by_replying_to_this_email: Si no realizaste este cambio, contáctanos respondiendo a este correo electrónico.
+  open_file_from: 'Abrir archivo desde'
+  cancel: Cancelar
+  open: Abrir
   devise:
     confirmations:
       confirmed: Tu dirección de correo electrónico ha sido confirmada correctamente.
@@ -3037,6 +3043,9 @@ it: &it
   your_email_address_has_been_changed: Il tuo indirizzo email è stato modificato
   the_email_address_for_your_account_has_been_changed_to_new_email: L'indirizzo email del tuo account è stato modificato in %{new_email}.
   if_you_did_not_make_this_change_please_contact_us_by_replying_to_this_email: Se non hai effettuato questa modifica, contattaci rispondendo a questa email.
+  open_file_from: 'Aprire file da'
+  cancel: Annulla
+  open: Apri
   devise:
     confirmations:
       confirmed: Il tuo indirizzo email è stato confermato con successo.
@@ -4084,6 +4093,9 @@ fr: &fr
   your_email_address_has_been_changed: Votre adresse e-mail a été modifiée
   the_email_address_for_your_account_has_been_changed_to_new_email: "L'adresse e-mail de votre compte a été modifiée en %{new_email}."
   if_you_did_not_make_this_change_please_contact_us_by_replying_to_this_email: Si vous n'avez pas effectué ce changement, veuillez nous contacter en répondant à cet e-mail.
+  open_file_from: 'Ouvrir le fichier depuis'
+  cancel: Annuler
+  open: Ouvrir
   devise:
     confirmations:
       confirmed: Votre adresse e-mail a été confirmée avec succès.
@@ -5134,6 +5146,9 @@ pt: &pt
   your_email_address_has_been_changed: Seu endereço de e-mail foi alterado
   the_email_address_for_your_account_has_been_changed_to_new_email: O endereço de e-mail da sua conta foi alterado para %{new_email}.
   if_you_did_not_make_this_change_please_contact_us_by_replying_to_this_email: Se você não fez essa alteração, entre em contato conosco respondendo a este e-mail.
+  open_file_from: 'Abrir arquivo de'
+  cancel: Cancelar
+  open: Abrir
   devise:
     confirmations:
       confirmed: Seu endereço de e-mail foi confirmado com sucesso.
@@ -6184,6 +6199,9 @@ de: &de
   your_email_address_has_been_changed: Ihre E-Mail-Adresse wurde geändert
   the_email_address_for_your_account_has_been_changed_to_new_email: Die E-Mail-Adresse Ihres Kontos wurde in %{new_email} geändert.
   if_you_did_not_make_this_change_please_contact_us_by_replying_to_this_email: Wenn Sie diese Änderung nicht vorgenommen haben, kontaktieren Sie uns bitte, indem Sie auf diese E-Mail antworten.
+  open_file_from: 'Datei öffnen von'
+  cancel: Abbrechen
+  open: Öffnen
   devise:
     confirmations:
       confirmed: Ihre E-Mail-Adresse wurde erfolgreich bestätigt.
@@ -7635,6 +7653,9 @@ nl: &nl
   your_email_address_has_been_changed: Uw e-mailadres is gewijzigd
   the_email_address_for_your_account_has_been_changed_to_new_email: Het e-mailadres van uw account is gewijzigd naar %{new_email}.
   if_you_did_not_make_this_change_please_contact_us_by_replying_to_this_email: Als u deze wijziging niet hebt aangebracht, neem dan contact met ons op door op deze e-mail te antwoorden.
+  open_file_from: 'Bestand openen van'
+  cancel: Annuleren
+  open: Openen
   devise:
     confirmations:
       confirmed: Uw e-mailadres is succesvol bevestigd.

spec/system/templates_upload_spec.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+RSpec.describe 'Templates Upload' do
+  let!(:account) { create(:account) }
+  let!(:user) { create(:user, account:) }
+
+  before do
+    sign_in(user)
+  end
+
+  context 'when url param is present' do
+    let(:file_url) { 'https://example.com/document.pdf' }
+
+    before do
+      stub_request(:get, file_url).to_return(
+        body: Rails.root.join('spec/fixtures/sample-document.pdf').read,
+        headers: { 'Content-Type' => 'application/pdf' }
+      )
+    end
+
+    it 'shows a confirm page and creates template on submit' do
+      visit "/new?url=#{CGI.escape(file_url)}"
+
+      expect(page).to have_text('Open file from')
+      expect(page).to have_link('example.com/document.pdf')
+
+      click_button 'Open'
+
+      expect(Template.last.name).to eq('document')
+    end
+  end
+
+  context 'when url param is missing' do
+    it 'redirects to root' do
+      visit '/new'
+
+      expect(page).to have_current_path(root_path)
+    end
+  end
+end