diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue index 4e2029cd74f..e659e2155fb 100644 --- a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue +++ b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue @@ -48,10 +48,14 @@ export default { data() { return { searchQuery: '', + hasSearched: false, }; }, computed: { legendText() { + if (!this.hasSearched) { + return ''; + } const count = this.projectSearchResults.length; const total = this.totalResults; @@ -75,6 +79,9 @@ export default { return this.selectedProjects.some(({ id }) => project.id === id); }, onInput: debounce(function debouncedOnInput() { + if (!this.hasSearched) { + this.hasSearched = true; + } this.$emit('searched', this.searchQuery); }, SEARCH_INPUT_TIMEOUT_MS), }, @@ -115,7 +122,7 @@ export default {
diff --git a/doc/subscriptions/gitlab_com/index.md b/doc/subscriptions/gitlab_com/index.md index 0924fc23e24..5ef157db902 100644 --- a/doc/subscriptions/gitlab_com/index.md +++ b/doc/subscriptions/gitlab_com/index.md @@ -131,6 +131,22 @@ The Seat usage listing is updated live, but the usage statistics on the billing only once per day. For this reason there can be a minor difference between the seat usage listing and the billing page. +### Search seat usage + +> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/262875) in GitLab 13.8. + +To search users in the **Seat usage** page, enter a string in the search field. A minimum of 3 +characters are required. + +The search returns those users whose first name, last name, or username contain the search string. + +For example: + +| First name | Search string | Match ? | +|:-----------|:--------------|:--------| +| Amir | `ami` | Yes | +| Amir | `amr` | No | + ## Renew your GitLab.com subscription To renew your subscription: diff --git a/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js b/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js index 662192edd8c..016622fd0bb 100644 --- a/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js +++ b/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js @@ -18,6 +18,13 @@ describe('ProjectSelector component', () => { selected = selected.concat(allProjects.slice(0, 3)).concat(allProjects.slice(5, 8)); const findSearchInput = () => wrapper.find(GlSearchBoxByType).find('input'); + const findLegendText = () => wrapper.find('[data-testid="legend-text"]').text(); + const search = (query) => { + const searchInput = findSearchInput(); + + searchInput.setValue(query); + searchInput.trigger('input'); + }; beforeEach(() => { wrapper = mount(Vue.extend(ProjectSelector), { @@ -48,10 +55,7 @@ describe('ProjectSelector component', () => { it(`triggers a search when the search input value changes`, () => { jest.spyOn(vm, '$emit').mockImplementation(() => {}); const query = 'my test query!'; - const searchInput = findSearchInput(); - - searchInput.setValue(query); - searchInput.trigger('input'); + search(query); expect(vm.$emit).toHaveBeenCalledWith('searched', query); }); @@ -121,15 +125,21 @@ describe('ProjectSelector component', () => { `( 'is "$expected" given $count results are showing out of $total', ({ count, total, expected }) => { + search('gitlab ui'); + wrapper.setProps({ projectSearchResults: searchResults.slice(0, count), totalResults: total, }); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.text()).toContain(expected); + expect(findLegendText()).toBe(expected); }); }, ); + + it('is not rendered without searching', () => { + expect(findLegendText()).toBe(''); + }); }); });