Resolve "Improve project overview UI"

8 files changed, 192 insertions, 72 deletions

diff --git a/spec/features/projects/files/project_owner_creates_license_file_spec.rb b/spec/features/projects/files/project_owner_creates_license_file_spec.rb
index ac6c8c337fa..6762460971f 100644
--- a/spec/features/projects/files/project_owner_creates_license_file_spec.rb
+++ b/spec/features/projects/files/project_owner_creates_license_file_spec.rb
@@ -36,7 +36,7 @@ describe 'Projects > Files > Project owner creates a license file', :js do
   end
 
   it 'project maintainer creates a license file from the "Add license" link' do
-    click_link 'Add License'
+    click_link 'Add license'
 
     expect(page).to have_content('New file')
     expect(current_path).to eq(
diff --git a/spec/features/projects/files/project_owner_sees_link_to_create_license_file_in_empty_project_spec.rb b/spec/features/projects/files/project_owner_sees_link_to_create_license_file_in_empty_project_spec.rb
index 801291c1f77..0b8474fb87a 100644
--- a/spec/features/projects/files/project_owner_sees_link_to_create_license_file_in_empty_project_spec.rb
+++ b/spec/features/projects/files/project_owner_sees_link_to_create_license_file_in_empty_project_spec.rb
@@ -10,7 +10,7 @@ describe 'Projects > Files > Project owner sees a link to create a license file
 
   it 'project maintainer creates a license file from a template' do
     visit project_path(project)
-    click_on 'Add License'
+    click_on 'Add license'
     expect(page).to have_content('New file')
 
     expect(current_path).to eq(
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 0405e21a0d7..b8326edd4fd 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
@@ -1,7 +1,7 @@
 require 'spec_helper'
 
 describe 'Projects > Show > User sees setup shortcut buttons' do
-  # For "New file", "Add License" functionality,
+  # For "New file", "Add license" functionality,
   # see spec/features/projects/files/project_owner_creates_license_file_spec.rb
   # see spec/features/projects/files/project_owner_sees_link_to_create_license_file_in_empty_project_spec.rb
 
@@ -58,9 +58,9 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
         end
       end
 
-      it '"Add License" button linked to new file populated for a license' do
-        page.within('.project-stats') do
-          expect(page).to have_link('Add License', href: presenter.add_license_path)
+      it '"Add license" button linked to new file populated for a license' do
+        page.within('.project-metadata') do
+          expect(page).to have_link('Add license', href: presenter.add_license_path)
         end
       end
 
@@ -201,13 +201,13 @@ describe 'Projects > Show > User sees setup shortcut buttons' do
         end
       end
 
-      it 'no "Add License" button if the project already has a license' do
+      it 'no "Add license" button if the project already has a license' do
         visit project_path(project)
 
         expect(project.repository.license_blob).not_to be_nil
 
         page.within('.project-stats') do
-          expect(page).not_to have_link('Add License')
+          expect(page).not_to have_link('Add license')
         end
       end
 
diff --git a/spec/features/projects_spec.rb b/spec/features/projects_spec.rb
index 56ed0c936a6..22e3a99072f 100644
--- a/spec/features/projects_spec.rb
+++ b/spec/features/projects_spec.rb
@@ -2,6 +2,7 @@ require 'spec_helper'
 
 describe 'Project' do
   include ProjectForksHelper
+  include MobileHelpers
 
   describe 'creating from template' do
     let(:user)    { create(:user) }
@@ -54,25 +55,72 @@ describe 'Project' do
     it 'parses Markdown' do
       project.update_attribute(:description, 'This is **my** project')
       visit path
-      expect(page).to have_css('.project-home-desc > p > strong')
+      expect(page).to have_css('.project-description > .project-description-markdown > p > strong')
     end
 
     it 'passes through html-pipeline' do
       project.update_attribute(:description, 'This project is the :poop:')
       visit path
-      expect(page).to have_css('.project-home-desc > p > gl-emoji')
+      expect(page).to have_css('.project-description > .project-description-markdown > p > gl-emoji')
     end
 
     it 'sanitizes unwanted tags' do
       project.update_attribute(:description, "```\ncode\n```")
       visit path
-      expect(page).not_to have_css('.project-home-desc code')
+      expect(page).not_to have_css('.project-description code')
     end
 
     it 'permits `rel` attribute on links' do
       project.update_attribute(:description, 'https://google.com/')
       visit path
-      expect(page).to have_css('.project-home-desc a[rel]')
+      expect(page).to have_css('.project-description a[rel]')
+    end
+
+    context 'read more', :js do
+      let(:read_more_selector)         { '.read-more-container' }
+      let(:read_more_trigger_selector) { '.project-home-desc .js-read-more-trigger' }
+
+      it 'does not display "read more" link on desktop breakpoint' do
+        project.update_attribute(:description, 'This is **my** project')
+        visit path
+
+        expect(find(read_more_trigger_selector, visible: false)).not_to be_visible
+      end
+
+      it 'displays "read more" link on mobile breakpoint' do
+        project.update_attribute(:description, 'This is **my** project')
+        visit path
+        resize_screen_xs
+
+        find(read_more_trigger_selector).click
+
+        expect(page).to have_css('.project-description .is-expanded')
+      end
+    end
+  end
+
+  describe 'copy clone URL to clipboard', :js do
+    let(:project) { create(:project, :repository) }
+    let(:path)    { project_path(project) }
+
+    before do
+      sign_in(create(:admin))
+      visit path
+    end
+
+    context 'desktop component' do
+      it 'shows on md and larger breakpoints' do
+        expect(find('.git-clone-holder')).to be_visible
+        expect(find('.mobile-git-clone', visible: false)).not_to be_visible
+      end
+    end
+
+    context 'mobile component' do
+      it 'shows mobile component on sm and smaller breakpoints' do
+        resize_screen_xs
+        expect(find('.mobile-git-clone')).to be_visible
+        expect(find('.git-clone-holder', visible: false)).not_to be_visible
+      end
     end
   end
 
diff --git a/spec/javascripts/fixtures/projects.rb b/spec/javascripts/fixtures/projects.rb
index 57c78182abc..d98f7f55b20 100644
--- a/spec/javascripts/fixtures/projects.rb
+++ b/spec/javascripts/fixtures/projects.rb
@@ -6,6 +6,7 @@ describe 'Projects (JavaScript fixtures)', type: :controller do
   let(:admin) { create(:admin) }
   let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
   let(:project) { create(:project, namespace: namespace, path: 'builds-project') }
+  let(:project_with_repo) { create(:project, :repository, description: 'Code and stuff') }
   let(:project_variable_populated) { create(:project, namespace: namespace, path: 'builds-project2') }
   let!(:variable1) { create(:ci_variable, project: project_variable_populated) }
   let!(:variable2) { create(:ci_variable, project: project_variable_populated) }
@@ -35,6 +36,15 @@ describe 'Projects (JavaScript fixtures)', type: :controller do
       store_frontend_fixture(response, example.description)
     end
 
+    it 'projects/overview.html.raw' do |example|
+      get :show,
+        namespace_id: project_with_repo.namespace.to_param,
+        id: project_with_repo
+
+      expect(response).to be_success
+      store_frontend_fixture(response, example.description)
+    end
+
     it 'projects/edit.html.raw' do |example|
       get :edit,
         namespace_id: project.namespace.to_param,
diff --git a/spec/javascripts/read_more_spec.js b/spec/javascripts/read_more_spec.js
new file mode 100644
index 00000000000..b1af0f80a50
--- /dev/null
+++ b/spec/javascripts/read_more_spec.js
@@ -0,0 +1,23 @@
+import initReadMore from '~/read_more';
+
+describe('Read more click-to-expand functionality', () => {
+  const fixtureName = 'projects/overview.html.raw';
+
+  preloadFixtures(fixtureName);
+
+  beforeEach(() => {
+    loadFixtures(fixtureName);
+  });
+
+  describe('expands target element', () => {
+    it('adds "is-expanded" class to target element', () => {
+      const target = document.querySelector('.read-more-container');
+      const trigger = document.querySelector('.js-read-more-trigger');
+      initReadMore();
+
+      trigger.click();
+
+      expect(target.classList.contains('is-expanded')).toEqual(true);
+    });
+  });
+});
diff --git a/spec/presenters/project_presenter_spec.rb b/spec/presenters/project_presenter_spec.rb
index 01085dbcb49..d9fb27e101e 100644
--- a/spec/presenters/project_presenter_spec.rb
+++ b/spec/presenters/project_presenter_spec.rb
@@ -159,39 +159,76 @@ describe ProjectPresenter do
     end
   end
 
+  context 'statistics anchors (empty repo)' do
+    let(:project) { create(:project, :empty_repo) }
+    let(:presenter) { described_class.new(project, current_user: user) }
+
+    describe '#files_anchor_data' do
+      it 'returns files data' do
+        expect(presenter.files_anchor_data).to have_attributes(enabled: true,
+                                                               label: 'Files (0 Bytes)',
+                                                               link: nil)
+      end
+    end
+
+    describe '#commits_anchor_data' do
+      it 'returns commits data' do
+        expect(presenter.commits_anchor_data).to have_attributes(enabled: true,
+                                                                 label: 'Commits (0)',
+                                                                 link: nil)
+      end
+    end
+
+    describe '#branches_anchor_data' do
+      it 'returns branches data' do
+        expect(presenter.branches_anchor_data).to have_attributes(enabled: true,
+                                                                  label: "Branches (0)",
+                                                                  link: nil)
+      end
+    end
+
+    describe '#tags_anchor_data' do
+      it 'returns tags data' do
+        expect(presenter.tags_anchor_data).to have_attributes(enabled: true,
+                                                              label: "Tags (0)",
+                                                              link: nil)
+      end
+    end
+  end
+
   context 'statistics anchors' do
     let(:project) { create(:project, :repository) }
     let(:presenter) { described_class.new(project, current_user: user) }
 
     describe '#files_anchor_data' do
       it 'returns files data' do
-        expect(presenter.files_anchor_data).to eq(OpenStruct.new(enabled: true,
-                                                                 label: 'Files (0 Bytes)',
-                                                                 link: presenter.project_tree_path(project)))
+        expect(presenter.files_anchor_data).to have_attributes(enabled: true,
+                                                               label: 'Files (0 Bytes)',
+                                                               link: presenter.project_tree_path(project))
       end
     end
 
     describe '#commits_anchor_data' do
       it 'returns commits data' do
-        expect(presenter.commits_anchor_data).to eq(OpenStruct.new(enabled: true,
-                                                                   label: 'Commits (0)',
-                                                                   link: presenter.project_commits_path(project, project.repository.root_ref)))
+        expect(presenter.commits_anchor_data).to have_attributes(enabled: true,
+                                                                 label: 'Commits (0)',
+                                                                 link: presenter.project_commits_path(project, project.repository.root_ref))
       end
     end
 
     describe '#branches_anchor_data' do
       it 'returns branches data' do
-        expect(presenter.branches_anchor_data).to eq(OpenStruct.new(enabled: true,
-                                                                    label: "Branches (#{project.repository.branches.size})",
-                                                                    link: presenter.project_branches_path(project)))
+        expect(presenter.branches_anchor_data).to have_attributes(enabled: true,
+                                                                  label: "Branches (#{project.repository.branches.size})",
+                                                                  link: presenter.project_branches_path(project))
       end
     end
 
     describe '#tags_anchor_data' do
       it 'returns tags data' do
-        expect(presenter.tags_anchor_data).to eq(OpenStruct.new(enabled: true,
-                                                                label: "Tags (#{project.repository.tags.size})",
-                                                                link: presenter.project_tags_path(project)))
+        expect(presenter.tags_anchor_data).to have_attributes(enabled: true,
+                                                              label: "Tags (#{project.repository.tags.size})",
+                                                              link: presenter.project_tags_path(project))
       end
     end
 
@@ -199,10 +236,10 @@ describe ProjectPresenter do
       it 'returns new file data if user can push' do
         project.add_developer(user)
 
-        expect(presenter.new_file_anchor_data).to eq(OpenStruct.new(enabled: false,
-                                                                    label: "New file",
-                                                                    link: presenter.project_new_blob_path(project, 'master'),
-                                                                    class_modifier: 'new'))
+        expect(presenter.new_file_anchor_data).to have_attributes(enabled: false,
+                                                                  label: "New file",
+                                                                  link: presenter.project_new_blob_path(project, 'master'),
+                                                                  class_modifier: 'new')
       end
 
       it 'returns nil if user cannot push' do
@@ -227,9 +264,9 @@ describe ProjectPresenter do
           project.add_developer(user)
           allow(project.repository).to receive(:readme).and_return(nil)
 
-          expect(presenter.readme_anchor_data).to eq(OpenStruct.new(enabled: false,
-                                                                    label: 'Add Readme',
-                                                                    link: presenter.add_readme_path))
+          expect(presenter.readme_anchor_data).to have_attributes(enabled: false,
+                                                                  label: 'Add Readme',
+                                                                  link: presenter.add_readme_path)
         end
       end
 
@@ -237,9 +274,9 @@ describe ProjectPresenter do
         it 'returns anchor data' do
           allow(project.repository).to receive(:readme).and_return(double(name: 'readme'))
 
-          expect(presenter.readme_anchor_data).to eq(OpenStruct.new(enabled: true,
-                                                                    label: 'Readme',
-                                                                    link: presenter.readme_path))
+          expect(presenter.readme_anchor_data).to have_attributes(enabled: true,
+                                                                  label: 'Readme',
+                                                                  link: presenter.readme_path)
         end
       end
     end
@@ -250,9 +287,9 @@ describe ProjectPresenter do
           project.add_developer(user)
           allow(project.repository).to receive(:changelog).and_return(nil)
 
-          expect(presenter.changelog_anchor_data).to eq(OpenStruct.new(enabled: false,
-                                                                       label: 'Add Changelog',
-                                                                       link: presenter.add_changelog_path))
+          expect(presenter.changelog_anchor_data).to have_attributes(enabled: false,
+                                                                     label: 'Add Changelog',
+                                                                     link: presenter.add_changelog_path)
         end
       end
 
@@ -260,9 +297,9 @@ describe ProjectPresenter do
         it 'returns anchor data' do
           allow(project.repository).to receive(:changelog).and_return(double(name: 'foo'))
 
-          expect(presenter.changelog_anchor_data).to eq(OpenStruct.new(enabled: true,
-                                                                       label: 'Changelog',
-                                                                       link: presenter.changelog_path))
+          expect(presenter.changelog_anchor_data).to have_attributes(enabled: true,
+                                                                     label: 'Changelog',
+                                                                     link: presenter.changelog_path)
         end
       end
     end
@@ -273,9 +310,9 @@ describe ProjectPresenter do
           project.add_developer(user)
           allow(project.repository).to receive(:license_blob).and_return(nil)
 
-          expect(presenter.license_anchor_data).to eq(OpenStruct.new(enabled: false,
-                                                                     label: 'Add License',
-                                                                     link: presenter.add_license_path))
+          expect(presenter.license_anchor_data).to have_attributes(enabled: false,
+                                                                   label: 'Add license',
+                                                                   link: presenter.add_license_path)
         end
       end
 
@@ -283,9 +320,9 @@ describe ProjectPresenter do
         it 'returns anchor data' do
           allow(project.repository).to receive(:license_blob).and_return(double(name: 'foo'))
 
-          expect(presenter.license_anchor_data).to eq(OpenStruct.new(enabled: true,
-                                                                     label: presenter.license_short_name,
-                                                                     link: presenter.license_path))
+          expect(presenter.license_anchor_data).to have_attributes(enabled: true,
+                                                                   label: presenter.license_short_name,
+                                                                   link: presenter.license_path)
         end
       end
     end
@@ -296,9 +333,9 @@ describe ProjectPresenter do
           project.add_developer(user)
           allow(project.repository).to receive(:contribution_guide).and_return(nil)
 
-          expect(presenter.contribution_guide_anchor_data).to eq(OpenStruct.new(enabled: false,
-                                                                                label: 'Add Contribution guide',
-                                                                                link: presenter.add_contribution_guide_path))
+          expect(presenter.contribution_guide_anchor_data).to have_attributes(enabled: false,
+                                                                              label: 'Add Contribution guide',
+                                                                              link: presenter.add_contribution_guide_path)
         end
       end
 
@@ -306,9 +343,9 @@ describe ProjectPresenter do
         it 'returns anchor data' do
           allow(project.repository).to receive(:contribution_guide).and_return(double(name: 'foo'))
 
-          expect(presenter.contribution_guide_anchor_data).to eq(OpenStruct.new(enabled: true,
-                                                                                label: 'Contribution guide',
-                                                                                link: presenter.contribution_guide_path))
+          expect(presenter.contribution_guide_anchor_data).to have_attributes(enabled: true,
+                                                                              label: 'Contribution guide',
+                                                                              link: presenter.contribution_guide_path)
         end
       end
     end
@@ -318,9 +355,9 @@ describe ProjectPresenter do
         it 'returns anchor data' do
           allow(project).to receive(:auto_devops_enabled?).and_return(true)
 
-          expect(presenter.autodevops_anchor_data).to eq(OpenStruct.new(enabled: true,
-                                                                        label: 'Auto DevOps enabled',
-                                                                        link: nil))
+          expect(presenter.autodevops_anchor_data).to have_attributes(enabled: true,
+                                                                      label: 'Auto DevOps enabled',
+                                                                      link: nil)
         end
       end
 
@@ -330,9 +367,9 @@ describe ProjectPresenter do
           allow(project).to receive(:auto_devops_enabled?).and_return(false)
           allow(project.repository).to receive(:gitlab_ci_yml).and_return(nil)
 
-          expect(presenter.autodevops_anchor_data).to eq(OpenStruct.new(enabled: false,
-                                                                        label: 'Enable Auto DevOps',
-                                                                        link: presenter.project_settings_ci_cd_path(project, anchor: 'autodevops-settings')))
+          expect(presenter.autodevops_anchor_data).to have_attributes(enabled: false,
+                                                                      label: 'Enable Auto DevOps',
+                                                                      link: presenter.project_settings_ci_cd_path(project, anchor: 'autodevops-settings'))
         end
       end
     end
@@ -343,9 +380,9 @@ describe ProjectPresenter do
           project.add_maintainer(user)
           cluster = create(:cluster, projects: [project])
 
-          expect(presenter.kubernetes_cluster_anchor_data).to eq(OpenStruct.new(enabled: true,
-                                                                                label: 'Kubernetes configured',
-                                                                                link: presenter.project_cluster_path(project, cluster)))
+          expect(presenter.kubernetes_cluster_anchor_data).to have_attributes(enabled: true,
+                                                                              label: 'Kubernetes configured',
+                                                                              link: presenter.project_cluster_path(project, cluster))
         end
 
         it 'returns link to clusters page if more than one exists' do
@@ -353,17 +390,17 @@ describe ProjectPresenter do
           create(:cluster, :production_environment, projects: [project])
           create(:cluster, projects: [project])
 
-          expect(presenter.kubernetes_cluster_anchor_data).to eq(OpenStruct.new(enabled: true,
-                                                                                label: 'Kubernetes configured',
-                                                                                link: presenter.project_clusters_path(project)))
+          expect(presenter.kubernetes_cluster_anchor_data).to have_attributes(enabled: true,
+                                                                              label: 'Kubernetes configured',
+                                                                              link: presenter.project_clusters_path(project))
         end
 
         it 'returns link to create a cluster if no cluster exists' do
           project.add_maintainer(user)
 
-          expect(presenter.kubernetes_cluster_anchor_data).to eq(OpenStruct.new(enabled: false,
-                                                                                label: 'Add Kubernetes cluster',
-                                                                                link: presenter.new_project_cluster_path(project)))
+          expect(presenter.kubernetes_cluster_anchor_data).to have_attributes(enabled: false,
+                                                                              label: 'Add Kubernetes cluster',
+                                                                              link: presenter.new_project_cluster_path(project))
         end
       end
 
@@ -380,9 +417,9 @@ describe ProjectPresenter do
         allow(project.repository).to receive(:koding_yml).and_return(nil)
         allow(Gitlab::CurrentSettings).to receive(:koding_enabled?).and_return(true)
 
-        expect(presenter.koding_anchor_data).to eq(OpenStruct.new(enabled: false,
-                                                                  label: 'Set up Koding',
-                                                                  link: presenter.add_koding_stack_path))
+        expect(presenter.koding_anchor_data).to have_attributes(enabled: false,
+                                                                label: 'Set up Koding',
+                                                                link: presenter.add_koding_stack_path)
       end
 
       it 'returns nil if user cannot push' do
diff --git a/spec/views/projects/_home_panel.html.haml_spec.rb b/spec/views/projects/_home_panel.html.haml_spec.rb
index b56940a9613..fc1fe5739c3 100644
--- a/spec/views/projects/_home_panel.html.haml_spec.rb
+++ b/spec/views/projects/_home_panel.html.haml_spec.rb
@@ -9,6 +9,7 @@ describe 'projects/_home_panel' do
 
       allow(view).to receive(:current_user).and_return(user)
       allow(view).to receive(:can?).with(user, :read_project, project).and_return(false)
+      allow(project).to receive(:license_anchor_data).and_return(false)
     end
 
     context 'when user is signed in' do
@@ -63,6 +64,7 @@ describe 'projects/_home_panel' do
 
       allow(view).to receive(:current_user).and_return(user)
       allow(view).to receive(:can?).with(user, :read_project, project).and_return(false)
+      allow(project).to receive(:license_anchor_data).and_return(false)
     end
 
     context 'has no badges' do
@@ -71,8 +73,7 @@ describe 'projects/_home_panel' do
       it 'should not render any badge' do
         render
 
-        expect(rendered).to have_selector('.project-badges')
-        expect(rendered).not_to have_selector('.project-badges > a')
+        expect(rendered).not_to have_selector('.project-badges')
       end
     end
 
@@ -118,6 +119,7 @@ describe 'projects/_home_panel' do
       assign(:project, project)
 
       allow(view).to receive(:current_user).and_return(user)
+      allow(project).to receive(:license_anchor_data).and_return(false)
     end
 
     context 'user can read project' do