Add latest changes from gitlab-org/gitlab@master

5 files changed, 157 insertions, 50 deletions

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 17a880036e7..20ac8f5a467 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
@@ -1,21 +1,37 @@
 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlSkeletonLoader } from '@gitlab/ui';
 import autoMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/auto_merge';
+import autoMergeEnabledQuery from 'ee_else_ce/vue_merge_request_widget/queries/states/auto_merge_enabled.query.graphql';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { deprecatedCreateFlash as Flash } from '../../../flash';
 import statusIcon from '../mr_widget_status_icon.vue';
 import MrWidgetAuthor from '../mr_widget_author.vue';
 import eventHub from '../../event_hub';
 import { AUTO_MERGE_STRATEGIES } from '../../constants';
 import { __ } from '~/locale';
+import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 
 export default {
   name: 'MRWidgetAutoMergeEnabled',
+  apollo: {
+    state: {
+      query: autoMergeEnabledQuery,
+      skip() {
+        return !this.glFeatures.mergeRequestWidgetGraphql;
+      },
+      variables() {
+        return this.mergeRequestQueryVariables;
+      },
+      update: (data) => data.project?.mergeRequest,
+    },
+  },
   components: {
     MrWidgetAuthor,
     statusIcon,
     GlLoadingIcon,
+    GlSkeletonLoader,
   },
-  mixins: [autoMergeMixin],
+  mixins: [autoMergeMixin, glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
   props: {
     mr: {
       type: Object,
@@ -30,20 +46,47 @@ export default {
   },
   data() {
     return {
+      state: {},
       isCancellingAutoMerge: false,
       isRemovingSourceBranch: false,
     };
   },
   computed: {
+    loading() {
+      return this.glFeatures.mergeRequestWidgetGraphql && this.$apollo.queries.state.loading;
+    },
+    mergeUser() {
+      if (this.glFeatures.mergeRequestWidgetGraphql) {
+        return this.state.mergeUser;
+      }
+
+      return this.mr.setToAutoMergeBy;
+    },
+    targetBranch() {
+      return (this.glFeatures.mergeRequestWidgetGraphql ? this.state : this.mr).targetBranch;
+    },
+    shouldRemoveSourceBranch() {
+      if (this.glFeatures.mergeRequestWidgetGraphql) {
+        return this.state.shouldRemoveSourceBranch || this.state.forceRemoveSourceBranch;
+      }
+
+      return this.mr.shouldRemoveSourceBranch;
+    },
+    autoMergeStrategy() {
+      return (this.glFeatures.mergeRequestWidgetGraphql ? this.state : this.mr).autoMergeStrategy;
+    },
     canRemoveSourceBranch() {
-      const {
-        shouldRemoveSourceBranch,
-        canRemoveSourceBranch,
-        mergeUserId,
-        currentUserId,
-      } = this.mr;
+      const { currentUserId } = this.mr;
+      const mergeUserId = this.glFeatures.mergeRequestWidgetGraphql
+        ? this.state.mergeUser?.id
+        : this.mr.mergeUserId;
+      const canRemoveSourceBranch = this.glFeatures.mergeRequestWidgetGraphql
+        ? this.state.userPermissions.removeSourceBranch
+        : this.mr.canRemoveSourceBranch;
 
-      return !shouldRemoveSourceBranch && canRemoveSourceBranch && mergeUserId === currentUserId;
+      return (
+        !this.shouldRemoveSourceBranch && canRemoveSourceBranch && mergeUserId === currentUserId
+      );
     },
   },
   methods: {
@@ -63,7 +106,7 @@ export default {
     removeSourceBranch() {
       const options = {
         sha: this.mr.sha,
-        auto_merge_strategy: this.mr.autoMergeStrategy,
+        auto_merge_strategy: this.autoMergeStrategy,
         should_remove_source_branch: true,
       };
 
@@ -86,49 +129,64 @@ export default {
 </script>
 <template>
   <div class="mr-widget-body media">
-    <status-icon status="success" />
-    <div class="media-body">
-      <h4 class="d-flex align-items-start">
-        <span class="gl-mr-3">
-          <span class="js-status-text-before-author">{{ statusTextBeforeAuthor }}</span>
-          <mr-widget-author :author="mr.setToAutoMergeBy" />
-          <span class="js-status-text-after-author">{{ statusTextAfterAuthor }}</span>
-        </span>
-        <a
-          v-if="mr.canCancelAutomaticMerge"
-          :disabled="isCancellingAutoMerge"
-          role="button"
-          href="#"
-          class="btn btn-sm btn-default js-cancel-auto-merge"
-          @click.prevent="cancelAutomaticMerge"
-        >
-          <gl-loading-icon v-if="isCancellingAutoMerge" inline class="gl-mr-1" />
-          {{ cancelButtonText }}
-        </a>
-      </h4>
-      <section class="mr-info-list">
-        <p>
-          {{ s__('mrWidget|The changes will be merged into') }}
-          <a :href="mr.targetBranchPath" class="label-branch">{{ mr.targetBranch }}</a>
-        </p>
-        <p v-if="mr.shouldRemoveSourceBranch">
-          {{ s__('mrWidget|The source branch will be deleted') }}
-        </p>
-        <p v-else class="d-flex align-items-start">
-          <span class="gl-mr-3">{{ s__('mrWidget|The source branch will not be deleted') }}</span>
+    <div v-if="loading" class="gl-w-full mr-conflict-loader">
+      <gl-skeleton-loader :width="334" :height="30">
+        <rect x="0" y="3" width="24" height="24" rx="4" />
+        <rect x="32" y="7" width="150" height="16" rx="4" />
+        <rect x="190" y="7" width="144" height="16" rx="4" />
+      </gl-skeleton-loader>
+    </div>
+    <template v-else>
+      <status-icon status="success" />
+      <div class="media-body">
+        <h4 class="gl-display-flex">
+          <span class="gl-mr-3">
+            <span class="js-status-text-before-author" data-testid="beforeStatusText">{{
+              statusTextBeforeAuthor
+            }}</span>
+            <mr-widget-author :author="mergeUser" />
+            <span class="js-status-text-after-author" data-testid="afterStatusText">{{
+              statusTextAfterAuthor
+            }}</span>
+          </span>
           <a
-            v-if="canRemoveSourceBranch"
-            :disabled="isRemovingSourceBranch"
+            v-if="mr.canCancelAutomaticMerge"
+            :disabled="isCancellingAutoMerge"
             role="button"
-            class="btn btn-sm btn-default js-remove-source-branch"
             href="#"
-            @click.prevent="removeSourceBranch"
+            class="btn btn-sm btn-default js-cancel-auto-merge"
+            data-testid="cancelAutomaticMergeButton"
+            @click.prevent="cancelAutomaticMerge"
           >
-            <gl-loading-icon v-if="isRemovingSourceBranch" inline class="gl-mr-1" />
-            {{ s__('mrWidget|Delete source branch') }}
+            <gl-loading-icon v-if="isCancellingAutoMerge" inline class="gl-mr-1" />
+            {{ cancelButtonText }}
           </a>
-        </p>
-      </section>
-    </div>
+        </h4>
+        <section class="mr-info-list">
+          <p>
+            {{ s__('mrWidget|The changes will be merged into') }}
+            <a :href="mr.targetBranchPath" class="label-branch">{{ targetBranch }}</a>
+          </p>
+          <p v-if="shouldRemoveSourceBranch">
+            {{ s__('mrWidget|The source branch will be deleted') }}
+          </p>
+          <p v-else class="gl-display-flex">
+            <span class="gl-mr-3">{{ s__('mrWidget|The source branch will not be deleted') }}</span>
+            <a
+              v-if="canRemoveSourceBranch"
+              :disabled="isRemovingSourceBranch"
+              role="button"
+              class="btn btn-sm btn-default js-remove-source-branch"
+              href="#"
+              data-testid="removeSourceBranchButton"
+              @click.prevent="removeSourceBranch"
+            >
+              <gl-loading-icon v-if="isRemovingSourceBranch" inline class="gl-mr-1" />
+              {{ s__('mrWidget|Delete source branch') }}
+            </a>
+          </p>
+        </section>
+      </div>
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index 30da9947859..a2771bc4bfb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
@@ -1,7 +1,10 @@
 <script>
 import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../../event_hub';
 import statusIcon from '../mr_widget_status_icon.vue';
+import autoMergeFailedQuery from '../../queries/states/auto_merge_failed.query.graphql';
+import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 
 export default {
   name: 'MRWidgetAutoMergeFailed',
@@ -10,6 +13,19 @@ export default {
     GlLoadingIcon,
     GlButton,
   },
+  mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
+  apollo: {
+    mergeError: {
+      query: autoMergeFailedQuery,
+      skip() {
+        return !this.glFeatures.mergeRequestWidgetGraphql;
+      },
+      variables() {
+        return this.mergeRequestQueryVariables;
+      },
+      update: (data) => data.project?.mergeRequest?.mergeError,
+    },
+  },
   props: {
     mr: {
       type: Object,
@@ -18,6 +34,7 @@ export default {
   },
   data() {
     return {
+      mergeError: this.glFeatures.mergeRequestWidgetGraphql ? null : this.mr.mergeError,
       isRefreshing: false,
     };
   },
@@ -36,7 +53,7 @@ export default {
     <status-icon status="warning" />
     <div class="media-body space-children gl-display-flex gl-flex-wrap gl-align-items-center">
       <span class="bold">
-        <template v-if="mr.mergeError">{{ mr.mergeError }}</template>
+        <template v-if="mergeError">{{ mergeError }}</template>
         {{ s__('mrWidget|This merge request failed to be merged automatically') }}
       </span>
       <gl-button
diff --git a/app/assets/javascripts/vue_merge_request_widget/queries/states/auto_merge_enabled.fragment.graphql b/app/assets/javascripts/vue_merge_request_widget/queries/states/auto_merge_enabled.fragment.graphql
new file mode 100644
index 00000000000..64cd70fcf42
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/queries/states/auto_merge_enabled.fragment.graphql
@@ -0,0 +1,15 @@
+fragment autoMergeEnabled on MergeRequest {
+  autoMergeStrategy
+  mergeUser {
+    name
+    username
+    webUrl
+    avatarUrl
+  }
+  targetBranch
+  shouldRemoveSourceBranch
+  forceRemoveSourceBranch
+  userPermissions {
+    removeSourceBranch
+  }
+}
diff --git a/app/assets/javascripts/vue_merge_request_widget/queries/states/auto_merge_enabled.query.graphql b/app/assets/javascripts/vue_merge_request_widget/queries/states/auto_merge_enabled.query.graphql
new file mode 100644
index 00000000000..bdcb7a8206b
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/queries/states/auto_merge_enabled.query.graphql
@@ -0,0 +1,10 @@
+#import "./auto_merge_enabled.fragment.graphql"
+
+query autoMergeEnabledQuery($projectPath: ID!, $iid: String!) {
+  project(fullPath: $projectPath) {
+    mergeRequest(iid: $iid) {
+      ...autoMergeEnabled
+      mergeTrainsCount
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_merge_request_widget/queries/states/auto_merge_failed.query.graphql b/app/assets/javascripts/vue_merge_request_widget/queries/states/auto_merge_failed.query.graphql
new file mode 100644
index 00000000000..2fe0d174b67
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/queries/states/auto_merge_failed.query.graphql
@@ -0,0 +1,7 @@
+query autoMergeFailedQuery($projectPath: ID!, $iid: String!) {
+  project(fullPath: $projectPath) {
+    mergeRequest(iid: $iid) {
+      mergeError
+    }
+  }
+}