Split MR widget into cached and non-cached serializers

Splits auto-refreshing of MR widget into 2 requests:

- the one which uses etag-caching and invalidates the fields on change
- the one without caching

The idea is to gradually move all the fields to etag-cached endpoint

3 files changed, 59 insertions, 48 deletions

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 f7848a5fced..edd21a81f8b 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
@@ -166,6 +166,7 @@ export default {
         ciEnvironmentsStatusPath: store.ciEnvironmentsStatusPath,
         mergeRequestBasicPath: store.mergeRequestBasicPath,
         mergeRequestWidgetPath: store.mergeRequestWidgetPath,
+        mergeRequestCachedWidgetPath: store.mergeRequestCachedWidgetPath,
         mergeActionsContentPath: store.mergeActionsContentPath,
         rebasePath: store.rebasePath,
       };
@@ -176,8 +177,7 @@ export default {
     checkStatus(cb, isRebased) {
       return this.service
         .checkStatus()
-        .then(res => res.data)
-        .then(data => {
+        .then(({ data }) => {
           this.handleNotification(data);
           this.mr.setData(data, isRebased);
           this.setFaviconHelper();
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 1dae53039d5..f637a44bf2d 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
@@ -34,7 +34,16 @@ export default class MRWidgetService {
   }
 
   checkStatus() {
-    return axios.get(this.endpoints.mergeRequestWidgetPath);
+    // two endpoints are requested in order to get MR info:
+    // one which is etag-cached and invalidated and another one which is not cached
+    // the idea is to move all the fields to etag-cached endpoint and then perform only one request
+    // https://gitlab.com/gitlab-org/gitlab-ce/issues/61559#note_188801390
+    const getData = axios.get(this.endpoints.mergeRequestWidgetPath);
+    const getCachedData = axios.get(this.endpoints.mergeRequestCachedWidgetPath);
+
+    return axios
+      .all([getData, getCachedData])
+      .then(axios.spread((res, cachedRes) => ({ data: Object.assign(res.data, cachedRes.data) })));
   }
 
   fetchMergeActionsContent() {
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 581fee7477f..3eab8e6fc0b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -10,6 +10,8 @@ export default class MergeRequestStore {
     this.sha = data.diff_head_sha;
     this.gitlabLogo = data.gitlabLogo;
 
+    this.setPaths(data);
+
     this.setData(data);
   }
 
@@ -18,13 +20,9 @@ export default class MergeRequestStore {
       this.sha = data.diff_head_sha;
     }
 
-    const currentUser = data.current_user;
     const pipelineStatus = data.pipeline ? data.pipeline.details.status : null;
 
     this.squash = data.squash;
-    this.squashBeforeMergeHelpPath =
-      this.squashBeforeMergeHelpPath || data.squash_before_merge_help_path;
-    this.troubleshootingDocsPath = this.troubleshootingDocsPath || data.troubleshooting_docs_path;
     this.enableSquashBeforeMerge = this.enableSquashBeforeMerge || true;
 
     this.iid = data.iid;
@@ -33,8 +31,6 @@ export default class MergeRequestStore {
     this.targetBranchSha = data.target_branch_sha;
     this.sourceBranch = data.source_branch;
     this.sourceBranchProtected = data.source_branch_protected;
-    this.conflictsDocsPath = data.conflicts_docs_path;
-    this.mergeRequestPipelinesHelpPath = data.merge_request_pipelines_docs_path;
     this.mergeStatus = data.merge_status;
     this.commitMessage = data.default_merge_commit_message;
     this.shortMergeCommitSha = data.short_merge_commit_sha;
@@ -48,7 +44,7 @@ export default class MergeRequestStore {
     this.postMergeDeployments = this.postMergeDeployments || [];
     this.commits = data.commits_without_merge_commits || [];
     this.squashCommitMessage = data.default_squash_commit_message;
-    this.initRebase(data);
+    this.rebaseInProgress = data.rebase_in_progress;
 
     if (data.issues_links) {
       const links = data.issues_links;
@@ -66,14 +62,7 @@ export default class MergeRequestStore {
     this.setToAutoMergeBy = MergeRequestStore.formatUserObject(data.merge_user || {});
     this.mergeUserId = data.merge_user_id;
     this.currentUserId = gon.current_user_id;
-    this.sourceBranchPath = data.source_branch_path;
-    this.sourceBranchLink = data.source_branch_with_namespace_link;
     this.mergeError = data.merge_error;
-    this.targetBranchPath = data.target_branch_commits_path;
-    this.targetBranchTreePath = data.target_branch_tree_path;
-    this.conflictResolutionPath = data.conflict_resolution_path;
-    this.cancelAutoMergePath = data.cancel_auto_merge_path;
-    this.removeWIPPath = data.remove_wip_path;
     this.sourceBranchRemoved = !data.source_branch_exists;
     this.shouldRemoveSourceBranch = data.remove_source_branch || false;
     this.onlyAllowMergeIfPipelineSucceeds = data.only_allow_merge_if_pipeline_succeeds || false;
@@ -83,46 +72,23 @@ export default class MergeRequestStore {
     this.preferredAutoMergeStrategy = MergeRequestStore.getPreferredAutoMergeStrategy(
       this.availableAutoMergeStrategies,
     );
-    this.mergePath = data.merge_path;
     this.ffOnlyEnabled = data.ff_only_enabled;
     this.shouldBeRebased = Boolean(data.should_be_rebased);
-    this.mergeRequestBasicPath = data.merge_request_basic_path;
-    this.mergeRequestWidgetPath = data.merge_request_widget_path;
-    this.emailPatchesPath = data.email_patches_path;
-    this.plainDiffPath = data.plain_diff_path;
-    this.newBlobPath = data.new_blob_path;
-    this.createIssueToResolveDiscussionsPath = data.create_issue_to_resolve_discussions_path;
-    this.mergeCheckPath = data.merge_check_path;
-    this.mergeActionsContentPath = data.commit_change_content_path;
-    this.mergeCommitPath = data.merge_commit_path;
     this.isRemovingSourceBranch = this.isRemovingSourceBranch || false;
     this.isOpen = data.state === 'opened';
     this.hasMergeableDiscussionsState = data.mergeable_discussions_state === false;
-    this.canRemoveSourceBranch = currentUser.can_remove_source_branch || false;
-    this.canMerge = Boolean(data.merge_path);
-    this.canCreateIssue = currentUser.can_create_issue || false;
-    this.canCancelAutomaticMerge = Boolean(data.cancel_auto_merge_path);
     this.isSHAMismatch = this.sha !== data.diff_head_sha;
     this.canBeMerged = data.can_be_merged || false;
     this.isMergeAllowed = data.mergeable || false;
     this.mergeOngoing = data.merge_ongoing;
     this.allowCollaboration = data.allow_collaboration;
-    this.targetProjectFullPath = data.target_project_full_path;
-    this.sourceProjectFullPath = data.source_project_full_path;
     this.sourceProjectId = data.source_project_id;
     this.targetProjectId = data.target_project_id;
     this.mergePipelinesEnabled = Boolean(data.merge_pipelines_enabled);
     this.mergeTrainsCount = data.merge_trains_count || 0;
     this.mergeTrainIndex = data.merge_train_index;
 
-    // Cherry-pick and Revert actions related
-    this.canCherryPickInCurrentMR = currentUser.can_cherry_pick_on_current_merge_request || false;
-    this.canRevertInCurrentMR = currentUser.can_revert_on_current_merge_request || false;
-    this.cherryPickInForkPath = currentUser.cherry_pick_in_fork_path;
-    this.revertInForkPath = currentUser.revert_in_fork_path;
-
     // CI related
-    this.ciEnvironmentsStatusPath = data.ci_environments_status_path;
     this.hasCI = data.has_ci;
     this.ciStatus = data.ci_status;
     this.isPipelineFailed = this.ciStatus === 'failed' || this.ciStatus === 'canceled';
@@ -133,8 +99,33 @@ export default class MergeRequestStore {
     this.isPipelineActive = data.pipeline ? data.pipeline.active : false;
     this.isPipelineBlocked = pipelineStatus ? pipelineStatus.group === 'manual' : false;
     this.ciStatusFaviconPath = pipelineStatus ? pipelineStatus.favicon : null;
-
     this.testResultsPath = data.test_reports_path;
+    this.cancelAutoMergePath = data.cancel_auto_merge_path;
+    this.canCancelAutomaticMerge = Boolean(data.cancel_auto_merge_path);
+
+    this.newBlobPath = data.new_blob_path;
+    this.sourceBranchPath = data.source_branch_path;
+    this.sourceBranchLink = data.source_branch_with_namespace_link;
+    this.rebasePath = data.rebase_path;
+    this.targetBranchPath = data.target_branch_commits_path;
+    this.targetBranchTreePath = data.target_branch_tree_path;
+    this.conflictResolutionPath = data.conflict_resolution_path;
+    this.removeWIPPath = data.remove_wip_path;
+    this.createIssueToResolveDiscussionsPath = data.create_issue_to_resolve_discussions_path;
+    this.mergePath = data.merge_path;
+    this.canMerge = Boolean(data.merge_path);
+    this.mergeCommitPath = data.merge_commit_path;
+    this.canPushToSourceBranch = data.can_push_to_source_branch;
+
+    const currentUser = data.current_user;
+
+    this.cherryPickInForkPath = currentUser.cherry_pick_in_fork_path;
+    this.revertInForkPath = currentUser.revert_in_fork_path;
+
+    this.canRemoveSourceBranch = currentUser.can_remove_source_branch || false;
+    this.canCreateIssue = currentUser.can_create_issue || false;
+    this.canCherryPickInCurrentMR = currentUser.can_cherry_pick_on_current_merge_request || false;
+    this.canRevertInCurrentMR = currentUser.can_revert_on_current_merge_request || false;
 
     this.setState(data);
   }
@@ -161,6 +152,24 @@ export default class MergeRequestStore {
     }
   }
 
+  setPaths(data) {
+    // Paths are set on the first load of the page and not auto-refreshed
+    this.squashBeforeMergeHelpPath = data.squash_before_merge_help_path;
+    this.troubleshootingDocsPath = data.troubleshooting_docs_path;
+    this.mergeRequestBasicPath = data.merge_request_basic_path;
+    this.mergeRequestWidgetPath = data.merge_request_widget_path;
+    this.mergeRequestCachedWidgetPath = data.merge_request_cached_widget_path;
+    this.emailPatchesPath = data.email_patches_path;
+    this.plainDiffPath = data.plain_diff_path;
+    this.mergeCheckPath = data.merge_check_path;
+    this.mergeActionsContentPath = data.commit_change_content_path;
+    this.targetProjectFullPath = data.target_project_full_path;
+    this.sourceProjectFullPath = data.source_project_full_path;
+    this.mergeRequestPipelinesHelpPath = data.merge_request_pipelines_docs_path;
+    this.conflictsDocsPath = data.conflicts_docs_path;
+    this.ciEnvironmentsStatusPath = data.ci_environments_status_path;
+  }
+
   get isNothingToMergeState() {
     return this.state === stateKey.nothingToMerge;
   }
@@ -169,13 +178,6 @@ export default class MergeRequestStore {
     return this.state === stateKey.merged;
   }
 
-  initRebase(data) {
-    this.canPushToSourceBranch = data.can_push_to_source_branch;
-    this.rebaseInProgress = data.rebase_in_progress;
-    this.approvalsLeft = !data.approved;
-    this.rebasePath = data.rebase_path;
-  }
-
   static buildMetrics(metrics) {
     if (!metrics) {
       return {};