🦋 Implement empty state in outbox (#3578)

🦋 implements empty state in inbox

app/views/provider/admin/messages/outbox/index.html.slim

@@ -1,39 +1,46 @@
 - content_for :page_header_title, 'Sent Messages'
 
 - if @messages.blank?
-  p= t('provider.admin.messages.no_messages')
+  div class="pf-c-empty-state"
+    div class="pf-c-empty-state__content"
+      i class="fas fa-paper-plane pf-c-empty-state__icon" aria-hidden="true"
+      h1 class="pf-c-title pf-m-lg"
+        = t('.empty_state.title')
+      div class="pf-c-empty-state__body"
+        = t('.empty_state.body')
+      = link_to 'Compose Message', new_provider_admin_messages_outbox_path, class: "pf-c-button pf-m-primary"
 
 - else
   = render 'provider/admin/messages/bulk_operations', scope: :messages, messages: @messages
 
-table class="pf-c-table pf-m-grid-lg" role="grid" aria-label="Sent messages table" id="messages"
-  thead
-    tr role="row"
-      td role="columnheader" scope="col" class="select pf-c-table__check"
-        label
-          = bulk_select_all
-      th role="columnheader" scope="col" Subject
-      th role="columnheader" scope="col" From
-      th role="columnheader" scope="col" Date Sent
-      th role="columnheader" scope="col" class="pf-c-table__action pf-m-fit-content"
-        = link_to 'Compose Message', new_provider_admin_messages_outbox_path, class: "action new"
-  tbody role="rowgroup"
-    - @messages.each do |message|
-      tr role="row" id="message_#{message.id}"
-        td class="pf-c-table__check select" role="cell" id=message.id
+  table class="pf-c-table pf-m-grid-lg" role="grid" aria-label="Sent messages table" id="messages"
+    thead
+      tr role="row"
+        td role="columnheader" scope="col" class="select pf-c-table__check"
           label
-            = bulk_select_one message
-        td role="cell" data-label="Subject"
-          = link_to message_subject(message), provider_admin_messages_outbox_path(message)
-        td role="cell" data-label="From"
-          = message_receiver(message)
-        td role="cell" data-label="Data Sent"
-          = message.created_at.to_s(:long)
-        td role="cell" class="pf-c-table__action"
-          div class="pf-c-overflow-menu"
-            div class="pf-c-overflow-menu__content"
-              div class="pf-c-overflow-menu__group pf-m-button-group"
-                div class="pf-c-overflow-menu__item"
-                  = delete_button_for provider_admin_messages_outbox_path(message), class: 'action'
+            = bulk_select_all
+        th role="columnheader" scope="col" Subject
+        th role="columnheader" scope="col" From
+        th role="columnheader" scope="col" Date Sent
+        th role="columnheader" scope="col" class="pf-c-table__action pf-m-fit-content"
+          = link_to 'Compose Message', new_provider_admin_messages_outbox_path, class: "action new"
+    tbody role="rowgroup"
+      - @messages.each do |message|
+        tr role="row" id="message_#{message.id}"
+          td class="pf-c-table__check select" role="cell" id=message.id
+            label
+              = bulk_select_one message
+          td role="cell" data-label="Subject"
+            = link_to message_subject(message), provider_admin_messages_outbox_path(message)
+          td role="cell" data-label="From"
+            = message_receiver(message)
+          td role="cell" data-label="Data Sent"
+            = message.created_at.to_s(:long)
+          td role="cell" class="pf-c-table__action"
+            div class="pf-c-overflow-menu"
+              div class="pf-c-overflow-menu__content"
+                div class="pf-c-overflow-menu__group pf-m-button-group"
+                  div class="pf-c-overflow-menu__item"
+                    = delete_button_for provider_admin_messages_outbox_path(message), class: 'action'
 
-  = will_paginate(@messages)
+    = will_paginate(@messages)

config/locales/en.yml

@@ -433,7 +433,11 @@ en:
             empty_state:
               title: "Nothing to see here"
               body: "Your inbox is empty, there are no new messages."
-        no_messages: "You have sent no messages."
+        outbox:
+          index:
+            empty_state:
+              title: "Nothing to see here"
+              body: "Your outbox is empty, there are no new sent messages."
       cms:
         builtin_legal_terms:
           info:

features/buyers/accounts/show.feature

@@ -9,7 +9,7 @@ Feature: Buyer account overview
   Scenario: Navigation
 
   Scenario: Sending a message
-    Given account "Bob Buyer" has no messages
+    Given buyer "Bob Buyer" has no messages
     And they go to the buyer account page for "Bob Buyer"
     When they follow "Send message"
     And fill in "Subject" with "Party tonite!"

features/old/messages/buyer_side.feature

@@ -10,7 +10,7 @@ Feature: Buyer side messages
     When I log in as "bob" on foo.3scale.localhost
 
   Scenario: Sending a message
-    Given account "bob" has no messages
+    Given buyer "bob" has no messages
     When I go to the dashboard
     And I follow "Messages"
     And I follow "Compose"

features/provider/admin/messages/new.feature

@@ -0,0 +1,19 @@
+@javascript
+Feature: Audience > Messages > Outbox > New
+
+  Background:
+    Given a provider is logged in
+
+  Scenario: Message can't be sent without subject
+    Given they go to the outbox compose page
+    And fill in "Body" with "Subject is empty"
+    And press "Send"
+    Then should see "Compose"
+    And the current page is the outbox compose page
+
+  Scenario: Message can't be sent without body
+    Given they go to the outbox compose page
+    And fill in "Subject" with "Body is empty"
+    And press "Send"
+    Then should see "Compose"
+    And the current page is the outbox compose page

features/provider/admin/messages/outbox.feature

@@ -1,24 +1,71 @@
 @javascript
-Feature: Outbox messages
-  In order to facilitate communication between me and my buyers
-  As a provider
-  I want to have an internal messaging system at my disposal
+Feature: Audience > Messages > Outbox
 
   Background:
     Given a provider is logged in
-    Given these buyers signed up to provider "foo.3scale.localhost"
-      | jane | foo.3scale.localhost | JaneApp, JaneAppTwo |
-    And I am on the outbox compose page
-
-  Scenario: Outbox Message can't be sent without subject
-    And I fill in "Body" with "Subject is empty"
-    And I press "Send"
-    Then I should see "Compose"
-    And I am on the outbox compose page
-
-  Scenario: Outbox Message can't be sent without body
-    And I fill in "Subject" with "Body is empty"
-    And I press "Send"
-    Then I should see "Compose"
-    And I am on the outbox compose page
+    And a buyer "Alice" of the provider
 
+  Scenario: Navigation from Audience
+    When they press "Dashboard"
+    And follow "Audience"
+    And press "Messages"
+    And follow "Sent messages"
+    Then the current page is the provider sent messages page
+
+  Scenario: Navigation from Dashboard
+    When they follow "0 Messages"
+    And follow "Sent messages"
+    Then the current page is the provider sent messages page
+
+  Rule: Outbox is empty
+    Background:
+      Given the provider has no messages
+
+    Scenario: Empty state
+      When they go to the provider sent messages page
+      Then should see "Nothing to see here"
+      And should see link "Compose Message"
+
+  Rule: Inbox is not empty
+    Background:
+      Given the provider has no messages
+      But a message sent from the provider to buyer "Alice" with subject "Welcome" and body "Welcome Alice"
+      And a message sent from the provider to buyer "Alice" with subject "Bananas" and body "Alice, you're bananas"
+
+    Scenario: List of messages
+      When they go to the provider sent messages page
+      Then should not see "Nothing to see here"
+      And the table should contain the following:
+        | Subject | From  |
+        | Welcome | Alice |
+        | Bananas | Alice |
+
+    Scenario: Reading a message
+      Given they go to the provider sent messages page
+      When follow "Welcome"
+      Then the current page is the provider page of message with subject "Welcome Alice"
+
+    Scenario: Bulk operations
+      Given they go to the provider sent messages page
+      When item "Welcome" is selected
+      Then the following bulk operations are available:
+        | Delete |
+      But item "Welcome" is unselected
+      And the bulk operations are not visible
+
+    Scenario: Deleting messages in bulk
+      Given a message sent from the provider to buyer "Alice" with subject "Deleteme" and body "Deleteme"
+      And they go to the provider sent messages page
+      When item "Deleteme" is selected
+      And press "Delete" within the bulk operations
+      And press "Delete" within the modal
+      Then wait a moment
+      And should see "Messages moved into the trash"
+      And should not see "Deleteme"
+
+    Scenario: Deleting a message
+      Given a message sent from the provider to buyer "Alice" with subject "Deleteme" and body "Deleteme"
+      When they go to the provider sent messages page
+      And delete the message with subject "Deleteme"
+      And should see "Message was deleted."
+      And should not see "Deleteme"

features/step_definitions/messages_steps.rb

@@ -12,7 +12,7 @@
   end
 end
 
-Given "{account} has no messages" do |account|
+Given "{provider_or_buyer} has no messages" do |account|
   account.messages.each(&:destroy)
   account.received_messages.destroy_all
 end

features/step_definitions/provider/admin/messages/outbox_steps.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+When "(they )delete the message with subject {string}" do |subject|
+  message = Message.find_by!(subject: subject)
+  find('tr', id: dom_id(message)).click_button('Delete')
+end

features/support/paths.rb

@@ -78,15 +78,22 @@ def path_to(page_name, *args) # rubocop:disable Metrics/AbcSize, Metrics/Cycloma
     when "the provider inbox page"
       provider_admin_messages_root_path
 
+    when "the provider sent messages page"
+      provider_admin_messages_outbox_index_path
+
+    when /^the provider page of message with subject "([^"]*)"$/
+      message = @provider.sent_messages.find { |m| m.subject = $1 }
+      provider_admin_messages_outbox_path(message)
+
+    when "the outbox compose page"
+      new_provider_admin_messages_outbox_path
+
     #
     # Messages - buyer side
     #
     when "the compose page"
       new_admin_messages_outbox_path
 
-    when "the outbox compose page"
-      new_provider_admin_messages_outbox_path
-
     when "the inbox page"
       admin_messages_root_path