Merge branch 'debounce-orgs' of 'https://github.com/evamillan/grimoir…

…elab-sortinghat' Merges #842 Closes #842
chaoss · Dec 13, 2023 · b035160 · b035160
2 parents 9aa203a + 3a6b385
commit b035160
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 30 deletions.
diff --git a/releases/unreleased/improve-loading-time-when-looking-for-organizations.yml b/releases/unreleased/improve-loading-time-when-looking-for-organizations.yml
@@ -0,0 +1,9 @@
+---
+title: Improved loading time when looking for organizations
+category: added
+author: Eva Millán <[email protected]>
+issue: null
+notes: >
+  The autocomplete field that is used to affiliate individuals
+  to organizations now makes fewer and lighter requests to find
+  them, resulting in faster loading times.
diff --git a/ui/src/apollo/queries.js b/ui/src/apollo/queries.js
@@ -277,6 +277,21 @@ const GET_SCHEDULED_TASKS = gql`
   }
 `;
 
+const FIND_ORGANIZATION = gql`
+  query findOrganization(
+    $page: Int
+    $pageSize: Int
+    $filters: OrganizationFilterType
+  ) {
+    organizations(page: $page, pageSize: $pageSize, filters: $filters) {
+      entities {
+        id
+        name
+      }
+    }
+  }
+`;
+
 const getIndividualByUuid = (apollo, uuid) => {
   let response = apollo.query({
     query: GET_INDIVIDUAL_BYUUID,
@@ -445,6 +460,17 @@ const getScheduledTasks = (apollo, jobType, backend) => {
   });
 };
 
+const findOrganization = (apollo, page, pageSize, filters) => {
+  return apollo.query({
+    query: FIND_ORGANIZATION,
+    variables: {
+      page,
+      pageSize,
+      filters,
+    },
+  });
+};
+
 export {
   getCountries,
   getIndividuals,
@@ -460,4 +486,5 @@ export {
   getImportIdentitiesTasks,
   getOrganization,
   getScheduledTasks,
+  findOrganization,
 };
diff --git a/ui/src/components/OrganizationSelector.vue b/ui/src/components/OrganizationSelector.vue
@@ -4,10 +4,12 @@
     :items="organizations"
     :search-input.sync="search"
     :label="label"
+    :loading="isLoading"
     item-text="name"
     item-value="name"
     :no-data-text="`No matches for &quot;${search}&quot;`"
-    :hide-no-data="!search"
+    :hide-no-data="!search || isLoading"
+    cache-items
     clearable
     dense
     outlined
@@ -33,6 +35,7 @@ export default {
       inputValue: this.value,
       organizations: [],
       search: this.value,
+      isLoading: false,
     };
   },
   props: {
@@ -55,11 +58,19 @@ export default {
     },
   },
   methods: {
+    debounceSearch(searchValue) {
+      clearTimeout(this.timer);
+
+      this.timer = setTimeout(() => {
+        this.getSelectorItems(searchValue);
+      }, 500);
+    },
     async getSelectorItems(value) {
       const filters = value ? { term: value } : {};
       const response = await this.fetchOrganizations(1, 10, filters);
       if (response) {
         this.organizations = response.entities;
+        this.isLoading = false;
       }
     },
     async createOrganization() {
@@ -89,7 +100,8 @@ export default {
   watch: {
     search(value) {
       if (value && value.length > 2) {
-        this.getSelectorItems(value);
+        this.isLoading = true;
+        this.debounceSearch(value);
       }
     },
     value() {

diff --git a/ui/src/views/Individual.vue b/ui/src/views/Individual.vue
@@ -410,7 +410,7 @@
 import {
   getCountries,
   getIndividualByUuid,
-  getPaginatedOrganizations,
+  findOrganization,
 } from "../apollo/queries";
 import {
   deleteIdentity,
@@ -682,7 +682,7 @@ export default {
       this.individual = formatIndividual(newData[0]);
     },
     async fetchOrganizations(page, items, filters) {
-      const response = await getPaginatedOrganizations(
+      const response = await findOrganization(
         this.$apollo,
         page,
         items,

diff --git a/ui/tests/unit/__snapshots__/storybook.spec.js.snap b/ui/tests/unit/__snapshots__/storybook.spec.js.snap
@@ -10563,13 +10563,13 @@ exports[`Storyshots OrganizationsTable Groups 1`] = `
                 >
                   <label
                     class="v-label theme--light"
-                    for="input-1692"
+                    for="input-1694"
                     style="left: 0px; position: absolute;"
                   >
                     Search
                   </label>
                   <input
-                    id="input-1692"
+                    id="input-1694"
                     type="text"
                   />
                 </div>
@@ -10729,13 +10729,13 @@ exports[`Storyshots OrganizationsTable Groups 1`] = `
               >
                 <label
                   class="v-label v-label--active theme--light"
-                  for="input-1704"
+                  for="input-1706"
                   style="left: 0px; position: absolute;"
                 >
                   Items per page
                 </label>
                 <input
-                  id="input-1704"
+                  id="input-1706"
                   max="0"
                   min="1"
                   type="number"
@@ -10854,13 +10854,13 @@ exports[`Storyshots OrganizationsTable Organizations 1`] = `
                 >
                   <label
                     class="v-label theme--light"
-                    for="input-1745"
+                    for="input-1747"
                     style="left: 0px; position: absolute;"
                   >
                     Search
                   </label>
                   <input
-                    id="input-1745"
+                    id="input-1747"
                     type="text"
                   />
                 </div>
@@ -11020,13 +11020,13 @@ exports[`Storyshots OrganizationsTable Organizations 1`] = `
               >
                 <label
                   class="v-label v-label--active theme--light"
-                  for="input-1757"
+                  for="input-1759"
                   style="left: 0px; position: absolute;"
                 >
                   Items per page
                 </label>
                 <input
-                  id="input-1757"
+                  id="input-1759"
                   max="0"
                   min="1"
                   type="number"
@@ -11400,13 +11400,13 @@ exports[`Storyshots Search Default 1`] = `
               >
                 <label
                   class="v-label theme--light"
-                  for="input-1848"
+                  for="input-1850"
                   style="left: 0px; position: absolute;"
                 >
                   Search
                 </label>
                 <input
-                  id="input-1848"
+                  id="input-1850"
                   type="text"
                 />
               </div>
@@ -11527,13 +11527,13 @@ exports[`Storyshots Search Filter Selector 1`] = `
               >
                 <label
                   class="v-label theme--light"
-                  for="input-1857"
+                  for="input-1859"
                   style="left: 0px; position: absolute;"
                 >
                   Search
                 </label>
                 <input
-                  id="input-1857"
+                  id="input-1859"
                   type="text"
                 />
               </div>
@@ -11624,13 +11624,13 @@ exports[`Storyshots Search Order Selector 1`] = `
               >
                 <label
                   class="v-label theme--light"
-                  for="input-1869"
+                  for="input-1871"
                   style="left: 0px; position: absolute;"
                 >
                   Search
                 </label>
                 <input
-                  id="input-1869"
+                  id="input-1871"
                   type="text"
                 />
               </div>
@@ -11693,7 +11693,7 @@ exports[`Storyshots Search Order Selector 1`] = `
             <div
               aria-expanded="false"
               aria-haspopup="listbox"
-              aria-owns="list-1873"
+              aria-owns="list-1875"
               class="v-input__slot"
               role="button"
             >
@@ -11713,7 +11713,7 @@ exports[`Storyshots Search Order Selector 1`] = `
               >
                 <label
                   class="v-label theme--light"
-                  for="input-1873"
+                  for="input-1875"
                   style="left: 0px; position: absolute;"
                 >
                   Order by
@@ -11724,7 +11724,7 @@ exports[`Storyshots Search Order Selector 1`] = `
                   <input
                     aria-readonly="false"
                     autocomplete="off"
-                    id="input-1873"
+                    id="input-1875"
                     readonly="readonly"
                     type="text"
                   />
@@ -12660,7 +12660,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                   />
                   <input
                     aria-checked="false"
-                    id="input-2019"
+                    id="input-2021"
                     role="checkbox"
                     type="checkbox"
                     value=""
@@ -12671,7 +12671,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                 </div>
                 <label
                   class="v-label theme--light"
-                  for="input-2019"
+                  for="input-2021"
                   style="left: 0px; position: relative;"
                 >
                   Select all
@@ -12759,13 +12759,13 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                   >
                     <label
                       class="v-label theme--light"
-                      for="input-2024"
+                      for="input-2026"
                       style="left: 0px; position: absolute;"
                     >
                       Search
                     </label>
                     <input
-                      id="input-2024"
+                      id="input-2026"
                       type="text"
                     />
                   </div>
@@ -12828,7 +12828,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
-                  aria-owns="list-2031"
+                  aria-owns="list-2033"
                   class="v-input__slot"
                   role="button"
                 >
@@ -12848,7 +12848,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                   >
                     <label
                       class="v-label theme--light"
-                      for="input-2031"
+                      for="input-2033"
                       style="left: 0px; position: absolute;"
                     >
                       Order by
@@ -12859,7 +12859,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                       <input
                         aria-readonly="false"
                         autocomplete="off"
-                        id="input-2031"
+                        id="input-2033"
                         readonly="readonly"
                         type="text"
                       />
@@ -13086,13 +13086,13 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                   >
                     <label
                       class="v-label v-label--active theme--light"
-                      for="input-2053"
+                      for="input-2055"
                       style="left: 0px; position: absolute;"
                     >
                       Items per page
                     </label>
                     <input
-                      id="input-2053"
+                      id="input-2055"
                       max="0"
                       min="1"
                       type="number"