diff options
Diffstat (limited to 'app/assets/javascripts/admin/users/components')
13 files changed, 130 insertions, 97 deletions
diff --git a/app/assets/javascripts/admin/users/components/actions/activate.vue b/app/assets/javascripts/admin/users/components/actions/activate.vue index 0099c8da8e6..af09c7618e2 100644 --- a/app/assets/javascripts/admin/users/components/actions/activate.vue +++ b/app/assets/javascripts/admin/users/components/actions/activate.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdownItem } from '@gitlab/ui'; +import { GlDisclosureDropdownItem } from '@gitlab/ui'; import { sprintf, s__, __ } from '~/locale'; import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub'; import { I18N_USER_ACTIONS } from '../../constants'; @@ -15,7 +15,7 @@ const messageHtml = ` export default { components: { - GlDropdownItem, + GlDisclosureDropdownItem, }, props: { username: { @@ -52,7 +52,9 @@ export default { </script> <template> - <gl-dropdown-item @click="onClick"> - <slot></slot> - </gl-dropdown-item> + <gl-disclosure-dropdown-item @action="onClick"> + <template #list-item> + <slot></slot> + </template> + </gl-disclosure-dropdown-item> </template> diff --git a/app/assets/javascripts/admin/users/components/actions/approve.vue b/app/assets/javascripts/admin/users/components/actions/approve.vue index 52560ebe5b1..2060528c7a0 100644 --- a/app/assets/javascripts/admin/users/components/actions/approve.vue +++ b/app/assets/javascripts/admin/users/components/actions/approve.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdownItem } from '@gitlab/ui'; +import { GlDisclosureDropdownItem } from '@gitlab/ui'; import { sprintf, s__, __ } from '~/locale'; import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub'; import { I18N_USER_ACTIONS } from '../../constants'; @@ -17,7 +17,7 @@ const messageHtml = ` export default { components: { - GlDropdownItem, + GlDisclosureDropdownItem, }, props: { username: { @@ -54,7 +54,9 @@ export default { </script> <template> - <gl-dropdown-item data-qa-selector="approve_user_button" @click="onClick"> - <slot></slot> - </gl-dropdown-item> + <gl-disclosure-dropdown-item data-qa-selector="approve_user_button" @action="onClick"> + <template #list-item> + <slot></slot> + </template> + </gl-disclosure-dropdown-item> </template> diff --git a/app/assets/javascripts/admin/users/components/actions/ban.vue b/app/assets/javascripts/admin/users/components/actions/ban.vue index 203d076914f..d7bdceb4798 100644 --- a/app/assets/javascripts/admin/users/components/actions/ban.vue +++ b/app/assets/javascripts/admin/users/components/actions/ban.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdownItem } from '@gitlab/ui'; +import { GlDisclosureDropdownItem } from '@gitlab/ui'; import { helpPagePath } from '~/helpers/help_page_helper'; import { sprintf, s__, __ } from '~/locale'; import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub'; @@ -30,7 +30,7 @@ const messageHtml = ` export default { components: { - GlDropdownItem, + GlDisclosureDropdownItem, }, props: { username: { @@ -67,7 +67,9 @@ export default { </script> <template> - <gl-dropdown-item @click="onClick"> - <slot></slot> - </gl-dropdown-item> + <gl-disclosure-dropdown-item @action="onClick"> + <template #list-item> + <slot></slot> + </template> + </gl-disclosure-dropdown-item> </template> diff --git a/app/assets/javascripts/admin/users/components/actions/block.vue b/app/assets/javascripts/admin/users/components/actions/block.vue index d50b76aaa92..534e1c76b8f 100644 --- a/app/assets/javascripts/admin/users/components/actions/block.vue +++ b/app/assets/javascripts/admin/users/components/actions/block.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdownItem } from '@gitlab/ui'; +import { GlDisclosureDropdownItem } from '@gitlab/ui'; import { sprintf, s__, __ } from '~/locale'; import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub'; import { I18N_USER_ACTIONS } from '../../constants'; @@ -18,7 +18,7 @@ const messageHtml = ` export default { components: { - GlDropdownItem, + GlDisclosureDropdownItem, }, props: { username: { @@ -53,7 +53,9 @@ export default { </script> <template> - <gl-dropdown-item @click="onClick"> - <slot></slot> - </gl-dropdown-item> + <gl-disclosure-dropdown-item @action="onClick"> + <template #list-item> + <slot></slot> + </template> + </gl-disclosure-dropdown-item> </template> diff --git a/app/assets/javascripts/admin/users/components/actions/deactivate.vue b/app/assets/javascripts/admin/users/components/actions/deactivate.vue index ab1069601d2..40911131d6d 100644 --- a/app/assets/javascripts/admin/users/components/actions/deactivate.vue +++ b/app/assets/javascripts/admin/users/components/actions/deactivate.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdownItem } from '@gitlab/ui'; +import { GlDisclosureDropdownItem } from '@gitlab/ui'; import { sprintf, s__, __ } from '~/locale'; import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub'; import { I18N_USER_ACTIONS } from '../../constants'; @@ -25,7 +25,7 @@ const messageHtml = ` export default { components: { - GlDropdownItem, + GlDisclosureDropdownItem, }, props: { username: { @@ -62,7 +62,9 @@ export default { </script> <template> - <gl-dropdown-item @click="onClick"> - <slot></slot> - </gl-dropdown-item> + <gl-disclosure-dropdown-item @action="onClick"> + <template #list-item> + <slot></slot> + </template> + </gl-disclosure-dropdown-item> </template> diff --git a/app/assets/javascripts/admin/users/components/actions/delete.vue b/app/assets/javascripts/admin/users/components/actions/delete.vue index d4f9ff4e529..83aa78c9f03 100644 --- a/app/assets/javascripts/admin/users/components/actions/delete.vue +++ b/app/assets/javascripts/admin/users/components/actions/delete.vue @@ -1,11 +1,11 @@ <script> -import { GlDropdownItem } from '@gitlab/ui'; +import { GlDisclosureDropdownItem } from '@gitlab/ui'; import { s__ } from '~/locale'; import eventHub, { EVENT_OPEN_DELETE_USER_MODAL } from '../modals/delete_user_modal_event_hub'; export default { components: { - GlDropdownItem, + GlDisclosureDropdownItem, }, props: { username: { @@ -49,9 +49,11 @@ export default { </script> <template> - <gl-dropdown-item @click="onClick"> - <span class="gl-text-red-500"> - <slot></slot> - </span> - </gl-dropdown-item> + <gl-disclosure-dropdown-item @action="onClick"> + <template #list-item> + <span class="gl-text-red-500"> + <slot></slot> + </span> + </template> + </gl-disclosure-dropdown-item> </template> diff --git a/app/assets/javascripts/admin/users/components/actions/delete_with_contributions.vue b/app/assets/javascripts/admin/users/components/actions/delete_with_contributions.vue index 413804c9a3b..24f0cac73f5 100644 --- a/app/assets/javascripts/admin/users/components/actions/delete_with_contributions.vue +++ b/app/assets/javascripts/admin/users/components/actions/delete_with_contributions.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui'; +import { GlDisclosureDropdownItem, GlLoadingIcon } from '@gitlab/ui'; import { s__, __ } from '~/locale'; import { associationsCount } from '~/api/user_api'; import eventHub, { EVENT_OPEN_DELETE_USER_MODAL } from '../modals/delete_user_modal_event_hub'; @@ -9,7 +9,7 @@ export default { loading: __('Loading'), }, components: { - GlDropdownItem, + GlDisclosureDropdownItem, GlLoadingIcon, }, props: { @@ -71,13 +71,15 @@ export default { </script> <template> - <gl-dropdown-item :disabled="loading" :aria-busy="loading" @click.capture.native.stop="onClick"> - <div v-if="loading" class="gl-display-flex gl-align-items-center"> - <gl-loading-icon class="gl-mr-3" /> - {{ $options.i18n.loading }} - </div> - <span v-else class="gl-text-red-500"> - <slot></slot> - </span> - </gl-dropdown-item> + <gl-disclosure-dropdown-item :disabled="loading" :aria-busy="loading" @action="onClick"> + <template #list-item> + <div v-if="loading" class="gl-display-flex gl-align-items-center"> + <gl-loading-icon class="gl-mr-3" /> + {{ $options.i18n.loading }} + </div> + <span v-else class="gl-text-red-500"> + <slot></slot> + </span> + </template> + </gl-disclosure-dropdown-item> </template> diff --git a/app/assets/javascripts/admin/users/components/actions/reject.vue b/app/assets/javascripts/admin/users/components/actions/reject.vue index 2b9c4acfcb5..7f786991709 100644 --- a/app/assets/javascripts/admin/users/components/actions/reject.vue +++ b/app/assets/javascripts/admin/users/components/actions/reject.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdownItem } from '@gitlab/ui'; +import { GlDisclosureDropdownItem } from '@gitlab/ui'; import { helpPagePath } from '~/helpers/help_page_helper'; import { sprintf, s__, __ } from '~/locale'; import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub'; @@ -28,7 +28,7 @@ const messageHtml = ` export default { components: { - GlDropdownItem, + GlDisclosureDropdownItem, }, props: { username: { @@ -65,7 +65,9 @@ export default { </script> <template> - <gl-dropdown-item @click="onClick"> - <slot></slot> - </gl-dropdown-item> + <gl-disclosure-dropdown-item @action="onClick"> + <template #list-item> + <slot></slot> + </template> + </gl-disclosure-dropdown-item> </template> diff --git a/app/assets/javascripts/admin/users/components/actions/unban.vue b/app/assets/javascripts/admin/users/components/actions/unban.vue index 42b6fb3bdd4..f84c7594f87 100644 --- a/app/assets/javascripts/admin/users/components/actions/unban.vue +++ b/app/assets/javascripts/admin/users/components/actions/unban.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdownItem } from '@gitlab/ui'; +import { GlDisclosureDropdownItem } from '@gitlab/ui'; import { sprintf, s__, __ } from '~/locale'; import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub'; import { I18N_USER_ACTIONS } from '../../constants'; @@ -11,7 +11,7 @@ const messageHtml = `<p>${s__( export default { components: { - GlDropdownItem, + GlDisclosureDropdownItem, }, props: { username: { @@ -48,7 +48,9 @@ export default { </script> <template> - <gl-dropdown-item @click="onClick"> - <slot></slot> - </gl-dropdown-item> + <gl-disclosure-dropdown-item @action="onClick"> + <template #list-item> + <slot></slot> + </template> + </gl-disclosure-dropdown-item> </template> diff --git a/app/assets/javascripts/admin/users/components/actions/unblock.vue b/app/assets/javascripts/admin/users/components/actions/unblock.vue index f94e128a945..064f05ef8b1 100644 --- a/app/assets/javascripts/admin/users/components/actions/unblock.vue +++ b/app/assets/javascripts/admin/users/components/actions/unblock.vue @@ -1,12 +1,12 @@ <script> -import { GlDropdownItem } from '@gitlab/ui'; +import { GlDisclosureDropdownItem } from '@gitlab/ui'; import { sprintf, s__, __ } from '~/locale'; import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub'; import { I18N_USER_ACTIONS } from '../../constants'; export default { components: { - GlDropdownItem, + GlDisclosureDropdownItem, }, props: { username: { @@ -42,7 +42,9 @@ export default { </script> <template> - <gl-dropdown-item @click="onClick"> - <slot></slot> - </gl-dropdown-item> + <gl-disclosure-dropdown-item @action="onClick"> + <template #list-item> + <slot></slot> + </template> + </gl-disclosure-dropdown-item> </template> diff --git a/app/assets/javascripts/admin/users/components/actions/unlock.vue b/app/assets/javascripts/admin/users/components/actions/unlock.vue index c78c260b4fe..039ab3d651e 100644 --- a/app/assets/javascripts/admin/users/components/actions/unlock.vue +++ b/app/assets/javascripts/admin/users/components/actions/unlock.vue @@ -1,12 +1,12 @@ <script> -import { GlDropdownItem } from '@gitlab/ui'; +import { GlDisclosureDropdownItem } from '@gitlab/ui'; import { sprintf, s__, __ } from '~/locale'; import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub'; import { I18N_USER_ACTIONS } from '../../constants'; export default { components: { - GlDropdownItem, + GlDisclosureDropdownItem, }, props: { username: { @@ -41,7 +41,9 @@ export default { </script> <template> - <gl-dropdown-item @click="onClick"> - <slot></slot> - </gl-dropdown-item> + <gl-disclosure-dropdown-item @action="onClick"> + <template #list-item> + <slot></slot> + </template> + </gl-disclosure-dropdown-item> </template> diff --git a/app/assets/javascripts/admin/users/components/user_actions.vue b/app/assets/javascripts/admin/users/components/user_actions.vue index c1fb80959cf..38c7d3f9b90 100644 --- a/app/assets/javascripts/admin/users/components/user_actions.vue +++ b/app/assets/javascripts/admin/users/components/user_actions.vue @@ -1,10 +1,9 @@ <script> import { GlButton, - GlDropdown, - GlDropdownItem, - GlDropdownSectionHeader, - GlDropdownDivider, + GlDisclosureDropdown, + GlDisclosureDropdownItem, + GlDisclosureDropdownGroup, GlTooltipDirective, } from '@gitlab/ui'; import { convertArrayToCamelCase } from '~/lib/utils/common_utils'; @@ -17,10 +16,9 @@ import Actions from './actions'; export default { components: { GlButton, - GlDropdown, - GlDropdownItem, - GlDropdownSectionHeader, - GlDropdownDivider, + GlDisclosureDropdown, + GlDisclosureDropdownItem, + GlDisclosureDropdownGroup, ...Actions, }, directives: { @@ -63,6 +61,9 @@ export default { hasEditAction() { return this.userActions.includes('edit'); }, + hasEditActionOnly() { + return this.hasEditAction === true && this.hasDeleteActions === false; + }, userPaths() { return generateUserPaths(this.paths, this.user.username); }, @@ -93,10 +94,13 @@ export default { class="gl-display-flex gl-justify-content-end gl-my-n2 gl-mx-n2" :data-testid="`user-actions-${user.id}`" > - <div v-if="hasEditAction" class="gl-p-2"> - <gl-button v-if="showButtonLabels" v-bind="editButtonAttrs" icon="pencil-square">{{ - $options.i18n.edit - }}</gl-button> + <div v-if="hasEditAction" class="gl-p-2" :class="{ 'gl-mr-3': hasEditActionOnly }"> + <gl-button + v-if="showButtonLabels" + v-bind="editButtonAttrs" + :class="{ 'gl-mr-7': hasEditActionOnly }" + >{{ $options.i18n.edit }}</gl-button + > <gl-button v-else v-gl-tooltip="$options.i18n.edit" @@ -107,12 +111,15 @@ export default { </div> <div v-if="hasDropdownActions" class="gl-p-2"> - <gl-dropdown - :text="$options.i18n.userAdministration" + <gl-disclosure-dropdown + icon="ellipsis_v" + category="tertiary" + :toggle-text="$options.i18n.userAdministration" + text-sr-only data-testid="dropdown-toggle" data-qa-selector="user_actions_dropdown_toggle" :data-qa-username="user.username" - left + no-caret > <template v-for="action in dropdownSafeActions"> <component @@ -125,28 +132,32 @@ export default { > {{ $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)" + <gl-disclosure-dropdown-item + v-else-if="isLdapAction(action)" :key="action" - :paths="userPaths" - :username="user.name" - :user-id="user.id" - :user-deletion-obstacles="obstaclesForUserDeletion" - :data-testid="`delete-${action}`" + :data-testid="action" > {{ $options.i18n[action] }} - </component> + </gl-disclosure-dropdown-item> </template> - </gl-dropdown> + + <gl-disclosure-dropdown-group v-if="hasDeleteActions" bordered> + <template v-for="action in dropdownDeleteActions"> + <component + :is="getActionComponent(action)" + v-if="getActionComponent(action)" + :key="action" + :paths="userPaths" + :username="user.name" + :user-id="user.id" + :user-deletion-obstacles="obstaclesForUserDeletion" + :data-testid="`delete-${action}`" + > + {{ $options.i18n[action] }} + </component> + </template> + </gl-disclosure-dropdown-group> + </gl-disclosure-dropdown> </div> </div> </template> diff --git a/app/assets/javascripts/admin/users/components/users_table.vue b/app/assets/javascripts/admin/users/components/users_table.vue index e55622d40ba..2d2c598f953 100644 --- a/app/assets/javascripts/admin/users/components/users_table.vue +++ b/app/assets/javascripts/admin/users/components/users_table.vue @@ -135,7 +135,7 @@ export default { </template> <template #cell(settings)="{ item: user }"> - <user-actions :user="user" :paths="paths" /> + <user-actions :user="user" :paths="paths" :show-button-labels="true" /> </template> </gl-table> </div> |