Freshen up message index UI

This commit has some changes to the message index UI requested by @keithrwilson. Changes include:

- Don't truncate message body
- Make it more clear what days messages are sent on and at what time
- Move everything out of the table where it is squished together and difficult to read
- Make tags more usable by providing links
- Hide buttons for users that aren't admins (snuck in some early work on #241)

app/views/broadcast_messages/_broadcast_message.html.erb

@@ -0,0 +1,19 @@
+<h1><%= message.title %></h1>
+<p><%= message.body %></p>
+<% if message.last_sent_at.present? %>
+  <p>
+    <strong>Last sent at:</strong>
+    <%= message.last_sent_at %>
+  </p>
+<% end %>
+<% if current_user.admin? %>
+  <%= link_to broadcast_message_send_broadcast_messages_path(message), method: :post, class: 'button button-send', data: { confirm: "Are you sure you want to send this message to all Slack users right now?" } do %>
+    <icon class="icon-send"></icon>
+    <span>Send</span>
+  <% end %>
+  <%= link_to new_broadcast_message_test_message_path(message), class: 'button button-test' do %>
+    <icon class="icon-send"></icon>
+    <span>Test</span>
+  <% end %>
+<% end %>
+<hr>

app/views/broadcast_messages/index.html.erb

@@ -1,39 +1,9 @@
 <%= render "header", title: "Broadcast messages" %>
 <section class="main-content">
-  <%= render "flashes" -%>
-  <table>
-    <tr>
-      <th>Title</th>
-      <th>Body</th>
-      <th>Sent at</th>
-      <% if @current_user.admin? %>
-        <th class="column-buttons"></th>
-      <% end %>
-      <th class="column-buttons"></th>
-    </tr>
-
-    <% @broadcast_messages.each do |broadcast_message| %>
-      <tr>
-        <td><%= broadcast_message.title %></td>
-        <td><%= truncate(broadcast_message.body, length: 100) %></td>
-        <td><%= broadcast_message.last_sent_at %></td>
-        <% if @current_user.admin? %>
-          <td>
-            <%= link_to broadcast_message_send_broadcast_messages_path(broadcast_message), method: :post, class: 'button button-send', data: { confirm: "Are you sure you want to send this message to all Slack users right now?" } do %>
-              <icon class="icon-send"></icon>
-              <span>Send</span>
-            <% end %>
-          </td>
-        <% end %>
-        <td>
-          <%= link_to new_broadcast_message_test_message_path(broadcast_message), class: 'button button-test' do %>
-            <icon class="icon-send"></icon>
-            <span>Test</span>
-          <% end %>
-        </td>
-      </tr>
-    <% end %>
-  </table>
+  <%= render "flashes" %>
+  <% @broadcast_messages.each do |message| %>
+    <%= render 'broadcast_message', message: message %>
+  <% end %>
   <% if @broadcast_messages.empty? %>
     <label>No matches found.</label>
   <% end %>

app/views/onboarding_messages/_form.html.erb

@@ -1,7 +1,7 @@
 <%= simple_form_for @onboarding_message do |form| %>
   <%= form.input :title,
     hint: "This is for identifying purposes only, the employee will not see the message title" %>
-  <%= form.input :body, label: "Message body",
+  <%= form.input :body, label: "Message body", as: 'text',
     hint: "Don't forget, you can format your message using #{link_to "Slack's message formatting rules",
     "https://slack.zendesk.com/hc/en-us/articles/202288908-Formatting-your-messages", target: "_blank"}.".html_safe %>
   <%= form.input :days_after_start, label: "Business days after employee starts to send message" %>

app/views/onboarding_messages/_onboarding_message.html.erb

