1 files changed, 51 insertions, 32 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 942677bb937..a79091fb8b2 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,15 +1,22 @@
 <script>
-import { GlModal } from '@gitlab/ui';
-import { s__ } from '~/locale';
-import workItemQuery from '../graphql/work_item.query.graphql';
-import ItemTitle from './item_title.vue';
+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,
-    ItemTitle,
+    WorkItemDetail,
+    WorkItemActions,
   },
   props: {
+    canUpdate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     visible: {
       type: Boolean,
       required: true,
@@ -20,43 +27,55 @@ export default {
       default: null,
     },
   },
+  emits: ['workItemDeleted', 'close'],
   data() {
     return {
-      workItem: {},
+      error: undefined,
     };
   },
-  apollo: {
-    workItem: {
-      query: workItemQuery,
-      variables() {
-        return {
-          id: this.workItemId,
-        };
-      },
-      update(data) {
-        return data.workItem;
-      },
-      skip() {
-        return !this.workItemId;
-      },
-      error() {
-        this.$emit(
-          'error',
-          s__('WorkItem|Something went wrong when fetching the work item. Please try again.'),
-        );
-      },
+  methods: {
+    handleWorkItemDeleted() {
+      this.$emit('workItemDeleted');
+      this.closeModal();
     },
-  },
-  computed: {
-    workItemTitle() {
-      return this.workItem?.title;
+    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')">
-    <item-title class="gl-m-0!" :initial-title="workItemTitle" />
+  <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">
+        <h2 class="modal-title gl-mr-auto">{{ s__('WorkItem|Work Item') }}</h2>
+        <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>