Convert admin/users view - update specs for feature flag rollout

app/assets/javascripts/admin/users/components/actions/unblock.vue

@@ -23,9 +23,7 @@ export default {
         'data-method': 'put',
         'data-modal-attributes': JSON.stringify({
           title: sprintf(s__('AdminUsers|Unblock user %{username}?'), { username: this.username }),
-          message: s__(
-            'AdminUsers|You can always unblock their account, their data will remain intact.',
-          ),
+          message: s__('AdminUsers|You can always block their account again if needed.'),
           okVariant: 'confirm',
           okTitle: s__('AdminUsers|Unblock'),
         }),

app/assets/javascripts/admin/users/components/user_actions.vue

@@ -70,14 +70,14 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-justify-content-end">
+  <div class="gl-display-flex gl-justify-content-end" :data-testid="`user-actions-${user.id}`">
     <gl-button v-if="hasEditAction" data-testid="edit" :href="userPaths.edit">{{
       $options.i18n.edit
     }}</gl-button>
 
     <gl-dropdown
       v-if="hasDropdownActions"
-      data-testid="actions"
+      data-testid="dropdown-toggle"
       right
       class="gl-ml-2"
       icon="settings"

app/assets/javascripts/admin/users/components/users_table.vue

@@ -77,6 +77,10 @@ export default {
         <user-date :date="lastActivityOn" show-never />
       </template>
 
+      <template #cell(projectsCount)="{ item: { id, projectsCount } }">
+        <div :data-testid="`user-project-count-${id}`">{{ projectsCount }}</div>
+      </template>
+
       <template #cell(settings)="{ item: user }">
         <user-actions :user="user" :paths="paths" />
       </template>

app/views/admin/users/_user.html.haml

@@ -21,13 +21,13 @@
       = user.last_activity_on.nil? ? _('Never') : l(user.last_activity_on, format: :admin)
   - unless user.internal?
     .table-section.section-20.table-button-footer
-      .table-action-buttons
-        = link_to _('Edit'), edit_admin_user_path(user), id: "edit_#{dom_id(user)}", class: 'btn gl-button btn-default'
+      .table-action-buttons{ data: { testid: "user-actions-#{user.id}" } }
+        = link_to _('Edit'), edit_admin_user_path(user), class: 'btn gl-button btn-default'
         - unless user == current_user
-          %button.dropdown-new.btn.gl-button.btn-default{ type: 'button', data: { testid: "user-action-button-#{user.id}", toggle: 'dropdown' } }
+          %button.dropdown-new.btn.gl-button.btn-default{ type: 'button', data: { testid: "dropdown-toggle", toggle: 'dropdown' } }
             = sprite_icon('settings')
             = sprite_icon('chevron-down')
-          %ul.dropdown-menu.dropdown-menu-right{ data: { testid: "user-action-dropdown-#{user.id}" } }
+          %ul.dropdown-menu.dropdown-menu-right
             %li.dropdown-header
               = _('Settings')
               %li

spec/frontend/admin/users/components/user_actions_spec.js

 import { GlDropdownDivider } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import Actions from '~/admin/users/components/actions';
 import AdminUserActions from '~/admin/users/components/user_actions.vue';
 import { I18N_USER_ACTIONS } from '~/admin/users/constants';
@@ -14,12 +14,14 @@ describe('AdminUserActions component', () => {
   const user = users[0];
   const userPaths = generateUserPaths(paths, user.username);
 
-  const findEditButton = () => wrapper.find('[data-testid="edit"]');
-  const findActionsDropdown = () => wrapper.find('[data-testid="actions"');
-  const findDropdownDivider = () => wrapper.find(GlDropdownDivider);
+  const findUserActions = (id) => wrapper.findByTestId(`user-actions-${id}`);
+  const findEditButton = (id = user.id) => findUserActions(id).find('[data-testid="edit"]');
+  const findActionsDropdown = (id = user.id) =>
+    findUserActions(id).find('[data-testid="dropdown-toggle"]');
+  const findDropdownDivider = () => wrapper.findComponent(GlDropdownDivider);
 
   const initComponent = ({ actions = [] } = {}) => {
-    wrapper = shallowMount(AdminUserActions, {
+    wrapper = shallowMountExtended(AdminUserActions, {
       propsData: {
         user: {
           ...user,