Add latest changes from gitlab-org/gitlab@master

3 files changed, 107 insertions, 5 deletions

diff --git a/app/assets/javascripts/work_items/list/components/work_items_list_app.vue b/app/assets/javascripts/work_items/list/components/work_items_list_app.vue
index 4180d484357..fe7cb719bbb 100644
--- a/app/assets/javascripts/work_items/list/components/work_items_list_app.vue
+++ b/app/assets/javascripts/work_items/list/components/work_items_list_app.vue
@@ -1,8 +1,11 @@
 <script>
+import * as Sentry from '@sentry/browser';
 import { STATUS_OPEN } from '~/issues/constants';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import IssuableList from '~/vue_shared/issuable/list/components/issuable_list_root.vue';
 import { issuableListTabs } from '~/vue_shared/issuable/list/constants';
+import { STATE_CLOSED } from '../../constants';
+import getWorkItemsQuery from '../queries/get_work_items.query.graphql';
 
 export default {
   i18n: {
@@ -12,26 +15,59 @@ export default {
   components: {
     IssuableList,
   },
+  inject: ['fullPath'],
   data() {
     return {
-      issues: [],
+      error: undefined,
       searchTokens: [],
       sortOptions: [],
       state: STATUS_OPEN,
+      workItems: [],
     };
   },
+  apollo: {
+    workItems: {
+      query: getWorkItemsQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+        };
+      },
+      update(data) {
+        return data.group.workItems.nodes ?? [];
+      },
+      error(error) {
+        this.error = s__(
+          'WorkItem|Something went wrong when fetching work items. Please try again.',
+        );
+        Sentry.captureException(error);
+      },
+    },
+  },
+  methods: {
+    getStatus(issue) {
+      return issue.state === STATE_CLOSED ? __('Closed') : undefined;
+    },
+  },
 };
 </script>
 
 <template>
   <issuable-list
     :current-tab="state"
-    :issuables="issues"
+    :error="error"
+    :issuables="workItems"
     namespace="work-items"
     recent-searches-storage-key="issues"
     :search-input-placeholder="$options.i18n.searchPlaceholder"
     :search-tokens="searchTokens"
+    show-work-item-type-icon
     :sort-options="sortOptions"
     :tabs="$options.issuableListTabs"
-  />
+    @dismiss-alert="error = undefined"
+  >
+    <template #status="{ issuable }">
+      {{ getStatus(issuable) }}
+    </template>
+  </issuable-list>
 </template>
diff --git a/app/assets/javascripts/work_items/list/index.js b/app/assets/javascripts/work_items/list/index.js
index 5b701893471..5cd38600779 100644
--- a/app/assets/javascripts/work_items/list/index.js
+++ b/app/assets/javascripts/work_items/list/index.js
@@ -1,5 +1,7 @@
 import Vue from 'vue';
-import WorkItemsListApp from '~/work_items/list/components/work_items_list_app.vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import WorkItemsListApp from './components/work_items_list_app.vue';
 
 export const mountWorkItemsListApp = () => {
   const el = document.querySelector('.js-work-items-list-root');
@@ -8,9 +10,17 @@ export const mountWorkItemsListApp = () => {
     return null;
   }
 
+  Vue.use(VueApollo);
+
   return new Vue({
     el,
     name: 'WorkItemsListRoot',
+    apolloProvider: new VueApollo({
+      defaultClient: createDefaultClient(),
+    }),
+    provide: {
+      fullPath: el.dataset.fullPath,
+    },
     render: (createComponent) => createComponent(WorkItemsListApp),
   });
 };
diff --git a/app/assets/javascripts/work_items/list/queries/get_work_items.query.graphql b/app/assets/javascripts/work_items/list/queries/get_work_items.query.graphql
new file mode 100644
index 00000000000..7ada2cf12dd
--- /dev/null
+++ b/app/assets/javascripts/work_items/list/queries/get_work_items.query.graphql
@@ -0,0 +1,56 @@
+query getWorkItems($fullPath: ID!) {
+  group(fullPath: $fullPath) {
+    id
+    workItems {
+      nodes {
+        id
+        author {
+          id
+          avatarUrl
+          name
+          username
+          webUrl
+        }
+        closedAt
+        confidential
+        createdAt
+        iid
+        reference(full: true)
+        state
+        title
+        updatedAt
+        webUrl
+        widgets {
+          ... on WorkItemWidgetAssignees {
+            assignees {
+              nodes {
+                id
+                avatarUrl
+                name
+                username
+                webUrl
+              }
+            }
+            type
+          }
+          ... on WorkItemWidgetLabels {
+            allowsScopedLabels
+            labels {
+              nodes {
+                id
+                color
+                description
+                title
+              }
+            }
+            type
+          }
+        }
+        workItemType {
+          id
+          name
+        }
+      }
+    }
+  }
+}