Simplify forms in applications

This simplifies the form usage in the app.

- Use Simple form instead of Formtastic. The govuk_admin_template gem
already has a Simple form config, which uses bootstrap. This means we
can remove the `formtastic-bootstrap` gem as well.
- Remove the typeahead. This is only used by the form to submit new
deployments, and that happens so seldomly that it's not worth having
the JS dependencies for that.
- Remove the date picker. This is also just used by the deployment
form. By removing it we get rid of a whole range of dependencies.

Updating to simple form prepares this app for the new GOV.UK Frontend
based layout (#228).

https://trello.com/c/09fVPrRN

Gemfile

@@ -2,11 +2,8 @@ source 'https://rubygems.org'
 
 gem 'rails', '~> 5.2.0'
 
-gem 'bootstrap3-datetimepicker-rails', '~> 4.17.47'
-gem 'formtastic', '3.1.5'
-gem 'formtastic-bootstrap', '3.1.1'
+gem 'simple_form', '~> 4.0'
 gem 'friendly_id', '5.2.4'
-gem 'momentjs-rails', '~> 2.20.1'
 gem 'mysql2', '0.4.10'
 gem 'nested_form', '0.3.2'
 gem 'octokit', '4.9.0'

Gemfile.lock

@@ -57,8 +57,6 @@ GEM
     bootstrap-sass (3.3.5.1)
       autoprefixer-rails (>= 5.0.0.1)
       sass (>= 3.3.0)
-    bootstrap3-datetimepicker-rails (4.17.47)
-      momentjs-rails (>= 2.8.1)
     builder (3.2.3)
     capybara (3.2.1)
       addressable
@@ -87,10 +85,6 @@ GEM
     faraday (0.12.2)
       multipart-post (>= 1.2, < 3)
     ffi (1.9.23)
-    formtastic (3.1.5)
-      actionpack (>= 3.2.13)
-    formtastic-bootstrap (3.1.1)
-      formtastic (>= 3.0)
     friendly_id (5.2.4)
       activerecord (>= 4.0.0)
     gds-sso (13.6.0)
@@ -148,8 +142,6 @@ GEM
     minitest (5.11.3)
     mocha (1.5.0)
       metaclass (~> 0.0.1)
-    momentjs-rails (2.20.1)
-      railties (>= 3.1)
     multi_json (1.13.1)
     multi_xml (0.6.0)
     multipart-post (2.0.0)
@@ -258,6 +250,9 @@ GEM
     sentry-raven (2.7.3)
       faraday (>= 0.7.6, < 1.0)
     shoulda-context (1.2.2)
+    simple_form (4.0.1)
+      actionpack (>= 5.0)
+      activemodel (>= 5.0)
     simplecov (0.16.1)
       docile (~> 1.1)
       json (>= 1.8, < 3)
@@ -307,20 +302,16 @@ PLATFORMS
 DEPENDENCIES
   better_errors (= 2.4.0)
   binding_of_caller (= 0.8.0)
-  bootstrap3-datetimepicker-rails (~> 4.17.47)
   capybara (~> 3.2.1)
   database_cleaner (~> 1.7.0)
   factory_bot_rails
-  formtastic (= 3.1.5)
-  formtastic-bootstrap (= 3.1.1)
   friendly_id (= 5.2.4)
   gds-sso (~> 13)
   govuk-lint
   govuk_admin_template (= 6.6.0)
   govuk_app_config
   minitest (= 5.11.3)
   mocha (= 1.5.0)
-  momentjs-rails (~> 2.20.1)
   mysql2 (= 0.4.10)
   nested_form (= 0.3.2)
   octokit (= 4.9.0)
@@ -331,6 +322,7 @@ DEPENDENCIES
   rails-controller-testing
   sass-rails (~> 5.0.6)
   shoulda-context (= 1.2.2)
+  simple_form (~> 4.0)
   simplecov (= 0.16.1)
   simplecov-rcov (= 0.2.3)
   timecop (= 0.9.1)

app/assets/javascripts/application.js

@@ -1,7 +1,4 @@
 //= require jquery_nested_form
 //= require jquery.tablesorter.min
 //= require jquery.autogrowtextarea
-//= require moment
-//= require bootstrap-datetimepicker
-//= require typeahead.bundle.min
 //= require_tree .

app/assets/javascripts/release.js

@@ -22,30 +22,4 @@ $(function () {
   });
 
   $("textarea#application_status_notes").autoGrow();
-
-  $('#datetimepicker1').datetimepicker({
-    language: 'en'
-  });
-
-  var environment = new Bloodhound({
-    local: [{value: 'staging'}, {value: 'production'}],
-    queryTokenizer: Bloodhound.tokenizers.whitespace,
-    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
-  });
-  environment.initialize();
-  $('input.environment-typeahead').typeahead(null, { source: environment.ttAdapter()});
-
-  var version = new Bloodhound({
-    local: [{value: 'release_'}, {value: 'build-'}],
-    queryTokenizer: Bloodhound.tokenizers.whitespace,
-    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
-  });
-  version.initialize();
-  $('input.version-typeahead').typeahead(null, { source: version.ttAdapter()});
-
-  // Also initialize typeahead when nested forms are added.
-  $(document).on('nested:fieldAdded', function(event){
-    var field = event.field; 
-    field.find('.version-typeahead').typeahead(null, { source: version.ttAdapter()});
-  });
 });