@@ -0,0 +1,34 @@
+<h1><%= message.title %></h1>
+<h2>
+  Day <%= message.days_after_start %> -
+  <%= message.time_of_day.strftime('%l:%M %p') %>
+</h2>
+<p><%= message.body %></p>
+<% if message.end_date.present? %>
+  <p>
+    <strong>End date:</strong>
+    <%= message.end_date %>
+  </p>
+<% end %>
+<p>
+  <strong>Tags:</strong>
+  <% message.tag_list.each do |tag| %>
+    <%= link_to tag, onboarding_messages_path(tag: tag, title: '', body: '') %>
+  <% end %>
+</p>
+<% if current_user.admin? %>
+  <%= link_to edit_onboarding_message_path(message), class: 'button button-edit' do %>
+    <icon class="icon-edit"></icon>
+    <span>Edit</span>
+  <% end %>
+  <%= link_to new_onboarding_message_test_message_path(message), class: 'button button-test' do %>
+    <icon class="icon-send"></icon>
+    <span>Test</span>
+  <% end %>
+  <%= link_to 'Delete', message,
+    method: :delete,
+    class: 'button button-delete icon-circle-x',
+    data: { confirm: 'Are you sure you want to delete this message?' }
+  %>
+<% end %>
+<hr>

app/views/onboarding_messages/index.html.erb

@@ -12,55 +12,9 @@
 
 <section class="main-content">
   <%= render "flashes" -%>
-  <table>
-    <tr>
-      <th>Send day <span class="data-small">(business days after employee start)</span></th>
-      <th>Send time</th>
-      <th>End date</th>
-      <th>Title</th>
-      <th>Body</th>
-      <th>Tags</th>
-      <% if @current_user.admin? %>
-        <th class="column-buttons"></th>
-        <th class="column-buttons"></th>
-      <% end %>
-      <th class="column-buttons"></th>
-    </tr>
-
-    <% @onboarding_messages.each do |message| %>
-      <tr>
-        <td><%= message.days_after_start %></td>
-        <td><%= message.time_of_day.strftime("%l:%M %p") %></td>
-        <td><%= message.end_date %></td>
-        <td><%= message.title %></td>
-        <td><%= truncate(message.body, length: 100) %></td>
-        <td><%= message.tag_list.join(", ") %></td>
-        <% if @current_user.admin? %>
-          <td>
-            <%= link_to edit_onboarding_message_path(message), class: 'button button-edit' do %>
-              <icon class="icon-edit"></icon>
-              <span>Edit</span>
-            <% end %>
-          </td>
-        <% end %>
-        <td>
-          <%= link_to new_onboarding_message_test_message_path(message), class: 'button button-test' do %>
-            <icon class="icon-send"></icon>
-            <span>Test</span>
-          <% end %>
-        </td>
-        <% if @current_user.admin? %>
-          <td>
-            <%= link_to 'Delete', message,
-              method: :delete,
-              class: 'button button-delete icon-circle-x',
-              data: { confirm: 'Are you sure you want to delete this message?' }
-            %>
-          </td>
-        <% end %>
-      </tr>
-    <% end %>
-  </table>
+  <% @onboarding_messages.each do |message| %>
+    <%= render 'onboarding_message', message: message %>
+  <% end %>
   <% if @onboarding_messages.empty? %>
     <label>No matches found.</label>
   <% end %>

app/views/quarterly_messages/_quarterly_message.html.erb

@@ -0,0 +1,24 @@
+<h1><%= message.title %></h1>
+<p><%= message.body %></p>
+<p>
+  <strong>Tags:</strong>
+  <% message.tag_list.each do |tag| %>
+    <%= link_to tag, quarterly_messages_path(tag: tag, title: '', body: '') %>
+  <% end %>
+</p>
+<% if current_user.admin? %>
+  <%= link_to edit_quarterly_message_path(message), class: 'button button-edit' do %>
+    <icon class="icon-edit"></icon>
+    <span>Edit</span>
+  <% end %>
+  <%= link_to new_quarterly_message_test_message_path(message), class: 'button button-test' do %>
+    <icon class="icon-send"></icon>
+    <span>Test</span>
+  <% end %>
+  <%= link_to 'Delete', message,
+    method: :delete,
+    class: 'button button-delete icon-circle-x',
+    data: { confirm: 'Are you sure you want to delete this message?' }
+  %>
+<% end %>
+<hr>

app/views/quarterly_messages/index.html.erb

