Replace slugifyWithHyphens with improved slugify function

app/assets/javascripts/group.js

 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);
   }
 

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

app/assets/javascripts/projects/project_new.js

 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);
 };
 

changelogs/unreleased/slugify.yml

+---
+title: Replace slugifyWithHyphens with improved slugify function
+merge_request: 30172
+author: Luke Ward
+type: fixed

spec/frontend/lib/utils/text_utility_spec.js

@@ -55,9 +55,24 @@ describe('text_utility', () => {
     });
   });
 
-  describe('slugifyWithHyphens', () => {
+  describe('slugify', () => {
+    it('should remove accents and convert to lower case', () => {
+      expect(textUtils.slugify('João')).toEqual('jo-o');
+    });
     it('should replaces whitespaces with hyphens and convert to lower case', () => {
-      expect(textUtils.slugifyWithHyphens('My Input String')).toEqual('my-input-string');
+      expect(textUtils.slugify('My Input String')).toEqual('my-input-string');
+    });
+    it('should remove trailing whitespace and replace whitespaces within string with a hyphen', () => {
+      expect(textUtils.slugify(' a new project ')).toEqual('a-new-project');
+    });
+    it('should only remove non-allowed special characters', () => {
+      expect(textUtils.slugify('test!_pro-ject~')).toEqual('test-_pro-ject-');
+    });
+    it('should squash multiple hypens', () => {
+      expect(textUtils.slugify('test!!!!_pro-ject~')).toEqual('test-_pro-ject-');
+    });
+    it('should return empty string if only non-allowed characters', () => {
+      expect(textUtils.slugify('здрасти')).toEqual('');
     });
   });