Add latest changes from gitlab-org/gitlab@master

2 files changed, 42 insertions, 0 deletions

diff --git a/app/assets/javascripts/projects/project_name_rules.js b/app/assets/javascripts/projects/project_name_rules.js
new file mode 100644
index 00000000000..eeef1fb5afc
--- /dev/null
+++ b/app/assets/javascripts/projects/project_name_rules.js
@@ -0,0 +1,28 @@
+import { __ } from '~/locale';
+
+const rulesReg = [
+  {
+    reg: /^[a-zA-Z0-9\u{00A9}-\u{1f9ff}_]/u,
+    msg: __("Name must start with a letter, digit, emoji, or '_'"),
+  },
+  {
+    reg: /^[a-zA-Z0-9\p{Pd}\u{002B}\u{00A9}-\u{1f9ff}_. ]+$/u,
+    msg: __("Name can contain only letters, digits, emojis, '_', '.', '+', dashes, or spaces"),
+  },
+];
+
+/**
+ *
+ * @param {string} text
+ * @returns {string} msg
+ */
+function checkRules(text) {
+  for (const item of rulesReg) {
+    if (!item.reg.test(text)) {
+      return item.msg;
+    }
+  }
+  return '';
+}
+
+export { checkRules };
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index 424ea3b61c5..d71e80dffcf 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -12,6 +12,7 @@ import {
   slugify,
   convertUnicodeToAscii,
 } from '../lib/utils/text_utility';
+import { checkRules } from './project_name_rules';
 
 let hasUserDefinedProjectPath = false;
 let hasUserDefinedProjectName = false;
@@ -87,10 +88,23 @@ const validateGroupNamespaceDropdown = (e) => {
   }
 };
 
+const checkProjectName = (projectNameInput) => {
+  const msg = checkRules(projectNameInput.value);
+  const projectNameError = document.querySelector('#project_name_error');
+  if (!projectNameError) return;
+  if (msg) {
+    projectNameError.innerText = msg;
+    projectNameError.classList.remove('hidden');
+  } else {
+    projectNameError.classList.add('hidden');
+  }
+};
+
 const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => {
   const specialRepo = document.querySelector('.js-user-readme-repo');
   const projectNameInputListener = () => {
     onProjectNameChange($projectNameInput, $projectPathInput);
+    checkProjectName($projectNameInput);
     hasUserDefinedProjectName = $projectNameInput.value.trim().length > 0;
     hasUserDefinedProjectPath = $projectPathInput.value.trim().length > 0;
   };