Merge branch 'jh-group_import_ui_frontend' into 'master'

Create group import UI

See merge request gitlab-org/gitlab!29271

app/assets/javascripts/avatar_picker.js

-import $ from 'jquery';
-
-export default function initAvatarPicker() {
-  $('.js-choose-avatar-button').on('click', function onClickAvatar() {
-    const form = $(this).closest('form');
-    return form.find('.js-avatar-input').click();
-  });
-
-  $('.js-avatar-input').on('change', function onChangeAvatarInput() {
-    const form = $(this).closest('form');
-    const filename = $(this)
-      .val()
-      .replace(/^.*[\\\/]/, ''); // eslint-disable-line no-useless-escape
-    return form.find('.js-avatar-filename').text(filename);
-  });
-}

app/assets/javascripts/file_pickers.js

+export default function initFilePickers() {
+  const filePickers = document.querySelectorAll('.js-filepicker');
+
+  filePickers.forEach(filePicker => {
+    const button = filePicker.querySelector('.js-filepicker-button');
+
+    button.addEventListener('click', () => {
+      const form = button.closest('form');
+      form.querySelector('.js-filepicker-input').click();
+    });
+
+    const input = filePicker.querySelector('.js-filepicker-input');
+
+    input.addEventListener('change', () => {
+      const form = input.closest('form');
+      const filename = input.value.replace(/^.*[\\\/]/, ''); // eslint-disable-line no-useless-escape
+
+      form.querySelector('.js-filepicker-filename').textContent = filename;
+    });
+  });
+}

app/assets/javascripts/group.js

-import $ from 'jquery';
 import { slugify } from './lib/utils/text_utility';
 import fetchGroupPathAvailability from '~/pages/groups/new/fetch_group_path_availability';
 import flash from '~/flash';
