Add latest changes from gitlab-org/gitlab@master

3 files changed, 124 insertions, 57 deletions

diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
new file mode 100644
index 00000000000..34874908f9b
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
@@ -0,0 +1,109 @@
+<script>
+import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+
+import { __ } from '~/locale';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip.vue';
+
+import { STATE_OPEN } from '../../constants';
+import WorkItemLinksMenu from './work_item_links_menu.vue';
+
+export default {
+  components: {
+    GlButton,
+    GlIcon,
+    RichTimestampTooltip,
+    WorkItemLinksMenu,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    canUpdate: {
+      type: Boolean,
+      required: true,
+    },
+    issuableGid: {
+      type: String,
+      required: true,
+    },
+    childItem: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    isItemOpen() {
+      return this.childItem.state === STATE_OPEN;
+    },
+    iconClass() {
+      return this.isItemOpen ? 'gl-text-green-500' : 'gl-text-blue-500';
+    },
+    iconName() {
+      return this.isItemOpen ? 'issue-open-m' : 'issue-close';
+    },
+    stateTimestamp() {
+      return this.isItemOpen ? this.childItem.createdAt : this.childItem.closedAt;
+    },
+    stateTimestampTypeText() {
+      return this.isItemOpen ? __('Created') : __('Closed');
+    },
+    childPath() {
+      return `/${this.projectPath}/-/work_items/${getIdFromGraphQLId(this.childItem.id)}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="gl-relative gl-display-flex gl-overflow-break-word gl-min-w-0 gl-bg-white gl-mb-3 gl-py-3 gl-px-4 gl-border gl-border-gray-100 gl-rounded-base gl-line-height-32"
+    data-testid="links-child"
+  >
+    <div class="gl-overflow-hidden gl-display-flex gl-align-items-center gl-flex-grow-1">
+      <span :id="`stateIcon-${childItem.id}`" class="gl-mr-3" data-testid="item-status-icon">
+        <gl-icon :name="iconName" :class="iconClass" :aria-label="stateTimestampTypeText" />
+      </span>
+      <rich-timestamp-tooltip
+        :target="`stateIcon-${childItem.id}`"
+        :raw-timestamp="stateTimestamp"
+        :timestamp-type-text="stateTimestampTypeText"
+      />
+      <gl-icon
+        v-if="childItem.confidential"
+        v-gl-tooltip.top
+        name="eye-slash"
+        class="gl-mr-2 gl-text-orange-500"
+        data-testid="confidential-icon"
+        :aria-label="__('Confidential')"
+        :title="__('Confidential')"
+      />
+      <gl-button
+        :href="childPath"
+        category="tertiary"
+        variant="link"
+        class="gl-text-truncate gl-max-w-80 gl-text-black-normal!"
+        @click="$emit('click', childItem.id, $event)"
+        @mouseover="$emit('mouseover', childItem.id, $event)"
+        @mouseout="$emit('mouseout', childItem.id, $event)"
+      >
+        {{ childItem.title }}
+      </gl-button>
+    </div>
+    <div
+      v-if="canUpdate"
+      class="gl-ml-0 gl-sm-ml-auto! gl-display-inline-flex gl-align-items-center"
+    >
+      <work-item-links-menu
+        :work-item-id="childItem.id"
+        :parent-work-item-id="issuableGid"
+        data-testid="links-menu"
+        @removeChild="$emit('remove', childItem.id)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
index b13162a81d5..99907ed7f57 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
@@ -9,18 +9,13 @@ import issueConfidentialQuery from '~/sidebar/queries/issue_confidential.query.g
 import { isMetaKey } from '~/lib/utils/common_utils';
 import { setUrlParams, updateHistory } from '~/lib/utils/url_utility';
 
-import {
-  STATE_OPEN,
-  WIDGET_ICONS,
-  WORK_ITEM_STATUS_TEXT,
-  WIDGET_TYPE_HIERARCHY,
-} from '../../constants';
+import { WIDGET_ICONS, WORK_ITEM_STATUS_TEXT, WIDGET_TYPE_HIERARCHY } from '../../constants';
 import getWorkItemLinksQuery from '../../graphql/work_item_links.query.graphql';
 import updateWorkItemMutation from '../../graphql/update_work_item.mutation.graphql';
 import workItemQuery from '../../graphql/work_item.query.graphql';
 import WorkItemDetailModal from '../work_item_detail_modal.vue';
+import WorkItemLinkChild from './work_item_link_child.vue';
 import WorkItemLinksForm from './work_item_links_form.vue';
-import WorkItemLinksMenu from './work_item_links_menu.vue';
 
 export default {
   components: {
@@ -28,8 +23,8 @@ export default {
     GlIcon,
     GlAlert,
     GlLoadingIcon,
+    WorkItemLinkChild,
     WorkItemLinksForm,
-    WorkItemLinksMenu,
     WorkItemDetailModal,
   },
   directives: {
@@ -124,12 +119,6 @@ export default {
     },
   },
   methods: {
-    iconClass(state) {
-      return state === STATE_OPEN ? 'gl-text-green-500' : 'gl-text-blue-500';
-    },
-    iconName(state) {
-      return state === STATE_OPEN ? 'issue-open-m' : 'issue-close';
-    },
     toggle() {
       this.isOpen = !this.isOpen;
     },
@@ -171,9 +160,6 @@ export default {
         replace: true,
       });
     },
-    childPath(childItemId) {
-      return `/${this.projectPath}/-/work_items/${getIdFromGraphQLId(childItemId)}`;
-    },
     toggleChildFromCache(workItem, childId, store) {
       const sourceData = store.readQuery({
         query: getWorkItemLinksQuery,
@@ -322,48 +308,18 @@ export default {
           @cancel="hideAddForm"
           @addWorkItemChild="addChild"
         />
-        <div
+        <work-item-link-child
           v-for="child in children"
           :key="child.id"
-          class="gl-relative gl-display-flex gl-overflow-break-word gl-min-w-0 gl-bg-white gl-mb-3 gl-py-3 gl-px-4 gl-border gl-border-gray-100 gl-rounded-base gl-line-height-32"
-          data-testid="links-child"
-        >
-          <div class="gl-overflow-hidden gl-display-flex gl-align-items-center gl-flex-grow-1">
-            <gl-icon
-              :name="iconName(child.state)"
-              class="gl-mr-3"
-              :class="iconClass(child.state)"
-            />
-            <gl-icon
-              v-if="child.confidential"
-              v-gl-tooltip.top
-              name="eye-slash"
-              class="gl-mr-2 gl-text-orange-500"
-              data-testid="confidential-icon"
-              :title="__('Confidential')"
-            />
-            <gl-button
-              :href="childPath(child.id)"
-              category="tertiary"
-              variant="link"
-              class="gl-text-truncate gl-max-w-80 gl-text-black-normal!"
-              @click="openChild(child.id, $event)"
-              @mouseover="prefetchWorkItem(child.id)"
-              @mouseout="clearPrefetching"
-            >
-              {{ child.title }}
-            </gl-button>
-          </div>
-          <div class="gl-ml-0 gl-sm-ml-auto! gl-display-inline-flex gl-align-items-center">
-            <work-item-links-menu
-              v-if="canUpdate"
-              :work-item-id="child.id"
-              :parent-work-item-id="issuableGid"
-              data-testid="links-menu"
-              @removeChild="removeChild(child.id)"
-            />
-          </div>
-        </div>
+          :project-path="projectPath"
+          :can-update="canUpdate"
+          :issuable-gid="issuableGid"
+          :child-item="child"
+          @click="openChild"
+          @mouseover="prefetchWorkItem"
+          @mouseout="clearPrefetching"
+          @remove="removeChild"
+        />
         <work-item-detail-modal
           ref="modal"
           :work-item-id="activeChildId"
diff --git a/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql b/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql
index 2ca4450f892..7b63d9c7ca3 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql
@@ -26,6 +26,8 @@ query workItemLinksQuery($id: WorkItemID!) {
             }
             title
             state
+            createdAt
+            closedAt
           }
         }
       }