Merge branch 'add-field-for-group-name' into 'master'

Add a name field to the group edit form

See merge request !10502

12 files changed, 88 insertions, 23 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 4e68f9c77e9..f277e1dddc7 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -37,6 +37,7 @@
 import Issue from './issue';
 
 import BindInOut from './behaviors/bind_in_out';
+import Group from './group';
 import GroupName from './group_name';
 import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
@@ -271,8 +272,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'groups:create':
         case 'admin:groups:create':
           BindInOut.initAll();
-        case 'groups:new':
-        case 'admin:groups:new':
+          new Group();
+          new GroupAvatar();
+          break;
         case 'groups:edit':
         case 'admin:groups:edit':
           new GroupAvatar();
diff --git a/app/assets/javascripts/group.js b/app/assets/javascripts/group.js
new file mode 100644
index 00000000000..7732edde1e7
--- /dev/null
+++ b/app/assets/javascripts/group.js
@@ -0,0 +1,21 @@
+export default class Group {
+  constructor() {
+    this.groupPath = $('#group_path');
+    this.groupName = $('#group_name');
+    this.updateHandler = this.update.bind(this);
+    this.resetHandler = this.reset.bind(this);
+    if (this.groupName.val() === '') {
+      this.groupPath.on('keyup', this.updateHandler);
+      this.groupName.on('keydown', this.resetHandler);
+    }
+  }
+
+  update() {
+    this.groupName.val(this.groupPath.val());
+  }
+
+  reset() {
+    this.groupPath.off('keyup', this.updateHandler);
+    this.groupName.off('keydown', this.resetHandler);
+  }
+}
diff --git a/app/views/shared/_group_form.html.haml b/app/views/shared/_group_form.html.haml
index 8869d510aef..90ae3f06a98 100644
--- a/app/views/shared/_group_form.html.haml
+++ b/app/views/shared/_group_form.html.haml
@@ -1,12 +1,8 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('group')
 - parent = GroupFinder.new(current_user).execute(id: params[:parent_id] || @group.parent_id)
 - group_path = root_url
 - group_path << parent.full_path + '/' if parent
-- if @group.persisted?
-  .form-group
-    = f.label :name, class: 'control-label' do
-      Group name
-    .col-sm-10
-      = f.text_field :name, placeholder: 'open-source', class: 'form-control'
 
 .form-group
   = f.label :path, class: 'control-label' do
@@ -20,7 +16,7 @@
       = f.text_field :path, placeholder: 'open-source', class: 'form-control',
         autofocus: local_assigns[:autofocus] || false, required: true,
         pattern: Gitlab::Regex::NAMESPACE_REGEX_STR_JS,
-        title: 'Please choose a group name with no special characters.',
+        title: 'Please choose a group path with no special characters.',
         "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
       - if parent
         = f.hidden_field :parent_id, value: parent.id
@@ -33,6 +29,14 @@
           %li It will change web url for access group and group projects.
           %li It will change the git path to repositories under this group.
 
+.form-group.group-name-holder
+  = f.label :name, class: 'control-label' do
+    Group name
+  .col-sm-10
+    = f.text_field :name, class: 'form-control',
+      required: true,
+      title: 'You can choose a descriptive name different from the path.'
+
 .form-group.group-description-holder
   = f.label :description, class: 'control-label'
   .col-sm-10
