diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-25 06:08:32 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-25 06:08:32 +0300 |
commit | d7f1d79eb586f756b120e7380393248009e62a00 (patch) | |
tree | 6fa39691d38a51022bd073bbcbfc3e05c4ee9519 /app/assets/javascripts/projects | |
parent | b48f85e16dcdda9fa2f96b7d2fe16e0a6ba28403 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/projects')
-rw-r--r-- | app/assets/javascripts/projects/project_import_gitlab_project.js | 4 | ||||
-rw-r--r-- | app/assets/javascripts/projects/project_new.js | 154 |
2 files changed, 100 insertions, 58 deletions
diff --git a/app/assets/javascripts/projects/project_import_gitlab_project.js b/app/assets/javascripts/projects/project_import_gitlab_project.js index 4f222438500..9d42f97d057 100644 --- a/app/assets/javascripts/projects/project_import_gitlab_project.js +++ b/app/assets/javascripts/projects/project_import_gitlab_project.js @@ -34,12 +34,12 @@ export default () => { // generate slug when project name changes $projectName.on('keyup', () => { - projectNew.onProjectNameChange($projectName, $projectPath); + projectNew.onProjectNameChangeJq($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), + projectNew.onProjectPathChangeJq($projectName, $projectPath, hasUserDefinedProjectName), ); }; diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js index 2bf13941f6f..2c2f957a75d 100644 --- a/app/assets/javascripts/projects/project_new.js +++ b/app/assets/javascripts/projects/project_new.js @@ -39,12 +39,18 @@ const validateImportCredentials = (url, user, password) => { return importCredentialsValidationPromise; }; -const onProjectNameChange = ($projectNameInput, $projectPathInput) => { +const onProjectNameChangeJq = ($projectNameInput, $projectPathInput) => { const slug = slugify(convertUnicodeToAscii($projectNameInput.val())); $projectPathInput.val(slug); }; -const onProjectPathChange = ($projectNameInput, $projectPathInput, hasExistingProjectName) => { +const onProjectNameChange = ($projectNameInput, $projectPathInput) => { + const slug = slugify(convertUnicodeToAscii($projectNameInput.value)); + // eslint-disable-next-line no-param-reassign + $projectPathInput.value = slug; +}; + +const onProjectPathChangeJq = ($projectNameInput, $projectPathInput, hasExistingProjectName) => { const slug = $projectPathInput.val(); if (!hasExistingProjectName) { @@ -52,6 +58,15 @@ const onProjectPathChange = ($projectNameInput, $projectPathInput, hasExistingPr } }; +const onProjectPathChange = ($projectNameInput, $projectPathInput, hasExistingProjectName) => { + const slug = $projectPathInput.value; + + if (!hasExistingProjectName) { + // eslint-disable-next-line no-param-reassign + $projectNameInput.value = convertToTitleCase(humanize(slug, '[-_]')); + } +}; + const selectedNamespaceId = () => document.querySelector('[name="project[selected_namespace_id]"]'); const dropdownButton = () => document.querySelector('.js-group-namespace-dropdown > button'); const namespaceButton = () => document.querySelector('.js-group-namespace-button'); @@ -73,24 +88,31 @@ const validateGroupNamespaceDropdown = (e) => { const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => { const specialRepo = document.querySelector('.js-user-readme-repo'); - - // eslint-disable-next-line @gitlab/no-global-event-off - $projectNameInput.off('keyup change').on('keyup change', () => { + const projectNameInputListener = () => { onProjectNameChange($projectNameInput, $projectPathInput); - hasUserDefinedProjectName = $projectNameInput.val().trim().length > 0; - hasUserDefinedProjectPath = $projectPathInput.val().trim().length > 0; - }); + hasUserDefinedProjectName = $projectNameInput.value.trim().length > 0; + hasUserDefinedProjectPath = $projectPathInput.value.trim().length > 0; + }; + + $projectNameInput.removeEventListener('keyup', projectNameInputListener); + $projectNameInput.addEventListener('keyup', projectNameInputListener); + $projectNameInput.removeEventListener('change', projectNameInputListener); + $projectNameInput.addEventListener('change', projectNameInputListener); - // eslint-disable-next-line @gitlab/no-global-event-off - $projectPathInput.off('keyup change').on('keyup change', () => { + const projectPathInputListener = () => { onProjectPathChange($projectNameInput, $projectPathInput, hasUserDefinedProjectName); - hasUserDefinedProjectPath = $projectPathInput.val().trim().length > 0; + hasUserDefinedProjectPath = $projectPathInput.value.trim().length > 0; specialRepo.classList.toggle( 'gl-display-none', - $projectPathInput.val() !== $projectPathInput.data('username'), + $projectPathInput.value !== $projectPathInput.dataset.username, ); - }); + }; + + $projectPathInput.removeEventListener('keyup', projectPathInputListener); + $projectPathInput.addEventListener('keyup', projectPathInputListener); + $projectPathInput.removeEventListener('change', projectPathInputListener); + $projectPathInput.addEventListener('change', projectPathInputListener); document.querySelector('.js-create-project-button').addEventListener('click', (e) => { validateGroupNamespaceDropdown(e); @@ -99,17 +121,17 @@ const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => { const deriveProjectPathFromUrl = ($projectImportUrl) => { const $currentProjectName = $projectImportUrl - .parents('.toggle-import-form') - .find('#project_name'); + .closest('.toggle-import-form') + .querySelector('#project_name'); const $currentProjectPath = $projectImportUrl - .parents('.toggle-import-form') - .find('#project_path'); + .closest('.toggle-import-form') + .querySelector('#project_path'); if (hasUserDefinedProjectPath || $currentProjectPath.length === 0) { return; } - let importUrl = $projectImportUrl.val().trim(); + let importUrl = $projectImportUrl.value.trim(); if (importUrl.length === 0) { return; } @@ -125,7 +147,9 @@ const deriveProjectPathFromUrl = ($projectImportUrl) => { // extract everything after the last slash const pathMatch = /\/([^/]+)$/.exec(importUrl); if (pathMatch) { - $currentProjectPath.val(pathMatch[1]); + // eslint-disable-next-line no-unused-vars + const [_, matchingString] = pathMatch; + $currentProjectPath.value = matchingString; onProjectPathChange($currentProjectName, $currentProjectPath, false); } }; @@ -149,19 +173,20 @@ const bindHowToImport = () => { const bindEvents = () => { const $newProjectForm = $('#new_project'); - const $projectImportUrl = $('#project_import_url'); const $projectImportUrlUser = $('#project_import_url_user'); const $projectImportUrlPassword = $('#project_import_url_password'); const $projectImportUrlError = $('.js-import-url-error'); const $projectImportForm = $('form.js-project-import'); - const $projectPath = $('.tab-pane.active #project_path'); const $useTemplateBtn = $('.template-button > input'); - const $projectFieldsForm = $('.project-fields-form'); - const $selectedTemplateText = $('.selected-template'); const $changeTemplateBtn = $('.change-template'); - const $selectedIcon = $('.selected-icon'); - const $projectTemplateButtons = $('.project-templates-buttons'); - const $projectName = $('.tab-pane.active #project_name'); + + const $projectImportUrl = document.querySelector('#project_import_url'); + const $projectPath = document.querySelector('.tab-pane.active #project_path'); + const $projectFieldsForm = document.querySelector('.project-fields-form'); + const $selectedIcon = document.querySelector('.selected-icon'); + const $selectedTemplateText = document.querySelector('.selected-template'); + const $projectName = document.querySelector('.tab-pane.active #project_name'); + const $projectTemplateButtons = document.querySelectorAll('.project-templates-buttons'); if ($newProjectForm.length !== 1 && $projectImportForm.length !== 1) { return; @@ -170,31 +195,38 @@ const bindEvents = () => { bindHowToImport(); $('.btn_import_gitlab_project').on('click contextmenu', () => { - const importHref = $('a.btn_import_gitlab_project').attr('data-href'); - $('.btn_import_gitlab_project').attr( - 'href', - `${importHref}?namespace_id=${$( - '#project_namespace_id', - ).val()}&name=${$projectName.val()}&path=${$projectPath.val()}`, - ); + const importGitlabProjectBtn = document.querySelector('.btn_import_gitlab_project'); + const projectNamespaceId = document.querySelector('#project_namespace_id'); + + const { href: importHref } = importGitlabProjectBtn.dataset; + const newHref = `${importHref}?namespace_id=${projectNamespaceId.value}&name=${$projectName.value}&path=${$projectPath.value}`; + importGitlabProjectBtn.setAttribute('href', newHref); }); + const clearChildren = (el) => { + while (el.firstChild) el.removeChild(el.firstChild); + }; + function chooseTemplate() { - $projectTemplateButtons.addClass('hidden'); - $projectFieldsForm.addClass('selected'); - $selectedIcon.empty(); + $projectTemplateButtons.forEach((ptb) => ptb.classList.add('hidden')); + $projectFieldsForm.classList.add('selected'); - const $selectedTemplate = $(this); - $selectedTemplate.prop('checked', true); + clearChildren($selectedIcon); - const value = $selectedTemplate.val(); + const $selectedTemplate = this; + $selectedTemplate.checked = true; + const { value } = $selectedTemplate; const selectedTemplate = DEFAULT_PROJECT_TEMPLATES[value]; - $selectedTemplateText.text(selectedTemplate.text); - $(selectedTemplate.icon).clone().addClass('d-block').appendTo($selectedIcon); + $selectedTemplateText.textContent = selectedTemplate.text; + const clone = document.querySelector(selectedTemplate.icon).cloneNode(true); + clone.classList.add('d-block'); + + $selectedIcon.append(clone); + + const $activeTabProjectName = document.querySelector('.tab-pane.active #project_name'); + const $activeTabProjectPath = document.querySelector('.tab-pane.active #project_path'); - const $activeTabProjectName = $('.tab-pane.active #project_name'); - const $activeTabProjectPath = $('.tab-pane.active #project_path'); $activeTabProjectName.focus(); setProjectNamePathHandlers($activeTabProjectName, $activeTabProjectPath); } @@ -216,8 +248,8 @@ const bindEvents = () => { $useTemplateBtn.on('keypress', chooseTemplateOnEnter); $changeTemplateBtn.on('click', () => { - $projectTemplateButtons.removeClass('hidden'); - $projectFieldsForm.removeClass('selected'); + $projectTemplateButtons.forEach((ptb) => ptb.classList.remove('hidden')); + $projectFieldsForm.classList.remove('selected'); $useTemplateBtn.prop('checked', false); }); @@ -227,7 +259,7 @@ const bindEvents = () => { const updateUrlPathWarningVisibility = async () => { const { success: isUrlValid, cancelled } = await validateImportCredentials( - $projectImportUrl.val(), + $projectImportUrl.value, $projectImportUrlUser.val(), $projectImportUrlPassword.val(), ); @@ -235,7 +267,7 @@ const bindEvents = () => { return; } - $projectImportUrl.toggleClass(invalidInputClass, !isUrlValid); + $projectImportUrl.classList.toggle(invalidInputClass, !isUrlValid); $projectImportUrlError.toggleClass('hide', isUrlValid); }; const debouncedUpdateUrlPathWarningVisibility = debounce( @@ -244,20 +276,28 @@ const bindEvents = () => { ); let isProjectImportUrlDirty = false; - $projectImportUrl.on('blur', () => { + $projectImportUrl.addEventListener('blur', () => { isProjectImportUrlDirty = true; debouncedUpdateUrlPathWarningVisibility(); }); - $projectImportUrl.on('keyup', () => { + $projectImportUrl.addEventListener('keyup', () => { deriveProjectPathFromUrl($projectImportUrl); }); [$projectImportUrl, $projectImportUrlUser, $projectImportUrlPassword].forEach(($f) => { - $f.on('input', () => { - if (isProjectImportUrlDirty) { - debouncedUpdateUrlPathWarningVisibility(); - } - }); + if ($f?.on) { + $f.on('input', () => { + if (isProjectImportUrlDirty) { + debouncedUpdateUrlPathWarningVisibility(); + } + }); + } else { + $f.addEventListener('input', () => { + if (isProjectImportUrlDirty) { + debouncedUpdateUrlPathWarningVisibility(); + } + }); + } }); $projectImportForm.on('submit', async (e) => { @@ -287,8 +327,8 @@ const bindEvents = () => { $('.js-import-git-toggle-button').on('click', () => { setProjectNamePathHandlers( - $('.tab-pane.active #project_name'), - $('.tab-pane.active #project_path'), + document.querySelector('.tab-pane.active #project_name'), + document.querySelector('.tab-pane.active #project_path'), ); }); @@ -300,6 +340,8 @@ export default { deriveProjectPathFromUrl, onProjectNameChange, onProjectPathChange, + onProjectNameChangeJq, + onProjectPathChangeJq, }; export { bindHowToImport }; |