From 79bc765f3c886623a23ec890560732ea9ceb8657 Mon Sep 17 00:00:00 2001
From: Julianna Tetreault <32834804+juliannatetreault@users.noreply.github.com>
Date: Mon, 9 May 2022 06:50:15 -0600
Subject: [PATCH] "Empty State" for GDPR Delete Requests (#17583)

* Adds an empty state to the GDPR delete requests table

* Refactors and fixes gdprDeleteRequests.spec.js

* Updates aria-describedby for the GDPR delete requests table
---
 .../admin/gdpr_delete_requests/index.html.erb   | 10 ++++++++--
 .../adminFlows/users/gdprDeleteRequests.spec.js | 17 +++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/app/views/admin/gdpr_delete_requests/index.html.erb b/app/views/admin/gdpr_delete_requests/index.html.erb
index 2e2bb6970..ece6e6b8d 100644
--- a/app/views/admin/gdpr_delete_requests/index.html.erb
+++ b/app/views/admin/gdpr_delete_requests/index.html.erb
@@ -31,11 +31,10 @@
       <% end %>
     </ul>
   </div>
-
   <!-- Small layout end -->
 
   <!-- Large layout start -->
-  <table aria-describedby="table-description" class="hidden m:table crayons-table crayons-table--minimal w-100">
+  <table class="hidden m:table crayons-table crayons-table--minimal w-100" aria-describedby="table-description <%= @gdpr_delete_requests.empty? ? "empty-state-message-id" : "" %>">
     <thead class="member-data-heading">
       <tr>
         <th scope="col" class="pl-7">Deleted member</th>
@@ -57,6 +56,13 @@
       <% end %>
     </tbody>
   </table>
+
+  <% if @gdpr_delete_requests.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">Awesome! All GDPR delete requests have been completed.</p>
+      <p class="color-secondary">Check back again when you delete a member.</p>
+    </div>
+  <% end %>
   <!-- Large layout end -->
 
   <div class="flex justify-end p-4 m:px-7">
diff --git a/cypress/integration/seededFlows/adminFlows/users/gdprDeleteRequests.spec.js b/cypress/integration/seededFlows/adminFlows/users/gdprDeleteRequests.spec.js
index 104f8b483..54c1d37d6 100644
--- a/cypress/integration/seededFlows/adminFlows/users/gdprDeleteRequests.spec.js
+++ b/cypress/integration/seededFlows/adminFlows/users/gdprDeleteRequests.spec.js
@@ -27,6 +27,23 @@ describe('GDPR Delete Requests', () => {
     }).should('not.exist');
   });
 
+  it('displays an empty state when there are no users to be confirmed as deleted', () => {
+    cy.findByRole('heading', { name: 'Members (GDPR Delete Requests)' });
+    cy.findByRole('button', {
+      name: 'Confirm user gdpr_delete_user deleted',
+    }).click();
+
+    cy.findByRole('heading', {
+      name: 'Are you sure you have deleted all external data for @gdpr_delete_user?',
+    });
+
+    cy.findByRole('button', { name: 'Yes, mark as deleted' }).click();
+
+    cy.findByText(
+      'Awesome! All GDPR delete requests have been completed.',
+    ).should('exist');
+  });
+
   it('Cancels marking a user as deleted', () => {
     cy.findByRole('heading', { name: 'Members (GDPR Delete Requests)' });
     cy.findByRole('button', {