From b1318cd18873971041a8fa0ec52cfbdc420a007f Mon Sep 17 00:00:00 2001 From: Martin Wortschack Date: Tue, 12 Mar 2019 15:20:52 +0100 Subject: [PATCH] Clean up empty repository state UI - Remove irrelevante information - Remove horizontal scrolling on smaller viewports - Hide auto devops flash message for empty projects --- app/assets/stylesheets/framework/common.scss | 4 + app/assets/stylesheets/pages/projects.scss | 4 - app/presenters/project_presenter.rb | 10 +- app/views/projects/_flash_messages.html.haml | 3 +- app/views/projects/_home_panel.html.haml | 5 +- app/views/projects/empty.html.haml | 133 +++++++----------- ...t-improve-empty-repository-state-ui-fe.yml | 5 + locale/gitlab.pot | 42 ++---- .../show/user_sees_git_instructions_spec.rb | 2 +- .../user_sees_setup_shortcut_buttons_spec.rb | 58 ++------ 10 files changed, 93 insertions(+), 173 deletions(-) create mode 100644 changelogs/unreleased/56833-project-improve-empty-repository-state-ui-fe.yml diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index aad5150c0b5..d47931a49e4 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -376,18 +376,21 @@ img.emoji { .prepend-top-default { margin-top: $gl-padding !important; } .prepend-top-16 { margin-top: 16px; } .prepend-top-20 { margin-top: 20px; } +.prepend-top-32 { margin-top: 32px; } .prepend-left-4 { margin-left: 4px; } .prepend-left-5 { margin-left: 5px; } .prepend-left-8 { margin-left: 8px; } .prepend-left-10 { margin-left: 10px; } .prepend-left-default { margin-left: $gl-padding; } .prepend-left-20 { margin-left: 20px; } +.prepend-left-32 { margin-left: 32px; } .append-right-4 { margin-right: 4px; } .append-right-5 { margin-right: 5px; } .append-right-8 { margin-right: 8px; } .append-right-10 { margin-right: 10px; } .append-right-default { margin-right: $gl-padding; } .append-right-20 { margin-right: 20px; } +.prepend-right-32 { margin-right: 32px; } .append-bottom-0 { margin-bottom: 0; } .append-bottom-4 { margin-bottom: $gl-padding-4; } .append-bottom-5 { margin-bottom: 5px; } @@ -396,6 +399,7 @@ img.emoji { .append-bottom-15 { margin-bottom: 15px; } .append-bottom-20 { margin-bottom: 20px; } .append-bottom-default { margin-bottom: $gl-padding; } +.prepend-bottom-32 { margin-bottom: 32px; } .inline { display: inline-block; } .center { text-align: center; } .vertical-align-middle { vertical-align: middle; } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 1349845f300..8e53876eb4f 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -693,10 +693,6 @@ } } -.project-empty-note-panel { - border-bottom: 1px solid $border-color; -} - .project-stats, .project-buttons { .scrolling-tabs-container { diff --git a/app/presenters/project_presenter.rb b/app/presenters/project_presenter.rb index 000b7c433a2..161eebcfb3f 100644 --- a/app/presenters/project_presenter.rb +++ b/app/presenters/project_presenter.rb @@ -42,11 +42,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated def empty_repo_statistics_anchors [ - license_anchor_data, - commits_anchor_data, - branches_anchor_data, - tags_anchor_data, - files_anchor_data + license_anchor_data ].compact.select { |item| item.is_link } end @@ -55,9 +51,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated new_file_anchor_data, readme_anchor_data, changelog_anchor_data, - contribution_guide_anchor_data, - autodevops_anchor_data, - kubernetes_cluster_anchor_data + contribution_guide_anchor_data ].compact.reject { |item| item.is_link } end diff --git a/app/views/projects/_flash_messages.html.haml b/app/views/projects/_flash_messages.html.haml index 7a5fff96676..b72f0e39b23 100644 --- a/app/views/projects/_flash_messages.html.haml +++ b/app/views/projects/_flash_messages.html.haml @@ -5,4 +5,5 @@ - if current_user && can?(current_user, :download_code, project) = render 'shared/no_ssh' = render 'shared/no_password' - = render 'shared/auto_devops_implicitly_enabled_banner', project: project + - unless project.empty_repo? + = render 'shared/auto_devops_implicitly_enabled_banner', project: project diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml index 1d7287410ea..4ac5a74c85c 100644 --- a/app/views/projects/_home_panel.html.haml +++ b/app/views/projects/_home_panel.html.haml @@ -57,7 +57,10 @@ - if can?(current_user, :download_code, @project) %nav.project-stats .nav-links.quick-links - = render 'stat_anchor_list', anchors: @project.statistics_anchors(show_auto_devops_callout: show_auto_devops_callout) + - if @project.empty_repo? + = render 'stat_anchor_list', anchors: @project.empty_repo_statistics_anchors + - else + = render 'stat_anchor_list', anchors: @project.statistics_anchors(show_auto_devops_callout: show_auto_devops_callout) .home-panel-home-desc.mt-1 - if @project.description.present? diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml index 081990ac9b7..9fa31c147eb 100644 --- a/app/views/projects/empty.html.haml +++ b/app/views/projects/empty.html.haml @@ -7,89 +7,64 @@ %div{ class: [container_class, ("limit-container-width" unless fluid_layout)] } = render "home_panel" - .project-empty-note-panel - %h4.append-bottom-20 - = _('The repository for this project is empty') + %h4.prepend-top-0.append-bottom-8 + = _('The repository for this project is empty') - - if @project.can_current_user_push_code? - %p - - link_to_cli = link_to _('command line instructions'), '#repo-command-line-instructions' - = _('If you already have files you can push them using the %{link_to_cli} below.').html_safe % { link_to_cli: link_to_cli } - %p - %em - - link_to_protected_branches = link_to _('Learn more about protected branches'), help_page_path('user/project/protected_branches') - = _('Note that the master branch is automatically protected. %{link_to_protected_branches}').html_safe % { link_to_protected_branches: link_to_protected_branches } + - if @project.can_current_user_push_code? + %p.append-bottom-0 + = _('You can create files directly in GitLab using one of the following options.') - %hr - %p - - link_to_auto_devops_settings = link_to(s_('AutoDevOps|enable Auto DevOps'), project_settings_ci_cd_path(@project, anchor: 'autodevops-settings')) - - link_to_add_kubernetes_cluster = link_to(s_('AutoDevOps|add a Kubernetes cluster'), new_project_cluster_path(@project)) - = s_('AutoDevOps|You can automatically build and test your application if you %{link_to_auto_devops_settings} for this project. You can automatically deploy it as well, if you %{link_to_add_kubernetes_cluster}.').html_safe % { link_to_auto_devops_settings: link_to_auto_devops_settings, link_to_add_kubernetes_cluster: link_to_add_kubernetes_cluster } - - %hr - %p - = _('Otherwise it is recommended you start with one of the options below.') - .prepend-top-20 - - %nav.project-buttons - .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller.qa-quick-actions - .fade-left= icon('angle-left') - .fade-right= icon('angle-right') - .nav-links.scrolling-tabs.quick-links - = render 'stat_anchor_list', anchors: @project.empty_repo_statistics_buttons + .project-buttons.qa-quick-actions + = render 'stat_anchor_list', anchors: @project.empty_repo_statistics_buttons - if can?(current_user, :push_code, @project) - %div - .prepend-top-20 - .empty_wrapper - %h3#repo-command-line-instructions.page-title-empty - = _('Command line instructions') - .git-empty.js-git-empty - %fieldset - %h5= _('Git global setup') - %pre.bg-light - :preserve - git config --global user.name "#{h git_user_name}" - git config --global user.email "#{h git_user_email}" + .empty-wrapper.prepend-top-32 + %h3#repo-command-line-instructions.page-title-empty + = _('Command line instructions') + %p + = _('You can also upload existing files from your computer using the instructions below.') + .git-empty.js-git-empty + %fieldset + %h5= _('Git global setup') + %pre.bg-light + :preserve + git config --global user.name "#{h git_user_name}" + git config --global user.email "#{h git_user_email}" - %fieldset - %h5= _('Create a new repository') - %pre.bg-light - :preserve - git clone #{ content_tag(:span, default_url_to_repo, class: 'js-clone')} - cd #{h @project.path} - touch README.md - git add README.md - git commit -m "add README" - - if @project.can_current_user_push_to_default_branch? - %span>< - git push -u origin master + %fieldset + %h5= _('Create a new repository') + %pre.bg-light + :preserve + git clone #{ content_tag(:span, default_url_to_repo, class: 'js-clone')} + cd #{h @project.path} + touch README.md + git add README.md + git commit -m "add README" + - if @project.can_current_user_push_to_default_branch? + %span>< + git push -u origin master - %fieldset - %h5= _('Existing folder') - %pre.bg-light - :preserve - cd existing_folder - git init - git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'js-clone')} - git add . - git commit -m "Initial commit" - - if @project.can_current_user_push_to_default_branch? - %span>< - git push -u origin master + %fieldset + %h5= _('Push an existing folder') + %pre.bg-light + :preserve + cd existing_folder + git init + git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'js-clone')} + git add . + git commit -m "Initial commit" + - if @project.can_current_user_push_to_default_branch? + %span>< + git push -u origin master - %fieldset - %h5= _('Existing Git repository') - %pre.bg-light - :preserve - cd existing_repo - git remote rename origin old-origin - git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'js-clone')} - - if @project.can_current_user_push_to_default_branch? - %span>< - git push -u origin --all - git push -u origin --tags - - - if can? current_user, :remove_project, @project - .prepend-top-20 - = link_to _('Remove project'), [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-inverted btn-remove float-right" + %fieldset + %h5= _('Push an existing Git repository') + %pre.bg-light + :preserve + cd existing_repo + git remote rename origin old-origin + git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'js-clone')} + - if @project.can_current_user_push_to_default_branch? + %span>< + git push -u origin --all + git push -u origin --tags diff --git a/changelogs/unreleased/56833-project-improve-empty-repository-state-ui-fe.yml b/changelogs/unreleased/56833-project-improve-empty-repository-state-ui-fe.yml new file mode 100644 index 00000000000..19cf3d69db1 --- /dev/null +++ b/changelogs/unreleased/56833-project-improve-empty-repository-state-ui-fe.yml @@ -0,0 +1,5 @@ +--- +title: 'Project: Improve empty repository state UI' +merge_request: 26024 +author: +type: other diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 90dab37a33b..25ac8e35db3 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -966,15 +966,6 @@ msgstr "" msgid "AutoDevOps|The Auto DevOps pipeline has been enabled and will be used if no alternative CI configuration file is found. %{more_information_link}" msgstr "" -msgid "AutoDevOps|You can automatically build and test your application if you %{link_to_auto_devops_settings} for this project. You can automatically deploy it as well, if you %{link_to_add_kubernetes_cluster}." -msgstr "" - -msgid "AutoDevOps|add a Kubernetes cluster" -msgstr "" - -msgid "AutoDevOps|enable Auto DevOps" -msgstr "" - msgid "Automatically marked as default internal user" msgstr "" @@ -3373,12 +3364,6 @@ msgstr "" msgid "Except policy:" msgstr "" -msgid "Existing Git repository" -msgstr "" - -msgid "Existing folder" -msgstr "" - msgid "Existing members and groups" msgstr "" @@ -4073,9 +4058,6 @@ msgstr "" msgid "If enabled" msgstr "" -msgid "If you already have files you can push them using the %{link_to_cli} below." -msgstr "" - msgid "If your HTTP repository is not publicly accessible, add authentication information to the URL: https://username:password@gitlab.company.com/group/project.git." msgstr "" @@ -4540,9 +4522,6 @@ msgstr "" msgid "Learn more about Kubernetes" msgstr "" -msgid "Learn more about protected branches" -msgstr "" - msgid "Learn more about signing commits" msgstr "" @@ -5207,9 +5186,6 @@ msgstr "" msgid "Not started" msgstr "" -msgid "Note that the master branch is automatically protected. %{link_to_protected_branches}" -msgstr "" - msgid "Note that this invitation was sent to %{mail_to_invite_email}, but you are signed in as %{link_to_current_user} with email %{mail_to_current_user}." msgstr "" @@ -5401,9 +5377,6 @@ msgstr "" msgid "Other Labels" msgstr "" -msgid "Otherwise it is recommended you start with one of the options below." -msgstr "" - msgid "Outbound requests" msgstr "" @@ -6262,6 +6235,12 @@ msgstr "" msgid "Push" msgstr "" +msgid "Push an existing Git repository" +msgstr "" + +msgid "Push an existing folder" +msgstr "" + msgid "Push events" msgstr "" @@ -8765,6 +8744,12 @@ msgstr "" msgid "You can also star a label to make it a priority label." msgstr "" +msgid "You can also upload existing files from your computer using the instructions below." +msgstr "" + +msgid "You can create files directly in GitLab using one of the following options." +msgstr "" + msgid "You can easily contribute to them by requesting to join these groups." msgstr "" @@ -8969,9 +8954,6 @@ msgstr "" msgid "branch name" msgstr "" -msgid "command line instructions" -msgstr "" - msgid "commented on %{link_to_project}" msgstr "" 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 ffa80235083..0d59ef4a727 100644 --- a/spec/features/projects/show/user_sees_git_instructions_spec.rb +++ b/spec/features/projects/show/user_sees_git_instructions_spec.rb @@ -13,7 +13,7 @@ describe 'Projects > Show > User sees Git instructions' do it 'shows Git command line instructions' do click_link 'Create empty repository' - page.within '.empty_wrapper' do + page.within '.empty-wrapper' do expect(page).to have_content('Command line instructions') 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 dcca1d388c7..58bd20d7551 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 @@ -20,18 +20,18 @@ describe 'Projects > Show > User sees setup shortcut buttons' do visit project_path(project) end - it 'no Auto DevOps button if can not manage pipelines' 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 '"Auto DevOps enabled" button not linked' do + it 'Project buttons are not visible' do visit project_path(project) page.within('.project-buttons') do - expect(page).to have_text('Auto DevOps enabled') + expect(page).not_to have_link('New file') + expect(page).not_to have_link('Add README') + expect(page).not_to have_link('Add CHANGELOG') + expect(page).not_to have_link('Add CONTRIBUTING') + expect(page).not_to have_link('Enable Auto DevOps') + expect(page).not_to have_link('Auto DevOps enabled') + expect(page).not_to have_link('Add Kubernetes cluster') + expect(page).not_to have_link('Kubernetes configured') end end end @@ -61,46 +61,6 @@ describe 'Projects > Show > User sees setup shortcut buttons' do expect(page).to have_link('Add license', href: presenter.add_license_path) end end - - describe 'Auto DevOps button' do - context 'when Auto DevOps is enabled' do - it '"Auto DevOps enabled" anchor linked to settings page' do - visit project_path(project) - - 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 - end - - context 'when Auto DevOps is not enabled' 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-buttons') do - expect(page).to have_link('Enable Auto DevOps', href: project_settings_ci_cd_path(project, anchor: 'autodevops-settings')) - end - end - end - end - - describe 'Kubernetes cluster button' do - it '"Add Kubernetes cluster" button linked to clusters page' do - page.within('.project-buttons') do - expect(page).to have_link('Add Kubernetes cluster', href: new_project_cluster_path(project)) - end - end - - it '"Kubernetes cluster" anchor linked to cluster page' do - cluster = create(:cluster, :provided_by_gcp, projects: [project]) - - visit project_path(project) - - page.within('.project-buttons') do - expect(page).to have_link('Kubernetes configured', href: project_cluster_path(project, cluster)) - end - end - end end end