diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-01-18 19:00:14 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-01-18 19:00:14 +0000 |
commit | 05f0ebba3a2c8ddf39e436f412dc2ab5bf1353b2 (patch) | |
tree | 11d0f2a6ec31c7793c184106cedc2ded3d9a2cc5 /app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue | |
parent | ec73467c23693d0db63a797d10194da9e72a74af (diff) | |
download | gitlab-ce-05f0ebba3a2c8ddf39e436f412dc2ab5bf1353b2.tar.gz |
Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42
Diffstat (limited to 'app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue')
-rw-r--r-- | app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue | 76 |
1 files changed, 49 insertions, 27 deletions
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue index 89b6885091c..75ea9beb5cf 100644 --- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue +++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue @@ -1,10 +1,10 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { snakeCase } from 'lodash'; import SafeHtml from '~/vue_shared/directives/safe_html'; import highlight from '~/lib/utils/highlight'; import { truncateNamespace } from '~/lib/utils/text_utility'; -import { mapVuexModuleState } from '~/lib/utils/vuex_module_mappers'; +import { mapVuexModuleState, mapVuexModuleActions } from '~/lib/utils/vuex_module_mappers'; import Tracking from '~/tracking'; import ProjectAvatar from '~/vue_shared/components/project_avatar.vue'; @@ -12,11 +12,13 @@ const trackingMixin = Tracking.mixin(); export default { components: { + GlIcon, GlButton, ProjectAvatar, }, directives: { SafeHtml, + GlTooltip: GlTooltipDirective, }, mixins: [trackingMixin], inject: ['vuexModule'], @@ -51,7 +53,7 @@ export default { }, }, computed: { - ...mapVuexModuleState((vm) => vm.vuexModule, ['dropdownType']), + ...mapVuexModuleState((vm) => vm.vuexModule, ['dropdownType', 'isItemsListEditable']), truncatedNamespace() { return truncateNamespace(this.namespace); }, @@ -62,43 +64,63 @@ export default { return `${this.dropdownType}_dropdown_frequent_items_list_item_${snakeCase(this.itemName)}`; }, }, + methods: { + ...mapVuexModuleActions((vm) => vm.vuexModule, ['removeFrequentItem']), + }, }; </script> <template> - <li class="frequent-items-list-item-container"> + <li class="frequent-items-list-item-container gl-relative"> <gl-button category="tertiary" :href="webUrl" - class="gl-text-left gl-justify-content-start!" + class="gl-text-left gl-w-full" + button-text-classes="gl-display-flex gl-w-full" + data-testid="frequent-item-link" @click="track('click_link', { label: itemTrackingLabel })" > - <project-avatar - class="gl-float-left gl-mr-3" - :project-avatar-url="avatarUrl" - :project-id="itemId" - :project-name="itemName" - aria-hidden="true" - /> - <div - data-testid="frequent-items-item-metadata-container" - class="frequent-items-item-metadata-container" - > - <div - v-safe-html="highlightedItemName" - data-testid="frequent-items-item-title" - :title="itemName" - class="frequent-items-item-title" - ></div> + <div class="gl-flex-grow-1"> + <project-avatar + class="gl-float-left gl-mr-3" + :project-avatar-url="avatarUrl" + :project-id="itemId" + :project-name="itemName" + aria-hidden="true" + /> <div - v-if="namespace" - data-testid="frequent-items-item-namespace" - :title="namespace" - class="frequent-items-item-namespace" + data-testid="frequent-items-item-metadata-container" + class="frequent-items-item-metadata-container" > - {{ truncatedNamespace }} + <div + v-safe-html="highlightedItemName" + data-testid="frequent-items-item-title" + :title="itemName" + class="frequent-items-item-title" + ></div> + <div + v-if="namespace" + data-testid="frequent-items-item-namespace" + :title="namespace" + class="frequent-items-item-namespace" + > + {{ truncatedNamespace }} + </div> </div> </div> </gl-button> + <gl-button + v-if="isItemsListEditable" + v-gl-tooltip.left + size="small" + category="tertiary" + :aria-label="__('Remove')" + :title="__('Remove')" + class="gl-align-self-center gl-p-1! gl-absolute! gl-w-auto! gl-top-4 gl-right-4" + data-testid="item-remove" + @click.stop.prevent="removeFrequentItem(itemId)" + > + <gl-icon name="close" /> + </gl-button> </li> </template> |