1 files changed, 5 insertions, 77 deletions

diff --git a/app/assets/javascripts/work_items/pages/work_item_root.vue b/app/assets/javascripts/work_items/pages/work_item_root.vue
index 32b6fc231a8..b8f2bcff25d 100644
--- a/app/assets/javascripts/work_items/pages/work_item_root.vue
+++ b/app/assets/javascripts/work_items/pages/work_item_root.vue
@@ -1,98 +1,26 @@
 <script>
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { TYPE_WORK_ITEM } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
-import Tracking from '~/tracking';
-import workItemQuery from '../graphql/work_item.query.graphql';
-import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql';
-import { WI_TITLE_TRACK_LABEL } from '../constants';
-
-import ItemTitle from '../components/item_title.vue';
-
-const trackingMixin = Tracking.mixin();
+import WorkItemDetail from '../components/work_item_detail.vue';
 
 export default {
-  titleUpdatedEvent: 'updated_title',
   components: {
-    ItemTitle,
-    GlAlert,
-    GlLoadingIcon,
+    WorkItemDetail,
   },
-  mixins: [trackingMixin],
   props: {
     id: {
       type: String,
       required: true,
     },
   },
-  data() {
-    return {
-      workItem: {},
-      error: false,
-    };
-  },
-  apollo: {
-    workItem: {
-      query: workItemQuery,
-      variables() {
-        return {
-          id: this.gid,
-        };
-      },
-    },
-  },
   computed: {
-    tracking() {
-      return {
-        category: 'workItems:show',
-        action: 'updated_title',
-        label: WI_TITLE_TRACK_LABEL,
-        property: '[type_work_item]',
-      };
-    },
     gid() {
-      return convertToGraphQLId('WorkItem', this.id);
-    },
-  },
-  methods: {
-    async updateWorkItem(updatedTitle) {
-      try {
-        await this.$apollo.mutate({
-          mutation: updateWorkItemMutation,
-          variables: {
-            input: {
-              id: this.gid,
-              title: updatedTitle,
-            },
-          },
-        });
-        this.track();
-      } catch {
-        this.error = true;
-      }
+      return convertToGraphQLId(TYPE_WORK_ITEM, this.id);
     },
   },
 };
 </script>
 
 <template>
-  <section>
-    <gl-alert v-if="error" variant="danger" @dismiss="error = false">{{
-      __('Something went wrong while updating work item. Please try again')
-    }}</gl-alert>
-    <!-- Title widget placeholder -->
-    <div>
-      <gl-loading-icon
-        v-if="$apollo.queries.workItem.loading"
-        size="md"
-        data-testid="loading-types"
-      />
-      <template v-else>
-        <item-title
-          :initial-title="workItem.title"
-          data-testid="title"
-          @title-changed="updateWorkItem"
-        />
-      </template>
-    </div>
-  </section>
+  <work-item-detail :work-item-id="gid" />
 </template>