@@ -6,44 +5,69 @@ import { __ } from '~/locale';
 
 export default class Group {
   constructor() {
-    this.groupPath = $('#group_path');
-    this.groupName = $('#group_name');
-    this.parentId = $('#group_parent_id');
+    this.groupPaths = Array.from(document.querySelectorAll('.js-autofill-group-path'));
+    this.groupNames = Array.from(document.querySelectorAll('.js-autofill-group-name'));
+    this.parentId = document.getElementById('group_parent_id');
     this.updateHandler = this.update.bind(this);
     this.resetHandler = this.reset.bind(this);
     this.updateGroupPathSlugHandler = this.updateGroupPathSlug.bind(this);
-    if (this.groupName.val() === '') {
-      this.groupName.on('keyup', this.updateHandler);
-      this.groupPath.on('keydown', this.resetHandler);
-      if (!this.parentId.val()) {
-        this.groupName.on('blur', this.updateGroupPathSlugHandler);
+
+    this.groupNames.forEach(groupName => {
+      if (groupName.value === '') {
+        groupName.addEventListener('keyup', this.updateHandler);
+
+        if (!this.parentId.value) {
+          groupName.addEventListener('blur', this.updateGroupPathSlugHandler);
+        }
       }
-    }
+    });
+
+    this.groupPaths.forEach(groupPath => {
+      groupPath.addEventListener('keydown', this.resetHandler);
+    });
   }
 
-  update() {
-    const slug = slugify(this.groupName.val());
-    this.groupPath.val(slug);
+  update({ currentTarget: { value: updatedValue } }) {
+    const slug = slugify(updatedValue);
+
+    this.groupNames.forEach(element => {
+      element.value = updatedValue;
+    });
+    this.groupPaths.forEach(element => {
+      element.value = slug;
+    });
   }
 
   reset() {
-    this.groupName.off('keyup', this.updateHandler);
-    this.groupPath.off('keydown', this.resetHandler);
-    this.groupName.off('blur', this.checkPathHandler);
+    this.groupNames.forEach(groupName => {
+      groupName.removeEventListener('keyup', this.updateHandler);
+      groupName.removeEventListener('blur', this.checkPathHandler);
+    });
+
+    this.groupPaths.forEach(groupPath => {
+      groupPath.removeEventListener('keydown', this.resetHandler);
+    });
   }
 
-  updateGroupPathSlug() {
-    const slug = this.groupPath.val() || slugify(this.groupName.val());
+  updateGroupPathSlug({ currentTarget: { value } = '' } = {}) {
+    const slug = this.groupPaths[0]?.value || slugify(value);
     if (!slug) return;
 
     fetchGroupPathAvailability(slug)
       .then(({ data }) => data)
-      .then(data => {
-        if (data.exists && data.suggests.length > 0) {
-          const suggestedSlug = data.suggests[0];
-          this.groupPath.val(suggestedSlug);
+      .then(({ exists, suggests }) => {
+        if (exists && suggests.length) {
+          const [suggestedSlug] = suggests;
+
+          this.groupPaths.forEach(element => {
+            element.value = suggestedSlug;
+          });
+        } else if (exists && !suggests.length) {
+          flash(__('Unable to suggest a path. Please refresh and try again.'));
         }
       })
-      .catch(() => flash(__('An error occurred while checking group path')));
+      .catch(() =>
+        flash(__('An error occurred while checking group path. Please refresh and try again.')),
+      );
   }
 }

app/assets/javascripts/pages/admin/groups/edit/index.js

-import initAvatarPicker from '~/avatar_picker';
+import initFilePickers from '~/file_pickers';
 
-document.addEventListener('DOMContentLoaded', initAvatarPicker);
+document.addEventListener('DOMContentLoaded', initFilePickers);

app/assets/javascripts/pages/admin/groups/new/index.js

 import BindInOut from '../../../../behaviors/bind_in_out';
 import Group from '../../../../group';
-import initAvatarPicker from '~/avatar_picker';
+import initFilePickers from '~/file_pickers';
 
 document.addEventListener('DOMContentLoaded', () => {
   BindInOut.initAll();
-  new Group(); // eslint-disable-line no-new
-  initAvatarPicker();
+  initFilePickers();
+
+  return new Group();
 });

app/assets/javascripts/pages/groups/edit/index.js

-import initAvatarPicker from '~/avatar_picker';
+import initFilePickers from '~/file_pickers';
 import TransferDropdown from '~/groups/transfer_dropdown';
 import initConfirmDangerModal from '~/confirm_danger_modal';
 import initSettingsPanels from '~/settings_panels';
@@ -10,8 +10,7 @@ import groupsSelect from '~/groups_select';
 import projectSelect from '~/project_select';
 
 document.addEventListener('DOMContentLoaded', () => {
-  initAvatarPicker();
-  new TransferDropdown(); // eslint-disable-line no-new
+  initFilePickers();
   initConfirmDangerModal();
   initSettingsPanels();
   dirtySubmitFactory(
@@ -24,4 +23,6 @@ document.addEventListener('DOMContentLoaded', () => {
   groupsSelect();
 
   projectSelect();
+
+  return new TransferDropdown();
 });

app/assets/javascripts/pages/groups/new/index.js

 import $ from 'jquery';
 import BindInOut from '~/behaviors/bind_in_out';
 import Group from '~/group';
-import initAvatarPicker from '~/avatar_picker';
 import GroupPathValidator from './group_path_validator';
+import initFilePickers from '~/file_pickers';
 
 document.addEventListener('DOMContentLoaded', () => {
   const parentId = $('#group_parent_id');
@@ -10,6 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
     new GroupPathValidator(); // eslint-disable-line no-new
   }
   BindInOut.initAll();
-  new Group(); // eslint-disable-line no-new
-  initAvatarPicker();
+  initFilePickers();
+
+  return new Group();
 });

app/assets/javascripts/pages/projects/edit/index.js

@@ -4,12 +4,12 @@ import setupTransferEdit from '~/transfer_edit';
 import initConfirmDangerModal from '~/confirm_danger_modal';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
 import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
-import initAvatarPicker from '~/avatar_picker';
+import initFilePickers from '~/file_pickers';
 import initProjectLoadingSpinner from '../shared/save_project_loader';
 import initProjectPermissionsSettings from '../shared/permissions';
 
 document.addEventListener('DOMContentLoaded', () => {
-  initAvatarPicker();
+  initFilePickers();
   initConfirmDangerModal();
   initSettingsPanels();
   mountBadgeSettings(PROJECT_BADGE);

app/views/groups/_import_group_pane.html.haml

+- parent = @group.parent
+- group_path = root_url
+- group_path << parent.full_path + '/' if parent
+
+= form_with url: import_gitlab_group_path, class: 'group-form gl-show-field-errors', multipart: true do |f|
+  = form_errors(@group)
+
+  .row
+    .form-group.group-name.col-sm-12
+      = f.label :name, _('Group name'), class: 'label-bold'
+      = f.text_field :name, placeholder: s_('GroupsNew|My Awesome Group'), class: 'js-autofill-group-name form-control input-lg',
+        required: true,
+        title: _('Please fill in a descriptive name for your group.'),
+        autofocus: true
+
+  .row
+    .form-group.col-xs-12.col-sm-8
+      = f.label :path, _('Group URL'), class: 'label-bold'
+      .input-group.gl-field-error-anchor
+        .group-root-path.input-group-prepend.has-tooltip{ title: group_path, :'data-placement' => 'bottom' }
+          .input-group-text
+            %span
+              = root_url
+            - if parent
+              %strong= parent.full_path + '/'
+        = f.hidden_field :parent_id, value: parent&.id
+        = f.text_field :path, placeholder: 'my-awesome-group', class: 'form-control js-validate-group-path js-autofill-group-path',
+          id: 'import_group_path',
+          required: true,
+          pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
+          title: _('Please choose a group URL with no special characters.'),
+          "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
+      %p.validation-error.gl-field-error.field-validation.hide
+        = _('Group path is already taken. Suggestions: ')
+        %span.gl-path-suggestions
+      %p.validation-success.gl-field-success.field-validation.hide= _('Group path is available.')
+      %p.validation-pending.gl-field-error-ignore.field-validation.hide= _('Checking group path availability...')
+
+  .row
+    .form-group.col-md-12
+      = s_('GroupsNew|To copy a GitLab group between installations, navigate to the group settings page for the original installation, generate an export file, and upload it here.')
+  .row
+    .form-group.col-sm-12
+      = f.label :file, s_('GroupsNew|GitLab group export'), class: 'label-bold'
+      %div
+        = render 'shared/file_picker_button', f: f, field: :file, help_text: nil
+
+  .row
+    .form-actions.col-sm-12
+      = f.submit s_('GroupsNew|Import group'), class: 'btn btn-success'
+      = link_to _('Cancel'), new_group_path, class: 'btn btn-cancel'
+

app/views/groups/_new_group_fields.html.haml

+= form_errors(@group)
+= render 'shared/group_form', f: f, autofocus: true
+
+.row
+  .form-group.group-description-holder.col-sm-12
+    = f.label :avatar, _("Group avatar"), class: 'label-bold'
+    %div
+      = render 'shared/choose_avatar_button', f: f
+
+  .form-group.col-sm-12
+    %label.label-bold
+      = _('Visibility level')
+    %p
+      = _('Who will be able to see this group?')
+      = link_to _('View the documentation'), help_page_path("public_access/public_access"), target: '_blank'
+    = render 'shared/visibility_level', f: f, visibility_level: default_group_visibility, can_change_visibility_level: true, form_model: @group, with_label: false
+
+    = render 'create_chat_team', f: f if Gitlab.config.mattermost.enabled
+
+  .form-actions.col-sm-12
+    = f.submit _('Create group'), class: "btn btn-success"
+    = link_to _('Cancel'), dashboard_groups_path, class: 'btn btn-cancel'

app/views/groups/new.html.haml

@@ -2,43 +2,44 @@
 - @hide_top_links = true
 - page_title    _('New Group')
 - header_title  _("Groups"), dashboard_groups_path
+- active_tab = local_assigns.fetch(:active_tab, 'create')
 
-.page-title-holder.d-flex.align-items-center
-  %h1.page-title= _('New group')
-.row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
-    %p
-      - group_docs_path = help_page_path('user/group/index')
-      - group_docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: group_docs_path }
-      = s_('%{group_docs_link_start}Groups%{group_docs_link_end} allow you to manage and collaborate across multiple projects. Members of a group have access to all of its projects.').html_safe % { group_docs_link_start: group_docs_link_start, group_docs_link_end: '</a>'.html_safe }
-    %p
-      - subgroup_docs_path = help_page_path('user/group/subgroups/index')
-      - subgroup_docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: subgroup_docs_path }
-      = s_('Groups can also be nested by creating %{subgroup_docs_link_start}subgroups%{subgroup_docs_link_end}.').html_safe % { subgroup_docs_link_start: subgroup_docs_link_start, subgroup_docs_link_end: '</a>'.html_safe }
-    %p
-      = _('Projects that belong to a group are prefixed with the group namespace. Existing projects may be moved into a group.')
+.group-edit-container.prepend-top-default
+  .row
+    .col-lg-3.group-settings-sidebar
+      %h4.prepend-top-0
+        = _('New group')
+      %p
+        - group_docs_path = help_page_path('user/group/index')
+        - group_docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: group_docs_path }
+        = s_('%{group_docs_link_start}Groups%{group_docs_link_end} allow you to manage and collaborate across multiple projects. Members of a group have access to all of its projects.').html_safe % { group_docs_link_start: group_docs_link_start, group_docs_link_end: '</a>'.html_safe }
+      %p
+        - subgroup_docs_path = help_page_path('user/group/subgroups/index')
+        - subgroup_docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: subgroup_docs_path }
+        = s_('Groups can also be nested by creating %{subgroup_docs_link_start}subgroups%{subgroup_docs_link_end}.').html_safe % { subgroup_docs_link_start: subgroup_docs_link_start, subgroup_docs_link_end: '</a>'.html_safe }
+      %p
+        = _('Projects that belong to a group are prefixed with the group namespace. Existing projects may be moved into a group.')
 
-  .col-lg-9
-    = form_for @group, html: { class: 'group-form gl-show-field-errors' } do |f|
-      = form_errors(@group)
-      = render 'shared/group_form', f: f, autofocus: true
+    .col-lg-9.js-toggle-container
+      %ul.nav.nav-tabs.nav-links.gitlab-tabs{ role: 'tablist' }
+        %li.nav-item{ role: 'presentation' }
+          %a.nav-link.active{ href: '#create-group-pane', id: 'create-group-tab', role: 'tab', data: { toggle: 'tab', track_label: 'create_group', track_event: 'click_tab', track_value: '' } }
+            %span.d-none.d-sm-block= s_('GroupsNew|Create group')
+            %span.d-block.d-sm-none= s_('GroupsNew|Create')
+        %li.nav-item{ role: 'presentation' }
+          %a.nav-link{ href: '#import-group-pane', id: 'import-group-tab', role: 'tab', data: { toggle: 'tab', track_label: 'import_group', track_event: 'click_tab', track_value: '' } }
+            %span.d-none.d-sm-block= s_('GroupsNew|Import group')
+            %span.d-block.d-sm-none= s_('GroupsNew|Import')
 
-      .row
-        .form-group.group-description-holder.col-sm-12
-          = f.label :avatar, _("Group avatar"), class: 'label-bold'
-          %div
-            = render 'shared/choose_avatar_button', f: f
+      .tab-content.gitlab-tab-content
+        .tab-pane.js-toggle-container{ id: 'create-group-pane', class: active_when(active_tab == 'create'), role: 'tabpanel' }
+          = form_for @group, html: { class: 'group-form gl-show-field-errors' } do |f|
+            = render 'new_group_fields', f: f, group_name_id: 'create-group-name'
 
-        .form-group.col-sm-12
-          %label.label-bold
-            = _('Visibility level')
-          %p
-            = _('Who will be able to see this group?')
-            = link_to _('View the documentation'), help_page_path("public_access/public_access"), target: '_blank'
-          = render 'shared/visibility_level', f: f, visibility_level: default_group_visibility, can_change_visibility_level: true, form_model: @group, with_label: false
-
-          = render 'create_chat_team', f: f if Gitlab.config.mattermost.enabled
-
-      .form-actions
-        = f.submit _('Create group'), class: "btn btn-success"
-        = link_to _('Cancel'), dashboard_groups_path, class: 'btn btn-cancel'
+        .tab-pane.js-toggle-container{ id: 'import-group-pane', class: active_when(active_tab) == 'import', role: 'tabpanel' }
+          - if import_sources_enabled?
+            = render 'import_group_pane', active_tab: active_tab, autofocus: true
+          - else
+            .nothing-here-block
+              %h4= s_('GroupsNew|No import options available')
+              %p= s_('GroupsNew|Contact an administrator to enable options for importing your group.')

app/views/shared/_choose_avatar_button.html.haml

-%button.btn.js-choose-avatar-button{ type: 'button' }= _("Choose file…")
-%span.file_name.js-avatar-filename= _("No file chosen")
-= f.file_field :avatar, class: "js-avatar-input hidden"
-.form-text.text-muted= _("The maximum file size allowed is 200KB.")
+= render 'shared/file_picker_button', f: f, field: :avatar, help_text: _("The maximum file size allowed is 200KB.")

app/views/shared/_file_picker_button.html.haml

+%span.js-filepicker
+  %button.btn.js-filepicker-button{ type: 'button' }= _("Choose file…")
+  %span.file_name.js-filepicker-filename= _("No file chosen")
+  = f.file_field field, class: "js-filepicker-input hidden"
+  - if help_text.present?
+    .form-text.text-muted= help_text

app/views/shared/_group_form.html.haml

@@ -6,7 +6,7 @@
   .form-group.group-name-holder.col-sm-12
     = f.label :name, class: 'label-bold' do
       = _("Group name")
-    = f.text_field :name, placeholder: _('My Awesome Group'), class: 'form-control input-lg',
+    = f.text_field :name, placeholder: _('My Awesome Group'), class: 'js-autofill-group-name form-control input-lg',
       required: true,
       title: _('Please fill in a descriptive name for your group.'),
       autofocus: true
@@ -22,7 +22,7 @@
           - if parent
             %strong= parent.full_path + '/'
       = f.hidden_field :parent_id
-      = f.text_field :path, placeholder: _('my-awesome-group'), class: 'form-control js-validate-group-path',
+      = f.text_field :path, placeholder: _('my-awesome-group'), class: 'form-control js-validate-group-path js-autofill-group-path',
         autofocus: local_assigns[:autofocus] || false, required: true,
         pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
         title: _('Please choose a group URL with no special characters.'),

changelogs/unreleased/jh-group_import_ui_frontend.yml

+---
+title: Create Group import UI for creating new Groups
+merge_request: 29271
+author:
+type: added

doc/user/group/settings/import_export.md

@@ -67,7 +67,7 @@ For more details on the specific data persisted in a group export, see the
 
 1. In the **Advanced** section, click the **Export Group** button.
 
-   ![Export group panel](img/export_panel.png)
+   ![Export group panel](img/export_panel_v13_0.png)
 
 1. Once the export is generated, you should receive an e-mail with a link to the [exported contents](#exported-contents)
    in a compressed tar archive, with contents in JSON format.
@@ -85,6 +85,27 @@ You can export groups from the [Community Edition to the Enterprise Edition](htt
 
 If you're exporting a group from the Enterprise Edition to the Community Edition, you may lose data that is retained only in the Enterprise Edition. For more information, see [downgrading from EE to CE](../../../README.md).
 
+## Importing the group
+
+1. Navigate to the New Group page, either via the `+` button in the top navigation bar, or the **New subgroup** button
+on an existing group's page.
+
+   ![Navigation paths to create a new group](img/new_group_navigation_v13_1.png)
+
+1. On the New Group page, select the **Import group** tab.
+
+   ![Fill in group details](img/import_panel_v13_1.png)
+
+1. Enter your group name.
+
+1. Accept or modify the associated group URL.
+
+1. Click **Choose file**
+
+1. Select the file that you exported in the [exporting a group](#exporting-a-group) section.
+
+1. Click **Import group** to begin importing. Your newly imported group page will appear shortly.
+
 ## Version history
 
 GitLab can import bundles that were exported from a different GitLab deployment.
@@ -106,3 +127,4 @@ To help avoid abuse, users are rate limited to:
 | ---------------- | ---------------------------------------- |
 | Export           | 30 groups every 5 minutes                |
 | Download export  | 10 downloads per group every 10 minutes  |
+| Import           | 30 groups every 5 minutes                |

locale/gitlab.pot

@@ -2233,7 +2233,7 @@ msgstr ""
 msgid "An error occurred while adding formatted title for epic"
 msgstr ""
 
-msgid "An error occurred while checking group path"
+msgid "An error occurred while checking group path. Please refresh and try again."
 msgstr ""
 
 msgid "An error occurred while committing your changes."
@@ -11414,6 +11414,33 @@ msgstr ""
 msgid "GroupsEmptyState|You can manage your group member’s permissions and access to each project in the group."
 msgstr ""
 
+msgid "GroupsNew|Contact an administrator to enable options for importing your group."
+msgstr ""
+
+msgid "GroupsNew|Create"
+msgstr ""
+
+msgid "GroupsNew|Create group"
+msgstr ""
+
+msgid "GroupsNew|GitLab group export"
+msgstr ""
+
+msgid "GroupsNew|Import"
+msgstr ""
+
+msgid "GroupsNew|Import group"
+msgstr ""
+
+msgid "GroupsNew|My Awesome Group"
+msgstr ""
+
+msgid "GroupsNew|No import options available"
+msgstr ""
+
+msgid "GroupsNew|To copy a GitLab group between installations, navigate to the group settings page for the original installation, generate an export file, and upload it here."
+msgstr ""
+
 msgid "GroupsTree|Are you sure you want to leave the \"%{fullName}\" group?"
 msgstr ""
 
@@ -23954,6 +23981,9 @@ msgstr ""
 msgid "Unable to sign you in to the group with SAML due to \"%{reason}\""
 msgstr ""
 
+msgid "Unable to suggest a path. Please refresh and try again."
+msgstr ""
+
 msgid "Unable to update label prioritization at this time"
 msgstr ""
 

qa/qa/page/group/new.rb

@@ -10,7 +10,7 @@ module QA
           element :group_description_field, 'text_area :description' # rubocop:disable QA/ElementWithPattern
         end
 
-        view 'app/views/groups/new.html.haml' do
+        view 'app/views/groups/_new_group_fields.html.haml' do
           element :create_group_button, "submit _('Create group')" # rubocop:disable QA/ElementWithPattern
           element :visibility_radios, 'visibility_level:' # rubocop:disable QA/ElementWithPattern
         end

spec/features/groups/import_export/import_file_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'Import/Export - Group Import', :js do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:import_path) { "#{Dir.tmpdir}/group_import_spec" }
+
+  before do
+    allow_next_instance_of(Gitlab::ImportExport) do |import_export|
+      allow(import_export).to receive(:storage_path).and_return(import_path)
+    end
+
+    stub_uploads_object_storage(FileUploader)
+
+    gitlab_sign_in(user)
+  end
+
+  after do
+    FileUtils.rm_rf(import_path, secure: true)
+  end
+
+  context 'when the user uploads a valid export file' do
+    let(:file) { File.join(Rails.root, 'spec', %w[fixtures group_export.tar.gz]) }
+
+    context 'when using the pre-filled path', :sidekiq_inline do
+      it 'successfully imports the group' do
+        group_name = 'Test Group Import'
+
+        visit new_group_path
+
+        fill_in :group_name, with: group_name
+        find('#import-group-tab').click
+
+        expect(page).to have_content 'GitLab group export'
+        attach_file(file) do
+          find('.js-filepicker-button').click
+        end
+
+        expect { click_on 'Import group' }.to change { Group.count }.by 1
+
+        group = Group.find_by(name: group_name)
+
+        expect(group).not_to be_nil
+        expect(group.description).to eq 'A voluptate non sequi temporibus quam at.'
+        expect(group.path).to eq 'test-group-import'
+        expect(group.import_state.status).to eq GroupImportState.state_machine.states[:finished].value
+      end
+    end
+
+    context 'when modifying the pre-filled path' do
+      it 'successfully imports the group' do
+        visit new_group_path
+
+        fill_in :group_name, with: 'Test Group Import'
+        find('#import-group-tab').click
+
+        fill_in :import_group_path, with: 'custom-path'
+        attach_file(file) do
+          find('.js-filepicker-button').click
+        end
+
+        expect { click_on 'Import group' }.to change { Group.count }.by 1
+
+        group = Group.find_by(name: 'Test Group Import')
+        expect(group.path).to eq 'custom-path'
+      end
+    end
+
+    context 'when the path is already taken' do
+      before do
+        create(:group, path: 'test-group-import')
+      end
+
+      it 'suggests a unique path' do
+        visit new_group_path
+        find('#import-group-tab').click
+
+        fill_in :import_group_path, with: 'test-group-import'
+        expect(page).to have_content 'Group path is already taken. Suggestions: test-group-import1'
+      end
+    end
+  end
+
+  context 'when the user uploads an invalid export file' do
+    let(:file) { File.join(Rails.root, 'spec', %w[fixtures big-image.png]) }
+
+    it 'displays an error' do
+      visit new_group_path
+
+      fill_in :group_name, with: 'Test Group Import'
+      find('#import-group-tab').click
+      attach_file(file) do
+        find('.js-filepicker-button').click
+      end
+
+      expect { click_on 'Import group' }.not_to change { Group.count }
+
+      page.within('.flash-container') do
+        expect(page).to have_content('Unable to process group import file')
+      end
+    end
+  end
+end