1 files changed, 76 insertions, 0 deletions
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
new file mode 100644
index 00000000000..fe2608e8212
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -0,0 +1,76 @@
+<script>
+import $ from 'jquery';
+import statusIcon from '../mr_widget_status_icon.vue';
+import tooltip from '../../../vue_shared/directives/tooltip';
+import eventHub from '../../event_hub';
+
+export default {
+  name: 'WorkInProgress',
+  components: {
+    statusIcon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    mr: { type: Object, required: true },
+    service: { type: Object, required: true },
+  },
+  data() {
+    return {
+      isMakingRequest: false,
+    };
+  },
+  methods: {
+    removeWIP() {
+      this.isMakingRequest = true;
+      this.service.removeWIP()
+        .then(res => res.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);
+        })
+        .catch(() => {
+          this.isMakingRequest = false;
+          new window.Flash('Something went wrong. Please try again.'); // eslint-disable-line
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="warning"
+      :show-disabled-button="Boolean(mr.removeWIPPath)"
+    />
+    <div class="media-body space-children">
+      <span class="bold">
+        This is a Work in Progress
+        <i
+          v-tooltip
+          class="fa fa-question-circle"
+          title="When this merge request is ready,
+          remove the WIP: prefix from the title to allow it to be merged"
+          aria-label="When this merge request is ready,
+          remove the WIP: prefix from the title to allow it to be merged">
+        </i>
+      </span>
+      <button
+        v-if="mr.removeWIPPath"
+        @click="removeWIP"
+        :disabled="isMakingRequest"
+        type="button"
+        class="btn btn-default btn-xs js-remove-wip">
+        <i
+          v-if="isMakingRequest"
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true">
+        </i>
+        Resolve WIP status
+      </button>
+    </div>
+  </div>
+</template>