"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
This commit is contained in:
Julianna Tetreault 2022-05-09 06:50:15 -06:00 committed by GitHub
parent 3eb94ff1a4
commit 79bc765f3c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 2 deletions

View file

@ -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">

View file

@ -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', {