From 543a308f7c8de2664f90c21820ce35c700d6337f Mon Sep 17 00:00:00 2001 From: Ana Botto Date: Wed, 31 Jan 2024 15:06:02 +0000 Subject: [PATCH 1/2] Transition contents of Add Downtime view Transition all the visual elements on the Add Downtime page. This breaks the actual page functionality, which will be fixed in future commits. --- app/controllers/downtimes_controller.rb | 2 + app/views/downtimes/_form.html.erb | 148 +++++++++++------------ app/views/downtimes/_time_input.html.erb | 83 +++++++++++++ app/views/downtimes/new.html.erb | 34 +++--- app/views/layouts/design_system.html.erb | 1 + 5 files changed, 176 insertions(+), 92 deletions(-) create mode 100644 app/views/downtimes/_time_input.html.erb diff --git a/app/controllers/downtimes_controller.rb b/app/controllers/downtimes_controller.rb index e828cc646..9bf06afbe 100644 --- a/app/controllers/downtimes_controller.rb +++ b/app/controllers/downtimes_controller.rb @@ -3,6 +3,8 @@ class DowntimesController < ApplicationController before_action :load_edition before_action :process_params, only: %i[create update] + layout "design_system" + def new @downtime = Downtime.new(artefact: @edition.artefact) end diff --git a/app/views/downtimes/_form.html.erb b/app/views/downtimes/_form.html.erb index b64bfc91d..2ad4408d0 100644 --- a/app/views/downtimes/_form.html.erb +++ b/app/views/downtimes/_form.html.erb @@ -2,87 +2,79 @@ <%= render :partial => 'shared/error_summary', locals: { object: @downtime} %> -
-
-

This service will be unavailable from

-
- -
-
- <%= f.label :start_time, "Hour", for: "downtime_start_time_4i" %> - <%= select_hour @downtime.start_time&.hour || 1.hour.from_now.beginning_of_hour, { field_name: "start_time(4i)", prefix: "downtime" }, { class: "form-control date" } %> -
- -
- <%= f.label :start_time, "Minute", for: "downtime_start_time_5i" %> - <%= select_minute @downtime.start_time&.minute, { field_name: "start_time(5i)", prefix: "downtime" }, { class: "form-control date" } %> -
- -
-

on

-
- -
- <%= f.label :start_time, "Day", for: "downtime_start_time_3i" %> - <%= select_day @downtime.start_time&.day || Date.tomorrow.day, { field_name: "start_time(3i)", prefix: "downtime" }, { class: "form-control date" } %> -
-
- <%= f.label :start_time, "Month", for: "downtime_start_time_2i" %> - <%= select_month@downtime.start_time&.month || Date.tomorrow.month, { field_name: "start_time(2i)", prefix: "downtime" }, { class: "form-control date" } %> -
- -
- <%= f.label :start_time, "Year", for: "downtime_start_time_1i" %> - <%= select_year @downtime.start_time&.year || Date.tomorrow.year, { field_name: "start_time(1i)", prefix: "downtime" }, { class: "form-control date" } %> -
+
+
+ <%= render "govuk_publishing_components/components/fieldset", { + legend_text: "From", + heading_size: "l" + } do %> +
+
+ <%= render "govuk_publishing_components/components/fieldset", { + legend_text: "Date", + heading_size: "m" + } do %> + <%= render "govuk_publishing_components/components/date_input", { + hint: "For example, 01 08 2022", + } %> + <% end %> +
+
+ <%= render "govuk_publishing_components/components/fieldset", { + legend_text: "Time", + heading_size: "m" + } do %> + <%= render "time_input", { + hint: "For example, 9:30 or 19:30" + } %> + <% end %> +
+
+ <% end %>
+
-
-

to

