Added merge requests empty states20841-getting-started-better-empty-state-for-merge-requests-view

Added to groups page

Updated specs

Review changes

17 files changed, 90 insertions, 38 deletions

diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 77ae9e9a6e7..dce60112a80 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -282,4 +282,10 @@
       width: 100%;
     }
   }
+
+  @media(min-width: $screen-xs-max) {
+    &.merge-requests .text-content {
+      margin-top: 40px;
+    }
+  }
 }
diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb
index 75cd9eece5c..d4f4edf5a44 100644
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@@ -52,4 +52,10 @@ module GroupsHelper
   def group_issues(group)
     IssuesFinder.new(current_user, group_id: group.id).execute
   end
+
+  def group_merge_requests(group)
+    group.projects.map do |project|
+      MergeRequestsFinder.new(current_user, project_id: project.id).execute
+    end.compact.flatten
+  end
 end
diff --git a/app/views/groups/merge_requests.html.haml b/app/views/groups/merge_requests.html.haml
index e6953d94531..cde1573b05c 100644
--- a/app/views/groups/merge_requests.html.haml
+++ b/app/views/groups/merge_requests.html.haml
@@ -1,18 +1,21 @@
 - page_title "Merge Requests"
 
-.top-area
-  = render 'shared/issuable/nav', type: :merge_requests
-  .nav-controls
-    = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New Merge Request"
+- if group_merge_requests(@group).empty?
+  = render 'shared/empty_states/merge_requests', project_select_button: true
+- else
+  .top-area
+    = render 'shared/issuable/nav', type: :merge_requests
+    .nav-controls
+      = render 'shared/new_project_item_select', path: 'issues/new', label: "New Merge Request"
 
-= render 'shared/issuable/filter', type: :merge_requests
+  = render 'shared/issuable/filter', type: :merge_requests
 
-.row-content-block.second-block
-  Only merge requests from
-  %strong #{@group.name}
-  group are listed here.
-  - if current_user
-    To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page.
+  .row-content-block.second-block
+    Only merge requests from
+    %strong #{@group.name}
+    group are listed here.
+    - if current_user
+      To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page.
 
-.prepend-top-default
-  = render 'shared/merge_requests'
+  .prepend-top-default
+    = render 'shared/merge_requests'
diff --git a/app/views/projects/merge_requests/_merge_requests.html.haml b/app/views/projects/merge_requests/_merge_requests.html.haml
index fe82f751f53..4e97f74dd6a 100644
--- a/app/views/projects/merge_requests/_merge_requests.html.haml
+++ b/app/views/projects/merge_requests/_merge_requests.html.haml
@@ -1,8 +1,8 @@
 %ul.content-list.mr-list.issuable-list
-  = render @merge_requests
-  - if @merge_requests.blank?
-    %li
-      .nothing-here-block No merge requests to show
+  - if @merge_requests.exists?
+    = render @merge_requests
+  - else
+    = render 'shared/empty_states/merge_requests'
 
 - if @merge_requests.present?
   = paginate @merge_requests, theme: "gitlab"
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 144b3a9c8c8..2e40432e234 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -5,18 +5,21 @@
 = render "projects/issues/head"
 = render 'projects/last_push'
 
-%div{ class: container_class }
-  .top-area
-    = render 'shared/issuable/nav', type: :merge_requests
-    .nav-controls
-      = render 'shared/issuable/search_form', path: namespace_project_merge_requests_path(@project.namespace, @project)
+- if @project.merge_requests.exists?
+  %div{ class: container_class }
+    .top-area
+      = render 'shared/issuable/nav', type: :merge_requests
+      .nav-controls
+        = render 'shared/issuable/search_form', path: namespace_project_merge_requests_path(@project.namespace, @project)
 
