Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

11 files changed, 77 insertions, 30 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
index abc831c8abe..a5d165ebd49 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
@@ -1,5 +1,12 @@
 <script>
-import { GlButtonGroup, GlDropdown, GlDropdownItem, GlLink, GlSearchBoxByType } from '@gitlab/ui';
+import {
+  GlButtonGroup,
+  GlDropdown,
+  GlDropdownItem,
+  GlIcon,
+  GlLink,
+  GlSearchBoxByType,
+} from '@gitlab/ui';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 import ReviewAppLink from '../review_app_link.vue';
 
@@ -9,6 +16,7 @@ export default {
     GlButtonGroup,
     GlDropdown,
     GlDropdownItem,
+    GlIcon,
     GlLink,
     GlSearchBoxByType,
     ReviewAppLink,
@@ -71,7 +79,14 @@ export default {
         size="small"
         css-class="deploy-link js-deploy-url inline"
       />
-      <gl-dropdown size="small" class="js-mr-wigdet-deployment-dropdown">
+      <gl-dropdown toggle-class="gl-px-2!" size="small" class="js-mr-wigdet-deployment-dropdown">
+        <template #button-content>
+          <gl-icon
+            class="dropdown-chevron gl-mx-0!"
+            name="chevron-down"
+            data-testid="mr-wigdet-deployment-dropdown-icon"
+          />
+        </template>
         <gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus />
         <gl-dropdown-item
           v-for="change in filteredChanges"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index 1248a891ed9..fa46b4b1364 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -107,9 +107,6 @@ export default {
     hasCommitInfo() {
       return this.pipeline.commit && Object.keys(this.pipeline.commit).length > 0;
     },
-    hasArtifacts() {
-      return this.pipeline?.details?.artifacts?.length > 0;
-    },
     isMergeRequestPipeline() {
       return Boolean(this.pipeline.flags && this.pipeline.flags.merge_request_pipeline);
     },
@@ -288,11 +285,7 @@ export default {
               />
             </span>
             <linked-pipelines-mini-list v-if="triggered.length" :triggered="triggered" />
-            <pipeline-artifacts
-              v-if="hasArtifacts"
-              :artifacts="pipeline.details.artifacts"
-              class="gl-ml-3"
-            />
+            <pipeline-artifacts :pipeline-id="pipeline.id" class="gl-ml-3" />
           </span>
         </div>
       </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
index 6d68c15cf2d..0cd280c42d2 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
@@ -154,7 +154,7 @@ export default {
       <status-icon status="success" />
       <div class="media-body">
         <h4 class="gl-display-flex">
-          <span class="gl-mr-3" data-qa-selector="merge_request_status_content">
+          <span class="gl-mr-3">
             <span class="js-status-text-before-author" data-testid="beforeStatusText">{{
               statusTextBeforeAuthor
             }}</span>
@@ -169,6 +169,7 @@ export default {
             role="button"
             href="#"
             class="btn btn-sm btn-default js-cancel-auto-merge"
+            data-qa-selector="cancel_auto_merge_button"
             data-testid="cancelAutomaticMergeButton"
             @click.prevent="cancelAutomaticMerge"
           >
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
index 0655eef6504..32749b8b018 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
@@ -1,4 +1,5 @@
 <script>
+import { MERGE_ACTIVE_STATUS_PHRASES } from '../../constants';
 import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
@@ -13,13 +14,23 @@ export default {
       default: () => ({}),
     },
   },
+  data() {
+    const statusCount = MERGE_ACTIVE_STATUS_PHRASES.length;
+
+    return {
+      mergeStatus: MERGE_ACTIVE_STATUS_PHRASES[Math.floor(Math.random() * statusCount)],
+    };
+  },
 };
 </script>
 <template>
   <div class="mr-widget-body mr-state-locked media">
     <status-icon status="loading" />
     <div class="media-body">
-      <h4>{{ s__('mrWidget|This merge request is in the process of being merged') }}</h4>
+      <h4>
+        {{ mergeStatus.message }}
+        <gl-emoji :data-name="mergeStatus.emoji" />
+      </h4>
       <section class="mr-info-list">
         <p>
           {{ s__('mrWidget|The changes will be merged into') }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index 33ca582583b..a82a8a22873 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -175,7 +175,7 @@ export default {
         >
           <gl-button
             :loading="isMakingRequest"
-            variant="success"
+            variant="confirm"
             data-qa-selector="mr_rebase_button"
             @click="rebase"
           >
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
index 329964d009a..c6ce29acb09 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
@@ -28,7 +28,7 @@ export default {
     <status-icon :show-disabled-button="true" status="warning" />
     <div class="media-body">
       <span class="gl-ml-3 gl-font-weight-bold gl-display-block gl-w-100">{{
-        s__('mrWidget|Before this can be merged, one or more threads must be resolved.')
+        s__('mrWidget|Merge blocked: all threads must be resolved.')
       }}</span>
       <gl-button
         data-testid="jump-to-first"
diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js
index 77dfbf9d385..822fb58db60 100644
--- a/app/assets/javascripts/vue_merge_request_widget/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/constants.js
@@ -25,3 +25,30 @@ export const SP_HELP_CONTENT = s__(
 );
 export const SP_HELP_URL = 'https://about.gitlab.com/blog/2019/07/12/guide-to-ci-cd-pipelines/';
 export const SP_ICON_NAME = 'status_notfound';
+
+export const MERGE_ACTIVE_STATUS_PHRASES = [
+  {
+    message: s__('mrWidget|Merging! Drum roll, please…'),
+    emoji: 'drum',
+  },
+  {
+    message: s__("mrWidget|Merging! We're almost there…"),
+    emoji: 'sparkles',
+  },
+  {
+    message: s__('mrWidget|Merging! Changes will land soon…'),
+    emoji: 'airplane_arriving',
+  },
+  {
+    message: s__('mrWidget|Merging! Changes are being shipped…'),
+    emoji: 'ship',
+  },
+  {
+    message: s__("mrWidget|Merging! Everything's good…"),
+    emoji: 'relieved',
+  },
+  {
+    message: s__('mrWidget|Merging! This is going to be great…'),
+    emoji: 'heart_eyes',
+  },
+];
diff --git a/app/assets/javascripts/vue_merge_request_widget/index.js b/app/assets/javascripts/vue_merge_request_widget/index.js
index c1c491f6fe0..3a3a1329483 100644
--- a/app/assets/javascripts/vue_merge_request_widget/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/index.js
@@ -32,6 +32,10 @@ export default () => {
 
   const vm = new Vue({
     el: '#js-vue-mr-widget',
+    provide: {
+      artifactsEndpoint: gl.mrWidgetData.artifacts_endpoint,
+      artifactsEndpointPlaceholder: gl.mrWidgetData.artifacts_endpoint_placeholder,
+    },
     ...MrWidgetOptions,
     apolloProvider,
   });
diff --git a/app/assets/javascripts/vue_merge_request_widget/mixins/auto_merge.js b/app/assets/javascripts/vue_merge_request_widget/mixins/auto_merge.js
index 23e140623cc..67d9892d9c6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mixins/auto_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mixins/auto_merge.js
@@ -9,7 +9,7 @@ export default {
       return s__('mrWidget|to be merged automatically when the pipeline succeeds');
     },
     cancelButtonText() {
-      return s__('mrWidget|Cancel automatic merge');
+      return s__('mrWidget|Cancel');
     },
   },
 };
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 264ea36137f..0cfb059b0ce 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
@@ -460,9 +460,6 @@ export default {
       <grouped-codequality-reports-app
         v-if="shouldRenderCodeQuality"
         :base-path="mr.codeclimate.base_path"
-        :head-path="mr.codeclimate.head_path"
-        :head-blob-path="mr.headBlobPath"
-        :base-blob-path="mr.baseBlobPath"
         :codequality-reports-path="mr.codequalityReportsPath"
         :codequality-help-path="mr.codequalityHelpPath"
       />
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 f57b638dd81..9f85140bab8 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
@@ -1,6 +1,6 @@
 import { format } from 'timeago.js';
 import getStateKey from 'ee_else_ce/vue_merge_request_widget/stores/get_state_key';
-import mrEventHub from '~/merge_request/eventhub';
+import { statusBoxState } from '~/issuable/components/status_box.vue';
 import { formatDate } from '../../lib/utils/datetime_utility';
 import { MTWPS_MERGE_STRATEGY, MT_MERGE_STRATEGY, MWPS_MERGE_STRATEGY } from '../constants';
 import { stateKey } from './state_maps';
@@ -23,6 +23,8 @@ export default class MergeRequestStore {
   setData(data, isRebased) {
     this.initApprovals();
 
+    this.updateStatusState(data.state);
+
     if (isRebased) {
       this.sha = data.diff_head_sha;
     }
@@ -156,16 +158,14 @@ export default class MergeRequestStore {
     this.canRevertInCurrentMR = currentUser.can_revert_on_current_merge_request || false;
 
     this.setState();
-
-    if (!window.gon?.features?.mergeRequestWidgetGraphql) {
-      this.emitUpdatedState();
-    }
   }
 
   setGraphqlData(project) {
     const { mergeRequest } = project;
     const pipeline = mergeRequest.headPipeline;
 
+    this.updateStatusState(mergeRequest.state);
+
     this.projectArchived = project.archived;
     this.onlyAllowMergeIfPipelineSucceeds = project.onlyAllowMergeIfPipelineSucceeds;
 
@@ -190,10 +190,15 @@ export default class MergeRequestStore {
     this.workInProgress = mergeRequest.workInProgress;
     this.mergeRequestState = mergeRequest.state;
 
-    this.emitUpdatedState();
     this.setState();
   }
 
+  updateStatusState(state) {
+    if (this.mergeRequestState !== state && statusBoxState.updateStatus) {
+      statusBoxState.updateStatus();
+    }
+  }
+
   setState() {
     if (this.mergeOngoing) {
       this.state = 'merging';
@@ -216,12 +221,6 @@ export default class MergeRequestStore {
     }
   }
 
-  emitUpdatedState() {
-    mrEventHub.$emit('mr.state.updated', {
-      state: this.mergeRequestState,
-    });
-  }
-
   setPaths(data) {
     // Paths are set on the first load of the page and not auto-refreshed
     this.squashBeforeMergeHelpPath = data.squash_before_merge_help_path;