Flake: make import a synchronous submit (#1563)

We're seeing some build flake when the JS hasn't attached by the time
that we attach the file, so the auto-submit doesn't work. In this case,
I think making it a standard form element works just as well, and maybe
a bit more intuitively.

Author: mockdeep

.rubocop_todo.yml

@@ -116,7 +116,7 @@ RSpec/DescribeClass:
   Exclude:
     - 'spec/integration/feed_importing_spec.rb'
 
-# Offense count: 68
+# Offense count: 70
 # Configuration parameters: Max, CountAsOne.
 RSpec/ExampleLength:
   Exclude:
@@ -138,6 +138,7 @@ RSpec/ExampleLength:
     - 'spec/system/feed_show_spec.rb'
     - 'spec/system/feeds_index_spec.rb'
     - 'spec/system/good_job_spec.rb'
+    - 'spec/system/import_spec.rb'
     - 'spec/system/keyboard_shortcuts_spec.rb'
     - 'spec/system/starred_spec.rb'
     - 'spec/system/stories_index_spec.rb'

app/javascript/controllers/auto_submit_controller.ts

@@ -6,9 +6,6 @@
 
 import {application} from "./application";
 
-import AutoSubmitController from "./auto_submit_controller";
-application.register("auto-submit", AutoSubmitController);
-
 import DialogController from "./dialog_controller";
 application.register("dialog", DialogController);
 

app/javascript/controllers/index.ts

@@ -14,8 +14,9 @@
   </p>
   <hr />
 
-  <%= form_with(url: "/feeds/import", id: "import", multipart: true, data: { controller: "auto-submit" }) do %>
-    <input id="opml_file" name="opml_file" type="file" title="<%= t('import.fields.import') %>" aria-label="<%= t('import.fields.import') %>" class="btn-primary" data-action="change->auto-submit#submit" />
+  <%= form_with(url: "/feeds/import", id: "import", multipart: true) do %>
+    <input id="opml_file" name="opml_file" type="file" title="<%= t('import.fields.choose_file') %>" aria-label="<%= t('import.fields.choose_file') %>" required />
+    <%= submit_tag(t('import.fields.import'), class: "btn btn-primary") %>
     <a href="/setup/tutorial" id="skip" class="btn float-end"><%= t('import.fields.not_now') %></a>
   <% end %>
 </div>

app/views/imports/new.html.erb

@@ -60,6 +60,7 @@ en:
   import:
     description: Import your feeds from another service.
     fields:
+      choose_file: Choose file
       import: Import
       not_now: Not now
     subtitle: Let's setup your feeds.

config/locales/en.yml

@@ -16,6 +16,7 @@
     file_path = Rails.root.join("spec/fixtures/feeds.opml")
 
     attach_file("opml_file", file_path, visible: false)
+    within("#import") { click_on("Import") }
 
     expect(page).to have_text("We're getting you some stories to read")
   end
@@ -26,13 +27,15 @@
     file_path = Rails.root.join("spec/fixtures/invalid.opml")
 
     attach_file("opml_file", file_path, visible: false)
+    within("#import") { click_on("Import") }
 
     expect(page).to have_text("We're getting you some stories to read")
   end
 
   def import_grouped_opml
     file_path = Rails.root.join("spec/fixtures/feeds.opml")
     attach_file("opml_file", file_path, visible: false)
+    within("#import") { click_on("Import") }
     expect(page).to have_text("We're getting you some stories to read")
   end