Improve group settings UI

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/gl_bootstrap.scss

@@ -237,4 +237,15 @@ ul.breadcrumb {
       float: right;
     }
   }
+
+  .panel-body {
+    form {
+      margin: 0;
+    }
+
+    .form-actions {
+      margin-bottom: 0;
+      background: #FFF;
+    }
+  }
 }

app/controllers/groups_controller.rb

@@ -9,7 +9,7 @@ class GroupsController < ApplicationController
   before_filter :authorize_create_group!, only: [:new, :create]
 
   # Load group projects
-  before_filter :projects, except: [:new, :create]
+  before_filter :load_projects, except: [:new, :create, :projects, :edit, :update]
 
   before_filter :default_filter, only: [:issues, :merge_requests]
 
@@ -79,9 +79,13 @@ class GroupsController < ApplicationController
   def edit
   end
 
+  def projects
+    @projects = @group.projects.page(params[:page])
+  end
+
   def update
     if @group.update_attributes(params[:group])
-      redirect_to @group, notice: 'Group was successfully updated.'
+      redirect_to edit_group_path(@group), notice: 'Group was successfully updated.'
     else
       render action: "edit"
     end
@@ -99,7 +103,7 @@ class GroupsController < ApplicationController
     @group ||= Group.find_by(path: params[:id])
   end
 
-  def projects
+  def load_projects
     @projects ||= ProjectsFinder.new.execute(current_user, group: group).sorted_by_activity.non_archived
   end
 

app/views/groups/_settings_nav.html.haml

+%ul.nav.nav-pills.nav-stacked.nav-stacked-menu
+  = nav_link(path: 'groups#edit') do
+    = link_to edit_group_path(@group) do
+      %i.icon-edit
+      Group
+  = nav_link(path: 'groups#projects') do
+    = link_to projects_group_path(@group) do
+      %i.icon-folder-close
+      Projects
+

app/views/groups/edit.html.haml

 .row
   .col-md-2
-    %ul.nav.nav-pills.nav-stacked.nav-stacked-menu
-      %li.active
-        = link_to '#tab-edit', 'data-toggle' => 'tab' do
-          %i.icon-edit
-          Group
-      %li
-        = link_to '#tab-projects', 'data-toggle' => 'tab' do
-          %i.icon-folder-close
-          Projects
-      %li
-        = link_to '#tab-remove', 'data-toggle' => 'tab' do
-          %i.icon-remove-sign
-          Remove
-
+    = render 'settings_nav'
   .col-md-10
-    .tab-content
-      .tab-pane.active#tab-edit
     .panel.panel-default
       .panel-heading
         %strong= @group.name
         group settings:
-          %div.form-holder
+      .panel-body
         = form_for @group, html: { multipart: true, class: "form-horizontal" }, authenticity_token: true do |f|
           - if @group.errors.any?
             .alert.alert-danger
@@ -60,36 +45,12 @@
           .form-actions
             = f.submit 'Save group', class: "btn btn-save"
 
-      .tab-pane#tab-projects
-        .panel.panel-default
-          .panel-heading
-            %strong= @group.name
-            projects:
-            - if can? current_user, :manage_group, @group
-              %span.pull-right
-                = link_to new_project_path(namespace_id: @group.id), class: "btn btn-tiny" do
-                  %i.icon-plus
-                  New Project
-          %ul.well-list
-            - @group.projects.each do |project|
-              %li
-                .list-item-name
-                  = visibility_level_icon(project.visibility_level)
-                  = link_to project.name_with_namespace, project
-                .pull-right
-                  = link_to 'Members', project_team_index_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
-                  = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
-                  = link_to 'Remove', project, data: { confirm: remove_project_message(project)}, method: :delete, class: "btn btn-small btn-remove"
-            - if @group.projects.blank?
-              .nothing-here-block This group has no projects yet
-
-      .tab-pane#tab-remove
-        .panel.panel-default.panel.panel-danger
+    .panel.panel-danger
       .panel-heading Remove group
       .panel-body
         %p
           Removing group will cause all child projects and resources to be removed.
-            %p
+          %br
           %strong Removed group can not be restored!
 
         = link_to 'Remove Group', @group, data: {confirm: 'Removed group can not be restored! Are you sure?'}, method: :delete, class: "btn btn-remove"

app/views/groups/projects.html.haml

+.row
+  .col-md-2
+    = render 'settings_nav'
+  .col-md-10
+    .panel.panel-default
+      .panel-heading
+        %strong= @group.name
+        projects:
+        - if can? current_user, :manage_group, @group
+          .panel-head-actions
+            = link_to new_project_path(namespace_id: @group.id), class: "btn btn-new" do
+              %i.icon-plus
+              New Project
+      %ul.well-list
+        - @projects.each do |project|
+          %li
+            .list-item-name
+              = visibility_level_icon(project.visibility_level)
+              %strong= link_to project.name_with_namespace, project
+              %span.label.label-gray
+                = repository_size(project)
+            .pull-right
+              = link_to 'Members', project_team_index_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
+              = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
+              = link_to 'Remove', project, data: { confirm: remove_project_message(project)}, method: :delete, class: "btn btn-small btn-remove"
+        - if @projects.blank?
+          .nothing-here-block This group has no projects yet
+
+    = paginate @projects, theme: "gitlab"

config/routes.rb

@@ -146,6 +146,7 @@ Gitlab::Application.routes.draw do
       get :issues
       get :merge_requests
       get :members
+      get :projects
     end
 
     resources :users_groups, only: [:create, :update, :destroy]