diff --git a/changelogs/unreleased/add-field-for-group-name.yml b/changelogs/unreleased/add-field-for-group-name.yml
new file mode 100644
index 00000000000..0fe511a4fa1
--- /dev/null
+++ b/changelogs/unreleased/add-field-for-group-name.yml
@@ -0,0 +1,4 @@
+---
+title: Add a name field to the group form
+merge_request: 9891
+author: Douglas Lovell
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 987344f4eaa..e3bc939d578 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -49,6 +49,7 @@ var config = {
     users:                './users/users_bundle.js',
     vue_pipelines:        './vue_pipelines_index/index.js',
     issue_show:           './issue_show/index.js',
+    group:                './group.js',
   },
 
   output: {
diff --git a/doc/gitlab-basics/create-group.md b/doc/gitlab-basics/create-group.md
index 64274ccd5eb..b4889bb8818 100644
--- a/doc/gitlab-basics/create-group.md
+++ b/doc/gitlab-basics/create-group.md
@@ -25,6 +25,8 @@ To create a group:
     1. Set the "Group path" which will be the namespace under which your projects
        will be hosted (path can contain only letters, digits, underscores, dashes
        and dots; it cannot start with dashes or end in dot).
+    1. The "Group name" will populate with the path.  Optionally, you can change
+       it.  This is the name that will display in the group views.
     1. Optionally, you can add a description so that others can briefly understand
        what this group is about.
     1. Optionally, choose and avatar for your project.
diff --git a/doc/gitlab-basics/img/create_new_group_info.png b/doc/gitlab-basics/img/create_new_group_info.png
index 020b4ac00d6..8d2501d9f7a 100644
--- a/doc/gitlab-basics/img/create_new_group_info.png
+++ b/doc/gitlab-basics/img/create_new_group_info.png
diff --git a/doc/workflow/groups.md b/doc/workflow/groups.md
index 6237a5d5e18..882747e14e9 100644
--- a/doc/workflow/groups.md
+++ b/doc/workflow/groups.md
@@ -11,9 +11,9 @@ You can create a group by going to the 'Groups' tab of the GitLab dashboard and
 
 ![Click the 'New group' button in the 'Groups' tab](groups/new_group_button.png)
 
-Next, enter the name (required) and the optional description and group avatar.
+Next, enter the path and name (required) and the optional description and group avatar.
 
-![Fill in the name for your new group](groups/new_group_form.png)
+![Fill in the path for your new group](groups/new_group_form.png)
 
 When your group has been created you are presented with the group dashboard feed, which will be empty.
 
diff --git a/doc/workflow/groups/new_group_form.png b/doc/workflow/groups/new_group_form.png
index 0d798cd4b84..91727ab5336 100644
--- a/doc/workflow/groups/new_group_form.png
+++ b/doc/workflow/groups/new_group_form.png
diff --git a/spec/features/admin/admin_groups_spec.rb b/spec/features/admin/admin_groups_spec.rb
index 56d5c7c327e..d5f595894d6 100644
--- a/spec/features/admin/admin_groups_spec.rb
+++ b/spec/features/admin/admin_groups_spec.rb
@@ -25,13 +25,22 @@ feature 'Admin Groups', feature: true do
       visit admin_groups_path
 
       click_link "New group"
-      fill_in 'group_path', with: 'gitlab'
-      fill_in 'group_description', with: 'Group description'
+      path_component = 'gitlab'
+      group_name = 'GitLab group name'
+      group_description = 'Description of group for GitLab'
+      fill_in 'group_path', with: path_component
+      fill_in 'group_name', with: group_name
+      fill_in 'group_description', with: group_description
       click_button "Create group"
 
-      expect(current_path).to eq admin_group_path(Group.find_by(path: 'gitlab'))
-      expect(page).to have_content('Group: gitlab')
-      expect(page).to have_content('Group description')
+      expect(current_path).to eq admin_group_path(Group.find_by(path: path_component))
+      content = page.find('div#content-body')
+      h3_texts = content.all('h3').collect(&:text).join("\n")
+      expect(h3_texts).to match group_name
+      li_texts = content.all('li').collect(&:text).join("\n")
+      expect(li_texts).to match group_name
+      expect(li_texts).to match path_component
+      expect(li_texts).to match group_description
     end
 
     scenario 'shows the visibility level radio populated with the default value' do
@@ -39,6 +48,15 @@ feature 'Admin Groups', feature: true do
 
       expect_selected_visibility(internal)
     end
+
+    scenario 'when entered in group path, it auto filled the group name', js: true do
+      visit admin_groups_path
+      click_link "New group"
+      group_path = 'gitlab'
+      fill_in 'group_path', with: group_path
+      name_field = find('input#group_name')
+      expect(name_field.value).to eq group_path
+    end
   end
 
   describe 'show a group' do
@@ -59,6 +77,17 @@ feature 'Admin Groups', feature: true do
 
       expect_selected_visibility(group.visibility_level)
     end
+
+    scenario 'edit group path does not change group name', js: true do
+      group = create(:group, :private)
+
+      visit admin_group_edit_path(group)
+      name_field = find('input#group_name')
+      original_name = name_field.value
+      fill_in 'group_path', with: 'this-new-path'
+
+      expect(name_field.value).to eq original_name
+    end
   end
 
   describe 'add user into a group', js: true do
diff --git a/spec/features/dashboard/group_spec.rb b/spec/features/dashboard/group_spec.rb
index 19f5d1b0f30..1d4b86ed4b4 100644
--- a/spec/features/dashboard/group_spec.rb
+++ b/spec/features/dashboard/group_spec.rb
@@ -5,16 +5,18 @@ RSpec.describe 'Dashboard Group', feature: true do
     login_as(:user)
   end
 
-  it 'creates new grpup' do
+  it 'creates new group', js: true do
     visit dashboard_groups_path
     click_link 'New group'
+    new_path = 'Samurai'
+    new_description = 'Tokugawa Shogunate'
 
-    fill_in 'group_path', with: 'Samurai'
-    fill_in 'group_description', with: 'Tokugawa Shogunate'
+    fill_in 'group_path', with: new_path
+    fill_in 'group_description', with: new_description
     click_button 'Create group'
 
-    expect(current_path).to eq group_path(Group.find_by(name: 'Samurai'))
-    expect(page).to have_content('Samurai')
-    expect(page).to have_content('Tokugawa Shogunate')
+    expect(current_path).to eq group_path(Group.find_by(name: new_path))
+    expect(page).to have_content(new_path)
+    expect(page).to have_content(new_description)
   end
 end
diff --git a/spec/features/groups_spec.rb b/spec/features/groups_spec.rb
index 7670c4caea4..3d32c47bf09 100644
--- a/spec/features/groups_spec.rb
+++ b/spec/features/groups_spec.rb
@@ -83,7 +83,7 @@ feature 'Group', feature: true do
     end
   end
 
-  describe 'create a nested group' do
+  describe 'create a nested group', js: true do
     let(:group) { create(:group, path: 'foo') }
 
     context 'as admin' do