use design system components

app/helpers/downtimes_helper.rb

@@ -14,4 +14,27 @@ def downtime_datetime(downtime)
 
     strings.join(" ").gsub(":00", "").gsub("12pm", "midday").gsub("12am", "midnight")
   end
+
+  def transactions_table_entries(transactions)
+    transactions.map do |transaction|
+      downtime = Downtime.for(transaction.artefact)
+
+      [
+        { text: transaction.title },
+        {
+          text: downtime ? "Scheduled downtime #{downtime_datetime(downtime)}" : "Live",
+        },
+        { text: action_link_for_transaction(transaction) },
+        { text: link_to("View on website", "#{Plek.website_root}/#{transaction.slug}", class: "govuk-link") },
+      ]
+    end
+  end
+
+  def action_link_for_transaction(transaction)
+    if transaction.artefact.downtime
+      link_to "Edit downtime", edit_edition_downtime_path(transaction), class: "govuk-link"
+    else
+      link_to "Add downtime", new_edition_downtime_path(transaction), class: "govuk-link"
+    end
+  end
 end

app/views/downtimes/index.html.erb

@@ -1,56 +1,30 @@
 <% content_for :page_title, 'Downtime messages' %>
+<% content_for :title, "Downtime messages" %>
 
-<div class="page-title">
-  <h1>Downtime messages</h1>
-  <p class="lead">Show a message on a published transaction start page for a specific time.</p>
-</div>
+<div class="govuk-grid-column-full">
+
+  <%= render "govuk_publishing_components/components/lead_paragraph", {
+    text: "Show a message on a published transaction start page for a specific time.",
+    margin_bottom: 6
+  } %>  
 
-<table class="table table-bordered table-striped" data-module="filterable-table">
-  <caption class="h2 remove-top-margin">
-    <h2 class="remove-top-margin remove-bottom-margin">Services</h2>
-  </caption>
-  <thead>
-    <tr class="table-header">
-      <th>Service start page</th>
-      <th>Service status</th>
-      <th>Action</th>
-    </tr>
-    <tr class="if-no-js-hide table-header-secondary">
-      <td colspan="3">
-        <form>
-          <label class="remove-bottom-margin" for="table-filter">Filter services</label>
-          <p class="help-inline">For example ‘driving’ or ‘scheduled downtime’</p>
-          <input id="table-filter" type="text" class="form-control normal js-filter-table-input">
-        </form>
-      </td>
-    </tr>
-  </thead>
-  <tbody>
-    <% @transactions.each do |transaction| %>
-    <tr>
-      <td>
-        <h3 class="publication-table-title">
-          <%= link_to transaction.title, Downtime.for(transaction.artefact).present? ?
-                                          edit_edition_downtime_path(transaction) :
-                                          new_edition_downtime_path(transaction) %>
-        </h3>
-        <%= link_to "/#{transaction.slug}", "#{Plek.website_root}/#{transaction.slug}", class: 'link-muted' %>
-      </td>
-        <% if downtime = Downtime.for(transaction.artefact) %>
-          <td>
-            Scheduled downtime<br />
-            <span class="text-muted"><%= downtime_datetime(downtime) %></span>
-          </td>
-          <td>
-            <%= link_to 'Edit downtime', edit_edition_downtime_path(transaction), class: 'btn btn-info' %>
-          </td>
-        <% else %>
-          <td>Live</td>
-          <td>
-            <%= link_to 'Add downtime', new_edition_downtime_path(transaction), class: 'btn btn-default' %>
-          </td>
-        <% end %>
-    </tr>
-    <% end %>
-  </tbody>
-</table>
+  <%= render "govuk_publishing_components/components/table", {
+    filterable: true,
+    label: "Filter by service or service status",
+    head: [
+      {
+        text: "Service Start page"
+      },
+      {
+        text: "Service Status",
+      },
+      {
+        text: tag.span("Action", class: "govuk-visually-hidden")
+      },
+      {
+        text: tag.span("Link to view live on GOV.UK", class: "govuk-visually-hidden")
+      }
+    ],
+    rows: transactions_table_entries(@transactions.to_a)
+  } %>
+</div>

app/views/layouts/design_system.html.erb

@@ -18,19 +18,8 @@
 
   <div class="govuk-width-container">
     <main class="govuk-main-wrapper" id="main-content" role="main">
-      <% [:success, :info, :warning, :danger, :notice, :alert].select { |k| flash[k].present? }.each do |k| %>
-        <%
-          case k
-          when :notice
-            alert_class = "success"
-          when :alert
-            alert_class = "danger"
-          else
-            alert_class = k
-          end
-        %>
-          <%= flash[k] %>
-      <% end %>
+
+      <%= render "shared/flash", flash: flash %>
 
       <% if yield(:title).present? %>
         <div class="govuk-grid-row">

app/views/shared/_flash.html.erb

@@ -0,0 +1,15 @@
+<% [:success, :info, :warning, :danger, :notice, :alert].select { |k| flash[k].present? }.each do |k| %>
+  <% if k == :warning || k == :danger || k == :alert %>
+    <%= render "govuk_publishing_components/components/error_alert", {
+      message: flash[k]
+    } %>
+  <% elsif k == :notice || k == :info %>
+    <%= render "govuk_publishing_components/components/notice", {
+      description: flash[k]
+    } %>
+  <% elsif k == :success %>
+    <%= render "govuk_publishing_components/components/success_alert", {
+      message: flash[k]
+    } %>
+  <% end %>
+<% end %>

test/unit/helpers/downtimes_helper_test.rb

@@ -5,6 +5,14 @@ class DowntimesHelperTest < ActionView::TestCase
 
   def setup
     @next_year = 1.year.from_now.year
+    @edition_live = FactoryBot.create(:transaction_edition)
+    @edition_downtime = FactoryBot.create(:transaction_edition)
+    @downtime = FactoryBot.create(
+      :downtime,
+      artefact: @edition_downtime.artefact,
+      start_time: Time.zone.local(@next_year, 10, 10, 15),
+      end_time: Time.zone.local(@next_year, 10, 11, 18),
+    )
   end
 
   test "#downtime_datetime should be a short string representation start and end time" do
@@ -21,4 +29,22 @@ def setup
     downtime = FactoryBot.build(:downtime, start_time: Time.zone.local(@next_year, 10, 10, 21), end_time: Time.zone.local(@next_year, 10, 11, 0))
     assert_equal "9pm to midnight on 10 October", downtime_datetime(downtime)
   end
+
+  test "#transactions_table_entries should create valid entries for table" do
+    entries = transactions_table_entries([@edition_live, @edition_downtime])
+    assert_equal entries, [
+      [
+        { text: @edition_live.title },
+        { text: "Live" },
+        { text: "<a class=\"govuk-link\" href=\"/editions/#{@edition_live.id}/downtime/new\">Add downtime</a>" },
+        { text: "<a class=\"govuk-link\" href=\"#{Plek.website_root}/#{@edition_live.slug}\">View on website</a>" },
+      ],
+      [
+        { text: @edition_downtime.title },
+        { text: "Scheduled downtime 3pm on 10 October to 6pm on 11 October" },
+        { text: "<a class=\"govuk-link\" href=\"/editions/#{@edition_downtime.id}/downtime/edit\">Edit downtime</a>" },
+        { text: "<a class=\"govuk-link\" href=\"#{Plek.website_root}/#{@edition_downtime.slug}\">View on website</a>" },
+      ],
+    ]
+  end
 end