Add latest changes from gitlab-org/gitlab@master

1 files changed, 54 insertions, 2 deletions

diff --git a/app/assets/javascripts/work_items/components/work_item_detail_modal.vue b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue
index dc63ce8fdef..bd1e5383a11 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail_modal.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue
@@ -1,13 +1,22 @@
 <script>
-import { GlModal } from '@gitlab/ui';
+import { GlAlert, GlButton, GlModal } from '@gitlab/ui';
+import WorkItemActions from './work_item_actions.vue';
 import WorkItemDetail from './work_item_detail.vue';
 
 export default {
   components: {
+    GlAlert,
+    GlButton,
     GlModal,
     WorkItemDetail,
+    WorkItemActions,
   },
   props: {
+    canUpdate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     visible: {
       type: Boolean,
       required: true,
@@ -18,11 +27,54 @@ export default {
       default: null,
     },
   },
+  emits: ['workItemDeleted', 'close'],
+  data() {
+    return {
+      error: undefined,
+    };
+  },
+  methods: {
+    handleWorkItemDeleted() {
+      this.$emit('workItemDeleted');
+      this.closeModal();
+    },
+    closeModal() {
+      this.error = '';
+      this.$emit('close');
+    },
+    setErrorMessage(message) {
+      this.error = message;
+    },
+  },
 };
 </script>
 
 <template>
-  <gl-modal hide-footer modal-id="work-item-detail-modal" :visible="visible" @hide="$emit('close')">
+  <gl-modal hide-footer modal-id="work-item-detail-modal" :visible="visible" @hide="closeModal">
+    <template #modal-header>
+      <div class="gl-w-full gl-display-flex gl-align-items-center gl-justify-content-end">
+        <work-item-actions
+          :work-item-id="workItemId"
+          :can-update="canUpdate"
+          @workItemDeleted="handleWorkItemDeleted"
+          @error="setErrorMessage"
+        />
+        <gl-button category="tertiary" icon="close" :aria-label="__('Close')" @click="closeModal" />
+      </div>
+    </template>
+    <gl-alert v-if="error" variant="danger" @dismiss="error = false">
+      {{ error }}
+    </gl-alert>
+
     <work-item-detail :work-item-id="workItemId" />
   </gl-modal>
 </template>
+
+<style>
+/* hide the existing close button until we can do it
+ * with https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2710 
+ */
+#work-item-detail-modal .modal-header > .gl-button {
+  display: none;
+}
+</style>