app/assets/stylesheets/application.scss

@@ -1,9 +1,5 @@
 @import "govuk_admin_template";
-@import 'bootstrap-datetimepicker';
-@import 'typeahead';
-
 @import "activity";
-@import "forms";
 @import "tables";
 @import "tabs";
 

app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -56,9 +56,3 @@ td.icon {
 .modal input.span5 {
   width: 520px;
 }
-
-/* override the font-size for main textareas */
-form.formtastic .controls textarea {
-  font-size: 17px;
-  line-height: 21px;
-}

app/views/applications/_applications_table.html.erb

@@ -63,16 +63,13 @@
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                     <h3 class="modal-title" id="edit-notes-app-<%= application.id %>Label">Edit notes for <%= application.name %></h3>
                   </div>
-                  <%= semantic_form_for application, url: update_notes_application_path(application) do |f| %>
+                  <%= simple_form_for application, url: update_notes_application_path(application) do |f| %>
                     <div class="modal-body">
                       <%= f.input :status_notes, as: :text, input_html: { rows: 5, cols: 50, data: { length_counting: 'on', count_message_threshold: 255, count_message_selector: "#notes-length-info-for-app-#{application.id}" } } %>
                       <p id="notes-length-info-for-app-<%= application.id %>">Notes should be 255 characters or fewer. <span class="count"></span></p>
                     </div>
                     <div class="modal-footer">
-                      <%= f.actions do %>
-                        <%= f.action :cancel, label: 'Cancel', button_html: { class: 'btn btn-default', data: { dismiss: 'modal' }, aria_hidden: true } %>
-                        <%= f.action :submit, label: 'Save', as: :button, button_html: { class: 'btn btn-primary' } %>
-                      <% end %>
+                      <%= f.button :submit, label: 'Save', as: :button, button_html: { class: 'btn btn-primary' } %>
                     </div>
                   <% end %>
                 </div>

app/views/applications/_form.html.erb

@@ -1,18 +1,9 @@
-<div class="well">
-  <%= semantic_form_for @application do |f| %>
-    <%= f.semantic_errors %>
-
-    <%= f.inputs do %>
-      <%= f.input :name, label: "Name", input_html: { class: 'input-md-6' } %>
-      <%= f.input :repo, label: "GitHub repository path", hint: "eg alphagov/publisher", input_html: { class: 'input-md-6' } %>
-      <%= f.input :domain, label: "GitHub domain", hint: "eg github.digital.cabinet-office.gov.uk", input_html: { class: 'input-md-6' } %>
-      <%= f.input :shortname, label: "Short name", hint: "for use in graphite metrics, eg whitehall",
-                              input_html: { placeholder: @application.fallback_shortname, class: 'input-md-6' } %>
-      <%= f.input :archived, label: "Archived?" %>
-    <% end %>
-    <hr/>
-    <%= f.actions do %>
-      <%= f.action :submit, :as => :button, button_html: { class: 'btn btn-success' } %>
-    <% end %>
-  <% end %>
-</div>
+<%= simple_form_for @application do |f| %>
+  <%= f.input :name, label: "Name", input_html: { class: 'form-control input-md-6' } %>
+  <%= f.input :repo, label: "GitHub repository path", hint: "eg alphagov/publisher", input_html: { class: 'form-control input-md-6' } %>
+  <%= f.input :domain, label: "GitHub domain", hint: "eg github.digital.cabinet-office.gov.uk", input_html: { class: 'form-control input-md-6' } %>
+  <%= f.input :shortname, label: "Short name", hint: "for use in graphite metrics, eg whitehall",
+                          input_html: { placeholder: @application.fallback_shortname, class: 'form-control input-md-6' } %>
+  <%= f.input :archived, label: "Archived?" %>
+  <%= f.button :submit, class: 'btn btn-success' %>
+<% end %>

app/views/deployments/new.html.erb

@@ -1,20 +1,16 @@
 <% content_for :page_title, "Manually record a deployment" %>
 
 <h1>Manually record a deployment</h1>
-<p class="lead">All deployments should be automatically recorded from a push notification, but if that fails, use this form.</p>
 
-<div class="well">
-  <%= semantic_form_for @deployment do |f| %>
-    <%= f.inputs do %>
-      <%= f.input :application_id, as: :select, input_html: { class: "input-md-4" }, collection: options_from_collection_for_select(Application.all, 'id', 'name', f.object.application_id) %>
+<p class="lead">
+  All deployments should be automatically recorded from a push notification,
+  but if that fails, use this form.
+</p>
 
-      <%= f.input :environment, required: "required", input_html: { class: "environment-typeahead input-md-4" }%>
-
-      <%= f.input :version, required: "required", input_html: { class: "version-typeahead input-md-4" } %>
-
-      <%= f.input :created_at, label: "Deployed at", as: "js_datetime_picker", wrapper_options: { class: 'date input-md-4', 'data-date-format' => 'DD/MM/YYYY HH:mm', id: 'datetimepicker1' }, append: content_tag(:span, '', class: "glyphicon glyphicon-calendar") %>
-    <% end %>
-
-    <%= f.submit class: "btn btn-success" %>
-  <% end %>
-</div>
+<%= simple_form_for @deployment do |f| %>
+  <%= f.input :application_id, as: :select, collection: Application.all %>
+  <%= f.input :environment, required: "required", input_html: { class: "form-control" }%>
+  <%= f.input :version, required: "required", input_html: { class: "form-control" } %>
+  <%= f.input :created_at, label: "Deployed at" %>
+  <%= f.submit class: "btn btn-success" %>
+<% end %>

app/views/sites/show.html.erb

@@ -2,17 +2,8 @@
 
 <h1>Site settings</h1>
 
-<div class="well">
-  <%= semantic_form_for site_settings, url: site_path, method: 'patch' do |f| %>
-    <%= f.semantic_errors %>
-
-    <%= f.inputs do %>
-      <%= f.input :status_notes, as: :text, input_html: { rows: 5, cols: 50, autofocus: 'autofocus', data: { length_counting: 'on', count_message_threshold: 255, count_message_selector: '.notes-length-info' } } %>
-      <p class="notes-length-info">Notes should be 255 characters or fewer. <span class="count"></span></p>
-    <% end %>
-    <hr/>
-    <%= f.actions do %>
-      <%= f.action :submit, as: :button, button_html: { class: 'btn btn-success' } %>
-    <% end %>
-  <% end %>
-</div>
+<%= simple_form_for site_settings, url: site_path, method: 'patch' do |f| %>
+  <%= f.input :status_notes, label: "Notes", as: :text, input_html: { rows: 5, cols: 50, autofocus: 'autofocus', data: { length_counting: 'on', count_message_threshold: 255, count_message_selector: '.notes-length-info' } } %>
+  <p class="notes-length-info">Notes should be 255 characters or fewer. <span class="count"></span></p>
+  <%= f.button :submit, value: "Save settings", class: 'btn btn-success' %>
+<% end %>

config/initializers/simple_form.rb

@@ -0,0 +1,3 @@
+SimpleForm.setup do |config|
+  GovukAdminTemplate.setup_simple_form(config)
+end

config/locales/en.yml

@@ -6,11 +6,3 @@ en:
     attributes:
       deploy:
         release: "Release Number"
-  formtastic:
-    labels:
-      site:
-        status_notes: 'Notes'
-    actions:
-      site:
-        create: 'Save settings'
-        update: 'Save settings'

test/functional/sites_controller_test.rb

@@ -14,17 +14,17 @@ class SitesControllerTest < ActionController::TestCase
       get :show
       assert_template :show
 
-      assert_select 'form.site[action="/site"]'
-      assert_select 'form.site textarea[name="site[status_notes]"]', ''
+      assert_select 'form[action="/site"]'
+      assert_select 'form textarea[name="site[status_notes]"]', ''
     end
 
     should 'render the show template with a form filled with the existing site settings' do
       FactoryBot.create(:site, status_notes: 'Deploy freeze in place.')
       get :show
       assert_template :show
 
-      assert_select 'form.site[action="/site"]'
-      assert_select 'form.site textarea[name="site[status_notes]"]', 'Deploy freeze in place.'
+      assert_select 'form[action="/site"]'
+      assert_select 'form textarea[name="site[status_notes]"]', 'Deploy freeze in place.'
     end
   end
 
@@ -55,8 +55,8 @@ class SitesControllerTest < ActionController::TestCase
 
       refute Site.settings.persisted?
 
-      assert_select 'form.site[action="/site"]'
-      assert_select 'form.site textarea[name="site[status_notes]"]', 'a' * 256
+      assert_select 'form[action="/site"]'
+      assert_select 'form textarea[name="site[status_notes]"]', 'a' * 256
     end
   end
 end