@@ -13,49 +13,9 @@
 <section class="main-content">
   <%= render "flashes" -%>
   <%= render "disabled_alert" %>
-  <table>
-    <tr>
-      <th>Title</th>
-      <th>Body</th>
-      <th>Tags</th>
-      <% if @current_user.admin? %>
-        <th class="column-buttons"></th>
-        <th class="column-buttons"></th>
-      <% end %>
-      <th class="column-buttons"></th>
-    </tr>
-
-    <% @quarterly_messages.each do |message| %>
-      <tr>
-        <td><%= message.title %></td>
-        <td><%= truncate(message.body, length: 100) %></td>
-        <td><%= message.tag_list.join(", ") %></td>
-        <% if @current_user.admin? %>
-          <td>
-            <%= link_to edit_quarterly_message_path(message), class: 'button button-edit' do %>
-              <icon class="icon-edit"></icon>
-              <span>Edit</span>
-            <% end %>
-          </td>
-        <% end %>
-        <td>
-          <%= link_to new_quarterly_message_test_message_path(message), class: 'button button-test' do %>
-            <icon class="icon-send"></icon>
-            <span>Test</span>
-          <% end %>
-        </td>
-        <% if @current_user.admin? %>
-          <td>
-            <%= link_to 'Delete', message,
-              method: :delete,
-              class: 'button button-delete icon-circle-x',
-              data: { confirm: 'Are you sure you want to delete this message?' }
-            %>
-          </td>
-        <% end %>
-      </tr>
-    <% end %>
-  </table>
+  <% @quarterly_messages.each do |message| %>
+    <%= render 'quarterly_message', message: message %>
+  <% end %>
   <% if @quarterly_messages.empty? %>
     <label>No matches found.</label>
   <% end %>

spec/features/send_test_message_spec.rb

@@ -4,7 +4,7 @@
   scenario "onboarding message sends successfully" do
     create_onboarding_message
     create_employee
-    login_with_oauth
+    login_with_oauth create(:admin)
     visit onboarding_messages_path
 
     page.find(".button-test").click
@@ -17,7 +17,7 @@
   scenario "quarterly message sends successfully" do
     create_quarterly_message
     create_employee
-    login_with_oauth
+    login_with_oauth create(:admin)
     visit quarterly_messages_path
 
     page.find(".button-test").click
@@ -30,7 +30,7 @@
   scenario "broadcast message sends successfully" do
     create_broadcast_message
     create_employee
-    login_with_oauth
+    login_with_oauth create(:admin)
     visit broadcast_messages_path
 
     page.find(".button-test").click
@@ -42,7 +42,7 @@
 
   scenario "attempt to send test to Slack username that does not exist" do
     create_broadcast_message
-    login_with_oauth
+    login_with_oauth create(:admin)
     visit broadcast_messages_path
 
     page.find(".button-test").click
@@ -61,7 +61,7 @@
       slack_user_id: nil,
     )
 
-    login_with_oauth
+    login_with_oauth create(:admin)
     visit broadcast_messages_path
 
     page.find(".button-test").click

spec/features/view_onboarding_messages_spec.rb

@@ -57,22 +57,16 @@
 
     visit onboarding_messages_path
 
-    expect(page).to have_message_in_order(message: first_onboarding_message,
-                                          order: 1)
-    expect(page).to have_message_in_order(message: second_onboarding_message,
-                                          order: 2)
+    date_html_tags = page.all('.main-content h2')
+
+    expect(date_html_tags[0]).to have_content formatted_time(first_onboarding_message)
+    expect(date_html_tags[1]).to have_content formatted_time(second_onboarding_message)
   end
 
   private
 
-  def have_message_in_order(message:, order:)
-    order = order + 1
-    have_selector("table > tr:nth-child(#{order}) > td:nth-child(2)",
-                  text: formatted_time(message).strip)
-  end
-
   def formatted_time(onboarding_message)
-    onboarding_message.time_of_day.strftime("%l:%M %p")
+    onboarding_message.time_of_day.strftime("%l:%M %p").gsub(/^ /, '')
   end
 
   def create_onboarding_messages