Add latest changes from gitlab-org/gitlab@master

6 files changed, 96 insertions, 119 deletions

diff --git a/app/assets/javascripts/boards/services/board_service.js b/app/assets/javascripts/boards/services/board_service.js
deleted file mode 100644
index 03369febb4a..00000000000
--- a/app/assets/javascripts/boards/services/board_service.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/* eslint-disable class-methods-use-this */
-/**
- * This file is intended to be deleted.
- * The existing functions will removed one by one in favor of using the board store directly.
- * see https://gitlab.com/gitlab-org/gitlab-foss/issues/61621
- */
-
-import boardsStore from '~/boards/stores/boards_store';
-
-export default class BoardService {
-  generateBoardsPath(id) {
-    return boardsStore.generateBoardsPath(id);
-  }
-
-  generateIssuesPath(id) {
-    return boardsStore.generateIssuesPath(id);
-  }
-
-  static generateIssuePath(boardId, id) {
-    return boardsStore.generateIssuePath(boardId, id);
-  }
-
-  all() {
-    return boardsStore.all();
-  }
-
-  generateDefaultLists() {
-    return boardsStore.generateDefaultLists();
-  }
-
-  createList(entityId, entityType) {
-    return boardsStore.createList(entityId, entityType);
-  }
-
-  updateList(id, position, collapsed) {
-    return boardsStore.updateList(id, position, collapsed);
-  }
-
-  destroyList(id) {
-    return boardsStore.destroyList(id);
-  }
-
-  getIssuesForList(id, filter = {}) {
-    return boardsStore.getIssuesForList(id, filter);
-  }
-
-  moveIssue(id, fromListId = null, toListId = null, moveBeforeId = null, moveAfterId = null) {
-    return boardsStore.moveIssue(id, fromListId, toListId, moveBeforeId, moveAfterId);
-  }
-
-  moveMultipleIssues({
-    ids,
-    fromListId = null,
-    toListId = null,
-    moveBeforeId = null,
-    moveAfterId = null,
-  }) {
-    return boardsStore.moveMultipleIssues({ ids, fromListId, toListId, moveBeforeId, moveAfterId });
-  }
-
-  newIssue(id, issue) {
-    return boardsStore.newIssue(id, issue);
-  }
-
-  getBacklog(data) {
-    return boardsStore.getBacklog(data);
-  }
-
-  bulkUpdate(issueIds, extraData = {}) {
-    return boardsStore.bulkUpdate(issueIds, extraData);
-  }
-
-  static getIssueInfo(endpoint) {
-    return boardsStore.getIssueInfo(endpoint);
-  }
-
-  static toggleIssueSubscription(endpoint) {
-    return boardsStore.toggleIssueSubscription(endpoint);
-  }
-
-  allBoards() {
-    return boardsStore.allBoards();
-  }
-
-  recentBoards() {
-    return boardsStore.recentBoards();
-  }
-
-  createBoard(board) {
-    return boardsStore.createBoard(board);
-  }
-
-  deleteBoard({ id }) {
-    return boardsStore.deleteBoard({ id });
-  }
-}
-
-window.BoardService = BoardService;
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index 9d1de4ef8a0..7df99610132 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -1,6 +1,6 @@
 <script>
-import { __ } from '~/locale';
 import { mapGetters, mapActions } from 'vuex';
+import { __ } from '~/locale';
 import { getLocationHash, doesHashExistInUrl } from '../../lib/utils/url_utility';
 import Flash from '../../flash';
 import * as constants from '../constants';
@@ -71,6 +71,9 @@ export default {
       'userCanReply',
       'discussionTabCounter',
     ]),
+    discussionTabCounterText() {
+      return this.isLoading ? '' : this.discussionTabCounter;
+    },
     noteableType() {
       return this.noteableData.noteableType;
     },
@@ -95,9 +98,9 @@ export default {
         this.fetchNotes();
       }
     },
-    allDiscussions() {
-      if (this.discussionsCount && !this.isLoading) {
-        this.discussionsCount.textContent = this.discussionTabCounter;
+    discussionTabCounterText(val) {
+      if (this.discussionsCount) {
+        this.discussionsCount.textContent = val;
       }
     },
   },
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/loading.vue b/app/assets/javascripts/vue_merge_request_widget/components/loading.vue
new file mode 100644
index 00000000000..78dc28ee92b
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/loading.vue
@@ -0,0 +1,29 @@
+<script>
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlSkeletonLoader,
+  },
+};
+</script>
+
+<template>
+  <div class="prepend-top-default">
+    <div class="mr-widget-heading p-3">
+      <gl-skeleton-loader :width="577" :height="12">
+        <rect width="86" height="12" rx="2" />
+        <rect x="96" width="300" height="12" rx="2" />
+      </gl-skeleton-loader>
+    </div>
+    <div class="mr-widget-heading mr-widget-workflow p-3">
+      <gl-skeleton-loader :width="577" :height="72">
+        <rect width="120" height="12" rx="2" />
+        <rect y="20" width="300" height="12" rx="2" />
+        <rect y="40" width="60" height="12" rx="2" />
+        <rect y="40" x="68" width="100" height="12" rx="2" />
+        <rect y="60" width="40" height="12" rx="2" />
+      </gl-skeleton-loader>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 363fe226f15..31dbddbd21a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -7,6 +7,7 @@ import MRWidgetStore from 'ee_else_ce/vue_merge_request_widget/stores/mr_widget_
 import MRWidgetService from 'ee_else_ce/vue_merge_request_widget/services/mr_widget_service';
 import stateMaps from 'ee_else_ce/vue_merge_request_widget/stores/state_maps';
 import createFlash from '../flash';
