From 97aff70b80af05f3242a171bcee5bdfe32f19250 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 4 May 2019 02:12:48 +0300
Subject: [PATCH 01/15] Add checkboxes to select users and a list of actions

---
 src/lang/en.js                              |  3 +-
 src/views/users/components/DropdownMenu.vue | 70 +++++++++++++++++++++
 src/views/users/index.vue                   | 30 ++++++++-
 3 files changed, 100 insertions(+), 3 deletions(-)
 create mode 100644 src/views/users/components/DropdownMenu.vue

diff --git a/src/lang/en.js b/src/lang/en.js
index 4ec4b96c..1addb11b 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -188,7 +188,8 @@ export default {
     forceUnlisted: 'Force posts to be unlisted',
     sandbox: 'Force posts to be followers-only',
     disableRemoteSubscription: 'Disallow following user from remote instances',
-    disableAnySubscription: 'Disallow following user at all'
+    disableAnySubscription: 'Disallow following user at all',
+    selectUsers: 'Select users to apply actions to multiple users'
   },
   usersFilter: {
     inputPlaceholder: 'Select filter',
diff --git a/src/views/users/components/DropdownMenu.vue b/src/views/users/components/DropdownMenu.vue
new file mode 100644
index 00000000..837fb90d
--- /dev/null
+++ b/src/views/users/components/DropdownMenu.vue
@@ -0,0 +1,70 @@
+<template>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item
+      @click.native="grantRightToMultipleUsers('admin')">
+      {{ $t('users.grantAdmin') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="revokeRightToMultipleUsers('admin')">
+      {{ $t('users.revokeAdmin') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="grantRightToMultipleUsers('moderator')">
+      {{ $t('users.grantModerator') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="revokeRightToMultipleUsers('moderator')">
+      {{ $t('users.revokeModerator') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      divided
+      @click.native="activateMultipleUsers">
+      {{ $t('users.activateAccount') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="deactivateMultipleUsers">
+      {{ $t('users.deactivateAccount') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="deleteMultipleUsers">
+      {{ $t('users.deleteAccount') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      divided
+      @click.native="toggleTagForMultipleUsers('force_nsfw')">
+      {{ $t('users.forceNsfw') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="toggleTagForMultipleUsers('strip_media')">
+      {{ $t('users.stripMedia') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="toggleTagForMultipleUsers('force_unlisted')">
+      {{ $t('users.forceUnlisted') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="toggleTagForMultipleUsers('sandbox')">
+      {{ $t('users.sandbox') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="toggleTagForMultipleUsers('disable_remote_subscription')">
+      {{ $t('users.disableRemoteSubscription') }}
+    </el-dropdown-item>
+    <el-dropdown-item
+      @click.native="toggleTagForMultipleUsers('disable_any_subscription')">
+      {{ $t('users.disableAnySubscription') }}
+    </el-dropdown-item>
+  </el-dropdown-menu>
+</template>
+
+<script>
+export default {
+  methods: {
+    toggleTagForMultipleUsers(tag) {
+      if (tag === 'disable_remote_subscription' || tag === 'disable_any_subscription') {
+        // filter users, because these actions can be applied only to local users
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 87e76910..4c76bcd3 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -5,7 +5,17 @@
       <users-filter/>
       <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
     </div>
-    <el-table v-loading="loading" :data="users" style="width: 100%">
+    <el-dropdown>
+      <el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
+      <dropdown-menu v-if="showDropdownForMultipleUsers"/>
+      <el-dropdown-menu v-else>
+        <el-dropdown-item>
+          {{ $t('users.selectUsers') }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-table v-loading="loading" :data="users" style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table-column v-if="isDesktop" type="selection" width="44" align="center"/>
       <el-table-column :min-width="width" :label="$t('users.id')" prop="id" />
       <el-table-column :label="$t('users.name')" prop="nickname">
         <template slot-scope="scope">
@@ -118,11 +128,18 @@
 <script>
 import debounce from 'lodash.debounce'
 import UsersFilter from './components/UsersFilter'
+import DropdownMenu from './components/DropdownMenu'
 
 export default {
   name: 'Users',
   components: {
-    UsersFilter
+    UsersFilter,
+    DropdownMenu
+  },
+  data: function() {
+    return {
+      selectedUsers: []
+    }
   },
   computed: {
     loading() {
@@ -148,6 +165,9 @@ export default {
     },
     width() {
       return this.isMobile ? 55 : false
+    },
+    showDropdownForMultipleUsers() {
+      return this.$data.selectedUsers.length > 0
     }
   },
   created() {
@@ -170,6 +190,9 @@ export default {
         this.$store.dispatch('SearchUsers', { query: searchQuery, page })
       }
     },
+    handleSelectionChange(value) {
+      this.$data.selectedUsers = value
+    },
     showDeactivatedButton(id) {
       return this.$store.state.user.id !== id
     },
@@ -206,6 +229,9 @@ export default {
   }
 }
 .users-container {
+  .actions-button {
+    margin-left: 15px;
+  }
   h1 {
     margin: 22px 0 0 15px;
   }

From 2634e163dafa438c6fa845fac607b3ff75e3d059 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 4 May 2019 16:02:54 +0300
Subject: [PATCH 02/15] Add actions to apply to multiple users

---
 src/views/users/components/DropdownMenu.vue | 84 ++++++++++++++++++++-
 src/views/users/index.vue                   |  2 +-
 2 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/src/views/users/components/DropdownMenu.vue b/src/views/users/components/DropdownMenu.vue
index 837fb90d..2e87f31d 100644
--- a/src/views/users/components/DropdownMenu.vue
+++ b/src/views/users/components/DropdownMenu.vue
@@ -59,12 +59,88 @@
 
 <script>
 export default {
-  methods: {
-    toggleTagForMultipleUsers(tag) {
-      if (tag === 'disable_remote_subscription' || tag === 'disable_any_subscription') {
-        // filter users, because these actions can be applied only to local users
+  props: {
+    selectedUsers: {
+      type: Array,
+      default: function() {
+        return []
       }
     }
+  },
+  methods: {
+    grantRightToMultipleUsers(right) {
+      const mapSelectedUsers = () => this.selectedUsers
+        .filter(user => user.local && !user.roles[right] && this.$store.state.user.id !== user.id)
+        .map(user => this.$store.dispatch('ToggleRight', { user, right }))
+      this.confirmMessage(
+        'Are you sure you want to grant ' + right + ' rights to all selected users?',
+        mapSelectedUsers
+      )
+    },
+    revokeRightToMultipleUsers(right) {
+      const mapSelectedUsers = () => this.selectedUsers
+        .filter(user => user.local && user.roles[right] && this.$store.state.user.id !== user.id)
+        .map(user => this.$store.dispatch('ToggleRight', { user, right }))
+      this.confirmMessage(
+        'Are you sure you want to revoke ' + right + ' rights from all selected users?',
+        mapSelectedUsers
+      )
+    },
+    activateMultipleUsers() {
+      const mapSelectedUsers = () => this.selectedUsers
+        .filter(user => user.deactivated && this.$store.state.user.id !== user.id)
+        .map(user => this.$store.dispatch('ToggleUserActivation', user.nickname))
+      this.confirmMessage(
+        'Are you sure you want to activate accounts of all selected users?',
+        mapSelectedUsers
+      )
+    },
+    deactivateMultipleUsers() {
+      const mapSelectedUsers = () => this.selectedUsers
+        .filter(user => !user.deactivated && this.$store.state.user.id !== user.id)
+        .map(user => this.$store.dispatch('ToggleUserActivation', user.nickname))
+      this.confirmMessage(
+        'Are you sure you want to deactivate accounts of all selected users?',
+        mapSelectedUsers
+      )
+    },
+    deleteMultipleUsers() {
+      const mapSelectedUsers = () => this.selectedUsers
+        .filter(user => this.$store.state.user.id !== user.id)
+        .map(user => this.$store.dispatch('DeleteUser', user))
+      this.confirmMessage(
+        'Are you sure you want to delete accounts of all selected users?',
+        mapSelectedUsers
+      )
+    },
+    toggleTagForMultipleUsers(tag) {
+      const mapSelectedUsers = () => this.selectedUsers
+        .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
+          ? user.local : user
+        ).map(user => this.$store.dispatch('ToggleTag', { user, tag }))
+      this.confirmMessage(
+        'Are you sure you want to apply tag to all selected users?',
+        mapSelectedUsers
+      )
+    },
+    confirmMessage(message, mapSelectedUsers) {
+      this.$confirm(message, {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      }).then(() => {
+        mapSelectedUsers()
+        this.$message({
+          type: 'success',
+          message: 'Completed'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: 'Canceled'
+        })
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 4c76bcd3..043f4736 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -7,7 +7,7 @@
     </div>
     <el-dropdown>
       <el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
-      <dropdown-menu v-if="showDropdownForMultipleUsers"/>
+      <dropdown-menu v-if="showDropdownForMultipleUsers" :selected-users="selectedUsers"/>
       <el-dropdown-menu v-else>
         <el-dropdown-item>
           {{ $t('users.selectUsers') }}

From 1b9f209f2c2cd63a33a5b16bbc95710f75297d63 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 5 May 2019 02:30:11 +0300
Subject: [PATCH 03/15] Add and remove tags for multiple users

---
 src/views/users/components/DropdownMenu.vue | 99 ++++++++++++++++-----
 1 file changed, 78 insertions(+), 21 deletions(-)

diff --git a/src/views/users/components/DropdownMenu.vue b/src/views/users/components/DropdownMenu.vue
index 2e87f31d..6dfcdff5 100644
--- a/src/views/users/components/DropdownMenu.vue
+++ b/src/views/users/components/DropdownMenu.vue
@@ -29,30 +29,59 @@
       @click.native="deleteMultipleUsers">
       {{ $t('users.deleteAccount') }}
     </el-dropdown-item>
-    <el-dropdown-item
-      divided
-      @click.native="toggleTagForMultipleUsers('force_nsfw')">
-      {{ $t('users.forceNsfw') }}
+    <el-dropdown-item divided class="no-hover">
+      <div class="tag-container">
+        <span class="tag-text">{{ $t('users.forceNsfw') }}</span>
+        <el-button-group class="tag-button-group">
+          <el-button size="mini" @click.native="addTagForMultipleUsers('force_nsfw')">apply</el-button>
+          <el-button size="mini" @click.native="removeTagFromMultipleUsers('force_nsfw')">remove</el-button>
+        </el-button-group>
+      </div>
     </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="toggleTagForMultipleUsers('strip_media')">
-      {{ $t('users.stripMedia') }}
+    <el-dropdown-item class="no-hover">
+      <div class="tag-container">
+        <span class="tag-text">{{ $t('users.stripMedia') }}</span>
+        <el-button-group class="tag-button-group">
+          <el-button size="mini" @click.native="addTagForMultipleUsers('strip_media')">apply</el-button>
+          <el-button size="mini" @click.native="removeTagFromMultipleUsers('strip_media')">remove</el-button>
+        </el-button-group>
+      </div>
     </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="toggleTagForMultipleUsers('force_unlisted')">
-      {{ $t('users.forceUnlisted') }}
+    <el-dropdown-item class="no-hover">
+      <div class="tag-container">
+        <span class="tag-text">{{ $t('users.forceUnlisted') }}</span>
+        <el-button-group class="tag-button-group">
+          <el-button size="mini" @click.native="addTagForMultipleUsers('force_unlisted')">apply</el-button>
+          <el-button size="mini" @click.native="removeTagFromMultipleUsers('force_unlisted')">remove</el-button>
+        </el-button-group>
+      </div>
     </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="toggleTagForMultipleUsers('sandbox')">
-      {{ $t('users.sandbox') }}
+    <el-dropdown-item class="no-hover">
+      <div class="tag-container">
+        <span class="tag-text">{{ $t('users.sandbox') }}</span>
+        <el-button-group class="tag-button-group">
+          <el-button size="mini" @click.native="addTagForMultipleUsers('sandbox')">apply</el-button>
+          <el-button size="mini" @click.native="removeTagFromMultipleUsers('sandbox')">remove</el-button>
+        </el-button-group>
+      </div>
     </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="toggleTagForMultipleUsers('disable_remote_subscription')">
-      {{ $t('users.disableRemoteSubscription') }}
+    <el-dropdown-item class="no-hover">
+      <div class="tag-container">
+        <span class="tag-text">{{ $t('users.disableRemoteSubscription') }}</span>
+        <el-button-group class="tag-button-group">
+          <el-button size="mini" @click.native="addTagForMultipleUsers('disable_remote_subscription')">apply</el-button>
+          <el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_remote_subscription')">remove</el-button>
+        </el-button-group>
+      </div>
     </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="toggleTagForMultipleUsers('disable_any_subscription')">
-      {{ $t('users.disableAnySubscription') }}
+    <el-dropdown-item class="no-hover">
+      <div class="tag-container">
+        <span class="tag-text">{{ $t('users.disableAnySubscription') }}</span>
+        <el-button-group class="tag-button-group">
+          <el-button size="mini" @click.native="addTagForMultipleUsers('disable_any_subscription')">apply</el-button>
+          <el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_any_subscription')">remove</el-button>
+        </el-button-group>
+      </div>
     </el-dropdown-item>
   </el-dropdown-menu>
 </template>
@@ -113,16 +142,28 @@ export default {
         mapSelectedUsers
       )
     },
-    toggleTagForMultipleUsers(tag) {
+    addTagForMultipleUsers(tag) {
       const mapSelectedUsers = () => this.selectedUsers
         .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-          ? user.local : user
+          ? user.local && !user.tags.includes(tag)
+          : !user.tags.includes(tag)
         ).map(user => this.$store.dispatch('ToggleTag', { user, tag }))
       this.confirmMessage(
         'Are you sure you want to apply tag to all selected users?',
         mapSelectedUsers
       )
     },
+    removeTagFromMultipleUsers(tag) {
+      const mapSelectedUsers = () => this.selectedUsers
+        .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
+          ? user.local && user.tags.includes(tag)
+          : user.tags.includes(tag)
+        ).map(user => this.$store.dispatch('ToggleTag', { user, tag }))
+      this.confirmMessage(
+        'Are you sure you want to remove tag from all selected users?',
+        mapSelectedUsers
+      )
+    },
     confirmMessage(message, mapSelectedUsers) {
       this.$confirm(message, {
         confirmButtonText: 'OK',
@@ -144,3 +185,19 @@ export default {
   }
 }
 </script>
+
+<style rel='stylesheet/scss' lang='scss' scoped>
+  .tag-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .tag-text {
+    padding-right: 20px;
+  }
+  .no-hover:hover {
+    color: #606266;
+    background-color: white;
+    cursor: auto;
+  }
+</style>

From 4b5d69c198f1ea94a5289c44f885818d08ff2867 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 5 May 2019 22:52:20 +0300
Subject: [PATCH 04/15] Add ability to choose multiple users on different pages

---
 src/views/users/components/DropdownMenu.vue |  1 +
 src/views/users/index.vue                   | 23 ++++++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/views/users/components/DropdownMenu.vue b/src/views/users/components/DropdownMenu.vue
index 6dfcdff5..546ece3f 100644
--- a/src/views/users/components/DropdownMenu.vue
+++ b/src/views/users/components/DropdownMenu.vue
@@ -171,6 +171,7 @@ export default {
         type: 'warning'
       }).then(() => {
         mapSelectedUsers()
+        this.$emit('apply-action')
         this.$message({
           type: 'success',
           message: 'Completed'
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 043f4736..182e8bb0 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -7,15 +7,29 @@
     </div>
     <el-dropdown>
       <el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
-      <dropdown-menu v-if="showDropdownForMultipleUsers" :selected-users="selectedUsers"/>
+      <dropdown-menu
+        v-if="showDropdownForMultipleUsers"
+        :selected-users="selectedUsers"
+        @apply-action="clearSelection"/>
       <el-dropdown-menu v-else>
         <el-dropdown-item>
           {{ $t('users.selectUsers') }}
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
-    <el-table v-loading="loading" :data="users" style="width: 100%" @selection-change="handleSelectionChange">
-      <el-table-column v-if="isDesktop" type="selection" width="44" align="center"/>
+    <el-table
+      v-loading="loading"
+      ref="usersTable"
+      :data="users"
+      row-key="id"
+      style="width: 100%"
+      @selection-change="handleSelectionChange">
+      <el-table-column
+        v-if="isDesktop"
+        type="selection"
+        reserve-selection
+        width="44"
+        align="center"/>
       <el-table-column :min-width="width" :label="$t('users.id')" prop="id" />
       <el-table-column :label="$t('users.name')" prop="nickname">
         <template slot-scope="scope">
@@ -213,6 +227,9 @@ export default {
     },
     getFirstLetter(str) {
       return str.charAt(0).toUpperCase()
+    },
+    clearSelection() {
+      this.$refs.usersTable.clearSelection()
     }
   }
 }

From 0b7214030beb64b54da8bda3df91f6fad6300027 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 6 May 2019 00:51:52 +0300
Subject: [PATCH 05/15] Add total user count

---
 package.json              |  1 +
 src/views/users/index.vue | 13 ++++++++++++-
 yarn.lock                 |  5 +++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 097c291f..13834d5a 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
+    "numeral": "^2.0.6",
     "screenfull": "4.0.0",
     "showdown": "1.8.6",
     "sortablejs": "1.7.0",
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 182e8bb0..370a8491 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="users-container">
-    <h1>{{ $t('users.users') }}</h1>
+    <h1>
+      {{ $t('users.users') }}
+      <span class="user-count">({{ normalizedUsersCount }})</span>
+    </h1>
     <div class="search-container">
       <users-filter/>
       <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
@@ -141,6 +144,7 @@
 
 <script>
 import debounce from 'lodash.debounce'
+import numeral from 'numeral'
 import UsersFilter from './components/UsersFilter'
 import DropdownMenu from './components/DropdownMenu'
 
@@ -159,6 +163,9 @@ export default {
     loading() {
       return this.$store.state.users.loading
     },
+    normalizedUsersCount() {
+      return numeral(this.$store.state.users.totalUsersCount).format('0a')
+    },
     users() {
       return this.$store.state.users.fetchedUsers
     },
@@ -269,6 +276,10 @@ export default {
     align-items: center;
     margin: 22px 15px 22px 15px
   }
+  .user-count {
+    color: gray;
+    font-size: 28px;
+  }
 }
 @media
 only screen and (max-width: 760px),
diff --git a/yarn.lock b/yarn.lock
index a4c90db2..fa108aad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7031,6 +7031,11 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
+numeral@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
+  integrity sha1-StCAk21EPCVhrtnyGX7//iX05QY=
+
 nwsapi@^2.0.7:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.1.1.tgz#08d6d75e69fd791bdea31507ffafe8c843b67e9c"

From c425cd8aec7aa1260806fe89303f6cb6039d83db Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 6 May 2019 18:49:03 +0300
Subject: [PATCH 06/15] Resolve git conflict

---
 src/views/users/index.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 370a8491..72522d6f 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -8,13 +8,13 @@
       <users-filter/>
       <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
     </div>
-    <el-dropdown>
+    <el-dropdown trigger="click">
       <el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
       <dropdown-menu
         v-if="showDropdownForMultipleUsers"
         :selected-users="selectedUsers"
         @apply-action="clearSelection"/>
-      <el-dropdown-menu v-else>
+      <el-dropdown-menu v-else slot="dropdown">
         <el-dropdown-item>
           {{ $t('users.selectUsers') }}
         </el-dropdown-item>
@@ -58,7 +58,7 @@
       </el-table-column>
       <el-table-column :label="$t('users.actions')" fixed="right">
         <template slot-scope="scope">
-          <el-dropdown size="small">
+          <el-dropdown size="small" trigger="click">
             <span class="el-dropdown-link">
               {{ $t('users.moderation') }}
               <i v-if="isDesktop" class="el-icon-arrow-down el-icon--right"/>
@@ -252,6 +252,10 @@ export default {
     margin: 7px 0 0 15px;
   }
 }
+.el-dropdown-link:hover {
+      cursor: pointer;
+      color: #409EFF;
+    }
 .users-container {
   .actions-button {
     margin-left: 15px;
@@ -288,10 +292,6 @@ only screen and (max-width: 760px),
     h1 {
       margin: 7px 10px 7px 10px;
     }
-    .el-dropdown-link {
-      cursor: pointer;
-      color: #409EFF;
-    }
     .el-icon-arrow-down {
       font-size: 12px;
     }

From 5f0289c363b5ca96369943a308211506ed40a527 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 7 May 2019 00:56:08 +0300
Subject: [PATCH 07/15] Fix filter logic to work with multiple choice on
 different pages

---
 src/store/modules/users.js | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index 56eb07a0..f49a4778 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -21,14 +21,9 @@ const users = {
     SET_LOADING: (state, status) => {
       state.loading = status
     },
-    SWAP_USER: (state, user) => {
-      const usersWithoutSwapped = state.fetchedUsers.filter(u => {
-        return u.id !== user.id
-      })
-
-      state.fetchedUsers = [...usersWithoutSwapped, user].sort((a, b) =>
-        a.nickname.localeCompare(b.nickname)
-      )
+    SWAP_USER: (state, updatedUser) => {
+      const updated = state.fetchedUsers.map(user => user.id === updatedUser.id ? updatedUser : user)
+      state.fetchedUsers = updated.sort((a, b) => a.nickname.localeCompare(b.nickname))
     },
     SET_COUNT: (state, count) => {
       state.totalUsersCount = count

From e524fd2ff4068824ffc999387651ba10f91a2ee3 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 12 May 2019 01:44:58 +0300
Subject: [PATCH 08/15] Remove sync option and add flushPromises to tests

---
 test/views/users/index.test.js | 74 +++++++++++++++++++---------------
 1 file changed, 42 insertions(+), 32 deletions(-)

diff --git a/test/views/users/index.test.js b/test/views/users/index.test.js
index 49c43eda..6e50cc41 100644
--- a/test/views/users/index.test.js
+++ b/test/views/users/index.test.js
@@ -1,5 +1,6 @@
 import Vuex from 'vuex'
 import { mount, createLocalVue, config } from '@vue/test-utils'
+import flushPromises from 'flush-promises'
 import Element from 'element-ui'
 import Users from '@/views/users/index'
 import storeConfig from './store.conf'
@@ -8,7 +9,6 @@ import { cloneDeep } from 'lodash'
 config.mocks["$t"] = () => {}
 config.stubs['users-filter'] = '<div />'
 
-
 const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(Element)
@@ -25,10 +25,11 @@ describe('Search and filter users', () => {
   it('fetches initial list of users', async (done) => {
     const wrapper = mount(Users, {
       store,
-      localVue
+      localVue,
+      sync: false
     })
 
-    await wrapper.vm.$nextTick()
+    await flushPromises()
     expect(wrapper.vm.usersCount).toEqual(3)
     done()
   })
@@ -36,24 +37,25 @@ describe('Search and filter users', () => {
   it('starts a search on input change', async (done) => {
     const wrapper = mount(Users, {
       store,
-      localVue
+      localVue,
+      sync: false
     })
 
     wrapper.vm.handleDebounceSearchInput = (query) => {
       store.dispatch('SearchUsers', { query, page: 1 })
     }
 
-    await wrapper.vm.$nextTick()
+    await flushPromises()
     expect(wrapper.vm.usersCount).toEqual(3)
     const input = wrapper.find('.search input.el-input__inner')
     input.element.value = 'bob'
     input.trigger('input')
-    await wrapper.vm.$nextTick()
+    await flushPromises()
     expect(wrapper.vm.usersCount).toEqual(1)
 
     input.element.value = ''
     input.trigger('input')
-    await wrapper.vm.$nextTick()
+    await flushPromises()
     expect(wrapper.vm.usersCount).toEqual(3)
 
     done()
@@ -72,18 +74,19 @@ describe('Users actions', () => {
   it('grants admin and moderator rights to a local user', async (done) => {
     const wrapper = mount(Users, {
       store,
-      localVue
+      localVue,
+      sync: false
     })
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const user = store.state.users.fetchedUsers[2]
     expect(user.roles.admin).toBe(false)
     expect(user.roles.moderator).toBe(false)
 
     wrapper.find(htmlElement(3, 1)).trigger('click')
-    await wrapper.vm.$nextTick()
+    await flushPromises()
     wrapper.find(htmlElement(3, 2)).trigger('click')
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const updatedUser = store.state.users.fetchedUsers[2]
     expect(updatedUser.roles.admin).toBe(true)
@@ -94,9 +97,10 @@ describe('Users actions', () => {
   it('does not show actions that grant admin and moderator rights to external users', async (done) => {
     const wrapper = mount(Users, {
       store,
-      localVue
+      localVue,
+      sync: false
     })
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const dropdownMenuItems = wrapper.findAll(
       `.el-table__fixed-body-wrapper table tr:nth-child(2) ul.el-dropdown-menu li`
@@ -108,15 +112,16 @@ describe('Users actions', () => {
   it('toggles activation status', async (done) => {
     const wrapper = mount(Users, {
       store,
-      localVue
+      localVue,
+      sync: false
     })
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const user = store.state.users.fetchedUsers[1]
     expect(user.deactivated).toBe(false)
 
     wrapper.find(htmlElement(2, 1)).trigger('click')
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const updatedUser = store.state.users.fetchedUsers[1]
     expect(updatedUser.deactivated).toBe(true)
@@ -126,15 +131,16 @@ describe('Users actions', () => {
   it('deactivates user when Delete action is called', async (done) => {
     const wrapper = mount(Users, {
       store,
-      localVue
+      localVue,
+      sync: false
     })
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const user = store.state.users.fetchedUsers[1]
     expect(user.deactivated).toBe(false)
 
     wrapper.find(htmlElement(2, 2)).trigger('click')
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const updatedUser = store.state.users.fetchedUsers[1]
     expect(updatedUser.deactivated).toBe(true)
@@ -144,9 +150,10 @@ describe('Users actions', () => {
   it('adds tags', async (done) => {
     const wrapper = mount(Users, {
       store,
-      localVue
+      localVue,
+      sync: false
     })
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const user1 = store.state.users.fetchedUsers[0]
     const user2 = store.state.users.fetchedUsers[1]
@@ -154,9 +161,9 @@ describe('Users actions', () => {
     expect(user2.tags.length).toBe(1)
 
     wrapper.find(htmlElement(1, 5)).trigger('click')
-    await wrapper.vm.$nextTick()
+    await flushPromises()
     wrapper.find(htmlElement(2, 5)).trigger('click')
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const updatedUser1 = store.state.users.fetchedUsers[0]
     const updatedUser2 = store.state.users.fetchedUsers[1]
@@ -168,15 +175,16 @@ describe('Users actions', () => {
   it('deletes tags', async (done) => {
     const wrapper = mount(Users, {
       store,
-      localVue
+      localVue,
+      sync: false
     })
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const user = store.state.users.fetchedUsers[1]
     expect(user.tags.length).toBe(1)
 
     wrapper.find(htmlElement(2, 6)).trigger('click')
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const updatedUser = store.state.users.fetchedUsers[1]
     expect(updatedUser.tags.length).toBe(0)
@@ -186,14 +194,15 @@ describe('Users actions', () => {
   it('shows check icon when tag is added', async (done) => {
     const wrapper = mount(Users, {
       store,
-      localVue
+      localVue,
+      sync: false
     })
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     expect(wrapper.find(`${htmlElement(1, 5)} i`).exists()).toBe(false)
 
     wrapper.find(htmlElement(1, 5)).trigger('click')
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     expect(wrapper.find(`${htmlElement(1, 5)} i`).exists()).toBe(true)
     done()
@@ -202,9 +211,10 @@ describe('Users actions', () => {
   it('does not change user index in array when tag is added', async (done) => {
     const wrapper = mount(Users, {
       store,
-      localVue
+      localVue,
+      sync: false
     })
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const firstUserNickname = store.state.users.fetchedUsers[0].nickname
     const secondUserNickname = store.state.users.fetchedUsers[1].nickname
@@ -212,7 +222,7 @@ describe('Users actions', () => {
     expect(secondUserNickname).toBe('bob')
 
     wrapper.find(htmlElement(2, 5)).trigger('click')
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     const firstUserNicknameAfterToggle = store.state.users.fetchedUsers[0].nickname
     const secondUserNicknameAfterToggle = store.state.users.fetchedUsers[1].nickname

From bddfe8c97d459f9a017fcd448ecb64678bb93553 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 12 May 2019 23:45:27 +0300
Subject: [PATCH 09/15] Move all parts of dropdown component to seperate file

---
 src/views/users/components/DropdownMenu.vue | 189 +++++++++++---------
 src/views/users/index.vue                   |  21 +--
 2 files changed, 107 insertions(+), 103 deletions(-)

diff --git a/src/views/users/components/DropdownMenu.vue b/src/views/users/components/DropdownMenu.vue
index 546ece3f..5a87847d 100644
--- a/src/views/users/components/DropdownMenu.vue
+++ b/src/views/users/components/DropdownMenu.vue
@@ -1,89 +1,97 @@
 <template>
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item
-      @click.native="grantRightToMultipleUsers('admin')">
-      {{ $t('users.grantAdmin') }}
-    </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="revokeRightToMultipleUsers('admin')">
-      {{ $t('users.revokeAdmin') }}
-    </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="grantRightToMultipleUsers('moderator')">
-      {{ $t('users.grantModerator') }}
-    </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="revokeRightToMultipleUsers('moderator')">
-      {{ $t('users.revokeModerator') }}
-    </el-dropdown-item>
-    <el-dropdown-item
-      divided
-      @click.native="activateMultipleUsers">
-      {{ $t('users.activateAccount') }}
-    </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="deactivateMultipleUsers">
-      {{ $t('users.deactivateAccount') }}
-    </el-dropdown-item>
-    <el-dropdown-item
-      @click.native="deleteMultipleUsers">
-      {{ $t('users.deleteAccount') }}
-    </el-dropdown-item>
-    <el-dropdown-item divided class="no-hover">
-      <div class="tag-container">
-        <span class="tag-text">{{ $t('users.forceNsfw') }}</span>
-        <el-button-group class="tag-button-group">
-          <el-button size="mini" @click.native="addTagForMultipleUsers('force_nsfw')">apply</el-button>
-          <el-button size="mini" @click.native="removeTagFromMultipleUsers('force_nsfw')">remove</el-button>
-        </el-button-group>
-      </div>
-    </el-dropdown-item>
-    <el-dropdown-item class="no-hover">
-      <div class="tag-container">
-        <span class="tag-text">{{ $t('users.stripMedia') }}</span>
-        <el-button-group class="tag-button-group">
-          <el-button size="mini" @click.native="addTagForMultipleUsers('strip_media')">apply</el-button>
-          <el-button size="mini" @click.native="removeTagFromMultipleUsers('strip_media')">remove</el-button>
-        </el-button-group>
-      </div>
-    </el-dropdown-item>
-    <el-dropdown-item class="no-hover">
-      <div class="tag-container">
-        <span class="tag-text">{{ $t('users.forceUnlisted') }}</span>
-        <el-button-group class="tag-button-group">
-          <el-button size="mini" @click.native="addTagForMultipleUsers('force_unlisted')">apply</el-button>
-          <el-button size="mini" @click.native="removeTagFromMultipleUsers('force_unlisted')">remove</el-button>
-        </el-button-group>
-      </div>
-    </el-dropdown-item>
-    <el-dropdown-item class="no-hover">
-      <div class="tag-container">
-        <span class="tag-text">{{ $t('users.sandbox') }}</span>
-        <el-button-group class="tag-button-group">
-          <el-button size="mini" @click.native="addTagForMultipleUsers('sandbox')">apply</el-button>
-          <el-button size="mini" @click.native="removeTagFromMultipleUsers('sandbox')">remove</el-button>
-        </el-button-group>
-      </div>
-    </el-dropdown-item>
-    <el-dropdown-item class="no-hover">
-      <div class="tag-container">
-        <span class="tag-text">{{ $t('users.disableRemoteSubscription') }}</span>
-        <el-button-group class="tag-button-group">
-          <el-button size="mini" @click.native="addTagForMultipleUsers('disable_remote_subscription')">apply</el-button>
-          <el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_remote_subscription')">remove</el-button>
-        </el-button-group>
-      </div>
-    </el-dropdown-item>
-    <el-dropdown-item class="no-hover">
-      <div class="tag-container">
-        <span class="tag-text">{{ $t('users.disableAnySubscription') }}</span>
-        <el-button-group class="tag-button-group">
-          <el-button size="mini" @click.native="addTagForMultipleUsers('disable_any_subscription')">apply</el-button>
-          <el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_any_subscription')">remove</el-button>
-        </el-button-group>
-      </div>
-    </el-dropdown-item>
-  </el-dropdown-menu>
+  <el-dropdown size="small" trigger="click">
+    <el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
+    <el-dropdown-menu v-if="showDropdownForMultipleUsers" slot="dropdown">
+      <el-dropdown-item
+        @click.native="grantRightToMultipleUsers('admin')">
+        {{ $t('users.grantAdmin') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        @click.native="revokeRightToMultipleUsers('admin')">
+        {{ $t('users.revokeAdmin') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        @click.native="grantRightToMultipleUsers('moderator')">
+        {{ $t('users.grantModerator') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        @click.native="revokeRightToMultipleUsers('moderator')">
+        {{ $t('users.revokeModerator') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        divided
+        @click.native="activateMultipleUsers">
+        {{ $t('users.activateAccount') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        @click.native="deactivateMultipleUsers">
+        {{ $t('users.deactivateAccount') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        @click.native="deleteMultipleUsers">
+        {{ $t('users.deleteAccount') }}
+      </el-dropdown-item>
+      <el-dropdown-item divided class="no-hover">
+        <div class="tag-container">
+          <span class="tag-text">{{ $t('users.forceNsfw') }}</span>
+          <el-button-group class="tag-button-group">
+            <el-button size="mini" @click.native="addTagForMultipleUsers('force_nsfw')">apply</el-button>
+            <el-button size="mini" @click.native="removeTagFromMultipleUsers('force_nsfw')">remove</el-button>
+          </el-button-group>
+        </div>
+      </el-dropdown-item>
+      <el-dropdown-item class="no-hover">
+        <div class="tag-container">
+          <span class="tag-text">{{ $t('users.stripMedia') }}</span>
+          <el-button-group class="tag-button-group">
+            <el-button size="mini" @click.native="addTagForMultipleUsers('strip_media')">apply</el-button>
+            <el-button size="mini" @click.native="removeTagFromMultipleUsers('strip_media')">remove</el-button>
+          </el-button-group>
+        </div>
+      </el-dropdown-item>
+      <el-dropdown-item class="no-hover">
+        <div class="tag-container">
+          <span class="tag-text">{{ $t('users.forceUnlisted') }}</span>
+          <el-button-group class="tag-button-group">
+            <el-button size="mini" @click.native="addTagForMultipleUsers('force_unlisted')">apply</el-button>
+            <el-button size="mini" @click.native="removeTagFromMultipleUsers('force_unlisted')">remove</el-button>
+          </el-button-group>
+        </div>
+      </el-dropdown-item>
+      <el-dropdown-item class="no-hover">
+        <div class="tag-container">
+          <span class="tag-text">{{ $t('users.sandbox') }}</span>
+          <el-button-group class="tag-button-group">
+            <el-button size="mini" @click.native="addTagForMultipleUsers('sandbox')">apply</el-button>
+            <el-button size="mini" @click.native="removeTagFromMultipleUsers('sandbox')">remove</el-button>
+          </el-button-group>
+        </div>
+      </el-dropdown-item>
+      <el-dropdown-item class="no-hover">
+        <div class="tag-container">
+          <span class="tag-text">{{ $t('users.disableRemoteSubscription') }}</span>
+          <el-button-group class="tag-button-group">
+            <el-button size="mini" @click.native="addTagForMultipleUsers('disable_remote_subscription')">apply</el-button>
+            <el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_remote_subscription')">remove</el-button>
+          </el-button-group>
+        </div>
+      </el-dropdown-item>
+      <el-dropdown-item class="no-hover">
+        <div class="tag-container">
+          <span class="tag-text">{{ $t('users.disableAnySubscription') }}</span>
+          <el-button-group class="tag-button-group">
+            <el-button size="mini" @click.native="addTagForMultipleUsers('disable_any_subscription')">apply</el-button>
+            <el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_any_subscription')">remove</el-button>
+          </el-button-group>
+        </div>
+      </el-dropdown-item>
+    </el-dropdown-menu>
+    <el-dropdown-menu v-else slot="dropdown">
+      <el-dropdown-item>
+        {{ $t('users.selectUsers') }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
 </template>
 
 <script>
@@ -96,6 +104,14 @@ export default {
       }
     }
   },
+  computed: {
+    showDropdownForMultipleUsers() {
+      return this.$props.selectedUsers.length > 0
+    },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    }
+  },
   methods: {
     grantRightToMultipleUsers(right) {
       const mapSelectedUsers = () => this.selectedUsers
@@ -188,6 +204,9 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss' scoped>
+  .actions-button {
+    margin-left: 15px;
+  }
   .tag-container {
     display: flex;
     justify-content: space-between;
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 72522d6f..85f87cbd 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -8,18 +8,9 @@
       <users-filter/>
       <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
     </div>
-    <el-dropdown trigger="click">
-      <el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
-      <dropdown-menu
-        v-if="showDropdownForMultipleUsers"
-        :selected-users="selectedUsers"
-        @apply-action="clearSelection"/>
-      <el-dropdown-menu v-else slot="dropdown">
-        <el-dropdown-item>
-          {{ $t('users.selectUsers') }}
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
+    <dropdown-menu
+      :selected-users="selectedUsers"
+      @apply-action="clearSelection"/>
     <el-table
       v-loading="loading"
       ref="usersTable"
@@ -186,9 +177,6 @@ export default {
     },
     width() {
       return this.isMobile ? 55 : false
-    },
-    showDropdownForMultipleUsers() {
-      return this.$data.selectedUsers.length > 0
     }
   },
   created() {
@@ -257,9 +245,6 @@ export default {
       color: #409EFF;
     }
 .users-container {
-  .actions-button {
-    margin-left: 15px;
-  }
   h1 {
     margin: 22px 0 0 15px;
   }

From 932d728b8eeb1b84f964a997cbf104a6feab8b64 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 14 May 2019 02:45:24 +0300
Subject: [PATCH 10/15] Add tests for applying actions to multiple users

---
 src/api/__mocks__/users.js            |   2 +-
 test/views/users/dropdownMenu.test.js | 146 ++++++++++++++++++++++++++
 2 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 test/views/users/dropdownMenu.test.js

diff --git a/src/api/__mocks__/users.js b/src/api/__mocks__/users.js
index b763c92d..cbbb2851 100644
--- a/src/api/__mocks__/users.js
+++ b/src/api/__mocks__/users.js
@@ -1,4 +1,4 @@
-const users = [
+export const users = [
   { active: true, deactivated: false, id: '2', nickname: 'allis', local: true, external: false, roles: { admin: true, moderator: false }, tags: [] },
   { active: true, deactivated: false, id: '10', nickname: 'bob', local: false, external: true, roles: { admin: false, moderator: true }, tags: ['sandbox'] },
   { active: false, deactivated: true, id: 'abc', nickname: 'john', local: true, external: false, roles: { admin: false, moderator: false }, tags: ['strip_media'] }
diff --git a/test/views/users/dropdownMenu.test.js b/test/views/users/dropdownMenu.test.js
new file mode 100644
index 00000000..2cd0269f
--- /dev/null
+++ b/test/views/users/dropdownMenu.test.js
@@ -0,0 +1,146 @@
+import Vuex from 'vuex'
+import { mount, createLocalVue, config } from '@vue/test-utils'
+import Element from 'element-ui'
+import DropdownMenu from '@/views/users/components/DropdownMenu'
+import storeConfig from './store.conf'
+import { cloneDeep } from 'lodash'
+import flushPromises from 'flush-promises'
+import { users } from '@/api/__mocks__/users.js'
+
+config.mocks["$t"] = () => {}
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(Element)
+
+jest.mock('@/api/users')
+
+describe('Apply users actions to multiple users', () => {
+  let store
+
+  beforeEach(async() => {
+    store = new Vuex.Store(cloneDeep(storeConfig))
+    store.dispatch('FetchUsers', { page: 1 })
+    await flushPromises()
+    global.confirm = () => true
+  })
+
+  it('calls function that grants admin and moderator rights to multiple users', async (done) => {
+    const wrapper = mount(DropdownMenu, {
+      store,
+      localVue,
+      sync: false,
+      propsData: {
+        selectedUsers: users
+      }
+    })
+    await flushPromises()
+
+    const grantRightToMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ grantRightToMultipleUsers: grantRightToMultipleUsersStub })
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(1)`).trigger('click')
+    expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalledWith('admin')
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(3)`).trigger('click')
+    expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalledWith('moderator')
+    done()
+  })
+
+  it('calls function that revokes admin and moderator rights to multiple users', async (done) => {
+    const wrapper = mount(DropdownMenu, {
+      store,
+      localVue,
+      sync: false,
+      propsData: {
+        selectedUsers: users
+      }
+    })
+    await flushPromises()
+
+    const revokeRightToMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ revokeRightToMultipleUsers: revokeRightToMultipleUsersStub })
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(2)`).trigger('click')
+    expect(wrapper.vm.revokeRightToMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.revokeRightToMultipleUsers).toHaveBeenCalledWith('admin')
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(4)`).trigger('click')
+    expect(wrapper.vm.revokeRightToMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.revokeRightToMultipleUsers).toHaveBeenCalledWith('moderator')
+    done()
+  })
+
+  it('calls function that activates, deactivates and deletes multiple accounts', async (done) => {
+    const wrapper = mount(DropdownMenu, {
+      store,
+      localVue,
+      sync: false,
+      propsData: {
+        selectedUsers: users
+      }
+    })
+    await flushPromises()
+
+    const activateMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ activateMultipleUsers: activateMultipleUsersStub })
+    const deactivateMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ deactivateMultipleUsers: deactivateMultipleUsersStub })
+    const deleteMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ deleteMultipleUsers: deleteMultipleUsersStub })
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(5)`).trigger('click')
+    expect(wrapper.vm.activateMultipleUsers).toHaveBeenCalled()
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(6)`).trigger('click')
+    expect(wrapper.vm.deactivateMultipleUsers).toHaveBeenCalled()
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(7)`).trigger('click')
+    expect(wrapper.vm.deleteMultipleUsers).toHaveBeenCalled()
+    done()
+  })
+
+  it('calls function that applies and removes tags from multiple accounts', async (done) => {
+    const wrapper = mount(DropdownMenu, {
+      store,
+      localVue,
+      sync: false,
+      propsData: {
+        selectedUsers: users
+      }
+    })
+    await flushPromises()
+
+    const addTagForMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ addTagForMultipleUsers: addTagForMultipleUsersStub })
+    const removeTagFromMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ removeTagFromMultipleUsers: removeTagFromMultipleUsersStub })
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(8) button:nth-child(1)`).trigger('click')
+    expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalledWith('force_nsfw')
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(9) button:nth-child(2)`).trigger('click')
+    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('strip_media')
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(10) button:nth-child(1)`).trigger('click')
+    expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalledWith('force_unlisted')
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(11) button:nth-child(2)`).trigger('click')
+    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('sandbox')
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(12) button:nth-child(1)`).trigger('click')
+    expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalledWith('disable_remote_subscription')
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(13) button:nth-child(2)`).trigger('click')
+    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('disable_any_subscription')
+    done()
+  })
+})

From 90553ba75c1d64962251fb94208b965391c0ff35 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 14 May 2019 16:18:11 +0300
Subject: [PATCH 11/15] Extracted actions into seperate mappers function

---
 src/views/users/components/DropdownMenu.vue | 83 ++++++++++++---------
 1 file changed, 47 insertions(+), 36 deletions(-)

diff --git a/src/views/users/components/DropdownMenu.vue b/src/views/users/components/DropdownMenu.vue
index 5a87847d..68526186 100644
--- a/src/views/users/components/DropdownMenu.vue
+++ b/src/views/users/components/DropdownMenu.vue
@@ -113,80 +113,91 @@ export default {
     }
   },
   methods: {
+    mappers() {
+      return {
+        grantRight: (right) => () => this.selectedUsers
+          .filter(user => user.local && !user.roles[right] && this.$store.state.user.id !== user.id)
+          .map(user => this.$store.dispatch('ToggleRight', { user, right })),
+        revokeRight: (right) => () => this.selectedUsers
+          .filter(user => user.local && user.roles[right] && this.$store.state.user.id !== user.id)
+          .map(user => this.$store.dispatch('ToggleRight', { user, right })),
+        activate: () => this.selectedUsers
+          .filter(user => user.deactivated && this.$store.state.user.id !== user.id)
+          .map(user => this.$store.dispatch('ToggleUserActivation', user.nickname)),
+        deactivate: () => this.selectedUsers
+          .filter(user => !user.deactivated && this.$store.state.user.id !== user.id)
+          .map(user => this.$store.dispatch('ToggleUserActivation', user.nickname)),
+        remove: () => this.selectedUsers
+          .filter(user => this.$store.state.user.id !== user.id)
+          .map(user => this.$store.dispatch('DeleteUser', user)),
+        addTag: (tag) => () => this.selectedUsers
+          .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
+            ? user.local && !user.tags.includes(tag)
+            : !user.tags.includes(tag)
+          ).map(user => this.$store.dispatch('ToggleTag', { user, tag })),
+        removeTag: (tag) => () => this.selectedUsers
+          .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
+            ? user.local && user.tags.includes(tag)
+            : user.tags.includes(tag)
+          ).map(user => this.$store.dispatch('ToggleTag', { user, tag }))
+      }
+    },
     grantRightToMultipleUsers(right) {
-      const mapSelectedUsers = () => this.selectedUsers
-        .filter(user => user.local && !user.roles[right] && this.$store.state.user.id !== user.id)
-        .map(user => this.$store.dispatch('ToggleRight', { user, right }))
+      const { grantRight } = this.mappers()
       this.confirmMessage(
-        'Are you sure you want to grant ' + right + ' rights to all selected users?',
-        mapSelectedUsers
+        `Are you sure you want to grant ${right} rights to all selected users?`,
+        grantRight(right)
       )
     },
     revokeRightToMultipleUsers(right) {
-      const mapSelectedUsers = () => this.selectedUsers
-        .filter(user => user.local && user.roles[right] && this.$store.state.user.id !== user.id)
-        .map(user => this.$store.dispatch('ToggleRight', { user, right }))
+      const { revokeRight } = this.mappers()
       this.confirmMessage(
-        'Are you sure you want to revoke ' + right + ' rights from all selected users?',
-        mapSelectedUsers
+        `Are you sure you want to revoke ${right} rights from all selected users?`,
+        revokeRight(right)
       )
     },
     activateMultipleUsers() {
-      const mapSelectedUsers = () => this.selectedUsers
-        .filter(user => user.deactivated && this.$store.state.user.id !== user.id)
-        .map(user => this.$store.dispatch('ToggleUserActivation', user.nickname))
+      const { activate } = this.mappers()
       this.confirmMessage(
         'Are you sure you want to activate accounts of all selected users?',
-        mapSelectedUsers
+        activate
       )
     },
     deactivateMultipleUsers() {
-      const mapSelectedUsers = () => this.selectedUsers
-        .filter(user => !user.deactivated && this.$store.state.user.id !== user.id)
-        .map(user => this.$store.dispatch('ToggleUserActivation', user.nickname))
+      const { deactivate } = this.mappers()
       this.confirmMessage(
         'Are you sure you want to deactivate accounts of all selected users?',
-        mapSelectedUsers
+        deactivate
       )
     },
     deleteMultipleUsers() {
-      const mapSelectedUsers = () => this.selectedUsers
-        .filter(user => this.$store.state.user.id !== user.id)
-        .map(user => this.$store.dispatch('DeleteUser', user))
+      const { remove } = this.mappers()
       this.confirmMessage(
         'Are you sure you want to delete accounts of all selected users?',
-        mapSelectedUsers
+        remove
       )
     },
     addTagForMultipleUsers(tag) {
-      const mapSelectedUsers = () => this.selectedUsers
-        .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-          ? user.local && !user.tags.includes(tag)
-          : !user.tags.includes(tag)
-        ).map(user => this.$store.dispatch('ToggleTag', { user, tag }))
+      const { addTag } = this.mappers()
       this.confirmMessage(
         'Are you sure you want to apply tag to all selected users?',
-        mapSelectedUsers
+        addTag(tag)
       )
     },
     removeTagFromMultipleUsers(tag) {
-      const mapSelectedUsers = () => this.selectedUsers
-        .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-          ? user.local && user.tags.includes(tag)
-          : user.tags.includes(tag)
-        ).map(user => this.$store.dispatch('ToggleTag', { user, tag }))
+      const { removeTag } = this.mappers()
       this.confirmMessage(
         'Are you sure you want to remove tag from all selected users?',
-        mapSelectedUsers
+        removeTag(tag)
       )
     },
-    confirmMessage(message, mapSelectedUsers) {
+    confirmMessage(message, applyAction) {
       this.$confirm(message, {
         confirmButtonText: 'OK',
         cancelButtonText: 'Cancel',
         type: 'warning'
       }).then(() => {
-        mapSelectedUsers()
+        applyAction()
         this.$emit('apply-action')
         this.$message({
           type: 'success',

From 11255be51f2a98dee2d48263692b83bffe89f0d3 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 14 May 2019 23:07:47 +0300
Subject: [PATCH 12/15] Update tests for applying actions on multiple users

---
 src/views/users/components/DropdownMenu.vue |   6 +-
 test/views/users/dropdownMenu.test.js       | 253 +++++++++++++++++---
 2 files changed, 222 insertions(+), 37 deletions(-)

diff --git a/src/views/users/components/DropdownMenu.vue b/src/views/users/components/DropdownMenu.vue
index 68526186..4edda779 100644
--- a/src/views/users/components/DropdownMenu.vue
+++ b/src/views/users/components/DropdownMenu.vue
@@ -7,7 +7,7 @@
         {{ $t('users.grantAdmin') }}
       </el-dropdown-item>
       <el-dropdown-item
-        @click.native="revokeRightToMultipleUsers('admin')">
+        @click.native="revokeRightFromMultipleUsers('admin')">
         {{ $t('users.revokeAdmin') }}
       </el-dropdown-item>
       <el-dropdown-item
@@ -15,7 +15,7 @@
         {{ $t('users.grantModerator') }}
       </el-dropdown-item>
       <el-dropdown-item
-        @click.native="revokeRightToMultipleUsers('moderator')">
+        @click.native="revokeRightFromMultipleUsers('moderator')">
         {{ $t('users.revokeModerator') }}
       </el-dropdown-item>
       <el-dropdown-item
@@ -149,7 +149,7 @@ export default {
         grantRight(right)
       )
     },
-    revokeRightToMultipleUsers(right) {
+    revokeRightFromMultipleUsers(right) {
       const { revokeRight } = this.mappers()
       this.confirmMessage(
         `Are you sure you want to revoke ${right} rights from all selected users?`,
diff --git a/test/views/users/dropdownMenu.test.js b/test/views/users/dropdownMenu.test.js
index 2cd0269f..f17101c3 100644
--- a/test/views/users/dropdownMenu.test.js
+++ b/test/views/users/dropdownMenu.test.js
@@ -22,10 +22,9 @@ describe('Apply users actions to multiple users', () => {
     store = new Vuex.Store(cloneDeep(storeConfig))
     store.dispatch('FetchUsers', { page: 1 })
     await flushPromises()
-    global.confirm = () => true
   })
 
-  it('calls function that grants admin and moderator rights to multiple users', async (done) => {
+  it('grants admin rights to multiple users', async (done) => {
     const wrapper = mount(DropdownMenu, {
       store,
       localVue,
@@ -43,13 +42,26 @@ describe('Apply users actions to multiple users', () => {
     expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalled()
     expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalledWith('admin')
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(3)`).trigger('click')
-    expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalled()
-    expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalledWith('moderator')
+    const grantRight = wrapper.vm.mappers().grantRight
+    const user1 = store.state.users.fetchedUsers[0]
+    const user2 = store.state.users.fetchedUsers[1]
+    const user3 = store.state.users.fetchedUsers[2]
+    expect(user1.roles.admin).toBe(true)
+    expect(user2.roles.admin).toBe(false)
+    expect(user3.roles.admin).toBe(false)
+    grantRight('admin')()
+    await flushPromises()
+
+    const updatedUser1 = store.state.users.fetchedUsers[0]
+    const updatedUser2 = store.state.users.fetchedUsers[1]
+    const updatedUser3 = store.state.users.fetchedUsers[2]
+    expect(updatedUser1.roles.admin).toBe(true)
+    expect(updatedUser2.roles.admin).toBe(false)
+    expect(updatedUser3.roles.admin).toBe(true)
     done()
   })
 
-  it('calls function that revokes admin and moderator rights to multiple users', async (done) => {
+  it('grants moderator rights to multiple users', async (done) => {
     const wrapper = mount(DropdownMenu, {
       store,
       localVue,
@@ -60,20 +72,86 @@ describe('Apply users actions to multiple users', () => {
     })
     await flushPromises()
 
-    const revokeRightToMultipleUsersStub = jest.fn()
-    wrapper.setMethods({ revokeRightToMultipleUsers: revokeRightToMultipleUsersStub })
+    const grantRightToMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ grantRightToMultipleUsers: grantRightToMultipleUsersStub })
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(2)`).trigger('click')
-    expect(wrapper.vm.revokeRightToMultipleUsers).toHaveBeenCalled()
-    expect(wrapper.vm.revokeRightToMultipleUsers).toHaveBeenCalledWith('admin')
+    wrapper.find(`.el-dropdown-menu__item:nth-child(3)`).trigger('click')
+    expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.grantRightToMultipleUsers).toHaveBeenCalledWith('moderator')
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(4)`).trigger('click')
-    expect(wrapper.vm.revokeRightToMultipleUsers).toHaveBeenCalled()
-    expect(wrapper.vm.revokeRightToMultipleUsers).toHaveBeenCalledWith('moderator')
+    const grantRight = wrapper.vm.mappers().grantRight
+    const user1 = store.state.users.fetchedUsers[0]
+    const user2 = store.state.users.fetchedUsers[1]
+    const user3 = store.state.users.fetchedUsers[2]
+    expect(user1.roles.moderator).toBe(false)
+    expect(user2.roles.moderator).toBe(false)
+    expect(user3.roles.moderator).toBe(false)
+    grantRight('moderator')()
+    await flushPromises()
+
+    const updatedUser1 = store.state.users.fetchedUsers[0]
+    const updatedUser2 = store.state.users.fetchedUsers[1]
+    const updatedUser3 = store.state.users.fetchedUsers[2]
+    expect(updatedUser1.roles.moderator).toBe(true)
+    expect(updatedUser2.roles.moderator).toBe(false)
+    expect(updatedUser3.roles.moderator).toBe(true)
     done()
   })
 
-  it('calls function that activates, deactivates and deletes multiple accounts', async (done) => {
+  it('revokes admin rights from multiple users', async (done) => {
+    const wrapper = mount(DropdownMenu, {
+      store,
+      localVue,
+      sync: false,
+      propsData: {
+        selectedUsers: users
+      }
+    })
+    await flushPromises()
+
+    const revokeRightFromMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ revokeRightFromMultipleUsers: revokeRightFromMultipleUsersStub })
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(2)`).trigger('click')
+    expect(wrapper.vm.revokeRightFromMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.revokeRightFromMultipleUsers).toHaveBeenCalledWith('admin')
+
+    const revokeRight = wrapper.vm.mappers().revokeRight
+    const user1 = store.state.users.fetchedUsers[0]
+    const user2 = store.state.users.fetchedUsers[2]
+    expect(user1.roles.admin).toBe(true)
+    expect(user2.roles.admin).toBe(false)
+    revokeRight('admin')()
+    await flushPromises()
+
+    const updatedUser1 = store.state.users.fetchedUsers[0]
+    const updatedUser2 = store.state.users.fetchedUsers[2]
+    expect(updatedUser1.roles.admin).toBe(false)
+    expect(updatedUser2.roles.admin).toBe(false)
+    done()
+  })
+
+  it('calls a function that revokes moderator rights from multiple users', async (done) => {
+    const wrapper = mount(DropdownMenu, {
+      store,
+      localVue,
+      sync: false,
+      propsData: {
+        selectedUsers: users
+      }
+    })
+    await flushPromises()
+
+    const revokeRightFromMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ revokeRightFromMultipleUsers: revokeRightFromMultipleUsersStub })
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(4)`).trigger('click')
+    expect(wrapper.vm.revokeRightFromMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.revokeRightFromMultipleUsers).toHaveBeenCalledWith('moderator')
+    done()
+  })
+
+  it('activates multiple accounts', async (done) => {
     const wrapper = mount(DropdownMenu, {
       store,
       localVue,
@@ -86,23 +164,90 @@ describe('Apply users actions to multiple users', () => {
 
     const activateMultipleUsersStub = jest.fn()
     wrapper.setMethods({ activateMultipleUsers: activateMultipleUsersStub })
-    const deactivateMultipleUsersStub = jest.fn()
-    wrapper.setMethods({ deactivateMultipleUsers: deactivateMultipleUsersStub })
-    const deleteMultipleUsersStub = jest.fn()
-    wrapper.setMethods({ deleteMultipleUsers: deleteMultipleUsersStub })
 
     wrapper.find(`.el-dropdown-menu__item:nth-child(5)`).trigger('click')
     expect(wrapper.vm.activateMultipleUsers).toHaveBeenCalled()
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(6)`).trigger('click')
-    expect(wrapper.vm.deactivateMultipleUsers).toHaveBeenCalled()
+    const activate = wrapper.vm.mappers().activate
+    const user = store.state.users.fetchedUsers[2]
+    expect(user.deactivated).toBe(true)
+    activate()
+    await flushPromises()
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(7)`).trigger('click')
-    expect(wrapper.vm.deleteMultipleUsers).toHaveBeenCalled()
+    const updatedUser = store.state.users.fetchedUsers[2]
+    expect(updatedUser.deactivated).toBe(false)
     done()
   })
 
-  it('calls function that applies and removes tags from multiple accounts', async (done) => {
+  it('deactivates multiple accounts', async (done) => {
+    const wrapper = mount(DropdownMenu, {
+      store,
+      localVue,
+      sync: false,
+      propsData: {
+        selectedUsers: users
+      }
+    })
+    await flushPromises()
+
+    const deactivateMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ deactivateMultipleUsers: deactivateMultipleUsersStub })
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(6)`).trigger('click')
+    expect(wrapper.vm.deactivateMultipleUsers).toHaveBeenCalled()
+
+    const deactivate = wrapper.vm.mappers().deactivate
+    const user1 = store.state.users.fetchedUsers[0]
+    const user2 = store.state.users.fetchedUsers[1]
+    expect(user1.deactivated).toBe(false)
+    expect(user2.deactivated).toBe(false)
+    deactivate()
+    await flushPromises()
+
+    const updatedUser1 = store.state.users.fetchedUsers[0]
+    const updatedUser2 = store.state.users.fetchedUsers[1]
+    expect(updatedUser1.deactivated).toBe(true)
+    expect(updatedUser2.deactivated).toBe(true)
+    done()
+  })
+
+  it('deletes multiple accounts', async (done) => {
+    const wrapper = mount(DropdownMenu, {
+      store,
+      localVue,
+      sync: false,
+      propsData: {
+        selectedUsers: users
+      }
+    })
+    await flushPromises()
+
+    const deleteMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ deleteMultipleUsers: deleteMultipleUsersStub })
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(7)`).trigger('click')
+    expect(wrapper.vm.deleteMultipleUsers).toHaveBeenCalled()
+
+    const remove = wrapper.vm.mappers().remove
+    const user1 = store.state.users.fetchedUsers[0]
+    const user2 = store.state.users.fetchedUsers[1]
+    const user3 = store.state.users.fetchedUsers[2]
+    expect(user1.deactivated).toBe(false)
+    expect(user2.deactivated).toBe(false)
+    expect(user3.deactivated).toBe(true)
+    remove()
+    await flushPromises()
+
+    const updatedUser1 = store.state.users.fetchedUsers[0]
+    const updatedUser2 = store.state.users.fetchedUsers[1]
+    const updatedUser3 = store.state.users.fetchedUsers[2]
+    expect(updatedUser1.deactivated).toBe(true)
+    expect(updatedUser2.deactivated).toBe(true)
+    expect(updatedUser3.deactivated).toBe(true)
+    done()
+  })
+
+  it('applies tags for multiple accounts', async (done) => {
     const wrapper = mount(DropdownMenu, {
       store,
       localVue,
@@ -115,32 +260,72 @@ describe('Apply users actions to multiple users', () => {
 
     const addTagForMultipleUsersStub = jest.fn()
     wrapper.setMethods({ addTagForMultipleUsers: addTagForMultipleUsersStub })
-    const removeTagFromMultipleUsersStub = jest.fn()
-    wrapper.setMethods({ removeTagFromMultipleUsers: removeTagFromMultipleUsersStub })
 
     wrapper.find(`.el-dropdown-menu__item:nth-child(8) button:nth-child(1)`).trigger('click')
     expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalled()
     expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalledWith('force_nsfw')
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(9) button:nth-child(2)`).trigger('click')
-    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
-    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('strip_media')
-
     wrapper.find(`.el-dropdown-menu__item:nth-child(10) button:nth-child(1)`).trigger('click')
     expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalled()
     expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalledWith('force_unlisted')
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(11) button:nth-child(2)`).trigger('click')
-    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
-    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('sandbox')
-
     wrapper.find(`.el-dropdown-menu__item:nth-child(12) button:nth-child(1)`).trigger('click')
     expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalled()
     expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalledWith('disable_remote_subscription')
 
+    const addTag = wrapper.vm.mappers().addTag
+    const user1 = store.state.users.fetchedUsers[0]
+    const user2 = store.state.users.fetchedUsers[1]
+    expect(user1.tags.length).toBe(0)
+    expect(user2.tags.length).toBe(1)
+    addTag('strip_media')()
+    await flushPromises()
+
+    const updatedUser1 = store.state.users.fetchedUsers[0]
+    const updatedUser2 = store.state.users.fetchedUsers[1]
+    expect(updatedUser1.tags.length).toBe(1)
+    expect(updatedUser2.tags.length).toBe(2)
+    done()
+  })
+
+  it('removes tags from multiple accounts', async (done) => {
+    const wrapper = mount(DropdownMenu, {
+      store,
+      localVue,
+      sync: false,
+      propsData: {
+        selectedUsers: users
+      }
+    })
+    await flushPromises()
+
+    const removeTagFromMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ removeTagFromMultipleUsers: removeTagFromMultipleUsersStub })
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(9) button:nth-child(2)`).trigger('click')
+    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('strip_media')
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(11) button:nth-child(2)`).trigger('click')
+    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
+    expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('sandbox')
+
     wrapper.find(`.el-dropdown-menu__item:nth-child(13) button:nth-child(2)`).trigger('click')
     expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
     expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('disable_any_subscription')
+
+    const removeTag = wrapper.vm.mappers().removeTag
+    const user1 = store.state.users.fetchedUsers[1]
+    const user2 = store.state.users.fetchedUsers[2]
+    expect(user1.tags.length).toBe(1)
+    expect(user2.tags.length).toBe(1)
+    removeTag('strip_media')()
+    await flushPromises()
+
+    const updatedUser1 = store.state.users.fetchedUsers[1]
+    const updatedUser2 = store.state.users.fetchedUsers[2]
+    expect(updatedUser1.tags.length).toBe(1)
+    expect(updatedUser2.tags.length).toBe(0)
     done()
   })
 })

From 98c913b0670857f2848367eae80bd36335e884af Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 14 May 2019 23:13:58 +0300
Subject: [PATCH 13/15] Change mocked data

---
 src/api/__mocks__/users.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/__mocks__/users.js b/src/api/__mocks__/users.js
index cbbb2851..39d08100 100644
--- a/src/api/__mocks__/users.js
+++ b/src/api/__mocks__/users.js
@@ -1,6 +1,6 @@
 export const users = [
   { active: true, deactivated: false, id: '2', nickname: 'allis', local: true, external: false, roles: { admin: true, moderator: false }, tags: [] },
-  { active: true, deactivated: false, id: '10', nickname: 'bob', local: false, external: true, roles: { admin: false, moderator: true }, tags: ['sandbox'] },
+  { active: true, deactivated: false, id: '10', nickname: 'bob', local: false, external: true, roles: { admin: false, moderator: false }, tags: ['sandbox'] },
   { active: false, deactivated: true, id: 'abc', nickname: 'john', local: true, external: false, roles: { admin: false, moderator: false }, tags: ['strip_media'] }
 ]
 

From d821debd853811f33b7bfb75fcb1d8ba04d545bf Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 17 May 2019 03:27:23 +0300
Subject: [PATCH 14/15] Update usage of tag/untag api functions for multiple
 users

---
 src/views/users/components/DropdownMenu.vue | 24 ++++++++++++---------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/views/users/components/DropdownMenu.vue b/src/views/users/components/DropdownMenu.vue
index 4edda779..644b1bb8 100644
--- a/src/views/users/components/DropdownMenu.vue
+++ b/src/views/users/components/DropdownMenu.vue
@@ -130,16 +130,20 @@ export default {
         remove: () => this.selectedUsers
           .filter(user => this.$store.state.user.id !== user.id)
           .map(user => this.$store.dispatch('DeleteUser', user)),
-        addTag: (tag) => () => this.selectedUsers
-          .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-            ? user.local && !user.tags.includes(tag)
-            : !user.tags.includes(tag)
-          ).map(user => this.$store.dispatch('ToggleTag', { user, tag })),
-        removeTag: (tag) => () => this.selectedUsers
-          .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-            ? user.local && user.tags.includes(tag)
-            : user.tags.includes(tag)
-          ).map(user => this.$store.dispatch('ToggleTag', { user, tag }))
+        addTag: (tag) => () => {
+          const users = this.selectedUsers
+            .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
+              ? user.local && !user.tags.includes(tag)
+              : !user.tags.includes(tag))
+          this.$store.dispatch('AddTag', { users, tag })
+        },
+        removeTag: (tag) => () => {
+          const users = this.selectedUsers
+            .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
+              ? user.local && user.tags.includes(tag)
+              : user.tags.includes(tag))
+          this.$store.dispatch('RemoveTag', { users, tag })
+        }
       }
     },
     grantRightToMultipleUsers(right) {

From ea938958a6c9ef49966ba1de8d3d5dfdc7173124 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 26 May 2019 20:39:26 +0200
Subject: [PATCH 15/15] Fix styles

---
 src/lang/en.js                                |  3 ++-
 ...opdownMenu.vue => DropdownActionsMenu.vue} | 27 ++++++++++++++++---
 src/views/users/index.vue                     |  8 +++---
 3 files changed, 30 insertions(+), 8 deletions(-)
 rename src/views/users/components/{DropdownMenu.vue => DropdownActionsMenu.vue} (93%)

diff --git a/src/lang/en.js b/src/lang/en.js
index 1addb11b..4663a714 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -189,7 +189,8 @@ export default {
     sandbox: 'Force posts to be followers-only',
     disableRemoteSubscription: 'Disallow following user from remote instances',
     disableAnySubscription: 'Disallow following user at all',
-    selectUsers: 'Select users to apply actions to multiple users'
+    selectUsers: 'Select users to apply actions to multiple users',
+    moderateUsers: 'Moderate multiple users'
   },
   usersFilter: {
     inputPlaceholder: 'Select filter',
diff --git a/src/views/users/components/DropdownMenu.vue b/src/views/users/components/DropdownActionsMenu.vue
similarity index 93%
rename from src/views/users/components/DropdownMenu.vue
rename to src/views/users/components/DropdownActionsMenu.vue
index 644b1bb8..e310ed6f 100644
--- a/src/views/users/components/DropdownMenu.vue
+++ b/src/views/users/components/DropdownActionsMenu.vue
@@ -1,6 +1,14 @@
 <template>
-  <el-dropdown size="small" trigger="click">
-    <el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
+  <el-dropdown size="small" trigger="click" placement="bottom-start">
+    <el-button v-if="isDesktop" class="actions-button">
+      <span class="actions-button-container">
+        <span>
+          <i class="el-icon-edit" />
+          {{ $t('users.moderateUsers') }}
+        </span>
+        <i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+    </el-button>
     <el-dropdown-menu v-if="showDropdownForMultipleUsers" slot="dropdown">
       <el-dropdown-item
         @click.native="grantRightToMultipleUsers('admin')">
@@ -220,7 +228,20 @@ export default {
 
 <style rel='stylesheet/scss' lang='scss' scoped>
   .actions-button {
-    margin-left: 15px;
+    text-align: left;
+    margin: 0 15px 10px 0;
+    width: 350px;
+    padding: 10px 15px;
+  }
+  .actions-button-container {
+    display: flex;
+    justify-content: space-between;
+  }
+  .el-dropdown {
+    float: right;
+  }
+  .el-dropdown-menu {
+    margin-right: 15px;
   }
   .tag-container {
     display: flex;
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index bcb06bc8..3079bb76 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -8,7 +8,7 @@
       <users-filter/>
       <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
     </div>
-    <dropdown-menu
+    <dropdown-actions-menu
       :selected-users="selectedUsers"
       @apply-action="clearSelection"/>
     <el-table
@@ -137,13 +137,13 @@
 import debounce from 'lodash.debounce'
 import numeral from 'numeral'
 import UsersFilter from './components/UsersFilter'
-import DropdownMenu from './components/DropdownMenu'
+import DropdownActionsMenu from './components/DropdownActionsMenu'
 
 export default {
   name: 'Users',
   components: {
     UsersFilter,
-    DropdownMenu
+    DropdownActionsMenu
   },
   data: function() {
     return {
@@ -265,7 +265,7 @@ export default {
     height: 36px;
     justify-content: space-between;
     align-items: center;
-    margin: 22px 15px 22px 15px
+    margin: 22px 15px 15px 15px
   }
   .user-count {
     color: gray;