Replace slugifyWithHyphens with improved slugify function

3 files changed, 13 insertions, 6 deletions

diff --git a/app/assets/javascripts/group.js b/app/assets/javascripts/group.js
index 903c838e266..460174caf4d 100644
--- a/app/assets/javascripts/group.js
+++ b/app/assets/javascripts/group.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import { slugifyWithHyphens } from './lib/utils/text_utility';
+import { slugify } from './lib/utils/text_utility';
 
 export default class Group {
   constructor() {
@@ -14,7 +14,7 @@ export default class Group {
   }
 
   update() {
-    const slug = slugifyWithHyphens(this.groupName.val());
+    const slug = slugify(this.groupName.val());
     this.groupPath.val(slug);
   }
 
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index cc1d85fd97d..d38f59b5861 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -44,11 +44,18 @@ export const pluralize = (str, count) => str + (count > 1 || count === 0 ? 's' :
 export const dasherize = str => str.replace(/[_\s]+/g, '-');
 
 /**
- * Replaces whitespaces with hyphens and converts to lower case
+ * Replaces whitespaces with hyphens, convert to lower case and remove non-allowed special characters
  * @param {String} str
  * @returns {String}
  */
-export const slugifyWithHyphens = str => str.toLowerCase().replace(/\s+/g, '-');
+export const slugify = str => {
+  const slug = str
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-zA-Z0-9_.-]+/g, '-');
+
+  return slug === '-' ? '' : slug;
+};
 
 /**
  * Replaces whitespaces with underscore and converts to lower case
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index ea82ff4e340..9066844f687 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { addSelectOnFocusBehaviour } from '../lib/utils/common_utils';
-import { slugifyWithHyphens } from '../lib/utils/text_utility';
+import { slugify } from '../lib/utils/text_utility';
 import { s__ } from '~/locale';
 
 let hasUserDefinedProjectPath = false;
@@ -34,7 +34,7 @@ const deriveProjectPathFromUrl = $projectImportUrl => {
 };
 
 const onProjectNameChange = ($projectNameInput, $projectPathInput) => {
-  const slug = slugifyWithHyphens($projectNameInput.val());
+  const slug = slugify($projectNameInput.val());
   $projectPathInput.val(slug);
 };