1 files changed, 40 insertions, 11 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
index 8c4535f1337..1d9c30389e5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
@@ -1,17 +1,46 @@
+import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
+
 export default {
   name: 'MRWidgetNothingToMerge',
+  props: {
+    mr: {
+      type: Object,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      canCreateNewFile: true,
+      emptyStateSVG,
+    };
+  },
   template: `
-    <div class="mr-widget-body">
-      <button
-        type="button"
-        class="btn btn-success btn-small"
-        disabled="true">
-        Merge
-      </button>
-      <span class="bold">
-        There is nothing to merge from source branch into target branch.
-        Please push new commits or use a different branch.
-      </span>
+    <div class="mr-widget-body empty-state">
+      <div class="row">
+        <div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center">
+          <span v-html="emptyStateSVG" />
+        </div>
+        <div class="text col-sm-7 col-sm-pull-5 col-xs-12">
+          <span>
+            Merge requests are a place to propose changes you have made to a project
+            and discuss those changes with others.
+          </span>
+          <p>
+            Interested parties can even contribute by pushing commits if they want to.
+          </p>
+          <p>
+            Currently there are no changes in this merge request's source branch.
+            Please push new commits or use a different branch.
+          </p>
+          <a
+            v-if="canCreateNewFile"
+            :href="mr.newBlobPath"
+            role="button"
+            class="btn btn-inverted btn-save">
+            Create file
+          </a>
+        </div>
+      </div>
     </div>
   `,
 };