-      - merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
-      - if merge_project
-        = link_to new_namespace_project_merge_request_path(merge_project.namespace, merge_project), class: "btn btn-new", title: "New Merge Request" do
-          New Merge Request
+        - merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
+        - if merge_project
+          = link_to new_namespace_project_merge_request_path(merge_project.namespace, merge_project), class: "btn btn-new", title: "New Merge Request" do
+            New Merge Request
 
-  = render 'shared/issuable/filter', type: :merge_requests
+    = render 'shared/issuable/filter', type: :merge_requests
 
-  .merge-requests-holder
-    = render 'merge_requests'
+    .merge-requests-holder
+      = render 'merge_requests'
+- else
+  = render 'shared/empty_states/merge_requests', button_path: new_namespace_project_merge_request_path(@project.namespace, @project)
diff --git a/app/views/shared/_merge_requests.html.haml b/app/views/shared/_merge_requests.html.haml
index ca3178395c1..5b97cdc1de0 100644
--- a/app/views/shared/_merge_requests.html.haml
+++ b/app/views/shared/_merge_requests.html.haml
@@ -14,4 +14,4 @@
   = paginate @merge_requests, theme: "gitlab"
 
 - else
-  .nothing-here-block No merge requests to show
+  = render 'shared/empty_states/merge_requests'
diff --git a/app/views/shared/empty_states/_merge_requests.html.haml b/app/views/shared/empty_states/_merge_requests.html.haml
new file mode 100644
index 00000000000..5dc509367b9
--- /dev/null
+++ b/app/views/shared/empty_states/_merge_requests.html.haml
@@ -0,0 +1,22 @@
+- button_path = local_assigns.fetch(:button_path, false)
+- project_select_button = local_assigns.fetch(:project_select_button, false)
+- has_button = button_path || project_select_button
+
+.row.empty-state.merge-requests
+  .col-xs-12.pull-right{ class: "#{'col-sm-6' if has_button}" }
+    .svg-content
+      = render 'shared/empty_states/icons/merge_requests.svg'
+  .col-xs-12{ class: "#{'col-sm-6' if has_button}" }
+    .text-content
+      - if has_button
+        %h4
+          Merge requests are a place to propose changes you've made to a project and discuss those changes with others.
+        %p
+          Interested parties can even contribute by pushing commits if they want to.
+        - if project_select_button
+          = render 'shared/new_project_item_select', path: 'merge_requests/new', label: 'New merge request'
+        - else
+          = link_to 'New merge request', button_path, class: 'btn btn-new', title: 'New merge request', id: 'new_merge_request_link'
+      - else
+        %h4.text-center
+          There are no merge requests to show.
diff --git a/app/views/shared/empty_states/icons/_merge_requests.svg b/app/views/shared/empty_states/icons/_merge_requests.svg
new file mode 100644
index 00000000000..e77f6319a95
--- /dev/null
+++ b/app/views/shared/empty_states/icons/_merge_requests.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="755 221 385 225" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" width="278" height="179" rx="10"/><mask id="d" width="278" height="179" x="0" y="0" fill="#fff"><use xlink:href="#a"/></mask><path id="b" d="M13.6 49H57c5.5 0 10-4.5 10-10V10c0-5.5-4.5-10-10-10H10C4.5 0 0 4.5 0 10v42c0 5.5 3.2 7 7.2 3l6.4-6z"/><mask id="e" width="67" height="57.2" x="0" y="0" fill="#fff"><use xlink:href="#b"/></mask><path id="c" d="M13.6 49H57c5.5 0 10-4.5 10-10V10c0-5.5-4.5-10-10-10H10C4.5 0 0 4.5 0 10v42c0 5.5 3.2 7 7.2 3l6.4-6z"/><mask id="f" width="67" height="57.2" x="0" y="0" fill="#fff"><use xlink:href="#c"/></mask></defs><g fill="none" fill-rule="evenodd"><g fill="#F9F9F9" transform="translate(752 227)"><rect width="120" height="22" x="30" rx="11"/><rect width="132" height="22" y="44" rx="11"/><rect width="190" height="22" x="208" y="66" rx="11"/><rect width="158" height="22" x="129" y="197" rx="11"/><rect width="158" height="22" x="66" y="154" rx="11"/><rect width="350" height="22" x="31" y="110" rx="11"/><path d="M153 22H21h21.5c6 0 11 5 11 11s-5 11-11 11H21h132-36.5c-6 0-11-5-11-11s5-11 11-11H153zm252 66H288h36.5c6 0 11 5 11 11s-5 11-11 11H288h117-36.5c-6 0-11-5-11-11s5-11 11-11H405zm-244 44H44h36.5c6 0 11 5 11 11s-5 11-11 11H44h117-36.5c-6 0-11-5-11-11s5-11 11-11H161zm75 44H119h21.5c6 0 11 5 11 11s-5 11-11 11H119h117-51.5c-6 0-11-5-11-11s5-11 11-11H236z"/></g><g transform="translate(812 240)"><use fill="#FFF" stroke="#EEE" stroke-width="8" mask="url(#d)" xlink:href="#a"/><path fill="#EEE" d="M4 29h271v4H4z"/><g transform="translate(34 60)"><rect width="6" height="2" y="1" fill="#B5A7DD" rx="1"/><rect width="15" height="4" x="15" fill="#EEE" rx="2"/><rect width="15" height="4" x="72" fill="#EEE" rx="2"/><rect width="15" height="4" x="39" y="22" fill="#EEE" rx="2"/><rect width="15" height="4" x="53" y="11" fill="#FC6D26" rx="2"/><rect width="20" height="4" x="48" fill="#FC6D26" opacity=".5" rx="2"/><rect width="20" height="4" x="15" y="22" fill="#EEE" rx="2"/><rect width="20" height="4" x="29" y="11" fill="#EEE" rx="2"/><rect width="10" height="4" x="34" fill="#FC6D26" rx="2"/><rect width="10" height="4" x="15" y="11" fill="#EEE" rx="2"/><rect width="6" height="2" y="12" fill="#B5A7DD" rx="1"/><rect width="6" height="2" y="23" fill="#B5A7DD" rx="1"/></g><g transform="translate(34 93)"><rect width="6" height="2" y="1" fill="#B5A7DD" rx="1"/><rect width="15" height="4" x="15" fill="#FC6D26" rx="2"/><rect width="15" height="4" x="72" fill="#EEE" rx="2"/><rect width="15" height="4" x="39" y="22" fill="#FC6D26" opacity=".5" rx="2"/><rect width="15" height="4" x="53" y="11" fill="#EEE" rx="2"/><rect width="20" height="4" x="48" fill="#FC6D26" rx="2"/><rect width="20" height="4" x="15" y="22" fill="#FC6D26" rx="2"/><rect width="20" height="4" x="29" y="11" fill="#EEE" rx="2"/><rect width="10" height="4" x="34" fill="#FC6D26" opacity=".5" rx="2"/><rect width="10" height="4" x="15" y="11" fill="#EEE" rx="2"/><rect width="6" height="2" y="12" fill="#B5A7DD" rx="1"/><rect width="6" height="2" y="23" fill="#B5A7DD" rx="1"/></g><g transform="translate(34 126)"><rect width="6" height="2" y="1" fill="#B5A7DD" rx="1"/><rect width="15" height="4" x="15" fill="#EEE" rx="2"/><rect width="15" height="4" x="72" fill="#EEE" rx="2"/><rect width="15" height="4" x="39" y="22" fill="#EEE" rx="2"/><rect width="15" height="4" x="53" y="11" fill="#EEE" rx="2"/><rect width="20" height="4" x="48" fill="#FC6D26" rx="2"/><rect width="20" height="4" x="15" y="22" fill="#EEE" rx="2"/><rect width="20" height="4" x="29" y="11" fill="#EEE" rx="2"/><rect width="10" height="4" x="34" fill="#FC6D26" opacity=".5" rx="2"/><rect width="10" height="4" x="15" y="11" fill="#EEE" rx="2"/><rect width="6" height="2" y="12" fill="#B5A7DD" rx="1"/><rect width="6" height="2" y="23" fill="#B5A7DD" rx="1"/></g><g transform="translate(157 59)"><rect width="6" height="2" y="1" fill="#FDE5D8" rx="1"/><rect width="15" height="4" x="15" fill="#EEE" rx="2"/><rect width="15" height="4" x="72" fill="#EEE" rx="2"/><rect width="15" height="4" x="39" y="22" fill="#6B4FBB" opacity=".5" rx="2"/><rect width="15" height="4" x="53" y="11" fill="#6B4FBB" rx="2"/><rect width="20" height="4" x="48" fill="#6B4FBB" opacity=".5" rx="2"/><rect width="20" height="4" x="15" y="22" fill="#6B4FBB" rx="2"/><rect width="20" height="4" x="29" y="11" fill="#EEE" rx="2"/><rect width="10" height="4" x="34" fill="#6B4FBB" rx="2"/><rect width="10" height="4" x="15" y="11" fill="#EEE" rx="2"/><rect width="6" height="2" y="12" fill="#FDE5D8" rx="1"/><rect width="6" height="2" y="23" fill="#FDE5D8" rx="1"/><rect width="6" height="2" y="34" fill="#FDE5D8" rx="1"/><rect width="15" height="4" x="15" y="33" fill="#EEE" rx="2"/><rect width="15" height="4" x="58" y="22" fill="#EEE" rx="2"/><rect width="15" height="4" x="39" y="55" fill="#6B4FBB" opacity=".5" rx="2"/><rect width="15" height="4" x="29" y="44" fill="#6B4FBB" rx="2"/><rect width="20" height="4" x="48" y="33" fill="#6B4FBB" rx="2"/><rect width="20" height="4" x="15" y="55" fill="#EEE" rx="2"/><rect width="10" height="4" x="34" y="33" fill="#EEE" rx="2"/><rect width="10" height="4" x="15" y="44" fill="#EEE" rx="2"/><rect width="10" height="4" x="48" y="44" fill="#EEE" rx="2"/><rect width="10" height="4" x="62" y="44" fill="#EEE" rx="2"/><rect width="10" height="4" x="77" y="22" fill="#EEE" rx="2"/><rect width="6" height="2" y="45" fill="#FDE5D8" rx="1"/><rect width="6" height="2" y="56" fill="#FDE5D8" rx="1"/><rect width="6" height="2" y="67" fill="#FDE5D8" rx="1"/><rect width="15" height="4" x="15" y="66" fill="#6B4FBB" rx="2"/><rect width="15" height="4" x="39" y="88" fill="#EEE" rx="2"/><rect width="15" height="4" x="53" y="77" fill="#6B4FBB" opacity=".5" rx="2"/><rect width="20" height="4" x="15" y="88" fill="#EEE" rx="2"/><rect width="20" height="4" x="29" y="77" fill="#6B4FBB" rx="2"/><rect width="10" height="4" x="34" y="66" fill="#EEE" rx="2"/><rect width="10" height="4" x="72" y="77" fill="#EEE" rx="2"/><rect width="10" height="4" x="15" y="77" fill="#EEE" rx="2"/><rect width="6" height="2" y="78" fill="#FDE5D8" rx="1"/><rect width="6" height="2" y="89" fill="#FDE5D8" rx="1"/></g></g><g transform="translate(1057 221)"><use fill="#FFF" stroke="#FDE5D8" stroke-width="8" mask="url(#e)" xlink:href="#b"/><rect width="29" height="3" x="14" y="14" fill="#FDB692" rx="1.5"/><rect width="39" height="3" x="14" y="23" fill="#FDB692" rx="1.5"/><rect width="29" height="3" x="14" y="32" fill="#FDB692" rx="1.5"/></g><g transform="translate(1046 285)"><circle cx="16" cy="15" r="15" fill="#FFF7F4" stroke="#FC6D26" stroke-width="3"/><path stroke="#FC6D26" stroke-width="2" d="M0 14h1c5 0 9.2-2.7 11.4-6.7M14 1V0"/><path stroke="#FC6D26" stroke-width="2" d="M7.8 3c3 4.3 7.8 7 13.2 7 3.3 0 6.3-1 9-2.7"/><circle cx="10.5" cy="17.5" r="1.5" fill="#FC6D26"/><circle cx="21.5" cy="17.5" r="1.5" fill="#FC6D26"/></g><g transform="translate(825 370)"><circle cx="15" cy="16" r="15" fill="#F4F1FA" stroke="#6B4FBB" stroke-width="3"/><path fill="#6B4FBB" d="M25 7h2.7C25 2.8 20.4 0 15 0 9.6 0 5 2.8 2.3 7H5l2.5-3L10 7l2.5-3L15 7l2.5-3L20 7l2.5-3L25 7z"/><circle cx="9.5" cy="17.5" r="1.5" fill="#6B4FBB"/><circle cx="20.5" cy="17.5" r="1.5" fill="#6B4FBB"/></g><g transform="matrix(-1 0 0 1 840 306)"><use fill="#FFF" stroke="#E2DCF2" stroke-width="8" mask="url(#f)" xlink:href="#c"/><rect width="29" height="3" x="24" y="14" fill="#6B4FBB" opacity=".5" rx="1.5"/><rect width="19" height="3" x="34" y="23" fill="#6B4FBB" opacity=".5" rx="1.5"/><rect width="19" height="3" x="34" y="32" fill="#6B4FBB" opacity=".5" rx="1.5"/></g></g></svg>
diff --git a/changelogs/unreleased/20841-getting-started-better-empty-state-for-merge-requests-view.yml b/changelogs/unreleased/20841-getting-started-better-empty-state-for-merge-requests-view.yml
new file mode 100644
index 00000000000..34909c06df3
--- /dev/null
+++ b/changelogs/unreleased/20841-getting-started-better-empty-state-for-merge-requests-view.yml
@@ -0,0 +1,4 @@
+---
+title: Added merge requests empty state
+merge_request: 7342
+author: 
diff --git a/features/dashboard/dashboard.feature b/features/dashboard/dashboard.feature
index 92061dac7f4..fcb61ad12ff 100644
--- a/features/dashboard/dashboard.feature
+++ b/features/dashboard/dashboard.feature
@@ -62,7 +62,8 @@ Feature: Dashboard
 
   @javascript
   Scenario: Visiting Project's merge requests after sorting
