Add a name field to the group edit formadd-field-for-group-name

Enables user specification of group name vs. name inferred from group path.

Cause new group form to copy name from path

Adds some new page-specific javascript that copies entry from the
group path field to the group name field when the group name field
is initially empty.

Remove duplicate group name entry field on group edit form

This corrects the duplicated name entry field and tests that the
JavaScript does not update the group name field if the user
edits the group path.  (Editing the group path is not recommended
in any case, but it is possible.)

Address eslint errors in group.js

Enable group name copy with dispatch and explore group creation

The dispatch and explore group creation forms require the group.js
asset, and their tests now require testing against poltergeist

Update workflow new group instruction

Update the gitlab basics group creation document

Add a change log entry

Remove unused variable for eslint

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