Add empty state to pending members page

ee/app/assets/javascripts/pending_members/components/app.vue

@@ -7,11 +7,13 @@ import {
   GlAvatarLink,
   GlBadge,
   GlButton,
+  GlEmptyState,
   GlPagination,
   GlModal,
   GlModalDirective,
   GlLoadingIcon,
 } from '@gitlab/ui';
+import EmptyTodosSvg from '@gitlab/svgs/dist/illustrations/empty-todos-md.svg';
 import { n__, sprintf } from '~/locale';
 import { AVATAR_SIZE } from 'ee/usage_quotas/seats/constants';
 import {
@@ -31,6 +33,7 @@ export default {
     GlAvatarLink,
     GlBadge,
     GlButton,
+    GlEmptyState,
     GlPagination,
     GlModal,
     GlLoadingIcon,
@@ -67,6 +70,7 @@ export default {
       'approveAllMembersLoading',
       'approveAllMembersDisabled',
       'userCapSet',
+      'members',
     ]),
     ...mapGetters(['tableItems']),
     currentPage: {
@@ -116,6 +120,7 @@ export default {
   LABEL_APPROVE_ALL,
   LABEL_CONFIRM,
   PENDING_MEMBERS_TITLE,
+  EmptyTodosSvg,
 };
 </script>
 <template>
@@ -151,8 +156,16 @@ export default {
         <gl-alert v-if="alertMessage" :variant="alertVariant" @dismiss="dismissAlert">
           {{ alertMessage }}
         </gl-alert>
+        <gl-empty-state
+          v-if="!tableItems.length"
+          :title="s__('PendingMembers|There are no pending members left to approve. High five!')"
+          :svg-path="$options.EmptyTodosSvg"
+          :svg-height="220"
+          class="gl-py-8"
+        />
         <div
           v-for="item in tableItems"
+          v-else
           :key="item.id"
           class="gl-p-5 gl-border-0 gl-border-b-1! gl-border-gray-100 gl-border-solid gl-display-flex gl-justify-content-space-between"
           data-testid="pending-members"

ee/spec/frontend/pending_members/components/__snapshots__/app_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PendingMembersApp renders pending members 1`] = `
+exports[`PendingMembersApp when there are pending members renders pending members 1`] = `
 Array [
   <div
     class="gl-border-0 gl-border-b-1! gl-border-gray-100 gl-border-solid gl-display-flex gl-justify-content-space-between gl-p-5"

ee/spec/frontend/pending_members/components/app_spec.js

-import { GlPagination, GlBadge, GlAvatarLabeled, GlModal } from '@gitlab/ui';
+import { GlPagination, GlBadge, GlAvatarLabeled, GlEmptyState, GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 // eslint-disable-next-line no-restricted-imports
@@ -97,28 +97,46 @@ describe('PendingMembersApp', () => {
     });
   });
 
-  it('renders pending members', () => {
-    const pendingMembers = findPendingMembers();
+  describe('when there are pending members', () => {
+    it('renders pending members', () => {
+      const pendingMembers = findPendingMembers();
 
-    expect(pendingMembers.length).toBe(mockDataMembers.data.length);
-    expect(findPendingMembers().wrappers.map((w) => w.html())).toMatchSnapshot();
-  });
+      expect(pendingMembers.length).toBe(mockDataMembers.data.length);
+      expect(findPendingMembers().wrappers.map((w) => w.html())).toMatchSnapshot();
+    });
 
-  it('pagination is rendered and passed correct values', () => {
-    const pagination = findPagination();
+    it('pagination is rendered and passed correct values', () => {
+      const pagination = findPagination();
 
-    expect(pagination.props()).toMatchObject({
-      perPage: 5,
-      totalItems: 300,
+      expect(pagination.props()).toMatchObject({
+        perPage: 5,
+        totalItems: 300,
+      });
+    });
+
+    it('render badge for approved invited members', () => {
+      createComponent({
+        stubs: { GlBadge, GlAvatarLabeled },
+        initialGetters: { tableItems: () => [mockInvitedApprovedMember] },
+        initialState: { members: [mockInvitedApprovedMember] },
+      });
+      expect(wrapper.findComponent(GlBadge).text()).toEqual('Awaiting member signup');
     });
   });
 
-  it('render badge for approved invited members', () => {
-    createComponent({
-      stubs: { GlBadge, GlAvatarLabeled },
-      initialGetters: { tableItems: () => [mockInvitedApprovedMember] },
-      initialState: { members: [mockInvitedApprovedMember] },
+  describe('when there are no pending members', () => {
+    beforeEach(() => {
+      createComponent({ initialGetters: { tableItems: () => [] } });
+    });
+
+    it('does not render pending members', () => {
+      expect(findPendingMembers().length).toBe(0);
+    });
+    it('renders empty state', () => {
+      expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
+      expect(wrapper.findComponent(GlEmptyState).props('title')).toBe(
+        'There are no pending members left to approve. High five!',
+      );
     });
-    expect(wrapper.findComponent(GlBadge).text()).toEqual('Awaiting member signup');
   });
 });

locale/gitlab.pot

@@ -35885,6 +35885,9 @@ msgstr ""
 msgid "Pending sync…"
 msgstr ""
+msgid "PendingMembers|There are no pending members left to approve. High five!"
+msgstr ""
+
 msgid "People without permission will never get a notification and won't be able to comment."
 msgstr ""