3 files changed, 36 insertions, 9 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