+
+
+ <%= render "govuk_publishing_components/components/fieldset", { + legend_text: "To", + heading_size: "l" + } do %> +
+
+ <%= render "govuk_publishing_components/components/fieldset", { + legend_text: "Date", + heading_size: "m" + } do %> + <%= render "govuk_publishing_components/components/date_input", { + hint: "For example, 01 08 2022", + } %> + <% end %> +
+
+ <%= render "govuk_publishing_components/components/fieldset", { + legend_text: "Time", + heading_size: "m" + } do %> + <%= render "time_input", { + hint: "For example, 9:30 or 19:30" + } %> + <% end %> +
+
+ <% end %>
+
-
- -
- <%= f.label :end_time, "Hour", for: "downtime_end_time_4i" %> - <%= select_hour @downtime.end_time&.hour || 1.hour.from_now.beginning_of_hour, { field_name: "end_time(4i)", prefix: "downtime" }, { class: "form-control date" } %> -
- -
- <%= f.label :end_time, "Minute", for: "downtime_end_time_5i" %> - <%= select_minute @downtime.end_time&.minute, { field_name: "end_time(5i)", prefix: "downtime" }, { class: "form-control date" } %> -
- -
-

on

-
- -
- <%= f.label :start_time, "Day", for: "downtime_end_time_3i" %> - <%= select_day @downtime.end_time&.day || Date.tomorrow.day, { field_name: "end_time(3i)", prefix: "downtime" }, { class: "form-control date" } %> -
- -
- <%= f.label :end_time, "Month", for: "downtime_end_time_2i" %> - <%= select_month @downtime.end_time&.month || Date.tomorrow.month, { field_name: "end_time(2i)", prefix: "downtime" }, { class: "form-control date" } %> -
- -
- <%= f.label :end_time, "Year", for: "downtime_end_time_1i" %> - <%= select_year @downtime.end_time&.year || Date.tomorrow.year, { field_name: "end_time(1i)", prefix: "downtime" }, { class: "form-control date" } %> -
+
+
+ <%= render "govuk_publishing_components/components/textarea", { + label: { + heading_size: "l", + text: "Message" + }, + hint: "Message is auto-generated once a schedule has been made.", + name: "message" + } %>
- -
- -<%= form_group(f, :message) do %> - <%= f.text_area :message, class: 'form-control input-md-6 js-downtime-message', rows: 5 %> -<% end %> - -

- - Messages appear on the start page one day before the downtime is due. -

- -
diff --git a/app/views/downtimes/_time_input.html.erb b/app/views/downtimes/_time_input.html.erb new file mode 100644 index 000000000..9af41dca0 --- /dev/null +++ b/app/views/downtimes/_time_input.html.erb @@ -0,0 +1,83 @@ +<% + + id ||= "input-#{SecureRandom.hex(4)}" + name ||= nil + items ||= [ + { :name => "hour", :width => 2 }, + { :name => "minute", :width => 2 } + ] + + legend_text ||= nil + hint ||= nil + error_message ||= nil + error_items ||= [] + describedby ||= nil + has_error ||= error_message || error_items.any? + + css_classes = %w(gem-c-date-input govuk-date-input) + form_group_css_classes = %w(govuk-form-group) + form_group_css_classes << "govuk-form-group--error" if has_error + + hint_id = "hint-#{SecureRandom.hex(4)}" + error_id = "error-#{SecureRandom.hex(4)}" + + aria_described_by ||= nil + if hint || has_error || describedby + aria_described_by = [] + aria_described_by << hint_id if hint + aria_described_by << error_id if has_error + aria_described_by << describedby if describedby + aria_described_by = aria_described_by.join(" ") + end +%> + +<%= content_tag :div, class: form_group_css_classes do %> + <% fieldset_content = capture do %> + <% if hint %> + <%= render "govuk_publishing_components/components/hint", { + id: hint_id, + text: hint, + margin_bottom: 2 + } %> + <% end %> + + <% if has_error %> + <%= render "govuk_publishing_components/components/error_message", { + id: error_id, + text: error_message, + items: error_items, + } %> + <% end %> + + <%= tag.div class: css_classes, id: id do %> + <% items.each do |item, index| %> + <%= tag.div class: "govuk-date-input__item" do %> + <%= render "govuk_publishing_components/components/input", { + label: { + text: item[:label] || item[:name].capitalize + }, + grouped: true, + has_error: has_error, + name: name ? (name + "[" + item[:name] + "]") : item[:name], + value: item[:value], + width: item[:width], + id: item[:id], + type: "number", + data: item[:data] + } %> + <% end %> + <% end %> + <% end %> + <% end %> + + <% if legend_text %> + <%= render "govuk_publishing_components/components/fieldset", { + describedby: aria_described_by, + legend_text: legend_text, + text: fieldset_content, + role: "group" + } %> + <% else %> + <%= fieldset_content %> + <% end %> +<% end %> diff --git a/app/views/downtimes/new.html.erb b/app/views/downtimes/new.html.erb index e7e64545c..0c42ced5c 100644 --- a/app/views/downtimes/new.html.erb +++ b/app/views/downtimes/new.html.erb @@ -1,18 +1,24 @@ <% content_for :page_title, 'Schedule downtime' %> +<% content_for :title, 'Add downtime message' %> +<% content_for :title_context, @downtime.artefact.name %> -
    -
  • <%= link_to 'Downtime', downtimes_path %>
    • -
  • <%= @downtime.artefact.name %>
    • -
