diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-14 15:09:51 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-14 15:09:51 +0300 |
commit | 9223573b85bcfdd21953f52e0d2c5cb587e366a1 (patch) | |
tree | 7dfd09536b948d560fc442014a95a221327b6567 /app/assets/javascripts/projects | |
parent | 1fc72cb8765dab466da8555b70eb744a53a74a80 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/projects')
-rw-r--r-- | app/assets/javascripts/projects/compare/components/repo_dropdown.vue | 55 | ||||
-rw-r--r-- | app/assets/javascripts/projects/project_new.js | 2 |
2 files changed, 26 insertions, 31 deletions
diff --git a/app/assets/javascripts/projects/compare/components/repo_dropdown.vue b/app/assets/javascripts/projects/compare/components/repo_dropdown.vue index c00e75db722..4c0b5d0b1f6 100644 --- a/app/assets/javascripts/projects/compare/components/repo_dropdown.vue +++ b/app/assets/javascripts/projects/compare/components/repo_dropdown.vue @@ -1,11 +1,9 @@ <script> -import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; +import { GlCollapsibleListbox } from '@gitlab/ui'; export default { components: { - GlDropdown, - GlDropdownItem, - GlSearchBoxByType, + GlCollapsibleListbox, }, props: { paramsName: { @@ -25,6 +23,7 @@ export default { data() { return { searchTerm: '', + selectedProjectId: this.selectedProject.id, }; }, computed: { @@ -32,49 +31,45 @@ export default { return this.projects === null; }, filteredRepos() { - const lowerCaseSearchTerm = this.searchTerm.toLowerCase(); + if (this.disableRepoDropdown) return []; - return this?.projects.filter(({ name }) => name.toLowerCase().includes(lowerCaseSearchTerm)); + const lowerCaseSearchTerm = this.searchTerm.toLowerCase(); + return this.projects + .filter(({ name }) => name.toLowerCase().includes(lowerCaseSearchTerm)) + .map((project) => ({ text: project.name, value: project.id })); }, inputName() { return `${this.paramsName}_project_id`; }, }, methods: { - onClick(project) { - this.emitTargetProject(project); - }, - emitTargetProject(project) { + emitTargetProject(projectId) { + if (this.disableRepoDropdown) return; + const project = this.projects.find(({ id }) => id === projectId); this.$emit('selectProject', { direction: this.paramsName, project }); }, + onSearch(searchTerm) { + this.searchTerm = searchTerm; + }, }, }; </script> <template> <div> - <input type="hidden" :name="inputName" :value="selectedProject.id" /> - <gl-dropdown - :text="selectedProject.name" + <input type="hidden" :name="inputName" :value="selectedProjectId" /> + <gl-collapsible-listbox + v-model="selectedProjectId" + :toggle-text="selectedProject.name" :header-text="s__(`CompareRevisions|Select target project`)" - class="gl-w-full gl-font-monospace" + class="gl-font-monospace" toggle-class="gl-min-w-0" :disabled="disableRepoDropdown" - > - <template #header> - <gl-search-box-by-type v-if="!disableRepoDropdown" v-model.trim="searchTerm" /> - </template> - <template v-if="!disableRepoDropdown"> - <gl-dropdown-item - v-for="repo in filteredRepos" - :key="repo.id" - is-check-item - :is-checked="selectedProject.id === repo.id" - @click="onClick(repo)" - > - {{ repo.name }} - </gl-dropdown-item> - </template> - </gl-dropdown> + :items="filteredRepos" + block + searchable + @select="emitTargetProject" + @search="onSearch" + /> </div> </template> diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js index 99ea02aaa4f..33320f59b0f 100644 --- a/app/assets/javascripts/projects/project_new.js +++ b/app/assets/javascripts/projects/project_new.js @@ -295,7 +295,7 @@ const bindEvents = () => { }); $newProjectForm.on('submit', () => { - $projectPath.val($projectPath.val().trim()); + $projectPath.value = $projectPath.value.trim(); }); const updateUrlPathWarningVisibility = async () => { |