diff options
Diffstat (limited to 'app/assets/javascripts/admin/users/components/user_actions.vue')
-rw-r--r-- | app/assets/javascripts/admin/users/components/user_actions.vue | 119 |
1 files changed, 119 insertions, 0 deletions
diff --git a/app/assets/javascripts/admin/users/components/user_actions.vue b/app/assets/javascripts/admin/users/components/user_actions.vue new file mode 100644 index 00000000000..e92c97b54a3 --- /dev/null +++ b/app/assets/javascripts/admin/users/components/user_actions.vue @@ -0,0 +1,119 @@ +<script> +import { + GlButton, + GlDropdown, + GlDropdownItem, + GlDropdownSectionHeader, + GlDropdownDivider, +} from '@gitlab/ui'; +import { convertArrayToCamelCase } from '~/lib/utils/common_utils'; +import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; +import { I18N_USER_ACTIONS } from '../constants'; +import { generateUserPaths } from '../utils'; +import Actions from './actions'; + +export default { + components: { + GlButton, + GlDropdown, + GlDropdownItem, + GlDropdownSectionHeader, + GlDropdownDivider, + ...Actions, + }, + props: { + user: { + type: Object, + required: true, + }, + paths: { + type: Object, + required: true, + }, + }, + computed: { + userActions() { + return convertArrayToCamelCase(this.user.actions); + }, + dropdownActions() { + return this.userActions.filter((a) => a !== 'edit'); + }, + dropdownDeleteActions() { + return this.dropdownActions.filter((a) => a.includes('delete')); + }, + dropdownSafeActions() { + return this.dropdownActions.filter((a) => !this.dropdownDeleteActions.includes(a)); + }, + hasDropdownActions() { + return this.dropdownActions.length > 0; + }, + hasDeleteActions() { + return this.dropdownDeleteActions.length > 0; + }, + hasEditAction() { + return this.userActions.includes('edit'); + }, + userPaths() { + return generateUserPaths(this.paths, this.user.username); + }, + }, + methods: { + isLdapAction(action) { + return action === 'ldapBlocked'; + }, + getActionComponent(action) { + return Actions[capitalizeFirstCharacter(action)]; + }, + }, + i18n: I18N_USER_ACTIONS, +}; +</script> + +<template> + <div class="gl-display-flex gl-justify-content-end"> + <gl-button v-if="hasEditAction" data-testid="edit" :href="userPaths.edit">{{ + $options.i18n.edit + }}</gl-button> + + <gl-dropdown + v-if="hasDropdownActions" + data-testid="actions" + right + class="gl-ml-2" + icon="settings" + > + <gl-dropdown-section-header>{{ $options.i18n.settings }}</gl-dropdown-section-header> + + <template v-for="action in dropdownSafeActions"> + <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> + </template> + + <gl-dropdown-divider v-if="hasDeleteActions" /> + + <template v-for="action in dropdownDeleteActions"> + <component + :is="getActionComponent(action)" + v-if="getActionComponent(action)" + :key="action" + :paths="userPaths" + :username="user.name" + :data-testid="`delete-${action}`" + > + {{ $options.i18n[action] }} + </component> + </template> + </gl-dropdown> + </div> +</template> |