3 files changed, 74 insertions, 19 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index 8c7e0664559..eb581b807a2 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -168,8 +168,8 @@
           <a
             :href="mr.mergeCommitPath"
             class="commit-sha js-mr-merged-commit-sha"
+            v-text="mr.shortMergeCommitSha"
           >
-            {{ mr.shortMergeCommitSha }}
           </a>
           <clipboard-button
             :title="__('Copy commit SHA to clipboard')"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
index 926a3172412..875c3323dbb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
@@ -1,15 +1,63 @@
-/*
-The squash-before-merge button is EE only, but it's located right in the middle
-of the readyToMerge state component template.
-
-If we didn't declare this component in CE, we'd need to maintain a separate copy
-of the readyToMergeState template in EE, which is pretty big and likely to change.
-
-Instead, in CE, we declare the component, but it's hidden and is configured to do nothing.
-In EE, the configuration extends this object to add a functioning squash-before-merge
-button.
-*/
-
 <script>
-  export default {};
+import Icon from '~/vue_shared/components/icon.vue';
+import eventHub from '~/vue_merge_request_widget/event_hub';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+    isMergeButtonDisabled: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      squashBeforeMerge: this.mr.squash,
+    };
+  },
+  methods: {
+    updateSquashModel() {
+      eventHub.$emit('MRWidgetUpdateSquash', this.squashBeforeMerge);
+    },
+  },
+};
 </script>
+
+<template>
+  <div class="accept-control inline">
+    <label class="merge-param-checkbox">
+      <input
+        type="checkbox"
+        name="squash"
+        class="qa-squash-checkbox"
+        :disabled="isMergeButtonDisabled"
+        v-model="squashBeforeMerge"
+        @change="updateSquashModel"
+      />
+      {{ __('Squash commits') }}
+    </label>
+    <a
+      :href="mr.squashBeforeMergeHelpPath"
+      data-title="About this feature"
+      data-placement="bottom"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      data-container="body"
+      v-tooltip
+    >
+      <icon
+        name="question-o"
+      />
+    </a>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 1d1c8ebc179..3a194320bd8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -6,11 +6,13 @@ import MergeRequest from '../../../merge_request';
 import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
+import SquashBeforeMerge from './mr_widget_squash_before_merge.vue';
 
 export default {
   name: 'ReadyToMerge',
   components: {
     statusIcon,
+    'squash-before-merge': SquashBeforeMerge,
   },
   props: {
     mr: { type: Object, required: true },
@@ -101,6 +103,12 @@ export default {
       return enableSquashBeforeMerge && commitsCount > 1;
     },
   },
+  created() {
+    eventHub.$on('MRWidgetUpdateSquash', this.handleUpdateSquash);
+  },
+  beforeDestroy() {
+    eventHub.$off('MRWidgetUpdateSquash', this.handleUpdateSquash);
+  },
   methods: {
     shouldShowMergeControls() {
       return this.mr.isMergeAllowed || this.shouldShowMergeWhenPipelineSucceedsText;
@@ -128,13 +136,9 @@ export default {
         commit_message: this.commitMessage,
         merge_when_pipeline_succeeds: this.setToMergeWhenPipelineSucceeds,
         should_remove_source_branch: this.removeSourceBranch === true,
+        squash: this.mr.squash,
       };
 
-      // Only truthy in EE extension of this component
-      if (this.setAdditionalParams) {
-        this.setAdditionalParams(options);
-      }
-
       this.isMakingRequest = true;
       this.service.merge(options)
         .then(res => res.data)
@@ -154,6 +158,9 @@ export default {
           new Flash('Something went wrong. Please try again.'); // eslint-disable-line
         });
     },
+    handleUpdateSquash(val) {
+      this.mr.squash = val;
+    },
     initiateMergePolling() {
       simplePoll((continuePolling, stopPolling) => {
         this.handleMergePolling(continuePolling, stopPolling);