Improvements to Project overview UI

6 files changed, 45 insertions, 4 deletions

diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb
index 5318ab4ddef..a7ce7667916 100644
--- a/app/helpers/notifications_helper.rb
+++ b/app/helpers/notifications_helper.rb
@@ -93,4 +93,11 @@ module NotificationsHelper
       s_(event.to_s.humanize)
     end
   end
+
+  def notification_setting_icon(notification_setting)
+    sprite_icon(
+      notification_setting.disabled? ? "notifications-off" : "notifications",
+      css_class: "icon notifications-icon js-notifications-icon"
+    )
+  end
 end
diff --git a/app/presenters/project_presenter.rb b/app/presenters/project_presenter.rb
index 161eebcfb3f..9afbaf035c7 100644
--- a/app/presenters/project_presenter.rb
+++ b/app/presenters/project_presenter.rb
@@ -37,7 +37,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
       autodevops_anchor_data(show_auto_devops_callout: show_auto_devops_callout),
       kubernetes_cluster_anchor_data,
       gitlab_ci_anchor_data
-    ].compact.reject(&:is_link)
+    ].compact.reject(&:is_link).sort_by.with_index { |item, idx| [item.class_modifier ? 0 : 1, idx] }
   end
 
   def empty_repo_statistics_anchors
@@ -259,7 +259,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
     if current_user && can?(current_user, :admin_pipeline, project) && repository.gitlab_ci_yml.blank? && !show_auto_devops_callout
       if auto_devops_enabled?
         AnchorData.new(false,
-                       statistic_icon('doc-text') + _('Auto DevOps enabled'),
+                       statistic_icon('settings') + _('Auto DevOps enabled'),
                        project_settings_ci_cd_path(project, anchor: 'autodevops-settings'),
                        'default')
       else
diff --git a/app/views/shared/notifications/_new_button.html.haml b/app/views/shared/notifications/_new_button.html.haml
index 6d26dbebbc8..af8ab992f0e 100644
--- a/app/views/shared/notifications/_new_button.html.haml
+++ b/app/views/shared/notifications/_new_button.html.haml
@@ -10,14 +10,14 @@
         %div{ class: ("btn-group" if notification_setting.custom?) }
           - if notification_setting.custom?
             %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: _("Notification setting - %{notification_title}") % { notification_title: notification_title(notification_setting.level) }, class: "#{btn_class}", "aria-label" => _("Notification setting - %{notification_title}") % { notification_title: notification_title(notification_setting.level) }, data: { container: "body", placement: 'top', toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
-              = sprite_icon("notifications", css_class: "icon notifications-icon js-notifications-icon")
+              = notification_setting_icon(notification_setting)
               %span.js-notification-loading.fa.hidden
             %button.btn.dropdown-toggle{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" }, class: "#{btn_class}" }
               = sprite_icon("arrow-down", css_class: "icon mr-0")
               .sr-only Toggle dropdown
           - else
             %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: "Notification setting - #{notification_title(notification_setting.level)}", class: "#{btn_class}", "aria-label" => "Notification setting: #{notification_title(notification_setting.level)}", data: { container: "body", placement: 'top', toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
-              = sprite_icon("notifications", css_class: "icon notifications-icon js-notifications-icon")
+              = notification_setting_icon(notification_setting)
               %span.js-notification-loading.fa.hidden
               = sprite_icon("arrow-down", css_class: "icon")
 
diff --git a/changelogs/unreleased/xanf-gitlab-ce-improve-project-overview.yml b/changelogs/unreleased/xanf-gitlab-ce-improve-project-overview.yml
new file mode 100644
index 00000000000..9755540953a
--- /dev/null
+++ b/changelogs/unreleased/xanf-gitlab-ce-improve-project-overview.yml
@@ -0,0 +1,5 @@
+---
+title: Improve icons and button order in project overview
+merge_request: 26796
+author:
+type: other
diff --git a/spec/features/projects/show/user_manages_notifications_spec.rb b/spec/features/projects/show/user_manages_notifications_spec.rb
index 88f3397608f..e9dd1dc0f66 100644
--- a/spec/features/projects/show/user_manages_notifications_spec.rb
+++ b/spec/features/projects/show/user_manages_notifications_spec.rb
@@ -20,6 +20,16 @@ describe 'Projects > Show > User manages notifications', :js do
 
     click_notifications_button
     expect(find('.update-notification.is-active')).to have_content('On mention')
+    expect(find('.notifications-icon use')[:'xlink:href']).to end_with('#notifications')
+  end
+
+  it 'changes the notification setting to disabled' do
+    click_notifications_button
+    click_link 'Disabled'
+
+    wait_for_requests
+
+    expect(find('.notifications-icon use')[:'xlink:href']).to end_with('#notifications-off')
   end
 
   context 'custom notification settings' do
diff --git a/spec/presenters/project_presenter_spec.rb b/spec/presenters/project_presenter_spec.rb
index 456de5f1b9a..5bf80f6e318 100644
--- a/spec/presenters/project_presenter_spec.rb
+++ b/spec/presenters/project_presenter_spec.rb
@@ -411,4 +411,23 @@ describe ProjectPresenter do
       end
     end
   end
+
+  describe '#statistics_buttons' do
+    let(:project) { build(:project) }
+    let(:presenter) { described_class.new(project, current_user: user) }
+
+    it 'orders the items correctly' do
+      allow(project.repository).to receive(:readme).and_return(double(name: 'readme'))
+      allow(project.repository).to receive(:changelog).and_return(nil)
+      allow(project.repository).to receive(:contribution_guide).and_return(double(name: 'foo'))
+      allow(presenter).to receive(:filename_path).and_return('fake/path')
+      allow(presenter).to receive(:contribution_guide_path).and_return('fake_path')
+
+      buttons = presenter.statistics_buttons(show_auto_devops_callout: false)
+      expect(buttons.map(&:label)).to start_with(
+        a_string_including('README'),
+        a_string_including('CONTRIBUTING')
+      )
+    end
+  end
 end