Add latest changes from gitlab-org/gitlab@master

7 files changed, 48 insertions, 57 deletions

diff --git a/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue b/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue
index 4a087fa6aa4..c3b7b7a2953 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue
@@ -105,7 +105,7 @@ export default {
         };
       },
       update(data) {
-        return data.workspace.workItems.nodes[0];
+        return data.workspace.workItems.nodes[0] ?? {};
       },
       skip() {
         return !this.workItemIid;
@@ -150,13 +150,13 @@ export default {
       };
     },
     isProjectArchived() {
-      return this.workItem?.project?.archived;
+      return this.workItem.archived;
     },
     canCreateNote() {
-      return this.workItem?.userPermissions?.createNote;
+      return this.workItem.userPermissions?.createNote;
     },
     workItemState() {
-      return this.workItem?.state;
+      return this.workItem.state;
     },
     commentButtonText() {
       return this.isNewDiscussion ? __('Comment') : __('Reply');
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_note.vue b/app/assets/javascripts/work_items/components/notes/work_item_note.vue
index ad6e82449bf..11aecc65803 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_note.vue
@@ -96,6 +96,7 @@ export default {
   data() {
     return {
       isEditing: false,
+      workItem: {},
     };
   },
   computed: {
@@ -163,13 +164,13 @@ export default {
       return this.authorId === this.currentUserId;
     },
     isWorkItemAuthor() {
-      return getIdFromGraphQLId(this.workItem?.author?.id) === this.authorId;
+      return getIdFromGraphQLId(this.workItem.author?.id) === this.authorId;
     },
     projectName() {
-      return this.workItem?.project?.name;
+      return this.workItem.namespace?.name;
     },
     isWorkItemConfidential() {
-      return this.workItem?.confidential;
+      return this.workItem.confidential;
     },
   },
   apollo: {
@@ -184,7 +185,7 @@ export default {
         };
       },
       update(data) {
-        return data.workspace?.workItems?.nodes[0];
+        return data.workspace?.workItems?.nodes[0] ?? {};
       },
       skip() {
         return !this.workItemIid;
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>
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index 53929775684..d95b434a829 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -146,9 +146,9 @@ export default {
         if (isEmpty(this.workItem)) {
           this.setEmptyState();
         }
-        if (!this.isModal && this.workItem.project) {
-          const path = this.workItem.project?.fullPath
-            ? ` · ${this.workItem.project.fullPath}`
+        if (!this.isModal && this.workItem.namespace) {
+          const path = this.workItem.namespace.fullPath
+            ? ` · ${this.workItem.namespace.fullPath}`
             : '';
 
           document.title = `${this.workItem.title} · ${this.workItem?.workItemType?.name}${path}`;
@@ -181,19 +181,19 @@ export default {
       return this.workItemType ? `#${this.workItem.iid}` : '';
     },
     canUpdate() {
-      return this.workItem?.userPermissions?.updateWorkItem;
+      return this.workItem.userPermissions?.updateWorkItem;
     },
     canDelete() {
-      return this.workItem?.userPermissions?.deleteWorkItem;
+      return this.workItem.userPermissions?.deleteWorkItem;
     },
     canSetWorkItemMetadata() {
-      return this.workItem?.userPermissions?.setWorkItemMetadata;
+      return this.workItem.userPermissions?.setWorkItemMetadata;
     },
     canAssignUnassignUser() {
       return this.workItemAssignees && this.canSetWorkItemMetadata;
     },
     projectFullPath() {
-      return this.workItem?.project?.fullPath;
+      return this.workItem.namespace?.fullPath;
     },
     workItemsMvc2Enabled() {
       return this.glFeatures.workItemsMvc2;
@@ -222,7 +222,7 @@ export default {
       return this.parentWorkItem?.webUrl;
     },
     workItemIconName() {
-      return this.workItem?.workItemType?.iconName;
+      return this.workItem.workItemType?.iconName;
     },
     noAccessSvgPath() {
       return `data:image/svg+xml;utf8,${encodeURIComponent(noAccessSvg)}`;
@@ -285,7 +285,7 @@ export default {
   },
   methods: {
     isWidgetPresent(type) {
-      return this.workItem?.widgets?.find((widget) => widget.type === type);
+      return this.workItem.widgets?.find((widget) => widget.type === type);
     },
     toggleConfidentiality(confidentialStatus) {
       this.updateInProgress = true;
diff --git a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
index fac99310890..ef43b9c026d 100644
--- a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
@@ -4,6 +4,7 @@
 fragment WorkItem on WorkItem {
   id
   iid
+  archived
   title
   state
   description
@@ -13,10 +14,9 @@ fragment WorkItem on WorkItem {
   closedAt
   reference(full: true)
   createNoteEmail
-  project {
+  namespace {
     id
     fullPath
-    archived
     name
   }
   author {
diff --git a/app/assets/javascripts/work_items/pages/create_work_item.vue b/app/assets/javascripts/work_items/pages/create_work_item.vue
index 31e790254d9..435a1233dce 100644
--- a/app/assets/javascripts/work_items/pages/create_work_item.vue
+++ b/app/assets/javascripts/work_items/pages/create_work_item.vue
@@ -103,7 +103,7 @@ export default {
               data: {
                 workspace: {
                   __typename: TYPENAME_PROJECT,
-                  id: workItem.project.id,
+                  id: workItem.namespace.id,
                   workItems: {
                     __typename: 'WorkItemConnection',
                     nodes: [workItem],