Handle wok in progress state3782-mr-widget-refactor

[ci skip]

4 files changed, 23 insertions, 3 deletions

diff --git a/app/assets/javascripts/merge_request/components/merge_status.js.es6 b/app/assets/javascripts/merge_request/components/merge_status.js.es6
index 9cae748d287..e3b42c92a4c 100644
--- a/app/assets/javascripts/merge_request/components/merge_status.js.es6
+++ b/app/assets/javascripts/merge_request/components/merge_status.js.es6
@@ -6,10 +6,11 @@ const mergeStatusComponent = {
     can_be_merged: mergeStatusCanBeMerged,
     cannot_be_merged: mergeStatusCannotBeMerged,
 
-    // Custom statuses
+    // Additional statuses
     not_allowed: userNotAllowed,
     branch_missing: branchMissing,
     archived: projectArchived,
+    wip: workInProgress,
   },
   template: `<component :is="status" :ci="ci" :merge-request="mergeRequest"></component>`,
 };
diff --git a/app/assets/javascripts/merge_request/merge_status/work_in_progress.js.es6 b/app/assets/javascripts/merge_request/merge_status/work_in_progress.js.es6
new file mode 100644
index 00000000000..1ff2c2f4579
--- /dev/null
+++ b/app/assets/javascripts/merge_request/merge_status/work_in_progress.js.es6
@@ -0,0 +1,15 @@
+const workInProgress = {
+  props: ['ci', 'mergeRequest', 'project'],
+  template: `<div>
+              <h4>
+                This merge request is currently a Work In Progress
+              </h4>
+              <p>
+                When this merge request is ready,
+                <a rel="nofollow" href="{{mergeRequest.removeWipUrl}}">remove the
+                <code>WIP:</code>
+                prefix from the title
+                </a>to allow it to be merged.
+              </p>
+            </div>`
+};
diff --git a/app/assets/javascripts/merge_request/status/opened.js.es6 b/app/assets/javascripts/merge_request/status/opened.js.es6
index 5cc648eb225..5d40b040f61 100644
--- a/app/assets/javascripts/merge_request/status/opened.js.es6
+++ b/app/assets/javascripts/merge_request/status/opened.js.es6
@@ -9,6 +9,8 @@ const mrWidgetOpened = {
         status = 'archived';
       } else if (this.mergeRequest.branchMissing) {
         status = 'branch_missing'
+      }else if (this.mergeRequest.workInProgress) {
+        status = 'wip'
       }else if (this.mergeRequest.userNotAllowed) {
         status = 'not_allowed';
       } else {
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index b786b624fb9..e7791d896da 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -1,5 +1,5 @@
 %h5= @merge_request.id
-- if @merge_request.id == 49
+- if @merge_request.id == 50
   %h5 vue.js activo
   - commit = @merge_request.diff_head_commit
   - content_for :page_specific_javascripts do
@@ -11,7 +11,9 @@
             isArchived: #{@project.archived?},
           },
           mergeRequest: {
-            branchMissing: '#{@merge_request.branch_missing?}',
+            workInProgress: #{@merge_request.work_in_progress?},
+            removeWipUrl: '#{remove_wip_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}',
+            branchMissing: #{@merge_request.branch_missing?},
             sourceBranch: '#{@merge_request.source_branch}',
             sourceBranchUrl: '#{namespace_project_commits_path(@merge_request.source_project.namespace, @merge_request.source_project, @merge_request.source_branch)}',
             sourceBranchExists: #{@merge_request.source_branch_exists?},