Add latest changes from gitlab-org/gitlab@master

1 files changed, 24 insertions, 0 deletions

diff --git a/app/assets/javascripts/group.js b/app/assets/javascripts/group.js
index 460174caf4d..eda0f5d1d23 100644
--- a/app/assets/javascripts/group.js
+++ b/app/assets/javascripts/group.js
@@ -1,15 +1,23 @@
 import $ from 'jquery';
 import { slugify } from './lib/utils/text_utility';
+import fetchGroupPathAvailability from '~/pages/groups/new/fetch_group_path_availability';
+import flash from '~/flash';
+import { __ } from '~/locale';
 
 export default class Group {
   constructor() {
     this.groupPath = $('#group_path');
     this.groupName = $('#group_name');
+    this.parentId = $('#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);
+      }
     }
   }
 
@@ -21,5 +29,21 @@ export default class Group {
   reset() {
     this.groupName.off('keyup', this.updateHandler);
     this.groupPath.off('keydown', this.resetHandler);
+    this.groupName.off('blur', this.checkPathHandler);
+  }
+
+  updateGroupPathSlug() {
+    const slug = this.groupPath.val() || slugify(this.groupName.val());
+    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);
+        }
+      })
+      .catch(() => flash(__('An error occurred while checking group path')));
   }
 }