-    Given I visit dashboard merge requests page
+    Given project "Shop" have "Bugfix MR" open merge request
+    And I visit dashboard merge requests page
     And I sort the list by "Oldest updated"
     And I visit project "Shop" merge requests page
     Then The list should be sorted by "Oldest updated"
diff --git a/features/project/issues/issues.feature b/features/project/issues/issues.feature
index 80670063ea0..4498cc6c6c4 100644
--- a/features/project/issues/issues.feature
+++ b/features/project/issues/issues.feature
@@ -62,14 +62,16 @@ Feature: Project Issues
 
   @javascript
   Scenario: Visiting Merge Requests after being sorted the list
-    Given I visit project "Shop" issues page
+    Given project "Shop" have "Bugfix MR" open merge request
+    And I visit project "Shop" issues page
     And I sort the list by "Oldest updated"
     And I visit project "Shop" merge requests page
     Then The list should be sorted by "Oldest updated"
 
   @javascript
   Scenario: Visiting Merge Requests from a differente Project after sorting
-    Given I visit project "Shop" merge requests page
+    Given project "Shop" have "Bugfix MR" open merge request
+    And I visit project "Shop" merge requests page
     And I sort the list by "Oldest updated"
     And I visit dashboard merge requests page
     Then The list should be sorted by "Oldest updated"
diff --git a/features/steps/project/fork.rb b/features/steps/project/fork.rb
index 70dbd030003..4ea4d26fd28 100644
--- a/features/steps/project/fork.rb
+++ b/features/steps/project/fork.rb
@@ -42,8 +42,7 @@ class Spinach::Features::ProjectFork < Spinach::FeatureSteps
   end
 
   step 'I click link "New merge request"' do
-    expect(page).to have_content(/new merge request/i)
-    click_link "New Merge Request"
+    page.has_link?('New Merge Request') ? click_link("New Merge Request") : click_link('New merge request')
   end
 
   step 'I should see the new merge request page for my namespace' do
diff --git a/features/steps/project/forked_merge_requests.rb b/features/steps/project/forked_merge_requests.rb
index 6c14d835004..615fce73c0f 100644
--- a/features/steps/project/forked_merge_requests.rb
+++ b/features/steps/project/forked_merge_requests.rb
@@ -16,7 +16,7 @@ class Spinach::Features::ProjectForkedMergeRequests < Spinach::FeatureSteps
   end
 
   step 'I click link "New Merge Request"' do
-    click_link "New Merge Request"
+    page.has_link?('New Merge Request') ? click_link("New Merge Request") : click_link('New merge request')
   end
 
   step 'I should see merge request "Merge Request On Forked Project"' do
diff --git a/features/steps/project/merge_requests.rb b/features/steps/project/merge_requests.rb
index f728d243cdc..452de9d765e 100644
--- a/features/steps/project/merge_requests.rb
+++ b/features/steps/project/merge_requests.rb
@@ -14,7 +14,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
   end
 
   step 'I click link "New Merge Request"' do
-    click_link "New Merge Request"
+    page.has_link?('New Merge Request') ? click_link("New Merge Request") : click_link('New merge request')
   end
 
   step 'I click link "Bug NS-04"' do
diff --git a/features/steps/shared/project.rb b/features/steps/shared/project.rb
index cab85a48396..f91198c9bbd 100644
--- a/features/steps/shared/project.rb
+++ b/features/steps/shared/project.rb
@@ -263,6 +263,10 @@ module SharedProject
     @project.update(public_builds: false)
   end
 
+  step 'project "Shop" have "Bugfix MR" open merge request' do
+    create(:merge_request, title: "Bugfix MR", target_project: project, source_project: project, author: project.users.first)
+  end
+
   def user_owns_project(user_name:, project_name:, visibility: :private)
     user = user_exists(user_name, username: user_name.gsub(/\s/, '').underscore)
     project = Project.find_by(name: project_name)
diff --git a/spec/features/merge_requests/create_new_mr_spec.rb b/spec/features/merge_requests/create_new_mr_spec.rb
index 702869b6e8b..56addc48530 100644
--- a/spec/features/merge_requests/create_new_mr_spec.rb
+++ b/spec/features/merge_requests/create_new_mr_spec.rb
@@ -13,7 +13,7 @@ feature 'Create New Merge Request', feature: true, js: true do
   it 'generates a diff for an orphaned branch' do
     visit namespace_project_merge_requests_path(project.namespace, project)
 
-    click_link 'New Merge Request'
+    page.has_link?('New Merge Request') ? click_link("New Merge Request") : click_link('New merge request')
     expect(page).to have_content('Source branch')
     expect(page).to have_content('Target branch')
 
diff --git a/spec/features/search_spec.rb b/spec/features/search_spec.rb
index caecd027aaa..f832504ed86 100644
--- a/spec/features/search_spec.rb
+++ b/spec/features/search_spec.rb
@@ -7,6 +7,7 @@ describe "Search", feature: true  do
   let(:project) { create(:project, namespace: user.namespace) }
   let!(:issue) { create(:issue, project: project, assignee: user) }
   let!(:issue2) { create(:issue, project: project, author: user) }
+  let!(:merge_request) { create(:merge_request, source_project: project, target_project: project, author: user) }
 
   before do
     login_with(user)