+
+ <%= render "govuk_publishing_components/components/lead_paragraph", { + text: "Downtime message appear on the service's start page one day before the downtime is due to occur.", + margin_bottom: 6 + } %> -
-

- <%= @downtime.artefact.name %> - Schedule a downtime message -

-
+ <%= form_for @downtime, url: edition_downtime_path(@edition), html: { class: 'form well remove-top-margin', 'data-module' => 'downtime-message' } do |f| %> + <%= render 'form', f: f %> + +
+ <%= render "govuk_publishing_components/components/button", { + text: "Save", + value: "save", + name: "save" + } %> -<%= form_for @downtime, url: edition_downtime_path(@edition), html: { class: 'form well remove-top-margin', 'data-module' => 'downtime-message' } do |f| %> - <%= render 'form', f: f %> - <%= f.submit 'Schedule downtime message', class: 'js-submit btn btn-success' %> -<% end %> + <%= link_to "Cancel", downtimes_path, class: "govuk-link govuk-link--no-visited-state" %> +
+ <% end %> +
diff --git a/app/views/layouts/design_system.html.erb b/app/views/layouts/design_system.html.erb index 1857f45e9..17a6138f4 100644 --- a/app/views/layouts/design_system.html.erb +++ b/app/views/layouts/design_system.html.erb @@ -24,6 +24,7 @@
<%= render "govuk_publishing_components/components/title", { title: yield(:title), + context: yield(:title_context), margin_top: 0, margin_bottom: 6, } %> From 1730fbd0d0e9bad29e83beebe2736221b28142c0 Mon Sep 17 00:00:00 2001 From: Mark Taylor <138604938+mtaylorgds@users.noreply.github.com> Date: Wed, 31 Jan 2024 15:33:04 +0000 Subject: [PATCH 2/2] Add route test for the add downtime page routing Ensure the state of the `design_system_downtime_new` feature toggle is being used to control routing to the add downtime page controllers. --- test/integration/routes_test.rb | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/test/integration/routes_test.rb b/test/integration/routes_test.rb index 481f0e1c6..a03db01b5 100644 --- a/test/integration/routes_test.rb +++ b/test/integration/routes_test.rb @@ -23,4 +23,18 @@ class RoutesTest < ActionDispatch::IntegrationTest assert_routing("/editions/#{edition_id}/downtime/edit", controller: "downtimes", action: "edit", edition_id:) end + + should "route to new downtimes controller when 'design_system_downtime_new' toggle is enabled" do + test_strategy = Flipflop::FeatureSet.current.test! + test_strategy.switch!(:design_system_downtime_new, true) + + assert_routing("/editions/1/downtime/new", controller: "downtimes", action: "new", edition_id: "1") + end + + should "route to legacy downtimes controller when 'design_system_downtime_new' toggle is disabled" do + test_strategy = Flipflop::FeatureSet.current.test! + test_strategy.switch!(:design_system_downtime_new, false) + + assert_routing("/editions/1/downtime/new", controller: "legacy_downtimes", action: "new", edition_id: "1") + end end