Merge branch 'aregnery/adjust-user-management-buttons' into 'master'

Update button styles and placement for user administration

See merge request gitlab-org/gitlab!80395

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

@@ -69,7 +69,6 @@ export default {
     editButtonAttrs() {
       return {
         'data-testid': 'edit',
-        icon: 'pencil-square',
         href: this.userPaths.edit,
       };
     },
@@ -101,6 +100,7 @@ export default {
       <gl-button
         v-else
         v-gl-tooltip="$options.i18n.edit"
+        icon="pencil-square"
         v-bind="editButtonAttrs"
         :aria-label="$options.i18n.edit"
       />
@@ -108,10 +108,9 @@ export default {
 
     <div v-if="hasDropdownActions" class="gl-p-2">
       <gl-dropdown
+        v-gl-tooltip="$options.i18n.userAdministration"
         data-testid="dropdown-toggle"
-        :text="$options.i18n.userAdministration"
-        :text-sr-only="!showButtonLabels"
-        icon="ellipsis_h"
+        icon="ellipsis_v"
         data-qa-selector="user_actions_dropdown_toggle"
         :data-qa-username="user.username"
         no-caret

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

@@ -27,8 +27,6 @@
       = render_if_exists 'admin/users/gma_user_badge'
 
   .gl-my-3.gl-display-flex.gl-flex-wrap.gl-my-n2.gl-mx-n2
-    .gl-p-2
-      #js-admin-user-actions{ data: admin_user_actions_data_attributes(@user) }
     - if @user != current_user
       .gl-p-2
         - if impersonation_enabled? && @user.can?(:log_in)
@@ -36,6 +34,8 @@
         - if can_force_email_confirmation?(@user)
           %button.btn.gl-button.btn-info.js-confirm-modal-button{ data: confirm_user_data(@user) }
             = _('Confirm user')
+    .gl-p-2
+      #js-admin-user-actions{ data: admin_user_actions_data_attributes(@user) }
 = gl_tabs_nav do
   = gl_tab_link_to _("Account"), admin_user_path(@user)
   = gl_tab_link_to _("Groups and projects"), projects_admin_user_path(@user)

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

@@ -77,6 +77,12 @@ describe('AdminUserActions component', () => {
         expect(findActionsDropdown().exists()).toBe(true);
       });
 
+      it('renders the tooltip', () => {
+        const tooltip = getBinding(findActionsDropdown().element, 'gl-tooltip');
+
+        expect(tooltip.value).toBe(I18N_USER_ACTIONS.userAdministration);
+      });
+
       describe('when there are actions that require confirmation', () => {
         beforeEach(() => {
           initComponent({ actions: CONFIRMATION_ACTIONS });
@@ -152,7 +158,7 @@ describe('AdminUserActions component', () => {
 
   describe('when `showButtonLabels` prop is `false`', () => {
     beforeEach(() => {
-      initComponent({ actions: [EDIT, ...CONFIRMATION_ACTIONS] });
+      initComponent({ actions: [EDIT] });
     });
 
     it('does not render "Edit" button label', () => {
@@ -163,16 +169,11 @@ describe('AdminUserActions component', () => {
       expect(tooltip).toBeDefined();
       expect(tooltip.value).toBe(I18N_USER_ACTIONS.edit);
     });
-
-    it('does not render "User administration" dropdown button label', () => {
-      expect(findActionsDropdown().props('text')).toBe(I18N_USER_ACTIONS.userAdministration);
-      expect(findActionsDropdown().props('textSrOnly')).toBe(true);
-    });
   });
 
   describe('when `showButtonLabels` prop is `true`', () => {
     beforeEach(() => {
-      initComponent({ actions: [EDIT, ...CONFIRMATION_ACTIONS], showButtonLabels: true });
+      initComponent({ actions: [EDIT], showButtonLabels: true });
     });
 
     it('renders "Edit" button label', () => {
@@ -181,10 +182,5 @@ describe('AdminUserActions component', () => {
       expect(findEditButton().text()).toBe(I18N_USER_ACTIONS.edit);
       expect(tooltip).not.toBeDefined();
     });
-
-    it('renders "User administration" dropdown button label', () => {
-      expect(findActionsDropdown().props('text')).toBe(I18N_USER_ACTIONS.userAdministration);
-      expect(findActionsDropdown().props('textSrOnly')).toBe(false);
-    });
   });
 });