diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue | 49 |
1 files changed, 19 insertions, 30 deletions
diff --git a/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue b/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue index 9fc4571b0dc..ce75e305473 100644 --- a/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue +++ b/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue @@ -7,7 +7,6 @@ import { GlTooltipDirective, GlPopover, GlSprintf, - GlDisclosureDropdown, } from '@gitlab/ui'; import uniqueId from 'lodash/uniqueId'; @@ -20,8 +19,9 @@ import { numberToMetricPrefix } from '~/lib/utils/number_utils'; import { truncate } from '~/lib/utils/text_utility'; import SafeHtml from '~/vue_shared/directives/safe_html'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import ListActions from '~/vue_shared/components/list_actions/list_actions.vue'; +import { ACTION_EDIT, ACTION_DELETE } from '~/vue_shared/components/list_actions/constants'; import DeleteModal from '~/projects/components/shared/delete_modal.vue'; -import { ACTION_EDIT, ACTION_DELETE } from './constants'; const MAX_TOPICS_TO_SHOW = 3; const MAX_TOPIC_TITLE_LENGTH = 15; @@ -51,8 +51,8 @@ export default { GlPopover, GlSprintf, TimeAgoTooltip, - GlDisclosureDropdown, DeleteModal, + ListActions, }, directives: { GlTooltip: GlTooltipDirective, @@ -163,30 +163,21 @@ export default { return numberToMetricPrefix(this.project.openIssuesCount); }, - actionsDropdownItems() { - return [ - { - id: ACTION_EDIT, - text: __('Edit'), + actions() { + return { + [ACTION_EDIT]: { href: this.project.editPath, }, - { - id: ACTION_DELETE, - text: __('Delete'), - extraAttrs: { - class: 'gl-text-red-500!', - }, - action: () => { - this.isDeleteModalVisible = true; - }, + [ACTION_DELETE]: { + action: this.onActionDelete, }, - ].filter(({ id }) => this.project.actions?.includes(id)); + }; }, hasActions() { - return this.actionsDropdownItems.length; + return this.project.availableActions?.length; }, - hasDeleteAction() { - return this.actionsDropdownItems.find((action) => action.id === ACTION_DELETE); + hasActionDelete() { + return this.project.availableActions?.includes(ACTION_DELETE); }, }, methods: { @@ -204,6 +195,9 @@ export default { return null; }, + onActionDelete() { + this.isDeleteModalVisible = true; + }, }, }; </script> @@ -336,20 +330,15 @@ export default { </div> </div> </div> - <gl-disclosure-dropdown + <list-actions v-if="hasActions" class="gl-ml-3 gl-md-align-self-center" - :items="actionsDropdownItems" - icon="ellipsis_v" - no-caret - :toggle-text="$options.i18n.actions" - text-sr-only - placement="right" - category="tertiary" + :actions="actions" + :available-actions="project.availableActions" /> <delete-modal - v-if="hasDeleteAction" + v-if="hasActionDelete" v-model="isDeleteModalVisible" :confirm-phrase="project.name" :is-fork="project.isForked" |