From d0beb755f9ee8a744be087b22d51e8fe9ea98586 Mon Sep 17 00:00:00 2001 From: Douglas Lovell Date: Sun, 12 Mar 2017 12:22:00 -0300 Subject: 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 | 6 ++-- app/assets/javascripts/group.js | 21 +++++++++++ app/views/shared/_group_form.html.haml | 18 ++++++---- changelogs/unreleased/add-field-for-group-name.yml | 4 +++ config/webpack.config.js | 1 + doc/gitlab-basics/create-group.md | 2 ++ doc/gitlab-basics/img/create_new_group_info.png | Bin 20321 -> 105173 bytes doc/workflow/groups.md | 4 +-- doc/workflow/groups/new_group_form.png | Bin 27263 -> 114515 bytes spec/features/admin/admin_groups_spec.rb | 39 ++++++++++++++++++--- spec/features/dashboard/group_spec.rb | 14 ++++---- spec/features/groups_spec.rb | 2 +- 12 files changed, 88 insertions(+), 23 deletions(-) create mode 100644 app/assets/javascripts/group.js create mode 100644 changelogs/unreleased/add-field-for-group-name.yml 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 Binary files a/doc/gitlab-basics/img/create_new_group_info.png and b/doc/gitlab-basics/img/create_new_group_info.png differ 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 Binary files a/doc/workflow/groups/new_group_form.png and b/doc/workflow/groups/new_group_form.png differ 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 -- cgit v1.2.1