From 742d582d80e8e7392bd59c7555db1081103e8925 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eva=20Mill=C3=A1n?= <evamillan@bitergia.com>
Date: Wed, 13 Dec 2023 12:03:21 +0100
Subject: [PATCH 1/2] [ui] Debounce organization selector API calls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Limits the API calls made by the OrganizationSelector
component by only executing them after 500 milliseconds
after the last key press.
It also adds a progress bar to the input to show when
the list of organizations is loading.

Signed-off-by: Eva Millán <evamillan@bitergia.com>
---
 ui/src/components/OrganizationSelector.vue    | 16 +++++-
 .../unit/__snapshots__/storybook.spec.js.snap | 52 +++++++++----------
 2 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/ui/src/components/OrganizationSelector.vue b/ui/src/components/OrganizationSelector.vue
index 30698b67..b8515d2f 100644
--- 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/tests/unit/__snapshots__/storybook.spec.js.snap b/ui/tests/unit/__snapshots__/storybook.spec.js.snap
index 0f1012e9..c2b67cda 100644
--- 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"

From 3a6b385ec8b4afef2e35d4fa4a49fbe291b87ef2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eva=20Mill=C3=A1n?= <evamillan@bitergia.com>
Date: Wed, 13 Dec 2023 12:19:53 +0100
Subject: [PATCH 2/2] [ui] Add query to return list of organization names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the 'findOrganization' query, which only returns
the organizations data needed to affiliate an individual
instead of all the fields.
The 'getOrganizations' query is replaced with this one
on the Individual view to improve the organization
selector loading time.

Signed-off-by: Eva Millán <evamillan@bitergia.com>
---
 ...ng-time-when-looking-for-organizations.yml |  9 +++++++
 ui/src/apollo/queries.js                      | 27 +++++++++++++++++++
 ui/src/views/Individual.vue                   |  4 +--
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 releases/unreleased/improve-loading-time-when-looking-for-organizations.yml

diff --git a/releases/unreleased/improve-loading-time-when-looking-for-organizations.yml b/releases/unreleased/improve-loading-time-when-looking-for-organizations.yml
new file mode 100644
index 00000000..45859177
--- /dev/null
+++ 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 <evamillan@bitergia.com>
+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
index db33e030..c6bc09d4 100644
--- 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/views/Individual.vue b/ui/src/views/Individual.vue
index f4ac96d8..4d85070f 100644
--- 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,