diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-30 21:08:19 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-30 21:08:19 +0300 |
commit | f06ebebadece98495408c29112abf1b65a43ecb6 (patch) | |
tree | 7df6f3c584086d35a3bd175cebef7215f08bec38 /app/assets/javascripts/projects | |
parent | f4199ade274d43b2627d17d9087f42d0f8175369 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/projects')
3 files changed, 45 insertions, 15 deletions
diff --git a/app/assets/javascripts/projects/new/components/new_project_url_select.vue b/app/assets/javascripts/projects/new/components/new_project_url_select.vue index f4a21c6057c..506f1ec5ffd 100644 --- a/app/assets/javascripts/projects/new/components/new_project_url_select.vue +++ b/app/assets/javascripts/projects/new/components/new_project_url_select.vue @@ -13,6 +13,7 @@ import { MINIMUM_SEARCH_LENGTH } from '~/graphql_shared/constants'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import Tracking from '~/tracking'; import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/constants'; +import { s__ } from '~/locale'; import searchNamespacesWhereUserCanCreateProjectsQuery from '../queries/search_namespaces_where_user_can_create_projects.query.graphql'; import eventHub from '../event_hub'; @@ -43,14 +44,7 @@ export default { debounce: DEBOUNCE_DELAY, }, }, - inject: [ - 'namespaceFullPath', - 'namespaceId', - 'rootUrl', - 'trackLabel', - 'userNamespaceFullPath', - 'userNamespaceId', - ], + inject: ['namespaceFullPath', 'namespaceId', 'rootUrl', 'trackLabel', 'userNamespaceId'], data() { return { currentUser: {}, @@ -62,10 +56,11 @@ export default { fullPath: this.namespaceFullPath, } : { - id: this.userNamespaceId, - fullPath: this.userNamespaceFullPath, + id: undefined, + fullPath: s__('ProjectsNew|Pick a group or namespace'), }, shouldSkipQuery: true, + userNamespaceId: this.userNamespaceId, }; }, computed: { @@ -92,6 +87,9 @@ export default { hasNoMatches() { return !this.hasGroupMatches && !this.hasNamespaceMatches; }, + dropdownPlaceholderClass() { + return this.selectedNamespace.id ? '' : 'gl-text-gray-500!'; + }, }, created() { eventHub.$on('select-template', this.handleSelectTemplate); @@ -130,11 +128,18 @@ export default { </script> <template> - <gl-button-group class="input-lg"> - <gl-button class="gl-text-truncate" label :title="rootUrl">{{ rootUrl }}</gl-button> + <gl-button-group class="gl-w-full"> + <gl-button + class="js-group-namespace-button gl-text-truncate gl-flex-grow-0!" + label + :title="rootUrl" + >{{ rootUrl }}</gl-button + > + <gl-dropdown :text="selectedNamespace.fullPath" - toggle-class="gl-rounded-top-right-base! gl-rounded-bottom-right-base! gl-w-20" + class="js-group-namespace-dropdown gl-flex-grow-1" + :toggle-class="`gl-rounded-top-right-base! gl-rounded-bottom-right-base! gl-w-20 ${dropdownPlaceholderClass}`" data-qa-selector="select_namespace_dropdown" @show="track('activate_form_input', { label: trackLabel, property: 'project_path' })" @shown="handleDropdownShown" @@ -166,11 +171,13 @@ export default { </template> </gl-dropdown> + <input type="hidden" name="project[selected_namespace_id]" :value="selectedNamespace.id" /> + <input id="project_namespace_id" type="hidden" name="project[namespace_id]" - :value="selectedNamespace.id" + :value="selectedNamespace.id || userNamespaceId" /> </gl-button-group> </template> diff --git a/app/assets/javascripts/projects/new/index.js b/app/assets/javascripts/projects/new/index.js index 4de9b8a6f47..a72172a4f5e 100644 --- a/app/assets/javascripts/projects/new/index.js +++ b/app/assets/javascripts/projects/new/index.js @@ -58,7 +58,6 @@ export function initNewProjectUrlSelect() { namespaceId: el.dataset.namespaceId, rootUrl: el.dataset.rootUrl, trackLabel: el.dataset.trackLabel, - userNamespaceFullPath: el.dataset.userNamespaceFullPath, userNamespaceId: el.dataset.userNamespaceId, }, render: (createElement) => createElement(NewProjectUrlSelect), diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js index f1b7e3df7d6..fbef51b43b2 100644 --- a/app/assets/javascripts/projects/project_new.js +++ b/app/assets/javascripts/projects/project_new.js @@ -14,6 +14,7 @@ import { let hasUserDefinedProjectPath = false; let hasUserDefinedProjectName = false; const invalidInputClass = 'gl-field-error-outline'; +const invalidDropdownClass = 'gl-inset-border-1-red-400!'; const cancelSource = axios.CancelToken.source(); const endpoint = `${gon.relative_url_root}/import/url/validate`; @@ -50,6 +51,25 @@ const onProjectPathChange = ($projectNameInput, $projectPathInput, hasExistingPr } }; +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'); +const namespaceError = () => document.querySelector('.js-group-namespace-error'); + +const validateGroupNamespaceDropdown = (e) => { + if (selectedNamespaceId() && !selectedNamespaceId().attributes.value) { + document.querySelector('input[data-qa-selector="project_name"]').reportValidity(); + e.preventDefault(); + dropdownButton().classList.add(invalidDropdownClass); + namespaceButton().classList.add(invalidDropdownClass); + namespaceError().classList.remove('gl-display-none'); + } else { + dropdownButton().classList.remove(invalidDropdownClass); + namespaceButton().classList.remove(invalidDropdownClass); + namespaceError().classList.add('gl-display-none'); + } +}; + const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => { const specialRepo = document.querySelector('.js-user-readme-repo'); @@ -70,6 +90,10 @@ const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => { $projectPathInput.val() !== $projectPathInput.data('username'), ); }); + + document.querySelector('.js-create-project-button').addEventListener('click', (e) => { + validateGroupNamespaceDropdown(e); + }); }; const deriveProjectPathFromUrl = ($projectImportUrl) => { |