+import Loading from './components/loading.vue';
 import WidgetHeader from './components/mr_widget_header.vue';
 import WidgetMergeHelp from './components/mr_widget_merge_help.vue';
 import MrWidgetPipelineContainer from './components/mr_widget_pipeline_container.vue';
@@ -44,6 +45,7 @@ export default {
   // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
   name: 'MRWidget',
   components: {
+    Loading,
     'mr-widget-header': WidgetHeader,
     'mr-widget-merge-help': WidgetMergeHelp,
     MrWidgetPipelineContainer,
@@ -80,12 +82,12 @@ export default {
     },
   },
   data() {
-    const store = new MRWidgetStore(this.mrData || window.gl.mrWidgetData);
-    const service = this.createService(store);
+    const store = this.mrData && new MRWidgetStore(this.mrData);
+
     return {
       mr: store,
-      state: store.state,
-      service,
+      state: store && store.state,
+      service: store && this.createService(store),
     };
   },
   computed: {
@@ -133,29 +135,58 @@ export default {
       }
     },
   },
-  created() {
-    this.initPolling();
-    this.bindEventHubListeners();
-    eventHub.$on('mr.discussion.updated', this.checkStatus);
-  },
   mounted() {
-    this.setFaviconHelper();
-    this.initDeploymentsPolling();
-
-    if (this.shouldRenderMergedPipeline) {
-      this.initPostMergeDeploymentsPolling();
+    if (gon && gon.features && gon.features.asyncMrWidget) {
+      MRWidgetService.fetchInitialData()
+        .then(({ data }) => this.initWidget(data))
+        .catch(() =>
+          createFlash(__('Unable to load the merge request widget. Try reloading the page.')),
+        );
+    } else {
+      this.initWidget();
     }
   },
   beforeDestroy() {
     eventHub.$off('mr.discussion.updated', this.checkStatus);
-    this.pollingInterval.destroy();
-    this.deploymentsInterval.destroy();
+    if (this.pollingInterval) {
+      this.pollingInterval.destroy();
+    }
+
+    if (this.deploymentsInterval) {
+      this.deploymentsInterval.destroy();
+    }
 
     if (this.postMergeDeploymentsInterval) {
       this.postMergeDeploymentsInterval.destroy();
     }
   },
   methods: {
+    initWidget(data = {}) {
+      if (this.mr) {
+        this.mr.setData({ ...window.gl.mrWidgetData, ...data });
+      } else {
+        this.mr = new MRWidgetStore({ ...window.gl.mrWidgetData, ...data });
+      }
+
+      if (!this.state) {
+        this.state = this.mr.state;
+      }
+
+      if (!this.service) {
+        this.service = this.createService(this.mr);
+      }
+
+      this.setFaviconHelper();
+      this.initDeploymentsPolling();
+
+      if (this.shouldRenderMergedPipeline) {
+        this.initPostMergeDeploymentsPolling();
+      }
+
+      this.initPolling();
+      this.bindEventHubListeners();
+      eventHub.$on('mr.discussion.updated', this.checkStatus);
+    },
     getServiceEndpoints(store) {
       return {
         mergePath: store.mergePath,
@@ -319,7 +350,7 @@ export default {
 };
 </script>
 <template>
-  <div class="mr-state-widget prepend-top-default">
+  <div v-if="mr" class="mr-state-widget prepend-top-default">
     <mr-widget-header :mr="mr" />
     <mr-widget-pipeline-container
       v-if="shouldRenderPipelines"
@@ -377,4 +408,5 @@ export default {
       :is-post-merge="true"
     />
   </div>
+  <loading v-else />
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js b/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
index 8a229d80954..d22cb4ced80 100644
--- a/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
+++ b/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
@@ -61,4 +61,11 @@ export default class MRWidgetService {
   static fetchMetrics(metricsUrl) {
     return axios.get(`${metricsUrl}.json`);
   }
+
+  static fetchInitialData() {
+    return Promise.all([
+      axios.get(window.gl.mrWidgetData.merge_request_cached_widget_path),
+      axios.get(window.gl.mrWidgetData.merge_request_widget_path),
+    ]).then(axios.spread((res, cachedRes) => ({ data: Object.assign(res.data, cachedRes.data) })));
+  }
 }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index eb7d162e38c..c023c9e5cbd 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -51,6 +51,10 @@
   position: relative;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
+
+  .gl-skeleton-loader {
+    display: block;
+  }
 }
 
 .mr-widget-extension {