1 files changed, 33 insertions, 5 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 493ee0aba01..479274baf3a 100644
--- a/app/assets/javascripts/work_items/pages/work_item_root.vue
+++ b/app/assets/javascripts/work_items/pages/work_item_root.vue
@@ -1,8 +1,16 @@
 <script>
+import { GlAlert } from '@gitlab/ui';
 import workItemQuery from '../graphql/work_item.query.graphql';
+import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql';
 import { widgetTypes } from '../constants';
 
+import ItemTitle from '../components/item_title.vue';
+
 export default {
+  components: {
+    ItemTitle,
+    GlAlert,
+  },
   props: {
     id: {
       type: String,
@@ -12,6 +20,7 @@ export default {
   data() {
     return {
       workItem: null,
+      error: false,
     };
   },
   apollo: {
@@ -29,20 +38,39 @@ export default {
       return this.workItem?.widgets?.nodes?.find((widget) => widget.type === widgetTypes.title);
     },
   },
+  methods: {
+    async updateWorkItem(title) {
+      try {
+        await this.$apollo.mutate({
+          mutation: updateWorkItemMutation,
+          variables: {
+            input: {
+              id: this.id,
+              title,
+            },
+          },
+        });
+      } catch {
+        this.error = true;
+      }
+    },
+  },
 };
 </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>
-      <h2
+      <item-title
         v-if="titleWidgetData"
-        class="gl-font-weight-normal gl-sm-font-weight-bold gl-my-5"
+        :initial-title="titleWidgetData.contentText"
         data-testid="title"
-      >
-        {{ titleWidgetData.contentText }}
-      </h2>
+        @title-changed="updateWorkItem"
+      />
     </div>
   </section>
 </template>