Add components to actions dropdown with specs

This adds the action & delete components to the
user_actions dropdown

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

@@ -6,9 +6,10 @@ import {
   GlDropdownSectionHeader,
   GlDropdownDivider,
 } from '@gitlab/ui';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import { convertArrayToCamelCase } from '~/lib/utils/common_utils';
 import { generateUserPaths } from '../utils';
-import { I18N_USER_ACTIONS } from '../constants';
+import { ACTION_COMPONENTS, DELETE_ACTION_COMPONENTS, I18N_USER_ACTIONS } from '../constants';
 export default {
   components: {
@@ -17,6 +18,8 @@ export default {
     GlDropdownItem,
     GlDropdownSectionHeader,
     GlDropdownDivider,
+    ...ACTION_COMPONENTS,
+    ...DELETE_ACTION_COMPONENTS,
   },
   props: {
     user: {
@@ -58,6 +61,12 @@ export default {
     isLdapAction(action) {
       return action === 'ldapBlocked';
     },
+    getActionComponent(action) {
+      return ACTION_COMPONENTS[capitalizeFirstCharacter(action)];
+    },
+    getDeleteActionComponent(action) {
+      return DELETE_ACTION_COMPONENTS[capitalizeFirstCharacter(action)];
+    },
   },
   i18n: I18N_USER_ACTIONS,
 };
@@ -79,8 +88,18 @@ export default {
       <gl-dropdown-section-header>{{ $options.i18n.settings }}</gl-dropdown-section-header>
       <template v-for="action in dropdownSafeActions">
-        <gl-dropdown-item v-if="isLdapAction(action)" :key="action" :data-testid="action">
-          {{ $options.i18n.ldap }}
+        <component
+          :is="getActionComponent(action)"
+          v-if="getActionComponent(action)"
+          :key="action"
+          :path="userPaths[action]"
+          :username="user.name"
+          :data-testid="action"
+        >
+          {{ $options.i18n[action] }}
+        </component>
+        <gl-dropdown-item v-else-if="isLdapAction(action)" :key="action" :data-testid="action">
+          {{ $options.i18n[action] }}
         </gl-dropdown-item>
         <gl-dropdown-item v-else :key="action" :href="userPaths[action]" :data-testid="action">
           {{ $options.i18n[action] }}
@@ -89,14 +108,18 @@ export default {
       <gl-dropdown-divider v-if="hasDeleteActions" />
-      <gl-dropdown-item
-        v-for="action in dropdownDeleteActions"
-        :key="action"
-        :href="userPaths[action]"
-        :data-testid="`delete-${action}`"
-      >
-        <span class="gl-text-red-500">{{ $options.i18n[action] }}</span>
-      </gl-dropdown-item>
+      <template v-for="action in dropdownDeleteActions">
+        <component
+          :is="getDeleteActionComponent(action)"
+          v-if="getDeleteActionComponent(action)"
+          :key="action"
+          :paths="userPaths"
+          :username="user.name"
+          :data-testid="`delete-${action}`"
+        >
+          {{ $options.i18n[action] }}
+        </component>
+      </template>
     </gl-dropdown>
   </div>
 </template>

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

@@ -2,14 +2,26 @@ import { shallowMount } from '@vue/test-utils';
 import { GlDropdownDivider } from '@gitlab/ui';
 import AdminUserActions from '~/admin/users/components/user_actions.vue';
 import { generateUserPaths } from '~/admin/users/utils';
+import {
+  ACTION_COMPONENTS,
+  DELETE_ACTION_COMPONENTS,
+  I18N_USER_ACTIONS,
+} from '~/admin/users/constants';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import { users, paths } from '../mock_data';
 const BLOCK = 'block';
+const UNBLOCK = 'unblock';
 const EDIT = 'edit';
 const LDAP = 'ldapBlocked';
 const DELETE = 'delete';
 const DELETE_WITH_CONTRIBUTIONS = 'deleteWithContributions';
+const UNLOCK = 'unlock';
+const ACTIVATE = 'activate';
+const DEACTIVATE = 'deactivate';
+const REJECT = 'reject';
+const APPROVE = 'approve';
 describe('AdminUserActions component', () => {
   let wrapper;
@@ -72,10 +84,37 @@ describe('AdminUserActions component', () => {
         expect(findActionsDropdown().exists()).toBe(true);
       });
-      it.each(actions)('renders a dropdown item for %s', (action) => {
-        const dropdownAction = wrapper.find(`[data-testid="${action}"]`);
-        expect(dropdownAction.exists()).toBe(true);
-        expect(dropdownAction.attributes('href')).toBe(userPaths[action]);
+      describe('when there are actions that do not require confirmation', () => {
+        const linkActions = [REJECT, APPROVE];
+
+        beforeEach(() => {
+          initComponent({ actions: linkActions });
+        });
+
+        it.each(linkActions)('renders a dropdown item with a link for "%s"', (action) => {
+          const component = wrapper.find(`[data-testid="${action}"]`);
+
+          expect(component.exists()).toBe(true);
+          expect(component.attributes('href')).toBe(userPaths[action]);
+          expect(component.text()).toBe(I18N_USER_ACTIONS[action]);
+        });
+      });
+
+      describe('when there are actions that require confirmation', () => {
+        const confirmationActions = [ACTIVATE, BLOCK, DEACTIVATE, UNLOCK, UNBLOCK];
+
+        beforeEach(() => {
+          initComponent({ actions: confirmationActions });
+        });
+
+        it.each(confirmationActions)('renders an action component item for "%s"', (action) => {
+          const component = wrapper.find(ACTION_COMPONENTS[capitalizeFirstCharacter(action)]);
+
+          expect(component.exists()).toBe(true);
+          expect(component.props('username')).toBe(user.name);
+          expect(component.props('path')).toEqual(userPaths[action]);
+          expect(component.text()).toBe(I18N_USER_ACTIONS[action]);
+        });
       });
       describe('when there is a LDAP action', () => {
@@ -87,6 +126,7 @@ describe('AdminUserActions component', () => {
           const dropdownAction = wrapper.find(`[data-testid="${LDAP}"]`);
           expect(dropdownAction.exists()).toBe(true);
           expect(dropdownAction.attributes('href')).toBe(undefined);
+          expect(dropdownAction.text()).toBe(I18N_USER_ACTIONS[LDAP]);
         });
       });
@@ -106,10 +146,15 @@ describe('AdminUserActions component', () => {
           expect(length).toBe(deleteActions.length);
         });
-        it.each(deleteActions)('renders a delete dropdown item for %s', (action) => {
-          const deleteAction = wrapper.find(`[data-testid="delete-${action}"]`);
-          expect(deleteAction.exists()).toBe(true);
-          expect(deleteAction.attributes('href')).toBe(userPaths[action]);
+        it.each(deleteActions)('renders a delete action component item for "%s"', (action) => {
+          const component = wrapper.find(
+            DELETE_ACTION_COMPONENTS[capitalizeFirstCharacter(action)],
+          );
+
+          expect(component.exists()).toBe(true);
+          expect(component.props('username')).toBe(user.name);
+          expect(component.props('paths')).toEqual(userPaths);
+          expect(component.text()).toBe(I18N_USER_ACTIONS[action]);
         });
       });