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

@@ -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; }

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 {

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
 

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

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?

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 }
-
-      %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 }
+  - 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
-        = _('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}"
-
-          %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
+    .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= _('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= _('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 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
+        %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
 
-            - 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

changelogs/unreleased/56833-project-improve-empty-repository-state-ui-fe.yml

+---
+title: 'Project: Improve empty repository state UI'
+merge_request: 26024
+author:
+type: other

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: <code>https://username:password@gitlab.company.com/group/project.git</code>."
 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 ""
 

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

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