Prettify vue_merge_request_widget modules

22 files changed, 550 insertions, 520 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index 70518ad73e8..9161f703697 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -22,9 +22,7 @@ export default {
   directives: {
     tooltip,
   },
-  mixins: [
-    timeagoMixin,
-  ],
+  mixins: [timeagoMixin],
   props: {
     deployment: {
       type: Object,
@@ -50,7 +48,7 @@ export default {
       return !!(this.deployment.url && this.deployment.name);
     },
     hasMetrics() {
-      return !!(this.deployment.metrics_url);
+      return !!this.deployment.metrics_url;
     },
   },
   methods: {
@@ -63,7 +61,7 @@ export default {
 
         MRWidgetService.stopEnvironment(this.deployment.stop_url)
           .then(res => res.data)
-          .then((data) => {
+          .then(data => {
             if (data.redirect_url) {
               visitUrl(data.redirect_url);
             }
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
index 5e76f6b1cac..41dbc5c9cbb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
@@ -60,11 +60,29 @@ export default {
       let memoryUsageMsg = '';
 
       if (memoryTo > memoryFrom) {
-        memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB'), messageProps, false);
+        memoryUsageMsg = sprintf(
+          s__(
+            'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB',
+          ),
+          messageProps,
+          false,
+        );
       } else if (memoryTo < memoryFrom) {
-        memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB'), messageProps, false);
+        memoryUsageMsg = sprintf(
+          s__(
+            'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB',
+          ),
+          messageProps,
+          false,
+        );
       } else {
-        memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB'), messageProps, false);
+        memoryUsageMsg = sprintf(
+          s__(
+            'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB',
+          ),
+          messageProps,
+          false,
+        );
       }
 
       return memoryUsageMsg;
@@ -77,7 +95,7 @@ export default {
   methods: {
     getMegabytes(bytesString) {
       const valueInBytes = Number(bytesString).toFixed(2);
-      return (bytesToMiB(valueInBytes)).toFixed(2);
+      return bytesToMiB(valueInBytes).toFixed(2);
     },
     computeGraphData(metrics, deploymentTime) {
       this.loadingMetrics = false;
@@ -103,7 +121,7 @@ export default {
     loadMetrics() {
       backOff((next, stop) => {
         MRWidgetService.fetchMetrics(this.metricsUrl)
-          .then((res) => {
+          .then(res => {
             if (res.status === statusCodes.NO_CONTENT) {
               this.backOffRequestCounter += 1;
               /* eslint-disable no-unused-expressions */
@@ -114,14 +132,14 @@ export default {
           })
           .catch(stop);
       })
-        .then((res) => {
+        .then(res => {
           if (res.status === statusCodes.NO_CONTENT) {
             return res;
           }
 
           return res.data;
         })
-        .then((data) => {
+        .then(data => {
           this.computeGraphData(data.metrics, data.deployment_time);
           return data;
         })
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
index 22c2f74f900..2ad9e8be655 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
@@ -1,36 +1,36 @@
 <script>
-  import tooltip from '../../vue_shared/directives/tooltip';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
-    name: 'MrWidgetAuthor',
-    directives: {
-      tooltip,
+export default {
+  name: 'MrWidgetAuthor',
+  directives: {
+    tooltip,
+  },
+  props: {
+    author: {
+      type: Object,
+      required: true,
     },
-    props: {
-      author: {
-        type: Object,
-        required: true,
-      },
-      showAuthorName: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      showAuthorTooltip: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    showAuthorName: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    computed: {
-      authorUrl() {
-        return this.author.webUrl || this.author.web_url;
-      },
-      avatarUrl() {
-        return this.author.avatarUrl || this.author.avatar_url;
-      },
+    showAuthorTooltip: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-  };
+  },
+  computed: {
+    authorUrl() {
+      return this.author.webUrl || this.author.web_url;
+    },
+    avatarUrl() {
+      return this.author.avatarUrl || this.author.avatar_url;
+    },
+  },
+};
 </script>
 <template>
   <a
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
index ba16cb9e2c8..1d902131f49 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
@@ -1,34 +1,34 @@
 <script>
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import MrWidgetAuthor from './mr_widget_author.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import MrWidgetAuthor from './mr_widget_author.vue';
 
-  export default {
-    name: 'MrWidgetAuthorTime',
-    components: {
-      MrWidgetAuthor,
+export default {
+  name: 'MrWidgetAuthorTime',
+  components: {
+    MrWidgetAuthor,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    actionText: {
+      type: String,
+      required: true,
     },
-    directives: {
-      tooltip,
+    author: {
+      type: Object,
+      required: true,
     },
-    props: {
-      actionText: {
-        type: String,
-        required: true,
-      },
-      author: {
-        type: Object,
-        required: true,
-      },
-      dateTitle: {
-        type: String,
-        required: true,
-      },
-      dateReadable: {
-        type: String,
-        required: true,
-      },
+    dateTitle: {
+      type: String,
+      required: true,
     },
-  };
+    dateReadable: {
+      type: String,
+      required: true,
+    },
+  },
+};
 </script>
 <template>
   <h4 class="js-mr-widget-author">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
index 62b61e1f41f..37c6af13c03 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
@@ -1,24 +1,26 @@
 <script>
-  import { sprintf, s__ } from '~/locale';
+import { sprintf, s__ } from '~/locale';
 
-  export default {
-    name: 'MRWidgetMergeHelp',
-    props: {
-      missingBranch: {
-        type: String,
-        required: false,
-        default: '',
-      },
+export default {
+  name: 'MRWidgetMergeHelp',
+  props: {
+    missingBranch: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      missingBranchInfo() {
-        return sprintf(
-          s__('mrWidget|If the %{branch} branch exists in your local repository, you can merge this merge request manually using the'),
-          { branch: this.missingBranch },
-        );
-      },
+  },
+  computed: {
+    missingBranchInfo() {
+      return sprintf(
+        s__(
+          'mrWidget|If the %{branch} branch exists in your local repository, you can merge this merge request manually using the',
+        ),
+        { branch: this.missingBranch },
+      );
     },
-  };
+  },
+};
 </script>
 <template>
   <section class="mr-widget-help">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
index 88d0fcd70f5..cc77b96a589 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
@@ -1,32 +1,32 @@
 <script>
-  import { s__ } from '~/locale';
+import { s__ } from '~/locale';
 
-  export default {
-    name: 'MRWidgetRelatedLinks',
-    props: {
-      relatedLinks: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
-      state: {
-        type: String,
-        required: false,
-        default: '',
-      },
+export default {
+  name: 'MRWidgetRelatedLinks',
+  props: {
+    relatedLinks: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-    computed: {
-      closesText() {
-        if (this.state === 'merged') {
-          return s__('mrWidget|Closed');
-        }
-        if (this.state === 'closed') {
-          return s__('mrWidget|Did not close');
-        }
-        return s__('mrWidget|Closes');
-      },
+    state: {
+      type: String,
+      required: false,
+      default: '',
     },
-  };
+  },
+  computed: {
+    closesText() {
+      if (this.state === 'merged') {
+        return s__('mrWidget|Closed');
+      }
+      if (this.state === 'closed') {
+        return s__('mrWidget|Did not close');
+      }
+      return s__('mrWidget|Closes');
+    },
+  },
+};
 </script>
 <template>
   <section class="mr-info-list mr-links">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
index 035ae791a1d..ba6a1687e51 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
@@ -1,33 +1,33 @@
 <script>
-  import ciIcon from '../../vue_shared/components/ci_icon.vue';
+import ciIcon from '../../vue_shared/components/ci_icon.vue';
 
-  export default {
-    components: {
-      ciIcon,
+export default {
+  components: {
+    ciIcon,
+  },
+  props: {
+    status: {
+      type: String,
+      required: true,
     },
-    props: {
-      status: {
-        type: String,
-        required: true,
-      },
-      showDisabledButton: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    showDisabledButton: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    computed: {
-      isLoading() {
-        return this.status === 'loading';
-      },
-      statusObj() {
-        return {
-          group: this.status,
-          icon: `status_${this.status}`,
-        };
-      },
+  },
+  computed: {
+    isLoading() {
+      return this.status === 'loading';
     },
-  };
+    statusObj() {
+      return {
+        group: this.status,
+        icon: `status_${this.status}`,
+      };
+    },
+  },
+};
 </script>
 <template>
   <div class="space-children d-flex append-right-10 widget-status-icon">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
index 56879c04d16..01f707163d4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
@@ -1,16 +1,16 @@
 <script>
-  import tooltip from '../../vue_shared/directives/tooltip';
-  import { __ } from '../../locale';
+import tooltip from '../../vue_shared/directives/tooltip';
+import { __ } from '../../locale';
 
-  export default {
-    directives: {
-      tooltip,
-    },
-    created() {
-      this.removesBranchText = __('<strong>Removes</strong> source branch');
-      this.tooltipTitle = __('A user with write access to the source branch selected this option');
-    },
-  };
+export default {
+  directives: {
+    tooltip,
+  },
+  created() {
+    this.removesBranchText = __('<strong>Removes</strong> source branch');
+    this.tooltipTitle = __('A user with write access to the source branch selected this option');
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
index cfbd44d41b2..2a76a878448 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
@@ -1,12 +1,12 @@
 <script>
-  import statusIcon from '../mr_widget_status_icon.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetArchived',
-    components: {
-      statusIcon,
-    },
-  };
+export default {
+  name: 'MRWidgetArchived',
+  components: {
+    statusIcon,
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
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 01294d5b40c..4f8b07484c0 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,32 +1,32 @@
 <script>
-  import eventHub from '../../event_hub';
-  import statusIcon from '../mr_widget_status_icon.vue';
+import eventHub from '../../event_hub';
+import statusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetAutoMergeFailed',
-    components: {
-      statusIcon,
+export default {
+  name: 'MRWidgetAutoMergeFailed',
+  components: {
+    statusIcon,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-      },
+  },
+  data() {
+    return {
+      isRefreshing: false,
+    };
+  },
+  methods: {
+    refreshWidget() {
+      this.isRefreshing = true;
+      eventHub.$emit('MRWidgetUpdateRequested', () => {
+        this.isRefreshing = false;
+      });
     },
-    data() {
-      return {
-        isRefreshing: false,
-      };
-    },
-    methods: {
-      refreshWidget() {
-        this.isRefreshing = true;
-        eventHub.$emit('MRWidgetUpdateRequested', () => {
-          this.isRefreshing = false;
-        });
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
index ae6630dcd6f..fdf0a9fd994 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
@@ -1,12 +1,12 @@
 <script>
-  import statusIcon from '../mr_widget_status_icon.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetChecking',
-    components: {
-      statusIcon,
-    },
-  };
+export default {
+  name: 'MRWidgetChecking',
+  components: {
+    statusIcon,
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
index 25a57e520ee..f06eab95c7e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
@@ -1,23 +1,23 @@
 <script>
-  import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
-  import statusIcon from '../mr_widget_status_icon.vue';
+import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetClosed',
-    components: {
-      MrWidgetAuthorTime,
-      statusIcon,
-    },
-    props: {
-      /* TODO: This is providing all store and service down when it
+export default {
+  name: 'MRWidgetClosed',
+  components: {
+    MrWidgetAuthorTime,
+    statusIcon,
+  },
+  props: {
+    /* TODO: This is providing all store and service down when it
       only needs metrics and targetBranch */
-      mr: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
+    mr: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
index dff9ec657b9..8c808296178 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -1,21 +1,21 @@
 <script>
-  import statusIcon from '../mr_widget_status_icon.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetConflicts',
-    components: {
-      statusIcon,
-    },
-    props: {
-      /* TODO: This is providing all store and service down when it
+export default {
+  name: 'MRWidgetConflicts',
+  components: {
+    statusIcon,
+  },
+  props: {
+    /* TODO: This is providing all store and service down when it
       only needs a few props */
-      mr: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
+    mr: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
index 97f4196b94d..484b5600d63 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
@@ -1,82 +1,82 @@
 <script>
-  import Flash from '../../../flash';
-  import statusIcon from '../mr_widget_status_icon.vue';
-  import MrWidgetAuthor from '../../components/mr_widget_author.vue';
-  import eventHub from '../../event_hub';
+import Flash from '../../../flash';
+import statusIcon from '../mr_widget_status_icon.vue';
+import MrWidgetAuthor from '../../components/mr_widget_author.vue';
+import eventHub from '../../event_hub';
 
-  export default {
-    name: 'MRWidgetMergeWhenPipelineSucceeds',
-    components: {
-      MrWidgetAuthor,
-      statusIcon,
+export default {
+  name: 'MRWidgetMergeWhenPipelineSucceeds',
+  components: {
+    MrWidgetAuthor,
+    statusIcon,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
-      service: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
+    service: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-    data() {
-      return {
-        isCancellingAutoMerge: false,
-        isRemovingSourceBranch: false,
-      };
-    },
-    computed: {
-      canRemoveSourceBranch() {
-        const {
-          shouldRemoveSourceBranch,
-          canRemoveSourceBranch,
-          mergeUserId,
-          currentUserId,
-        } = this.mr;
+  },
+  data() {
+    return {
+      isCancellingAutoMerge: false,
+      isRemovingSourceBranch: false,
+    };
+  },
+  computed: {
+    canRemoveSourceBranch() {
+      const {
+        shouldRemoveSourceBranch,
+        canRemoveSourceBranch,
+        mergeUserId,
+        currentUserId,
+      } = this.mr;
 
-        return !shouldRemoveSourceBranch &&
-          canRemoveSourceBranch &&
-          mergeUserId === currentUserId;
-      },
+      return !shouldRemoveSourceBranch && canRemoveSourceBranch && mergeUserId === currentUserId;
     },
-    methods: {
-      cancelAutomaticMerge() {
-        this.isCancellingAutoMerge = true;
-        this.service.cancelAutomaticMerge()
-          .then(res => res.data)
-          .then((data) => {
-            eventHub.$emit('UpdateWidgetData', data);
-          })
-          .catch(() => {
-            this.isCancellingAutoMerge = false;
-            Flash('Something went wrong. Please try again.');
-          });
-      },
-      removeSourceBranch() {
-        const options = {
-          sha: this.mr.sha,
-          merge_when_pipeline_succeeds: true,
-          should_remove_source_branch: true,
-        };
+  },
+  methods: {
+    cancelAutomaticMerge() {
+      this.isCancellingAutoMerge = true;
+      this.service
+        .cancelAutomaticMerge()
+        .then(res => res.data)
+        .then(data => {
+          eventHub.$emit('UpdateWidgetData', data);
+        })
+        .catch(() => {
+          this.isCancellingAutoMerge = false;
+          Flash('Something went wrong. Please try again.');
+        });
+    },
+    removeSourceBranch() {
+      const options = {
+        sha: this.mr.sha,
+        merge_when_pipeline_succeeds: true,
+        should_remove_source_branch: true,
+      };
 
-        this.isRemovingSourceBranch = true;
-        this.service.merge(options)
-          .then(res => res.data)
-          .then((data) => {
-            if (data.status === 'merge_when_pipeline_succeeds') {
-              eventHub.$emit('MRWidgetUpdateRequested');
-            }
-          })
-          .catch(() => {
-            this.isRemovingSourceBranch = false;
-            Flash('Something went wrong. Please try again.');
-          });
-      },
+      this.isRemovingSourceBranch = true;
+      this.service
+        .merge(options)
+        .then(res => res.data)
+        .then(data => {
+          if (data.status === 'merge_when_pipeline_succeeds') {
+            eventHub.$emit('MRWidgetUpdateRequested');
+          }
+        })
+        .catch(() => {
+          this.isRemovingSourceBranch = false;
+          Flash('Something went wrong. Please try again.');
+        });
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
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 8184ef33022..dc7e544dd33 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
@@ -1,106 +1,100 @@
 <script>
-  import Flash from '~/flash';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import { s__, __ } from '~/locale';
-  import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-  import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
-  import statusIcon from '../mr_widget_status_icon.vue';
-  import eventHub from '../../event_hub';
+import Flash from '~/flash';
+import tooltip from '~/vue_shared/directives/tooltip';
+import { s__, __ } from '~/locale';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
+import eventHub from '../../event_hub';
 
-  export default {
-    name: 'MRWidgetMerged',
-    directives: {
-      tooltip,
+export default {
+  name: 'MRWidgetMerged',
+  directives: {
+    tooltip,
+  },
+  components: {
+    MrWidgetAuthorTime,
+    statusIcon,
+    ClipboardButton,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-    components: {
-      MrWidgetAuthorTime,
-      statusIcon,
-      ClipboardButton,
+    service: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
-      service: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
+  },
+  data() {
+    return {
+      isMakingRequest: false,
+    };
+  },
+  computed: {
+    shouldShowRemoveSourceBranch() {
+      const { sourceBranchRemoved, isRemovingSourceBranch, canRemoveSourceBranch } = this.mr;
+
+      return (
+        !sourceBranchRemoved &&
+        canRemoveSourceBranch &&
+        !this.isMakingRequest &&
+        !isRemovingSourceBranch
+      );
     },
-    data() {
-      return {
-        isMakingRequest: false,
-      };
+    shouldShowSourceBranchRemoving() {
+      const { sourceBranchRemoved, isRemovingSourceBranch } = this.mr;
+      return !sourceBranchRemoved && (isRemovingSourceBranch || this.isMakingRequest);
     },
-    computed: {
-      shouldShowRemoveSourceBranch() {
-        const {
-          sourceBranchRemoved,
-          isRemovingSourceBranch,
-          canRemoveSourceBranch,
-        } = this.mr;
-
-        return !sourceBranchRemoved &&
-          canRemoveSourceBranch &&
-          !this.isMakingRequest &&
-          !isRemovingSourceBranch;
-      },
-      shouldShowSourceBranchRemoving() {
-        const {
-          sourceBranchRemoved,
-          isRemovingSourceBranch,
-        } = this.mr;
-        return !sourceBranchRemoved &&
-          (isRemovingSourceBranch || this.isMakingRequest);
-      },
-      shouldShowMergedButtons() {
-        const {
-          canRevertInCurrentMR,
-          canCherryPickInCurrentMR,
-          revertInForkPath,
-          cherryPickInForkPath,
-        } = this.mr;
+    shouldShowMergedButtons() {
+      const {
+        canRevertInCurrentMR,
+        canCherryPickInCurrentMR,
+        revertInForkPath,
+        cherryPickInForkPath,
+      } = this.mr;
 
-        return canRevertInCurrentMR ||
-          canCherryPickInCurrentMR ||
-          revertInForkPath ||
-          cherryPickInForkPath;
-      },
-      revertTitle() {
-        return s__('mrWidget|Revert this merge request in a new merge request');
-      },
-      cherryPickTitle() {
-        return s__('mrWidget|Cherry-pick this merge request in a new merge request');
-      },
-      revertLabel() {
-        return s__('mrWidget|Revert');
-      },
-      cherryPickLabel() {
-        return s__('mrWidget|Cherry-pick');
-      },
+      return (
+        canRevertInCurrentMR || canCherryPickInCurrentMR || revertInForkPath || cherryPickInForkPath
+      );
+    },
+    revertTitle() {
+      return s__('mrWidget|Revert this merge request in a new merge request');
+    },
+    cherryPickTitle() {
+      return s__('mrWidget|Cherry-pick this merge request in a new merge request');
+    },
+    revertLabel() {
+      return s__('mrWidget|Revert');
+    },
+    cherryPickLabel() {
+      return s__('mrWidget|Cherry-pick');
     },
-    methods: {
-      removeSourceBranch() {
-        this.isMakingRequest = true;
+  },
+  methods: {
+    removeSourceBranch() {
+      this.isMakingRequest = true;
 
-        this.service.removeSourceBranch()
-          .then(res => res.data)
-          .then((data) => {
-            if (data.message === 'Branch was removed') {
-              eventHub.$emit('MRWidgetUpdateRequested', () => {
-                this.isMakingRequest = false;
-              });
-            }
-          })
-          .catch(() => {
-            this.isMakingRequest = false;
-            Flash(__('Something went wrong. Please try again.'));
-          });
-      },
+      this.service
+        .removeSourceBranch()
+        .then(res => res.data)
+        .then(data => {
+          if (data.message === 'Branch was removed') {
+            eventHub.$emit('MRWidgetUpdateRequested', () => {
+              this.isMakingRequest = false;
+            });
+          }
+        })
+        .catch(() => {
+          this.isMakingRequest = false;
+          Flash(__('Something went wrong. Please try again.'));
+        });
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
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 953ddf40a51..139e64d1878 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,19 +1,19 @@
 <script>
-  import statusIcon from '../mr_widget_status_icon.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetMerging',
-    components: {
-      statusIcon,
+export default {
+  name: 'MRWidgetMerging',
+  components: {
+    statusIcon,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body mr-state-locked media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
index b0e96f74626..227e9b85f9d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -1,40 +1,48 @@
 <script>
-  import { sprintf, s__ } from '~/locale';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import statusIcon from '../mr_widget_status_icon.vue';
-  import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
+import { sprintf, s__ } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import statusIcon from '../mr_widget_status_icon.vue';
+import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
 
-  export default {
-    name: 'MRWidgetMissingBranch',
-    directives: {
-      tooltip,
+export default {
+  name: 'MRWidgetMissingBranch',
+  directives: {
+    tooltip,
+  },
+  components: {
+    mrWidgetMergeHelp,
+    statusIcon,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
     },
-    components: {
-      mrWidgetMergeHelp,
-      statusIcon,
+  },
+  computed: {
+    missingBranchName() {
+      return this.mr.sourceBranchRemoved ? 'source' : 'target';
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-      },
-    },
-    computed: {
-      missingBranchName() {
-        return this.mr.sourceBranchRemoved ? 'source' : 'target';
-      },
-      missingBranchNameMessage() {
-        return sprintf(s__('mrWidget| Please restore it or use a different %{missingBranchName} branch'), {
+    missingBranchNameMessage() {
+      return sprintf(
+        s__('mrWidget| Please restore it or use a different %{missingBranchName} branch'),
+        {
           missingBranchName: this.missingBranchName,
-        });
-      },
-      message() {
-        return sprintf(s__('mrWidget|If the %{missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line'), {
+        },
+      );
+    },
+    message() {
+      return sprintf(
+        s__(
+          'mrWidget|If the %{missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line',
+        ),
+        {
           missingBranchName: this.missingBranchName,
-        });
-      },
+        },
+      );
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
index 92eee2cf5dd..360559ae0f0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
@@ -1,12 +1,12 @@
 <script>
-  import StatusIcon from '../mr_widget_status_icon.vue';
+import StatusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetNotAllowed',
-    components: {
-      StatusIcon,
-    },
-  };
+export default {
+  name: 'MRWidgetNotAllowed',
+  components: {
+    StatusIcon,
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
index 37ee5215cea..a4eb5afb21c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
@@ -1,12 +1,12 @@
 <script>
-  import StatusIcon from '../mr_widget_status_icon.vue';
+import StatusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetPipelineBlocked',
-    components: {
-      StatusIcon,
-    },
-  };
+export default {
+  name: 'MRWidgetPipelineBlocked',
+  components: {
+    StatusIcon,
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
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 f31c7a3edb8..041fa13a8f5 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
@@ -1,85 +1,87 @@
 <script>
-  import simplePoll from '../../../lib/utils/simple_poll';
-  import eventHub from '../../event_hub';
-  import statusIcon from '../mr_widget_status_icon.vue';
-  import Flash from '../../../flash';
+import simplePoll from '../../../lib/utils/simple_poll';
+import eventHub from '../../event_hub';
+import statusIcon from '../mr_widget_status_icon.vue';
+import Flash from '../../../flash';
 
-  export default {
-    name: 'MRWidgetRebase',
-    components: {
-      statusIcon,
+export default {
+  name: 'MRWidgetRebase',
+  components: {
+    statusIcon,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-      },
-      service: {
-        type: Object,
-        required: true,
-      },
+    service: {
+      type: Object,
+      required: true,
     },
-    data() {
-      return {
-        isMakingRequest: false,
-        rebasingError: null,
-      };
+  },
+  data() {
+    return {
+      isMakingRequest: false,
+      rebasingError: null,
+    };
+  },
+  computed: {
+    status() {
+      if (this.mr.rebaseInProgress || this.isMakingRequest) {
+        return 'loading';
+      }
+      if (!this.mr.canPushToSourceBranch && !this.mr.rebaseInProgress) {
+        return 'warning';
+      }
+      return 'success';
     },
-    computed: {
-      status() {
-        if (this.mr.rebaseInProgress || this.isMakingRequest) {
-          return 'loading';
-        }
-        if (!this.mr.canPushToSourceBranch && !this.mr.rebaseInProgress) {
-          return 'warning';
-        }
-        return 'success';
-      },
-      showDisabledButton() {
-        return ['failed', 'loading'].includes(this.status);
-      },
+    showDisabledButton() {
+      return ['failed', 'loading'].includes(this.status);
     },
-    methods: {
-      rebase() {
-        this.isMakingRequest = true;
-        this.rebasingError = null;
+  },
+  methods: {
+    rebase() {
+      this.isMakingRequest = true;
+      this.rebasingError = null;
 
-        this.service.rebase()
-          .then(() => {
-            simplePoll(this.checkRebaseStatus);
-          })
-          .catch((error) => {
-            this.rebasingError = error.merge_error;
+      this.service
+        .rebase()
+        .then(() => {
+          simplePoll(this.checkRebaseStatus);
+        })
+        .catch(error => {
+          this.rebasingError = error.merge_error;
+          this.isMakingRequest = false;
+          Flash('Something went wrong. Please try again.');
+        });
+    },
+    checkRebaseStatus(continuePolling, stopPolling) {
+      this.service
+        .poll()
+        .then(res => res.data)
+        .then(res => {
+          if (res.rebase_in_progress) {
+            continuePolling();
+          } else {
             this.isMakingRequest = false;
-            Flash('Something went wrong. Please try again.');
-          });
-      },
-      checkRebaseStatus(continuePolling, stopPolling) {
-        this.service.poll()
-          .then(res => res.data)
-          .then((res) => {
-            if (res.rebase_in_progress) {
-              continuePolling();
-            } else {
-              this.isMakingRequest = false;
-
-              if (res.merge_error && res.merge_error.length) {
-                this.rebasingError = res.merge_error;
-                Flash('Something went wrong. Please try again.');
-              }
 
-              eventHub.$emit('MRWidgetUpdateRequested');
-              stopPolling();
+            if (res.merge_error && res.merge_error.length) {
+              this.rebasingError = res.merge_error;
+              Flash('Something went wrong. Please try again.');
             }
-          })
-          .catch(() => {
-            this.isMakingRequest = false;
-            Flash('Something went wrong. Please try again.');
+
+            eventHub.$emit('MRWidgetUpdateRequested');
             stopPolling();
-          });
-      },
+          }
+        })
+        .catch(() => {
+          this.isMakingRequest = false;
+          Flash('Something went wrong. Please try again.');
+          stopPolling();
+        });
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
index 89c9a41f316..9129fcbb918 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -24,9 +24,10 @@ export default {
   methods: {
     removeWIP() {
       this.isMakingRequest = true;
-      this.service.removeWIP()
+      this.service
+        .removeWIP()
         .then(res => res.data)
-        .then((data) => {
+        .then(data => {
           eventHub.$emit('UpdateWidgetData', data);
           new window.Flash('The merge request can now be merged.', 'notice'); // eslint-disable-line
           $('.merge-request .detail-page-description .title').text(this.mr.title);
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 0e445a29de4..6fd826ddf38 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
@@ -1,5 +1,4 @@
 <script>
-
 import Project from '~/pages/projects/project';
 import SmartInterval from '~/smart_interval';
 import createFlash from '../flash';
@@ -100,8 +99,11 @@ export default {
       return !!this.mr.relatedLinks && !this.mr.isNothingToMergeState;
     },
     shouldRenderSourceBranchRemovalStatus() {
-      return !this.mr.canRemoveSourceBranch && this.mr.shouldRemoveSourceBranch &&
-        (!this.mr.isNothingToMergeState && !this.mr.isMergedState);
+      return (
+        !this.mr.canRemoveSourceBranch &&
+        this.mr.shouldRemoveSourceBranch &&
+        (!this.mr.isNothingToMergeState && !this.mr.isMergedState)
+      );
     },
   },
   created() {
@@ -133,9 +135,10 @@ export default {
       return new MRWidgetService(endpoints);
     },
     checkStatus(cb) {
-      return this.service.checkStatus()
+      return this.service
+        .checkStatus()
         .then(res => res.data)
-        .then((data) => {
+        .then(data => {
           this.handleNotification(data);
           this.mr.setData(data);
           this.setFaviconHelper();
@@ -172,20 +175,24 @@ export default {
       return Promise.resolve();
     },
     fetchDeployments() {
-      return this.service.fetchDeployments()
+      return this.service
+        .fetchDeployments()
         .then(res => res.data)
-        .then((data) => {
+        .then(data => {
           if (data.length) {
             this.mr.deployments = data;
           }
         })
         .catch(() => {
-          createFlash('Something went wrong while fetching the environments for this merge request. Please try again.');
+          createFlash(
+            'Something went wrong while fetching the environments for this merge request. Please try again.',
+          );
         });
     },
     fetchActionsContent() {
-      this.service.fetchMergeActionsContent()
-        .then((res) => {
+      this.service
+        .fetchMergeActionsContent()
+        .then(res => {
           if (res.data) {
             const el = document.createElement('div');
             el.innerHTML = res.data;
@@ -212,22 +219,22 @@ export default {
       this.pollingInterval.stopTimer();
     },
     bindEventHubListeners() {
-      eventHub.$on('MRWidgetUpdateRequested', (cb) => {
+      eventHub.$on('MRWidgetUpdateRequested', cb => {
         this.checkStatus(cb);
       });
 
       // `params` should be an Array contains a Boolean, like `[true]`
       // Passing parameter as Boolean didn't work.
-      eventHub.$on('SetBranchRemoveFlag', (params) => {
+      eventHub.$on('SetBranchRemoveFlag', params => {
         [this.mr.isRemovingSourceBranch] = params;
       });
 
-      eventHub.$on('FailedToMerge', (mergeError) => {
+      eventHub.$on('FailedToMerge', mergeError => {
         this.mr.state = 'failedToMerge';
         this.mr.mergeError = mergeError;
       });
 
-      eventHub.$on('UpdateWidgetData', (data) => {
+      eventHub.$on('UpdateWidgetData', data => {
         this.mr.setData(data);
       });