Merge branch...

Merge branch '24305-create-new-project-auto-populate-project-slug-string-to-project-name-if-name-is-empty' into 'master'

Auto-populate project slug string to project name if name is empty

Closes #24305

See merge request gitlab-org/gitlab!22627

app/assets/javascripts/lib/utils/text_utility.js

@@ -21,12 +21,17 @@ export const addDelimiter = text =>
 export const highCountTrim = count => (count > 99 ? '99+' : count);
 
 /**
- * Converts first char to uppercase and replaces undercores with spaces
- * @param {String} string
+ * Converts first char to uppercase and replaces the given separator with spaces
+ * @param {String} string - The string to humanize
+ * @param {String} separator - The separator used to separate words (defaults to "_")
  * @requires {String}
+ * @returns {String}
  */
-export const humanize = string =>
-  string.charAt(0).toUpperCase() + string.replace(/_/g, ' ').slice(1);
+export const humanize = (string, separator = '_') => {
+  const replaceRegex = new RegExp(separator, 'g');
+
+  return string.charAt(0).toUpperCase() + string.replace(replaceRegex, ' ').slice(1);
+};
 
 /**
  * Replaces underscores with dashes
@@ -45,7 +50,11 @@ export const slugify = (str, separator = '-') => {
   const slug = str
     .trim()
     .toLowerCase()
-    .replace(/[^a-zA-Z0-9_.-]+/g, separator);
+    .replace(/[^a-zA-Z0-9_.-]+/g, separator)
+    // Remove any duplicate separators or separator prefixes/suffixes
+    .split(separator)
+    .filter(Boolean)
+    .join(separator);
 
   return slug === separator ? '' : slug;
 };
@@ -159,6 +168,15 @@ export const convertToSentenceCase = string => {
   return splitWord.join(' ');
 };
 
+/**
+ * Converts a sentence to title case
+ * e.g. Hello world => Hello World
+ *
+ * @param {String} string
+ * @returns {String}
+ */
+export const convertToTitleCase = string => string.replace(/\b[a-z]/g, s => s.toUpperCase());
+
 /**
  * Splits camelCase or PascalCase words
  * e.g. HelloWorld => Hello World

app/assets/javascripts/projects/project_import_gitlab_project.js

 import $ from 'jquery';
+import { convertToTitleCase, humanize, slugify } from '../lib/utils/text_utility';
 import { getParameterValues } from '../lib/utils/url_utility';
 import projectNew from './project_new';
 
+const prepareParameters = () => {
+  const name = getParameterValues('name')[0];
+  const path = getParameterValues('path')[0];
+
+  // If the name param exists but the path doesn't then generate it from the name
+  if (name && !path) {
+    return { name, path: slugify(name) };
+  }
+
+  // If the path param exists but the name doesn't then generate it from the path
+  if (path && !name) {
+    return { name: convertToTitleCase(humanize(path, '-')), path };
+  }
+
+  return { name, path };
+};
+
 export default () => {
-  const pathParam = getParameterValues('path')[0];
-  const nameParam = getParameterValues('name')[0];
-  const $projectPath = $('.js-path-name');
+  let hasUserDefinedProjectName = false;
   const $projectName = $('.js-project-name');
-
-  // get the path url and append it in the input
-  $projectPath.val(pathParam);
+  const $projectPath = $('.js-path-name');
+  const { name, path } = prepareParameters();
 
   // get the project name from the URL and set it as input value
-  $projectName.val(nameParam);
+  $projectName.val(name);
+
+  // get the path url and append it in the input
+  $projectPath.val(path);
 
   // generate slug when project name changes
-  $projectName.keyup(() => projectNew.onProjectNameChange($projectName, $projectPath));
+  $projectName.on('keyup', () => {
+    projectNew.onProjectNameChange($projectName, $projectPath);
+    hasUserDefinedProjectName = $projectName.val().trim().length > 0;
+  });
+
+  // generate project name from the slug if one isn't set
+  $projectPath.on('keyup', () =>
+    projectNew.onProjectPathChange($projectName, $projectPath, hasUserDefinedProjectName),
+  );
 };

app/assets/javascripts/projects/project_new.js

 import $ from 'jquery';
 import { addSelectOnFocusBehaviour } from '../lib/utils/common_utils';
-import { slugify } from '../lib/utils/text_utility';
+import { convertToTitleCase, humanize, slugify } from '../lib/utils/text_utility';
 import { s__ } from '~/locale';
 
 let hasUserDefinedProjectPath = false;
+let hasUserDefinedProjectName = false;
+
+const onProjectNameChange = ($projectNameInput, $projectPathInput) => {
+  const slug = slugify($projectNameInput.val());
+  $projectPathInput.val(slug);
+};
+
+const onProjectPathChange = ($projectNameInput, $projectPathInput, hasExistingProjectName) => {
+  const slug = $projectPathInput.val();
+
+  if (!hasExistingProjectName) {
+    $projectNameInput.val(convertToTitleCase(humanize(slug, '[-_]')));
+  }
+};
+
+const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => {
+  $projectNameInput.off('keyup change').on('keyup change', () => {
+    onProjectNameChange($projectNameInput, $projectPathInput);
+    hasUserDefinedProjectName = $projectNameInput.val().trim().length > 0;
+    hasUserDefinedProjectPath = $projectPathInput.val().trim().length > 0;
+  });
+
+  $projectPathInput.off('keyup change').on('keyup change', () => {
+    onProjectPathChange($projectNameInput, $projectPathInput, hasUserDefinedProjectName);
+    hasUserDefinedProjectPath = $projectPathInput.val().trim().length > 0;
+  });
+};
 
 const deriveProjectPathFromUrl = $projectImportUrl => {
+  const $currentProjectName = $projectImportUrl
+    .parents('.toggle-import-form')
+    .find('#project_name');
   const $currentProjectPath = $projectImportUrl
     .parents('.toggle-import-form')
     .find('#project_path');
+
   if (hasUserDefinedProjectPath) {
     return;
   }
@@ -30,14 +61,10 @@ const deriveProjectPathFromUrl = $projectImportUrl => {
   const pathMatch = /\/([^/]+)$/.exec(importUrl);
   if (pathMatch) {
     $currentProjectPath.val(pathMatch[1]);
+    onProjectPathChange($currentProjectName, $currentProjectPath, false);
   }
 };
 
-const onProjectNameChange = ($projectNameInput, $projectPathInput) => {
-  const slug = slugify($projectNameInput.val());
-  $projectPathInput.val(slug);
-};
-
 const bindEvents = () => {
   const $newProjectForm = $('#new_project');
   const $projectImportUrl = $('#project_import_url');
@@ -202,10 +229,7 @@ const bindEvents = () => {
     const $activeTabProjectName = $('.tab-pane.active #project_name');
     const $activeTabProjectPath = $('.tab-pane.active #project_path');
     $activeTabProjectName.focus();
-    $activeTabProjectName.keyup(() => {
-      onProjectNameChange($activeTabProjectName, $activeTabProjectPath);
-      hasUserDefinedProjectPath = $activeTabProjectPath.val().trim().length > 0;
-    });
+    setProjectNamePathHandlers($activeTabProjectName, $activeTabProjectPath);
   }
 
   $useTemplateBtn.on('change', chooseTemplate);
@@ -220,26 +244,24 @@ const bindEvents = () => {
     $projectPath.val($projectPath.val().trim());
   });
 
-  $projectPath.on('keyup', () => {
-    hasUserDefinedProjectPath = $projectPath.val().trim().length > 0;
-  });
-
   $projectImportUrl.keyup(() => deriveProjectPathFromUrl($projectImportUrl));
 
   $('.js-import-git-toggle-button').on('click', () => {
     const $projectMirror = $('#project_mirror');
 
     $projectMirror.attr('disabled', !$projectMirror.attr('disabled'));
+    setProjectNamePathHandlers(
+      $('.tab-pane.active #project_name'),
+      $('.tab-pane.active #project_path'),
+    );
   });
 
-  $projectName.on('keyup change', () => {
-    onProjectNameChange($projectName, $projectPath);
-    hasUserDefinedProjectPath = $projectPath.val().trim().length > 0;
-  });
+  setProjectNamePathHandlers($projectName, $projectPath);
 };
 
 export default {
   bindEvents,
   deriveProjectPathFromUrl,
   onProjectNameChange,
+  onProjectPathChange,
 };

changelogs/unreleased/24305-create-new-project-auto-populate-project-slug-string-to-project-nam.yml

+---
+title: 'Resolve Create new project: Auto-populate project slug string to project name
+  if name is empty'
+merge_request: 22627
+author:
+type: changed

doc/gitlab-basics/create-project.md

@@ -31,7 +31,14 @@ To create a new blank project on the **New project** page:
 1. On the **Blank project** tab, provide the following information:
    - The name of your project in the **Project name** field. You can't use
      special characters, but you can use spaces, hyphens, underscores or even
-     emoji.
+     emoji. When adding the name, the **Project slug** will auto populate.
+     The slug is what the GitLab instance will use as the URL path to the project.
+     If you want a different slug, input the project name first,
+     then change the slug after.
+   - The path to your project in the **Project slug** field. This is the URL
+     path for your project that the GitLab instance will use. If the
+     **Project name** is blank, it will auto populate when you fill in
+     the **Project slug**.
    - The **Project description (optional)** field enables you to enter a
      description for your project's dashboard, which will help others
      understand what your project is about. Though it's not required, it's a good

ee/app/assets/javascripts/projects/custom_project_templates.js

@@ -13,6 +13,7 @@ const bindEvents = () => {
   const $projectFieldsFormInput = $('.project-fields-form input#project_use_custom_template');
   const $subgroupWithTemplatesIdInput = $('.js-project-group-with-project-templates-id');
   const $namespaceSelect = $projectFieldsForm.find('.js-select-namespace');
+  let hasUserDefinedProjectName = false;
 
   if ($newProjectForm.length !== 1 || $useCustomTemplateBtn.length === 0) {
     return;
@@ -86,8 +87,16 @@ const bindEvents = () => {
     const $activeTabProjectName = $('.tab-pane.active #project_name');
     const $activeTabProjectPath = $('.tab-pane.active #project_path');
     $activeTabProjectName.focus();
-    $activeTabProjectName.keyup(() =>
-      projectNew.onProjectNameChange($activeTabProjectName, $activeTabProjectPath),
+    $activeTabProjectName.on('keyup', () => {
+      projectNew.onProjectNameChange($activeTabProjectName, $activeTabProjectPath);
+      hasUserDefinedProjectName = $activeTabProjectName.val().trim().length > 0;
+    });
+    $activeTabProjectPath.on('keyup', () =>
+      projectNew.onProjectPathChange(
+        $activeTabProjectName,
+        $activeTabProjectPath,
+        hasUserDefinedProjectName,
+      ),
     );
 
     $projectFieldsForm

ee/spec/features/projects/custom_projects_template_spec.rb

@@ -40,15 +40,18 @@ describe 'Project' do
       end
 
       it 'allows creation from custom project template', :js do
-        new_name = 'example_custom_project_template'
+        new_path = 'example-custom-project-template'
+        new_name = 'Example Custom Project Template'
 
         find('#create-from-template-tab').click
         find('.project-template .custom-instance-project-templates-tab').click
         find("label[for='#{projects.first.name}']").click
 
         page.within '.project-fields-form' do
-          fill_in("project_path", with: new_name)
           fill_in("project_name", with: new_name)
+          # Have to reset it to '' so it overwrites rather than appends
+          fill_in('project_path', with: '')
+          fill_in("project_path", with: new_path)
 
           Sidekiq::Testing.inline! do
             click_button "Create project"
@@ -57,6 +60,52 @@ describe 'Project' do
 
         expect(page).to have_content new_name
         expect(Project.last.name).to eq new_name
+        expect(page).to have_current_path "/#{user.username}/#{new_path}"
+        expect(Project.last.path).to eq new_path
+      end
+
+      it 'allows creation from custom project template using only the name', :js do
+        new_path = 'example-custom-project-template'
+        new_name = 'Example Custom Project Template'
+
+        find('#create-from-template-tab').click
+        find('.project-template .custom-instance-project-templates-tab').click
+        find("label[for='#{projects.first.name}']").click
+
+        page.within '.project-fields-form' do
+          fill_in("project_name", with: new_name)
+
+          Sidekiq::Testing.inline! do
+            click_button "Create project"
+          end
+        end
+
+        expect(page).to have_content new_name
+        expect(Project.last.name).to eq new_name
+        expect(page).to have_current_path "/#{user.username}/#{new_path}"
+        expect(Project.last.path).to eq new_path
+      end
+
+      it 'allows creation from custom project template using only the path', :js do
+        new_path = 'example-custom-project-template'
+        new_name = 'Example Custom Project Template'
+
+        find('#create-from-template-tab').click
+        find('.project-template .custom-instance-project-templates-tab').click
+        find("label[for='#{projects.first.name}']").click
+
+        page.within '.project-fields-form' do
+          fill_in("project_path", with: new_path)
+
+          Sidekiq::Testing.inline! do
+            click_button "Create project"
+          end
+        end
+
+        expect(page).to have_content new_name
+        expect(Project.last.name).to eq new_name
+        expect(page).to have_current_path "/#{user.username}/#{new_path}"
+        expect(Project.last.path).to eq new_path
       end
 
       it 'has a working pagination', :js do

spec/frontend/lib/utils/text_utility_spec.js

@@ -27,6 +27,9 @@ describe('text_utility', () => {
     it('should remove underscores and uppercase the first letter', () => {
       expect(textUtils.humanize('foo_bar')).toEqual('Foo bar');
     });
+    it('should remove underscores and dashes and uppercase the first letter', () => {
+      expect(textUtils.humanize('foo_bar-foo', '[_-]')).toEqual('Foo bar foo');
+    });
   });
 
   describe('dasherize', () => {
@@ -52,14 +55,20 @@ describe('text_utility', () => {
       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-');
+      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-');
+      expect(textUtils.slugify('test!!!!_pro-ject~')).toEqual('test-_pro-ject');
     });
     it('should return empty string if only non-allowed characters', () => {
       expect(textUtils.slugify('здрасти')).toEqual('');
     });
+    it('should squash multiple separators', () => {
+      expect(textUtils.slugify('Test:-)')).toEqual('test');
+    });
+    it('should trim any separators from the beginning and end of the slug', () => {
+      expect(textUtils.slugify('-Test:-)-')).toEqual('test');
+    });
   });
 
   describe('stripHtml', () => {
@@ -109,6 +118,12 @@ describe('text_utility', () => {
     });
   });
 
+  describe('convertToTitleCase', () => {
+    it('converts sentence case to Sentence Case', () => {
+      expect(textUtils.convertToTitleCase('hello world')).toBe('Hello World');
+    });
+  });
+
   describe('truncateSha', () => {
     it('shortens SHAs to 8 characters', () => {
       expect(textUtils.truncateSha('verylongsha')).toBe('verylong');

spec/frontend/monitoring/store/mutations_spec.js

@@ -29,8 +29,8 @@ describe('Monitoring mutations', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
       const groups = getGroups();
 
-      expect(groups[0].key).toBe('response-metrics-nginx-ingress-vts--0');
-      expect(groups[1].key).toBe('system-metrics-kubernetes--1');
+      expect(groups[0].key).toBe('response-metrics-nginx-ingress-vts-0');
+      expect(groups[1].key).toBe('system-metrics-kubernetes-1');
     });
     it('normalizes values', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);

spec/frontend/releases/list/components/release_block_spec.js

@@ -169,7 +169,7 @@ describe('Release block', () => {
     releaseClone.tag_name = 'a dangerous tag name <script>alert("hello")</script>';
 
     return factory(releaseClone).then(() => {
-      expect(wrapper.attributes().id).toBe('a-dangerous-tag-name-script-alert-hello-script-');
+      expect(wrapper.attributes().id).toBe('a-dangerous-tag-name-script-alert-hello-script');
     });
   });
 

spec/javascripts/projects/project_import_gitlab_project_spec.js

 import projectImportGitlab from '~/projects/project_import_gitlab_project';
 
 describe('Import Gitlab project', () => {
-  let projectName;
-  beforeEach(() => {
-    projectName = 'project';
-    window.history.pushState({}, null, `?path=${projectName}`);
+  const pathName = 'my-project';
+  const projectName = 'My Project';
+
+  const setTestFixtures = url => {
+    window.history.pushState({}, null, url);
 
     setFixtures(`
       <input class="js-path-name" />
+      <input class="js-project-name" />
     `);
 
     projectImportGitlab();
+  };
+
+  beforeEach(() => {
+    setTestFixtures(`?name=${projectName}&path=${pathName}`);
   });
 
   afterEach(() => {
     window.history.pushState({}, null, '');
   });
 
-  describe('path name', () => {
+  describe('project name', () => {
     it('should fill in the project name derived from the previously filled project name', () => {
-      expect(document.querySelector('.js-path-name').value).toEqual(projectName);
+      expect(document.querySelector('.js-project-name').value).toEqual(projectName);
+    });
+
+    describe('empty path name', () => {
+      it('derives the path name from the previously filled project name', () => {
+        const alternateProjectName = 'My Alt Project';
+        const alternatePathName = 'my-alt-project';
+
+        setTestFixtures(`?name=${alternateProjectName}`);
+
+        expect(document.querySelector('.js-path-name').value).toEqual(alternatePathName);
+      });
+    });
+  });
+
+  describe('path name', () => {
+    it('should fill in the path name derived from the previously filled path name', () => {
+      expect(document.querySelector('.js-path-name').value).toEqual(pathName);
+    });
+
+    describe('empty project name', () => {
+      it('derives the project name from the previously filled path name', () => {
+        const alternateProjectName = 'My Alt Project';
+        const alternatePathName = 'my-alt-project';
+
+        setTestFixtures(`?path=${alternatePathName}`);
+
+        expect(document.querySelector('.js-project-name').value).toEqual(alternateProjectName);
+      });
     });
   });
 });

spec/javascripts/projects/project_new_spec.js

@@ -172,4 +172,34 @@ describe('New Project', () => {
       expect($projectPath.val()).toEqual('my-dash-delimited-awesome-project');
     });
   });
+
+  describe('derivesProjectNameFromSlug', () => {
+    const dummyProjectPath = 'my-awesome-project';
+    const dummyProjectName = 'Original Awesome Project';
+
+    beforeEach(() => {
+      projectNew.bindEvents();
+      $projectPath.val('').change();
+    });
+
+    it('converts slug to humanized project name', () => {
+      $projectPath.val(dummyProjectPath);
+
+      projectNew.onProjectPathChange($projectName, $projectPath);
+
+      expect($projectName.val()).toEqual('My Awesome Project');
+    });
+
+    it('does not convert slug to humanized project name if a project name already exists', () => {
+      $projectName.val(dummyProjectName);
+      $projectPath.val(dummyProjectPath);
+      projectNew.onProjectPathChange(
+        $projectName,
+        $projectPath,
+        $projectName.val().trim().length > 0,
+      );
+
+      expect($projectName.val()).toEqual(dummyProjectName);
+    });
+  });
 });