Add latest changes from gitlab-org/gitlab@master

2 files changed, 27 insertions, 37 deletions

diff --git a/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue b/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
index 49813edf6fc..dd4461a280e 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue
@@ -1,6 +1,6 @@
 <script>
-import { GlLabel, GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { GlLabel, GlLink, GlIcon, GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip.vue';
 import WorkItemLinkChildMetadata from 'ee_else_ce/work_items/components/shared/work_item_link_child_metadata.vue';
@@ -15,21 +15,21 @@ import {
   WIDGET_TYPE_LABELS,
   WORK_ITEM_NAME_TO_ICON_MAP,
 } from '../../constants';
-import WorkItemLinksMenu from './work_item_links_menu.vue';
 
 export default {
   i18n: {
     confidential: __('Confidential'),
     created: __('Created'),
     closed: __('Closed'),
+    remove: s__('WorkItem|Remove'),
   },
   components: {
     GlLabel,
     GlLink,
     GlIcon,
+    GlButton,
     RichTimestampTooltip,
     WorkItemLinkChildMetadata,
-    WorkItemLinksMenu,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -53,6 +53,11 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      isFocused: false,
+    };
+  },
   computed: {
     labels() {
       return this.metadataWidgets[WIDGET_TYPE_LABELS]?.labels?.nodes || [];
@@ -106,6 +111,9 @@ export default {
       }
       return false;
     },
+    showRemove() {
+      return this.canUpdate && this.isFocused;
+    },
   },
   methods: {
     showScopedLabel(label) {
@@ -117,8 +125,12 @@ export default {
 
 <template>
   <div
-    class="item-body work-item-link-child gl-relative gl-display-flex gl-flex-grow-1 gl-overflow-break-word gl-min-w-0 gl-pl-3 gl-pr-2 gl-py-2 gl-mx-n2 gl-rounded-base"
+    class="item-body work-item-link-child gl-relative gl-display-flex gl-flex-grow-1 gl-overflow-break-word gl-min-w-0 gl-pl-3 gl-pr-2 gl-py-2 gl-mx-n2 gl-rounded-base gl-gap-3"
     data-testid="links-child"
+    @mouseover="isFocused = true"
+    @mouseleave="isFocused = false"
+    @focusin="isFocused = true"
+    @focusout="isFocused = false"
   >
     <div class="item-contents gl-display-flex gl-flex-grow-1 gl-flex-wrap gl-min-w-0">
       <div
@@ -181,10 +193,16 @@ export default {
         />
       </div>
     </div>
-    <div v-if="canUpdate" class="gl-ml-0 gl-sm-ml-auto! gl-display-inline-flex">
-      <work-item-links-menu
-        data-testid="links-menu"
-        @removeChild="$emit('removeChild', childItem)"
+    <div v-if="canUpdate">
+      <gl-button
+        :class="{ 'gl-visibility-visible': showRemove }"
+        class="gl-visibility-hidden"
+        category="tertiary"
+        size="small"
+        icon="close"
+        :aria-label="$options.i18n.remove"
+        data-testid="remove-work-item-link"
+        @click="$emit('removeChild', childItem)"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/work_items/components/shared/work_item_links_menu.vue b/app/assets/javascripts/work_items/components/shared/work_item_links_menu.vue
deleted file mode 100644
index 12b7bade31d..00000000000
--- a/app/assets/javascripts/work_items/components/shared/work_item_links_menu.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
-
-export default {
-  components: {
-    GlDisclosureDropdownItem,
-    GlDisclosureDropdown,
-  },
-};
-</script>
-
-<template>
-  <div class="gl-ml-5">
-    <gl-disclosure-dropdown
-      category="tertiary"
-      toggle-class="btn-icon btn-sm"
-      icon="ellipsis_v"
-      data-testid="work_items_links_menu"
-      :aria-label="__(`More actions`)"
-      text-sr-only
-      no-caret
-    >
-      <gl-disclosure-dropdown-item @action="$emit('removeChild')">
-        <template #list-item>{{ s__('WorkItem|Remove') }}</template>
-      </gl-disclosure-dropdown-item>
-    </gl-disclosure-dropdown>
-  </div>
-</template>