debian-mirror-gitlab/app/assets/javascripts/projects/project_new.js

228 lines
7.1 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2021-11-18 22:05:49 +05:30
import { debounce } from 'lodash';
2020-10-24 23:57:45 +05:30
import DEFAULT_PROJECT_TEMPLATES from 'ee_else_ce/projects/default_project_templates';
2021-11-18 22:05:49 +05:30
import axios from '../lib/utils/axios_utils';
2020-11-24 15:15:51 +05:30
import {
convertToTitleCase,
humanize,
slugify,
convertUnicodeToAscii,
} from '../lib/utils/text_utility';
2018-03-27 19:54:05 +05:30
2017-09-10 17:25:29 +05:30
let hasUserDefinedProjectPath = false;
2020-03-13 15:44:24 +05:30
let hasUserDefinedProjectName = false;
2021-11-18 22:05:49 +05:30
const invalidInputClass = 'gl-field-error-outline';
const validateImportCredentials = (url, user, password) => {
const endpoint = `${gon.relative_url_root}/import/url/validate`;
return axios
.post(endpoint, {
url,
user,
password,
})
.then(({ data }) => data)
.catch(() => ({
// intentionally reporting success in case of validation error
// we do not want to block users from trying import in case of validation exception
success: true,
}));
};
2020-03-13 15:44:24 +05:30
const onProjectNameChange = ($projectNameInput, $projectPathInput) => {
2020-11-24 15:15:51 +05:30
const slug = slugify(convertUnicodeToAscii($projectNameInput.val()));
2020-03-13 15:44:24 +05:30
$projectPathInput.val(slug);
};
const onProjectPathChange = ($projectNameInput, $projectPathInput, hasExistingProjectName) => {
const slug = $projectPathInput.val();
if (!hasExistingProjectName) {
$projectNameInput.val(convertToTitleCase(humanize(slug, '[-_]')));
}
};
const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => {
2021-12-11 22:18:48 +05:30
const specialRepo = document.querySelector('.js-user-readme-repo');
2021-02-22 17:27:13 +05:30
// eslint-disable-next-line @gitlab/no-global-event-off
2020-03-13 15:44:24 +05:30
$projectNameInput.off('keyup change').on('keyup change', () => {
onProjectNameChange($projectNameInput, $projectPathInput);
hasUserDefinedProjectName = $projectNameInput.val().trim().length > 0;
hasUserDefinedProjectPath = $projectPathInput.val().trim().length > 0;
});
2021-02-22 17:27:13 +05:30
// eslint-disable-next-line @gitlab/no-global-event-off
2020-03-13 15:44:24 +05:30
$projectPathInput.off('keyup change').on('keyup change', () => {
onProjectPathChange($projectNameInput, $projectPathInput, hasUserDefinedProjectName);
hasUserDefinedProjectPath = $projectPathInput.val().trim().length > 0;
2021-12-11 22:18:48 +05:30
specialRepo.classList.toggle(
'gl-display-none',
$projectPathInput.val() !== $projectPathInput.data('username'),
);
2020-03-13 15:44:24 +05:30
});
};
2017-09-10 17:25:29 +05:30
2021-03-08 18:12:59 +05:30
const deriveProjectPathFromUrl = ($projectImportUrl) => {
2020-03-13 15:44:24 +05:30
const $currentProjectName = $projectImportUrl
.parents('.toggle-import-form')
.find('#project_name');
2018-12-13 13:39:08 +05:30
const $currentProjectPath = $projectImportUrl
.parents('.toggle-import-form')
.find('#project_path');
2020-03-13 15:44:24 +05:30
2017-09-10 17:25:29 +05:30
if (hasUserDefinedProjectPath) {
return;
}
let importUrl = $projectImportUrl.val().trim();
if (importUrl.length === 0) {
return;
}
/*
\/?: remove trailing slash
(\.git\/?)?: remove trailing .git (with optional trailing slash)
(\?.*)?: remove query string
(#.*)?: remove fragment identifier
*/
importUrl = importUrl.replace(/\/?(\.git\/?)?(\?.*)?(#.*)?$/, '');
// extract everything after the last slash
const pathMatch = /\/([^/]+)$/.exec(importUrl);
if (pathMatch) {
2018-03-17 18:26:18 +05:30
$currentProjectPath.val(pathMatch[1]);
2020-03-13 15:44:24 +05:30
onProjectPathChange($currentProjectName, $currentProjectPath, false);
2017-09-10 17:25:29 +05:30
}
};
2021-11-11 11:23:49 +05:30
const bindHowToImport = () => {
$('.how_to_import_link').on('click', (e) => {
e.preventDefault();
$(e.currentTarget).next('.modal').show();
});
$('.modal-header .close').on('click', () => {
$('.modal').hide();
});
};
2017-09-10 17:25:29 +05:30
const bindEvents = () => {
const $newProjectForm = $('#new_project');
const $projectImportUrl = $('#project_import_url');
2021-11-18 22:05:49 +05:30
const $projectImportUrlUser = $('#project_import_url_user');
const $projectImportUrlPassword = $('#project_import_url_password');
const $projectImportUrlError = $('.js-import-url-error');
const $projectImportForm = $('.project-import form');
2018-11-20 20:47:30 +05:30
const $projectPath = $('.tab-pane.active #project_path');
2018-03-17 18:26:18 +05:30
const $useTemplateBtn = $('.template-button > input');
const $projectFieldsForm = $('.project-fields-form');
const $selectedTemplateText = $('.selected-template');
const $changeTemplateBtn = $('.change-template');
2018-11-18 11:00:15 +05:30
const $selectedIcon = $('.selected-icon');
const $projectTemplateButtons = $('.project-templates-buttons');
2018-11-20 20:47:30 +05:30
const $projectName = $('.tab-pane.active #project_name');
2017-09-10 17:25:29 +05:30
if ($newProjectForm.length !== 1) {
return;
}
2021-11-11 11:23:49 +05:30
bindHowToImport();
2017-09-10 17:25:29 +05:30
$('.btn_import_gitlab_project').on('click', () => {
const importHref = $('a.btn_import_gitlab_project').attr('href');
2018-12-13 13:39:08 +05:30
$('.btn_import_gitlab_project').attr(
'href',
`${importHref}?namespace_id=${$(
'#project_namespace_id',
).val()}&name=${$projectName.val()}&path=${$projectPath.val()}`,
);
2017-09-10 17:25:29 +05:30
});
2018-03-17 18:26:18 +05:30
function chooseTemplate() {
2018-11-18 11:00:15 +05:30
$projectTemplateButtons.addClass('hidden');
2018-03-17 18:26:18 +05:30
$projectFieldsForm.addClass('selected');
2018-11-18 11:00:15 +05:30
$selectedIcon.empty();
2018-03-17 18:26:18 +05:30
const value = $(this).val();
2020-04-22 19:07:51 +05:30
2021-02-22 17:27:13 +05:30
const selectedTemplate = DEFAULT_PROJECT_TEMPLATES[value];
2018-03-17 18:26:18 +05:30
$selectedTemplateText.text(selectedTemplate.text);
2021-03-08 18:12:59 +05:30
$(selectedTemplate.icon).clone().addClass('d-block').appendTo($selectedIcon);
2018-11-20 20:47:30 +05:30
const $activeTabProjectName = $('.tab-pane.active #project_name');
const $activeTabProjectPath = $('.tab-pane.active #project_path');
$activeTabProjectName.focus();
2020-03-13 15:44:24 +05:30
setProjectNamePathHandlers($activeTabProjectName, $activeTabProjectPath);
2018-03-17 18:26:18 +05:30
}
$useTemplateBtn.on('change', chooseTemplate);
$changeTemplateBtn.on('click', () => {
2018-11-18 11:00:15 +05:30
$projectTemplateButtons.removeClass('hidden');
2018-03-17 18:26:18 +05:30
$projectFieldsForm.removeClass('selected');
$useTemplateBtn.prop('checked', false);
});
2017-09-10 17:25:29 +05:30
$newProjectForm.on('submit', () => {
$projectPath.val($projectPath.val().trim());
});
2021-11-18 22:05:49 +05:30
const updateUrlPathWarningVisibility = debounce(async () => {
const { success: isUrlValid } = await validateImportCredentials(
$projectImportUrl.val(),
$projectImportUrlUser.val(),
$projectImportUrlPassword.val(),
);
$projectImportUrl.toggleClass(invalidInputClass, !isUrlValid);
$projectImportUrlError.toggleClass('hide', isUrlValid);
}, 500);
2021-09-30 23:02:18 +05:30
let isProjectImportUrlDirty = false;
$projectImportUrl.on('blur', () => {
isProjectImportUrlDirty = true;
updateUrlPathWarningVisibility();
});
$projectImportUrl.on('keyup', () => {
deriveProjectPathFromUrl($projectImportUrl);
2021-11-18 22:05:49 +05:30
});
[$projectImportUrl, $projectImportUrlUser, $projectImportUrlPassword].forEach(($f) => {
$f.on('input', () => {
if (isProjectImportUrlDirty) {
updateUrlPathWarningVisibility();
}
});
});
$projectImportForm.on('submit', (e) => {
const $invalidFields = $projectImportForm.find(`.${invalidInputClass}`);
if ($invalidFields.length > 0) {
$invalidFields[0].focus();
e.preventDefault();
e.stopPropagation();
2021-09-30 23:02:18 +05:30
}
});
2018-11-20 20:47:30 +05:30
2019-07-31 22:56:46 +05:30
$('.js-import-git-toggle-button').on('click', () => {
const $projectMirror = $('#project_mirror');
$projectMirror.attr('disabled', !$projectMirror.attr('disabled'));
2020-03-13 15:44:24 +05:30
setProjectNamePathHandlers(
$('.tab-pane.active #project_name'),
$('.tab-pane.active #project_path'),
);
2019-07-31 22:56:46 +05:30
});
2020-03-13 15:44:24 +05:30
setProjectNamePathHandlers($projectName, $projectPath);
2017-09-10 17:25:29 +05:30
};
export default {
bindEvents,
deriveProjectPathFromUrl,
2018-11-20 20:47:30 +05:30
onProjectNameChange,
2020-03-13 15:44:24 +05:30
onProjectPathChange,
2017-09-10 17:25:29 +05:30
};
2021-11-11 11:23:49 +05:30
export { bindHowToImport };