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 {
- {{ legendText }}
+ {{ legendText }}
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('');
+ });
});
});