Add latest changes from gitlab-org/gitlab@master

10 files changed, 147 insertions, 117 deletions

diff --git a/app/assets/javascripts/work_items/components/item_title.vue b/app/assets/javascripts/work_items/components/item_title.vue
index 79840cc4f0f..92025c363e5 100644
--- a/app/assets/javascripts/work_items/components/item_title.vue
+++ b/app/assets/javascripts/work_items/components/item_title.vue
@@ -2,10 +2,7 @@
 import { escape } from 'lodash';
 import { __ } from '~/locale';
 
-import { WI_TITLE_TRACK_LABEL } from '../constants';
-
 export default {
-  WI_TITLE_TRACK_LABEL,
   props: {
     initialTitle: {
       type: String,
@@ -50,7 +47,6 @@ export default {
   <h2
     class="gl-font-weight-normal gl-sm-font-weight-bold gl-my-5 gl-display-inline-block"
     :class="{ 'gl-cursor-not-allowed': disabled }"
-    data-testid="title"
     aria-labelledby="item-title"
   >
     <span
@@ -59,7 +55,6 @@ export default {
       role="textbox"
       :aria-label="__('Title')"
       :data-placeholder="placeholder"
-      :data-track-label="$options.WI_TITLE_TRACK_LABEL"
       :contenteditable="!disabled"
       class="gl-pseudo-placeholder"
       @blur="handleBlur"
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 d5687d26499..4d804ad3918 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,14 +1,15 @@
 <script>
-import { GlModal, GlLoadingIcon } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { GlAlert, GlModal } from '@gitlab/ui';
+import { i18n } from '../constants';
 import workItemQuery from '../graphql/work_item.query.graphql';
-import ItemTitle from './item_title.vue';
+import WorkItemTitle from './work_item_title.vue';
 
 export default {
+  i18n,
   components: {
+    GlAlert,
     GlModal,
-    GlLoadingIcon,
-    ItemTitle,
+    WorkItemTitle,
   },
   props: {
     visible: {
@@ -23,6 +24,7 @@ export default {
   },
   data() {
     return {
+      error: undefined,
       workItem: {},
     };
   },
@@ -34,23 +36,17 @@ export default {
           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.'),
-        );
+        this.error = this.$options.i18n.fetchError;
       },
     },
   },
   computed: {
-    workItemTitle() {
-      return this.workItem?.title;
+    workItemType() {
+      return this.workItem.workItemType?.name;
     },
   },
 };
@@ -58,7 +54,16 @@ export default {
 
 <template>
   <gl-modal hide-footer modal-id="work-item-detail-modal" :visible="visible" @hide="$emit('close')">
-    <gl-loading-icon v-if="$apollo.queries.workItem.loading" size="md" />
-    <item-title v-else class="gl-m-0!" :initial-title="workItemTitle" />
+    <gl-alert v-if="error" variant="danger" @dismiss="error = false">
+      {{ error }}
+    </gl-alert>
+
+    <work-item-title
+      :loading="$apollo.queries.workItem.loading"
+      :work-item-id="workItem.id"
+      :work-item-title="workItem.title"
+      :work-item-type="workItemType"
+      @error="error = $event"
+    />
   </gl-modal>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_title.vue b/app/assets/javascripts/work_items/components/work_item_title.vue
new file mode 100644
index 00000000000..47927d46672
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_item_title.vue
@@ -0,0 +1,73 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import Tracking from '~/tracking';
+import { i18n } from '../constants';
+import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql';
+import ItemTitle from './item_title.vue';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    ItemTitle,
+  },
+  mixins: [Tracking.mixin()],
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    workItemId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    workItemTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    workItemType: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    tracking() {
+      return {
+        category: 'workItems:show',
+        label: 'item_title',
+        property: `type_${this.workItemType}`,
+      };
+    },
+  },
+  methods: {
+    async updateWorkItem(updatedTitle) {
+      if (updatedTitle === this.workItemTitle) {
+        return;
+      }
+
+      try {
+        await this.$apollo.mutate({
+          mutation: updateWorkItemMutation,
+          variables: {
+            input: {
+              id: this.workItemId,
+              title: updatedTitle,
+            },
+          },
+        });
+        this.track('updated_title');
+      } catch {
+        this.$emit('error', i18n.updateError);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-loading-icon v-if="loading" class="gl-mt-3" size="md" />
+  <item-title v-else :initial-title="workItemTitle" @title-changed="updateWorkItem" />
+</template>
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 995c02a2c5b..22f24ad8af6 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -1,5 +1,10 @@
+import { s__ } from '~/locale';
+
+export const i18n = {
+  fetchError: s__('WorkItem|Something went wrong when fetching the work item. Please try again.'),
+  updateError: s__('WorkItem|Something went wrong while updating the work item. Please try again.'),
+};
+
 export const widgetTypes = {
   title: 'TITLE',
 };
-
-export const WI_TITLE_TRACK_LABEL = 'item_title';
diff --git a/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql b/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql
index 9312d1c582b..7f9aaf43068 100644
--- a/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/create_work_item.mutation.graphql
@@ -1,18 +1,9 @@
-#import './widget.fragment.graphql'
+#import "./work_item.fragment.graphql"
 
 mutation createWorkItem($input: WorkItemCreateInput!) {
   workItemCreate(input: $input) {
     workItem {
-      id
-      title
-      workItemType {
-        id
-      }
-      widgets @client {
-        nodes {
-          ...WidgetBase
-        }
-      }
+      ...WorkItem
     }
   }
 }
diff --git a/app/assets/javascripts/work_items/graphql/provider.js b/app/assets/javascripts/work_items/graphql/provider.js
index 28328a840cf..c15382874d8 100644
--- a/app/assets/javascripts/work_items/graphql/provider.js
+++ b/app/assets/javascripts/work_items/graphql/provider.js
@@ -23,12 +23,16 @@ export function createApolloProvider() {
       id: 'gid://gitlab/WorkItem/1',
     },
     data: {
-      localWorkItem: {
-        __typename: 'LocalWorkItem',
+      workItem: {
+        __typename: 'WorkItem',
         id: 'gid://gitlab/WorkItem/1',
-        type: 'FEATURE',
         // eslint-disable-next-line @gitlab/require-i18n-strings
         title: 'Test Work Item',
+        workItemType: {
+          __typename: 'WorkItemType',
+          id: 'work-item-type-1',
+          name: 'Type', // eslint-disable-line @gitlab/require-i18n-strings
+        },
         widgets: {
           __typename: 'LocalWorkItemWidgetConnection',
           nodes: [],
diff --git a/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql b/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql
index efb1ed8d6df..c0b6e856411 100644
--- a/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql
+++ b/app/assets/javascripts/work_items/graphql/update_work_item.mutation.graphql
@@ -1,18 +1,9 @@
-#import './widget.fragment.graphql'
+#import "./work_item.fragment.graphql"
 
 mutation workItemUpdate($input: WorkItemUpdateInput!) {
   workItemUpdate(input: $input) {
     workItem {
-      id
-      title
-      workItemType {
-        id
-      }
-      widgets @client {
-        nodes {
-          ...WidgetBase
-        }
-      }
+      ...WorkItem
     }
   }
 }
diff --git a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
new file mode 100644
index 00000000000..2707d6bb790
--- /dev/null
+++ b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
@@ -0,0 +1,8 @@
+fragment WorkItem on WorkItem {
+  id
+  title
+  workItemType {
+    id
+    name
+  }
+}
diff --git a/app/assets/javascripts/work_items/graphql/work_item.query.graphql b/app/assets/javascripts/work_items/graphql/work_item.query.graphql
index b32cb4f28fb..1d3dae0649d 100644
--- a/app/assets/javascripts/work_items/graphql/work_item.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item.query.graphql
@@ -1,16 +1,7 @@
-#import './widget.fragment.graphql'
+#import "./work_item.fragment.graphql"
 
-query WorkItem($id: ID!) {
+query workItem($id: ID!) {
   workItem(id: $id) {
-    id
-    title
-    workItemType {
-      id
-    }
-    widgets @client {
-      nodes {
-        ...WidgetBase
-      }
-    }
+    ...WorkItem
   }
 }
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..f29d2d8e59a 100644
--- a/app/assets/javascripts/work_items/pages/work_item_root.vue
+++ b/app/assets/javascripts/work_items/pages/work_item_root.vue
@@ -1,23 +1,17 @@
 <script>
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert } from '@gitlab/ui';
+import { TYPE_WORK_ITEM } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
-import Tracking from '~/tracking';
+import { i18n } from '../constants';
 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 WorkItemTitle from '../components/work_item_title.vue';
 
 export default {
-  titleUpdatedEvent: 'updated_title',
+  i18n,
   components: {
-    ItemTitle,
     GlAlert,
-    GlLoadingIcon,
+    WorkItemTitle,
   },
-  mixins: [trackingMixin],
   props: {
     id: {
       type: String,
@@ -27,7 +21,7 @@ export default {
   data() {
     return {
       workItem: {},
-      error: false,
+      error: undefined,
     };
   },
   apollo: {
@@ -38,37 +32,17 @@ export default {
           id: this.gid,
         };
       },
+      error() {
+        this.error = this.$options.i18n.fetchError;
+      },
     },
   },
   computed: {
-    tracking() {
-      return {
-        category: 'workItems:show',
-        action: 'updated_title',
-        label: WI_TITLE_TRACK_LABEL,
-        property: '[type_work_item]',
-      };
-    },
     gid() {
-      return convertToGraphQLId('WorkItem', this.id);
+      return convertToGraphQLId(TYPE_WORK_ITEM, 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;
-      }
+    workItemType() {
+      return this.workItem.workItemType?.name;
     },
   },
 };
@@ -76,23 +50,16 @@ export default {
 
 <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>
+    <gl-alert v-if="error" variant="danger" @dismiss="error = false">
+      {{ error }}
+    </gl-alert>
+
+    <work-item-title
+      :loading="$apollo.queries.workItem.loading"
+      :work-item-id="workItem.id"
+      :work-item-title="workItem.title"
+      :work-item-type="workItemType"
+      @error="error = $event"
+    />
   </section>
 </template>