Add latest changes from gitlab-org/gitlab@master

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 {
         </template>
 
         <template #default>
-          {{ legendText }}
+          <span data-testid="legend-text">{{ legendText }}</span>
         </template>
       </gl-infinite-scroll>
       <div v-if="showNoResultsMessage" class="text-muted ml-2 js-no-results-message">

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:

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();
+    search(query);
-
-    searchInput.setValue(query);
-    searchInput.trigger('input');
 
     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('');
+    });
   });
 });