Further design iteration on project overview

Continues the iteration on the project overview UI:

- moved star, fork and new clone button
(copy SSH/HTTPS URLs) to top right,
  made them smaller
- avatar is now larger (64px)
- 'Request access' is now a link instead
  of a button
- overview comes before the description +
  changed styling and added icons
- description font-size is now 16px (large-paragraph)
- quick links to files are moved downwards
  below the commit/pipeline info
- margins changed to group content into
  4 groups to clean up the interface
- visibility info reduced to icon-only and
  moved to the right of the title

5 files changed, 59 insertions, 122 deletions

diff --git a/spec/features/projects/show/developer_views_empty_project_instructions_spec.rb b/spec/features/projects/show/developer_views_empty_project_instructions_spec.rb
index 227bdf524fe..8ba91fe7fd7 100644
--- a/spec/features/projects/show/developer_views_empty_project_instructions_spec.rb
+++ b/spec/features/projects/show/developer_views_empty_project_instructions_spec.rb
@@ -10,54 +10,9 @@ describe 'Projects > Show > Developer views empty project instructions' do
     sign_in(developer)
   end
 
-  context 'without an SSH key' do
-    it 'defaults to HTTP' do
-      visit_project
-
-      expect_instructions_for('http')
-    end
-
-    it 'switches to SSH', :js do
-      visit_project
-
-      select_protocol('SSH')
-
-      expect_instructions_for('ssh')
-    end
-  end
-
-  context 'with an SSH key' do
-    before do
-      create(:personal_key, user: developer)
-    end
-
-    it 'defaults to SSH' do
-      visit_project
-
-      expect_instructions_for('ssh')
-    end
-
-    it 'switches to HTTP', :js do
-      visit_project
-
-      select_protocol('HTTP')
-
-      expect_instructions_for('http')
-    end
-  end
-
-  def visit_project
+  it 'displays "git clone" instructions' do
     visit project_path(project)
-  end
-
-  def select_protocol(protocol)
-    find('#clone-dropdown').click
-    find(".#{protocol.downcase}-selector").click
-  end
-
-  def expect_instructions_for(protocol)
-    msg = :"#{protocol.downcase}_url_to_repo"
 
-    expect(page).to have_content("git clone #{project.send(msg)}")
+    expect(page).to have_content("git clone")
   end
 end
diff --git a/spec/features/projects/show/user_manages_notifications_spec.rb b/spec/features/projects/show/user_manages_notifications_spec.rb
index 546619e88ec..88f3397608f 100644
--- a/spec/features/projects/show/user_manages_notifications_spec.rb
+++ b/spec/features/projects/show/user_manages_notifications_spec.rb
@@ -8,13 +8,18 @@ describe 'Projects > Show > User manages notifications', :js do
     visit project_path(project)
   end
 
-  it 'changes the notification setting' do
+  def click_notifications_button
     first('.notifications-btn').click
+  end
+
+  it 'changes the notification setting' do
+    click_notifications_button
     click_link 'On mention'
 
-    page.within '#notifications-button' do
-      expect(page).to have_content 'On mention'
-    end
+    wait_for_requests
+
+    click_notifications_button
+    expect(find('.update-notification.is-active')).to have_content('On mention')
   end
 
   context 'custom notification settings' do
@@ -38,7 +43,7 @@ describe 'Projects > Show > User manages notifications', :js do
     end
 
     it 'shows notification settings checkbox' do
-      first('.notifications-btn').click
+      click_notifications_button
       page.find('a[data-notification-level="custom"]').click
 
       page.within('.custom-notifications-form') do
diff --git a/spec/features/projects/show/user_sees_collaboration_links_spec.rb b/spec/features/projects/show/user_sees_collaboration_links_spec.rb
index 7b3711531c6..24777788248 100644
--- a/spec/features/projects/show/user_sees_collaboration_links_spec.rb
+++ b/spec/features/projects/show/user_sees_collaboration_links_spec.rb
@@ -21,18 +21,6 @@ describe 'Projects > Show > Collaboration links' do
       end
     end
 
-    # The project header
-    page.within('.project-home-panel') do
-      aggregate_failures 'dropdown links in the project home panel' do
-        expect(page).to have_link('New issue')
-        expect(page).to have_link('New merge request')
-        expect(page).to have_link('New snippet')
-        expect(page).to have_link('New file')
-        expect(page).to have_link('New branch')
-        expect(page).to have_link('New tag')
-      end
-    end
-
     # The dropdown above the tree
     page.within('.repo-breadcrumb') do
       aggregate_failures 'dropdown links above the repo tree' do
@@ -61,17 +49,6 @@ describe 'Projects > Show > Collaboration links' do
       end
     end
 
-    page.within('.project-home-panel') do
-      aggregate_failures 'dropdown links' do
-        expect(page).not_to have_link('New issue')
-        expect(page).not_to have_link('New merge request')
-        expect(page).not_to have_link('New snippet')
-        expect(page).not_to have_link('New file')
-        expect(page).not_to have_link('New branch')
-        expect(page).not_to have_link('New tag')
-      end
-    end
-
     page.within('.repo-breadcrumb') do
       aggregate_failures 'dropdown links' do
         expect(page).not_to have_link('New file')
diff --git a/spec/features/projects/show/user_sees_git_instructions_spec.rb b/spec/features/projects/show/user_sees_git_instructions_spec.rb
index 9a82fee1b5d..ffa80235083 100644
--- a/spec/features/projects/show/user_sees_git_instructions_spec.rb
+++ b/spec/features/projects/show/user_sees_git_instructions_spec.rb
@@ -29,7 +29,7 @@ describe 'Projects > Show > User sees Git instructions' do
         expect(element.text).to include(project.http_url_to_repo)
       end
 
-      expect(page).to have_field('project_clone', with: project.http_url_to_repo) unless user_has_ssh_key
+      expect(page).to have_field('http_project_clone', with: project.http_url_to_repo) unless user_has_ssh_key
     end
   end
 
@@ -41,7 +41,7 @@ describe 'Projects > Show > User sees Git instructions' do
         expect(page).to have_content(project.title)
       end
 
-      expect(page).to have_field('project_clone', with: project.http_url_to_repo) unless user_has_ssh_key
+      expect(page).to have_field('http_project_clone', with: project.http_url_to_repo) unless user_has_ssh_key
     end
   end
 
diff --git a/spec/features/projects/show/user_sees_setup_shortcut_buttons_spec.rb b/spec/features/projects/show/user_sees_setup_shortcut_buttons_spec.rb
index df2b492ae6b..dcca1d388c7 100644
--- a/spec/features/projects/show/user_sees_setup_shortcut_buttons_spec.rb
+++ b/spec/features/projects/show/user_sees_setup_shortcut_buttons_spec.rb
@@ -21,7 +21,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
       end
 
       it 'no Auto DevOps button if can not manage pipelines' do
-        page.within('.project-stats') do
+        page.within('.project-buttons') do
           expect(page).not_to have_link('Enable Auto DevOps')
           expect(page).not_to have_link('Auto DevOps enabled')
         end
@@ -30,7 +30,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
       it '"Auto DevOps enabled" button not linked' do
         visit project_path(project)
 
-        page.within('.project-stats') do
+        page.within('.project-buttons') do
           expect(page).to have_text('Auto DevOps enabled')
         end
       end
@@ -45,19 +45,19 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
       end
 
       it '"New file" button linked to new file page' do
-        page.within('.project-stats') do
+        page.within('.project-buttons') do
           expect(page).to have_link('New file', href: project_new_blob_path(project, project.default_branch || 'master'))
         end
       end
 
-      it '"Add Readme" button linked to new file populated for a readme' do
-        page.within('.project-stats') do
-          expect(page).to have_link('Add Readme', href: presenter.add_readme_path)
+      it '"Add README" button linked to new file populated for a README' do
+        page.within('.project-buttons') do
+          expect(page).to have_link('Add README', href: presenter.add_readme_path)
         end
       end
 
       it '"Add license" button linked to new file populated for a license' do
-        page.within('.project-metadata') do
+        page.within('.project-stats') do
           expect(page).to have_link('Add license', href: presenter.add_license_path)
         end
       end
@@ -67,7 +67,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
           it '"Auto DevOps enabled" anchor linked to settings page' do
             visit project_path(project)
 
-            page.within('.project-stats') do
+            page.within('.project-buttons') do
               expect(page).to have_link('Auto DevOps enabled', href: project_settings_ci_cd_path(project, anchor: 'autodevops-settings'))
             end
           end
@@ -77,7 +77,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
           let(:project) { create(:project, :public, :empty_repo, auto_devops_attributes: { enabled: false }) }
 
           it '"Enable Auto DevOps" button linked to settings page' do
-            page.within('.project-stats') do
+            page.within('.project-buttons') do
               expect(page).to have_link('Enable Auto DevOps', href: project_settings_ci_cd_path(project, anchor: 'autodevops-settings'))
             end
           end
@@ -86,7 +86,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
 
       describe 'Kubernetes cluster button' do
         it '"Add Kubernetes cluster" button linked to clusters page' do
-          page.within('.project-stats') do
+          page.within('.project-buttons') do
             expect(page).to have_link('Add Kubernetes cluster', href: new_project_cluster_path(project))
           end
         end
@@ -96,7 +96,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
 
           visit project_path(project)
 
-          page.within('.project-stats') do
+          page.within('.project-buttons') do
             expect(page).to have_link('Kubernetes configured', href: project_cluster_path(project, cluster))
           end
         end
@@ -119,7 +119,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
         it '"Auto DevOps enabled" button not linked' do
           visit project_path(project)
 
-          page.within('.project-stats') do
+          page.within('.project-buttons') do
             expect(page).to have_text('Auto DevOps enabled')
           end
         end
@@ -129,14 +129,14 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
         let(:project) { create(:project, :public, :repository, auto_devops_attributes: { enabled: false }) }
 
         it 'no Auto DevOps button if can not manage pipelines' do
-          page.within('.project-stats') do
+          page.within('.project-buttons') do
             expect(page).not_to have_link('Enable Auto DevOps')
             expect(page).not_to have_link('Auto DevOps enabled')
           end
         end
 
         it 'no Kubernetes cluster button if can not manage clusters' do
-          page.within('.project-stats') do
+          page.within('.project-buttons') do
             expect(page).not_to have_link('Add Kubernetes cluster')
             expect(page).not_to have_link('Kubernetes configured')
           end
@@ -151,59 +151,59 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
         sign_in(user)
       end
 
-      context 'Readme button' do
+      context 'README button' do
         before do
           allow(Project).to receive(:find_by_full_path)
                               .with(project.full_path, follow_redirects: true)
                               .and_return(project)
         end
 
-        context 'when the project has a populated Readme' do
-          it 'show the "Readme" anchor' do
+        context 'when the project has a populated README' do
+          it 'show the "README" anchor' do
             visit project_path(project)
 
             expect(project.repository.readme).not_to be_nil
 
-            page.within('.project-stats') do
-              expect(page).not_to have_link('Add Readme', href: presenter.add_readme_path)
-              expect(page).to have_link('Readme', href: presenter.readme_path)
+            page.within('.project-buttons') do
+              expect(page).not_to have_link('Add README', href: presenter.add_readme_path)
+              expect(page).to have_link('README', href: presenter.readme_path)
             end
           end
 
-          context 'when the project has an empty Readme' do
-            it 'show the "Readme" anchor' do
+          context 'when the project has an empty README' do
+            it 'show the "README" anchor' do
               allow(project.repository).to receive(:readme).and_return(fake_blob(path: 'README.md', data: '', size: 0))
 
               visit project_path(project)
 
-              page.within('.project-stats') do
-                expect(page).not_to have_link('Add Readme', href: presenter.add_readme_path)
-                expect(page).to have_link('Readme', href: presenter.readme_path)
+              page.within('.project-buttons') do
+                expect(page).not_to have_link('Add README', href: presenter.add_readme_path)
+                expect(page).to have_link('README', href: presenter.readme_path)
               end
             end
           end
         end
 
-        context 'when the project does not have a Readme' do
-          it 'shows the "Add Readme" button' do
+        context 'when the project does not have a README' do
+          it 'shows the "Add README" button' do
             allow(project.repository).to receive(:readme).and_return(nil)
 
             visit project_path(project)
 
-            page.within('.project-stats') do
-              expect(page).to have_link('Add Readme', href: presenter.add_readme_path)
+            page.within('.project-buttons') do
+              expect(page).to have_link('Add README', href: presenter.add_readme_path)
             end
           end
         end
       end
 
-      it 'no "Add Changelog" button if the project already has a changelog' do
+      it 'no "Add CHANGELOG" button if the project already has a changelog' do
         visit project_path(project)
 
         expect(project.repository.changelog).not_to be_nil
 
-        page.within('.project-stats') do
-          expect(page).not_to have_link('Add Changelog')
+        page.within('.project-buttons') do
+          expect(page).not_to have_link('Add CHANGELOG')
         end
       end
 
@@ -212,18 +212,18 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
 
         expect(project.repository.license_blob).not_to be_nil
 
-        page.within('.project-stats') do
+        page.within('.project-buttons') do
           expect(page).not_to have_link('Add license')
         end
       end
 
-      it 'no "Add Contribution guide" button if the project already has a contribution guide' do
+      it 'no "Add CONTRIBUTING" button if the project already has a contribution guide' do
         visit project_path(project)
 
         expect(project.repository.contribution_guide).not_to be_nil
 
-        page.within('.project-stats') do
-          expect(page).not_to have_link('Add Contribution guide')
+        page.within('.project-buttons') do
+          expect(page).not_to have_link('Add CONTRIBUTING')
         end
       end
 
@@ -232,7 +232,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
           it 'no "Set up CI/CD" button if the project has Auto DevOps enabled' do
             visit project_path(project)
 
-            page.within('.project-stats') do
+            page.within('.project-buttons') do
               expect(page).not_to have_link('Set up CI/CD')
             end
           end
@@ -246,7 +246,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
 
             expect(project.repository.gitlab_ci_yml).to be_nil
 
-            page.within('.project-stats') do
+            page.within('.project-buttons') do
               expect(page).to have_link('Set up CI/CD', href: presenter.add_ci_yml_path)
             end
           end
@@ -266,7 +266,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
 
             visit project_path(project)
 
-            page.within('.project-stats') do
+            page.within('.project-buttons') do
               expect(page).not_to have_link('Set up CI/CD')
             end
           end
@@ -278,7 +278,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
           it '"Auto DevOps enabled" anchor linked to settings page' do
             visit project_path(project)
 
-            page.within('.project-stats') do
+            page.within('.project-buttons') do
               expect(page).to have_link('Auto DevOps enabled', href: project_settings_ci_cd_path(project, anchor: 'autodevops-settings'))
             end
           end
@@ -290,7 +290,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
           it '"Enable Auto DevOps" button linked to settings page' do
             visit project_path(project)
 
-            page.within('.project-stats') do
+            page.within('.project-buttons') do
               expect(page).to have_link('Enable Auto DevOps', href: project_settings_ci_cd_path(project, anchor: 'autodevops-settings'))
             end
           end
@@ -302,7 +302,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
 
             expect(page).to have_selector('.js-autodevops-banner')
 
-            page.within('.project-stats') do
+            page.within('.project-buttons') do
               expect(page).not_to have_link('Enable Auto DevOps')
               expect(page).not_to have_link('Auto DevOps enabled')
             end
@@ -323,7 +323,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
 
             visit project_path(project)
 
-            page.within('.project-stats') do
+            page.within('.project-buttons') do
               expect(page).not_to have_link('Enable Auto DevOps')
               expect(page).not_to have_link('Auto DevOps enabled')
             end
@@ -335,7 +335,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
         it '"Add Kubernetes cluster" button linked to clusters page' do
           visit project_path(project)
 
-          page.within('.project-stats') do
+          page.within('.project-buttons') do
             expect(page).to have_link('Add Kubernetes cluster', href: new_project_cluster_path(project))
           end
         end
@@ -345,7 +345,7 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
 
           visit project_path(project)
 
-          page.within('.project-stats') do
+          page.within('.project-buttons') do
             expect(page).to have_link('Kubernetes configured', href: project_cluster_path(project, cluster))
           end
         end