From 810d5cf3a6e5d4cc166b42c1dfdb59151a8d0f2a Mon Sep 17 00:00:00 2001
From: Julianna Tetreault <32834804+juliannatetreault@users.noreply.github.com>
Date: Thu, 5 May 2022 13:24:06 -0600
Subject: [PATCH] "Empty State" for Invited Members (#17571)

* WIP: Adds an empty state to the invitations table

* Pulls invited member empty state into partial

* WIP: Center empty state within invited members table body

* Removes partial and adjusts empty space styling

* Adds an e2e for the empty state to invitedUsers.spec.js

* Moves empty state outside of table and adds aria-describedby to table

* Update app/views/admin/invitations/index.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Adjusts ara-describedby erb tag

* Updates the route used within invitedUsers.spec.js to fix e2e failure

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
---
 app/views/admin/invitations/index.html.erb         | 12 +++++++++++-
 .../adminFlows/users/invitedUsers.spec.js          | 14 ++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/app/views/admin/invitations/index.html.erb b/app/views/admin/invitations/index.html.erb
index e31955f82..666c522c0 100644
--- a/app/views/admin/invitations/index.html.erb
+++ b/app/views/admin/invitations/index.html.erb
@@ -55,7 +55,7 @@
     </div>
 
   </header>
-  <table class="hidden m:table crayons-table crayons-table--minimal" width="100%">
+  <table class="hidden m:table crayons-table crayons-table--minimal" width="100%" <%= @invitations.empty? ? "aria-describedby='empty-state-message-id'".html_safe : "" %>>
     <thead class="member-data-heading">
       <tr>
         <th scope="col" class="pl-7">Username</th>
@@ -83,6 +83,16 @@
     </tbody>
   </table>
 
+  <% if @invitations.empty? %>
+    <div class="align-center flex flex-col my-auto py-7" id="empty-state-message-id">
+      <p class="fs-xl fw-normal mb-2">No members invited yet.</p>
+      <p class="color-secondary">Invite members and grow your community.</p>
+    </div>
+    <div class="flex grow-1 justify-content-center">
+      <%= link_to "Invite member", new_admin_invitation_path, class: "c-cta c-cta--branded ml-3" %>
+    </div>
+  <% end %>
+
   <!-- Large screen layout end -->
   <div class="flex justify-end p-4 xl:p-7">
     <%= paginate @invitations, theme: "admin", scope: @invitations, label: "Paginate invitations", context: "bottom" %>
diff --git a/cypress/integration/seededFlows/adminFlows/users/invitedUsers.spec.js b/cypress/integration/seededFlows/adminFlows/users/invitedUsers.spec.js
index 9ee310312..a06d83610 100644
--- a/cypress/integration/seededFlows/adminFlows/users/invitedUsers.spec.js
+++ b/cypress/integration/seededFlows/adminFlows/users/invitedUsers.spec.js
@@ -135,3 +135,17 @@ describe('Invited users', () => {
     cy.findByRole('button', { name: 'Cancel invite' }).click();
   };
 });
+
+describe('No invited members', () => {
+  beforeEach(() => {
+    cy.testSetup();
+    cy.fixture('users/adminUser.json').as('user');
+    cy.get('@user').then((user) => {
+      cy.loginAndVisit(user, '/admin/member_manager/invitations');
+    });
+  });
+
+  it('displays an empty state', () => {
+    cy.findByText('No members invited yet.').should('exist');
+  });
+});