Merge pull request #2110 from Human-Connection/2106_unblock_a_user_in_the_user_settings

2106-unblock a user in the user settings

webapp/locales/de.json

@@ -313,12 +313,14 @@
       },
       "columns": {
         "name": "Name",
-        "slug": "Alias"
+        "slug": "Alias",
+        "unblock": "Entblocken"
       },
       "empty": "Bislang hast du niemanden blockiert.",
       "how-to": "Du kannst andere Benutzer auf deren Profilseite über das Inhaltsmenü blockieren.",
       "block": "Nutzer blockieren",
-      "unblock": "Nutzer entblocken"
+      "unblock": "Nutzer entblocken",
+      "unblocked": "{name} ist wieder entblockt"
     }
   },
   "admin": {

webapp/locales/en.json

@@ -314,12 +314,14 @@
       },
       "columns": {
         "name": "Name",
-        "slug": "Slug"
+        "slug": "Slug",
+        "unblock": "Unblock"
       },
       "empty": "So far, you have not blocked anybody.",
       "how-to": "You can block other users on their profile page via the content menu.",
       "block": "Block user",
-      "unblock": "Unblock user"
+      "unblock": "Unblock user",
+      "unblocked": "{name} is unblocked again"
     }
   },
   "admin": {

webapp/pages/settings/blocked-users.spec.js

@@ -0,0 +1,69 @@
+import { config, mount, createLocalVue } from '@vue/test-utils'
+import BlockedUsers from './blocked-users.vue'
+import Styleguide from '@human-connection/styleguide'
+import Filters from '~/plugins/vue-filters'
+import { Unblock } from '~/graphql/settings/BlockedUsers'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+localVue.use(Filters)
+
+config.stubs['nuxt-link'] = '<span><slot /></span>'
+
+describe('blocked-users.vue', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+      $apollo: {
+        mutate: jest.fn(),
+        queries: {
+          blockedUsers: {
+            refetch: jest.fn(),
+          },
+        },
+      },
+      $toast: {
+        error: jest.fn(),
+        success: jest.fn(),
+      },
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(BlockedUsers, { mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.is('div')).toBe(true)
+    })
+
+    describe('given a list of blocked users', () => {
+      beforeEach(() => {
+        const blockedUsers = [{ id: 'u1', name: 'John Doe', slug: 'john-doe', avatar: '' }]
+        wrapper.setData({ blockedUsers })
+      })
+
+      describe('click unblock', () => {
+        beforeEach(() => {
+          wrapper.find('button').trigger('click')
+        })
+
+        it('calls unblock mutation with given user', () => {
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith({
+            mutation: Unblock(),
+            variables: { id: 'u1' },
+          })
+        })
+      })
+    })
+  })
+})

webapp/pages/settings/blocked-users.vue

@@ -56,6 +56,10 @@
             <b>{{ scope.row.slug | truncate(20) }}</b>
           </nuxt-link>
         </template>
+
+        <template slot="unblock" slot-scope="scope">
+          <ds-button size="small" @click="unblock(scope)"><ds-icon name="user-plus" /></ds-button>
+        </template>
       </ds-table>
     </ds-card>
     <ds-card v-else>
@@ -74,7 +78,7 @@
 </template>
 
 <script>
-import { BlockedUsers } from '~/graphql/settings/BlockedUsers'
+import { BlockedUsers, Unblock } from '~/graphql/settings/BlockedUsers'
 import HcAvatar from '~/components/Avatar/Avatar.vue'
 
 export default {
@@ -92,12 +96,21 @@ export default {
         avatar: '',
         name: this.$t('settings.blocked-users.columns.name'),
         slug: this.$t('settings.blocked-users.columns.slug'),
+        unblock: this.$t('settings.blocked-users.columns.unblock'),
       }
     },
   },
   apollo: {
     blockedUsers: { query: BlockedUsers, fetchPolicy: 'cache-and-network' },
   },
+  methods: {
+    async unblock(user) {
+      await this.$apollo.mutate({ mutation: Unblock(), variables: { id: user.row.id } })
+      this.$apollo.queries.blockedUsers.refetch()
+      const { name } = user.row
+      this.$toast.success(this.$t('settings.blocked-users.unblocked', { name }))
+    },
+  },
 }
 </script>