Commit 5f231d51 authored by Samantha Ming's avatar Samantha Ming Committed by Savas Vedova

Use search param in refs call to filter revisions

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/324612
parent e85e1011
<script>
import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlDropdownSectionHeader } from '@gitlab/ui';
import { debounce } from 'lodash';
import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
import { s__ } from '~/locale';
const emptyDropdownText = s__('CompareRevisions|Select branch/tag');
const EMPTY_DROPDOWN_TEXT = s__('CompareRevisions|Select branch/tag');
const SEARCH_DEBOUNCE_MS = 300;
export default {
components: {
......@@ -38,19 +40,11 @@ export default {
};
},
computed: {
filteredBranches() {
return this.branches.filter((branch) =>
branch.toLowerCase().includes(this.searchTerm.toLowerCase()),
);
hasBranches() {
return Boolean(this.branches?.length);
},
hasFilteredBranches() {
return this.filteredBranches.length;
},
filteredTags() {
return this.tags.filter((tag) => tag.toLowerCase().includes(this.searchTerm.toLowerCase()));
},
hasFilteredTags() {
return this.filteredTags.length;
hasTags() {
return Boolean(this.tags?.length);
},
},
watch: {
......@@ -59,13 +53,34 @@ export default {
this.fetchBranchesAndTags(true);
}
},
searchTerm: debounce(function debounceSearch() {
this.searchBranchesAndTags();
}, SEARCH_DEBOUNCE_MS),
},
mounted() {
this.fetchBranchesAndTags();
},
methods: {
searchBranchesAndTags() {
return axios
.get(this.refsProjectPath, {
params: {
search: this.searchTerm,
},
})
.then(({ data }) => {
this.branches = data.Branches || [];
this.tags = data.Tags || [];
})
.catch(() => {
createFlash({
message: s__(
'CompareRevisions|There was an error while searching the branch/tag list. Please try again.',
),
});
});
},
fetchBranchesAndTags(reset = false) {
const endpoint = this.refsProjectPath;
this.loading = true;
if (reset) {
......@@ -73,7 +88,7 @@ export default {
}
return axios
.get(endpoint)
.get(this.refsProjectPath)
.then(({ data }) => {
this.branches = data.Branches || [];
this.tags = data.Tags || [];
......@@ -90,7 +105,7 @@ export default {
});
},
getDefaultBranch() {
return this.paramsBranch || emptyDropdownText;
return this.paramsBranch || EMPTY_DROPDOWN_TEXT;
},
onClick(revision) {
this.selectedRevision = revision;
......@@ -119,24 +134,24 @@ export default {
@keyup.enter="onSearchEnter"
/>
</template>
<gl-dropdown-section-header v-if="hasFilteredBranches">
<gl-dropdown-section-header v-if="hasBranches">
{{ s__('CompareRevisions|Branches') }}
</gl-dropdown-section-header>
<gl-dropdown-item
v-for="(branch, index) in filteredBranches"
:key="`branch${index}`"
v-for="branch in branches"
:key="branch"
is-check-item
:is-checked="selectedRevision === branch"
@click="onClick(branch)"
>
{{ branch }}
</gl-dropdown-item>
<gl-dropdown-section-header v-if="hasFilteredTags">
<gl-dropdown-section-header v-if="hasTags">
{{ s__('CompareRevisions|Tags') }}
</gl-dropdown-section-header>
<gl-dropdown-item
v-for="(tag, index) in filteredTags"
:key="`tag${index}`"
v-for="tag in tags"
:key="tag"
is-check-item
:is-checked="selectedRevision === tag"
@click="onClick(tag)"
......
---
title: Use search param in refs call to filter revisions
merge_request: 57442
author:
type: fixed
......@@ -7829,6 +7829,9 @@ msgstr ""
msgid "CompareRevisions|There was an error while loading the branch/tag list. Please try again."
msgstr ""
msgid "CompareRevisions|There was an error while searching the branch/tag list. Please try again."
msgstr ""
msgid "CompareRevisions|There was an error while updating the branch/tag list. Please try again."
msgstr ""
......
import { GlDropdown } from '@gitlab/ui';
import { GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import AxiosMockAdapter from 'axios-mock-adapter';
import createFlash from '~/flash';
......@@ -23,6 +23,10 @@ describe('RevisionDropdown component', () => {
...defaultProps,
...props,
},
stubs: {
GlDropdown,
GlSearchBoxByType,
},
});
};
......@@ -36,6 +40,7 @@ describe('RevisionDropdown component', () => {
});
const findGlDropdown = () => wrapper.find(GlDropdown);
const findSearchBox = () => wrapper.find(GlSearchBoxByType);
it('sets hidden input', () => {
createComponent();
......@@ -85,6 +90,40 @@ describe('RevisionDropdown component', () => {
expect(axios.get).toHaveBeenLastCalledWith(newRefsProjectPath);
});
describe('search', () => {
it('shows flash message on error', async () => {
axiosMock.onGet('some/invalid/path').replyOnce(404);
createComponent();
await wrapper.vm.searchBranchesAndTags();
expect(createFlash).toHaveBeenCalled();
});
it('makes request with search param', async () => {
jest.spyOn(axios, 'get').mockResolvedValue({
data: {
Branches: [],
Tags: [],
},
});
const mockSearchTerm = 'foobar';
createComponent();
findSearchBox().vm.$emit('input', mockSearchTerm);
await axios.waitForAll();
expect(axios.get).toHaveBeenCalledWith(
defaultProps.refsProjectPath,
expect.objectContaining({
params: {
search: mockSearchTerm,
},
}),
);
});
});
describe('GlDropdown component', () => {
it('renders props', () => {
createComponent();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment