Move the clone button to the tree controls area

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/17752

app/assets/stylesheets/pages/tree.scss

@@ -21,10 +21,6 @@
           margin-left: 8px;
         }
 
-        .btn-group {
-          margin-left: 10px;
-        }
-
         .control {
           float: left;
           margin-left: 10px;

app/presenters/project_presenter.rb

@@ -208,7 +208,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
       AnchorData.new(false,
                      statistic_icon + _('New file'),
                      project_new_blob_path(project, default_branch || 'master'),
-                     'success')
+                     'missing')
     end
   end
 

app/views/projects/_home_panel.html.haml

@@ -49,13 +49,6 @@
         = render 'projects/buttons/star'
         = render 'projects/buttons/fork'
 
-      - if can?(current_user, :download_code, @project)
-        .project-clone-holder.d-inline-flex.d-md-none.btn-block
-          = render "shared/mobile_clone_panel"
-
-        .project-clone-holder.d-none.d-md-inline-flex
-          = render "projects/buttons/clone"
-
   - if can?(current_user, :download_code, @project)
     %nav.project-stats
       .nav-links.quick-links

app/views/projects/buttons/_clone.html.haml

 - project = project || @project
+- dropdown_class = local_assigns.fetch(:dropdown_class, '')
 
-.git-clone-holder.js-git-clone-holder.input-group
-  %a#clone-dropdown.input-group-text.btn.btn-primary.btn-xs.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
+.git-clone-holder.js-git-clone-holder
+  %a#clone-dropdown.btn.btn-primary.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
     %span.append-right-4.js-clone-dropdown-label
       = _('Clone')
     = sprite_icon("arrow-down", css_class: "icon")
-  %ul.p-3.dropdown-menu.dropdown-menu-right.dropdown-menu-large.dropdown-menu-selectable.clone-options-dropdown.qa-clone-options
+  %ul.p-3.dropdown-menu.dropdown-menu-large.dropdown-menu-selectable.clone-options-dropdown.qa-clone-options{ class: dropdown_class }
     - if ssh_enabled?
       %li
         %label.label-bold

app/views/projects/empty.html.haml

@@ -11,9 +11,14 @@
 
   - if @project.can_current_user_push_code?
     %p.append-bottom-0
-      = _('You can create files directly in GitLab using one of the following options.')
+      = _('You can get started by cloning the repository or start adding files to it with one of the following options.')
 
   .project-buttons.qa-quick-actions
+    .project-clone-holder.d-block.d-md-none.mt-2.mr-2
+      = render "shared/mobile_clone_panel"
+
+    .project-clone-holder.d-none.d-md-inline-block.mt-2.mr-2.float-left
+      = render "projects/buttons/clone"
     = render 'stat_anchor_list', anchors: @project.empty_repo_statistics_buttons
 
   - if can?(current_user, :push_code, @project)

app/views/projects/tree/_tree_header.html.haml

@@ -101,3 +101,9 @@
       = render "projects/buttons/xcode_link"
 
   = render 'projects/buttons/download', project: @project, ref: @ref
+
+  .project-clone-holder.d-block.d-md-none.mt-sm-2.mt-md-0>
+    = render "shared/mobile_clone_panel"
+
+  .project-clone-holder.d-none.d-md-inline-block>
+    = render "projects/buttons/clone", dropdown_class: 'dropdown-menu-right'

app/views/shared/_mobile_clone_panel.html.haml

@@ -4,7 +4,7 @@
 
 .btn-group.mobile-git-clone.js-mobile-git-clone.btn-block
   = clipboard_button(button_text: default_clone_label, text: default_url_to_repo(project), hide_button_icon: true, class: "btn-primary flex-fill bold justify-content-center input-group-text clone-dropdown-btn js-clone-dropdown-label")
-  %button.btn.btn-primary.dropdown-toggle.js-dropdown-toggle.flex-grow-0.d-flex-center{ type: "button", data: { toggle: "dropdown" } }
+  %button.btn.btn-primary.dropdown-toggle.js-dropdown-toggle.flex-grow-0.d-flex-center.w-auto.ml-0{ type: "button", data: { toggle: "dropdown" } }
     = sprite_icon("arrow-down", css_class: "dropdown-btn-icon icon")
   %ul.dropdown-menu.dropdown-menu-selectable.dropdown-menu-right.clone-options-dropdown{ data: { dropdown: true } }
     - if ssh_enabled?

changelogs/unreleased/gt-move-clone-button-to-the-tree-controls-area.yml

+---
+title: Move the clone button to the tree controls area
+merge_request: 17752
+author: Ablay Keldibek
+type: changed

locale/gitlab.pot

@@ -21550,9 +21550,6 @@ msgstr ""
 msgid "You can create a new one or check them in your Personal Access Tokens settings %{pat_link}"
 msgstr ""
 
-msgid "You can create files directly in GitLab using one of the following options."
-msgstr ""
-
 msgid "You can create new ones at your %{pat_link_start}Personal Access Tokens%{pat_link_end} settings"
 msgstr ""
 
@@ -21568,6 +21565,9 @@ msgstr ""
 msgid "You can filter by 'days to merge' by clicking on the columns in the chart."
 msgstr ""
 
+msgid "You can get started by cloning the repository or start adding files to it with one of the following options."
+msgstr ""
+
 msgid "You can invite a new member to <strong>%{project_name}</strong> or invite another group."
 msgstr ""
 

spec/presenters/project_presenter_spec.rb

@@ -297,7 +297,7 @@ describe ProjectPresenter do
           is_link: false,
           label: a_string_including("New file"),
           link: presenter.project_new_blob_path(project, 'master'),
-          class_modifier: 'success'
+          class_modifier: 'missing'
         )
       end