Add a name field to the group edit form

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

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();

app/assets/javascripts/group.js

+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);
+  }
+}

app/views/shared/_group_form.html.haml

+- 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

changelogs/unreleased/add-field-for-group-name.yml

+---
+title: Add a name field to the group form
+merge_request: 9891
+author: Douglas Lovell

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: {

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.

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.
 

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

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

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