From 76832db4cebaf808db468fe9fe346ad5d12a9b01 Mon Sep 17 00:00:00 2001
From: karthik <karthik.jk11@gmail.com>
Date: Wed, 4 May 2022 21:21:16 +0530
Subject: [PATCH] add debounce to tektonhub versions api call to avoid many
 calls

---
 .../PipelineQuickSearchDetails.tsx            | 33 ++++---
 .../PipelineQuicksearchDetails.spec.tsx       | 94 +++++++++++++++++--
 2 files changed, 106 insertions(+), 21 deletions(-)

diff --git a/frontend/packages/pipelines-plugin/src/components/quicksearch/PipelineQuickSearchDetails.tsx b/frontend/packages/pipelines-plugin/src/components/quicksearch/PipelineQuickSearchDetails.tsx
index e2cab7192a3..c67c0740b2c 100644
--- a/frontend/packages/pipelines-plugin/src/components/quicksearch/PipelineQuickSearchDetails.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/quicksearch/PipelineQuickSearchDetails.tsx
@@ -14,6 +14,7 @@ import {
   Title,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons';
+import { debounce } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { handleCta } from '@console/shared';
 import { QuickSearchDetailsRendererProps } from '@console/shared/src/components/quick-search/QuickSearchDetails';
@@ -53,20 +54,26 @@ const PipelineQuickSearchDetails: React.FC<QuickSearchDetailsRendererProps> = ({
     resetVersions();
     let mounted = true;
     if (isTektonHubTaskWithoutVersions(selectedItem)) {
-      getTektonHubTaskVersions(selectedItem.data.id)
-        .then((itemVersions = []) => {
-          if (mounted) {
-            setVersions([...itemVersions]);
+      const debouncedLoadVersions = debounce(async () => {
+        if (mounted) {
+          try {
+            const itemVersions = await getTektonHubTaskVersions(selectedItem?.data?.id);
+
             selectedItem.attributes.versions = itemVersions;
-            setHasInstalledVersion(isOneVersionInstalled(selectedItem));
-          }
-        })
-        .catch((err) => {
-          if (mounted) {
-            resetVersions();
+
+            if (mounted) {
+              setVersions([...itemVersions]);
+              setHasInstalledVersion(isOneVersionInstalled(selectedItem));
+            }
+          } catch (err) {
+            if (mounted) {
+              resetVersions();
+            }
+            console.log('failed to fetch versions:', err); // eslint-disable-line no-console
           }
-          console.log('failed to fetch versions:', err); // eslint-disable-line no-console
-        });
+        }
+      }, 10);
+      debouncedLoadVersions();
     }
 
     return () => (mounted = false);
@@ -97,7 +104,7 @@ const PipelineQuickSearchDetails: React.FC<QuickSearchDetailsRendererProps> = ({
           <Split hasGutter>
             <SplitItem>
               <Button
-                isDisabled={versions.length === 0}
+                isDisabled={isTektonHubTaskWithoutVersions(selectedItem)}
                 data-test="task-cta"
                 variant={ButtonVariant.primary}
                 className="opp-quick-search-details__form-button"
diff --git a/frontend/packages/pipelines-plugin/src/components/quicksearch/__tests__/PipelineQuicksearchDetails.spec.tsx b/frontend/packages/pipelines-plugin/src/components/quicksearch/__tests__/PipelineQuicksearchDetails.spec.tsx
index 2e9dd8c0725..be9eac6f99e 100644
--- a/frontend/packages/pipelines-plugin/src/components/quicksearch/__tests__/PipelineQuicksearchDetails.spec.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/quicksearch/__tests__/PipelineQuicksearchDetails.spec.tsx
@@ -1,6 +1,14 @@
 import * as React from 'react';
-import { render, fireEvent, screen, cleanup, waitFor, configure } from '@testing-library/react';
-import { omit } from 'lodash';
+import {
+  render,
+  fireEvent,
+  screen,
+  cleanup,
+  waitFor,
+  configure,
+  act,
+} from '@testing-library/react';
+import { cloneDeep, omit } from 'lodash';
 import { coFetch } from '@console/internal/co-fetch';
 import PipelineQuickSearchDetails from '../PipelineQuickSearchDetails';
 import {
@@ -18,7 +26,7 @@ jest.mock('@console/internal/co-fetch', () => ({
 
 beforeEach(() => {
   coFetchMock.mockClear();
-  coFetchMock.mockReturnValueOnce(
+  coFetchMock.mockReturnValue(
     Promise.resolve({
       json: () => ({
         data: {
@@ -73,14 +81,34 @@ describe('pipelineQuickSearchDetails', () => {
 
   describe('CTA button tests', () => {
     it('Add button should be disabled if the versions is not available', async () => {
+      const taskWithoutVersion = cloneDeep({ ...tektonHubProps.selectedItem });
+      taskWithoutVersion.attributes.versions = [];
+      coFetchMock.mockReturnValue(
+        Promise.resolve({
+          json: () => ({
+            data: {
+              versions: [],
+            },
+          }),
+        }),
+      );
       const { getByRole } = render(
-        <PipelineQuickSearchDetails
-          {...clusterTaskProps}
-          selectedItem={omit(clusterTaskProps.selectedItem, 'attributes.versions')}
-        />,
+        <PipelineQuickSearchDetails {...tektonHubProps} selectedItem={taskWithoutVersion} />,
       );
       await waitFor(() => {
-        expect(getByRole('button', { name: 'Add' }).getAttribute('aria-disabled')).toBe('true');
+        expect(getByRole('button', { name: 'Install and add' }).getAttribute('aria-disabled')).toBe(
+          'true',
+        );
+      });
+    });
+
+    it('Add button should be enabled if the versions is not available in the user created task', async () => {
+      const customTask = omit(clusterTaskProps.selectedItem, 'attributes.versions');
+      const { getByRole } = render(
+        <PipelineQuickSearchDetails {...clusterTaskProps} selectedItem={customTask} />,
+      );
+      await waitFor(() => {
+        expect(getByRole('button', { name: 'Add' }).getAttribute('aria-disabled')).toBe('false');
       });
     });
 
@@ -178,4 +206,54 @@ describe('pipelineQuickSearchDetails', () => {
       });
     });
   });
+
+  describe('Fetching Versions API', () => {
+    it('should not call the versions API multiple times for the same task', async () => {
+      const taskWithoutVersion = cloneDeep({ ...tektonHubProps.selectedItem });
+      taskWithoutVersion.attributes.versions = [];
+
+      await act(async () => {
+        render(
+          <PipelineQuickSearchDetails {...tektonHubProps} selectedItem={taskWithoutVersion} />,
+        );
+      });
+
+      await act(async () => {
+        render(
+          <PipelineQuickSearchDetails
+            {...tektonHubProps}
+            selectedItem={tektonHubProps.selectedItem}
+          />,
+        );
+      });
+
+      await waitFor(() => {
+        expect(coFetchMock).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('should call the versions API multiple times for different task', async () => {
+      const taskWithoutVersion = cloneDeep({ ...tektonHubProps.selectedItem });
+      taskWithoutVersion.uid = '12345';
+      taskWithoutVersion.attributes.versions = [];
+
+      await act(async () => {
+        render(
+          <PipelineQuickSearchDetails {...tektonHubProps} selectedItem={taskWithoutVersion} />,
+        );
+      });
+
+      const newTask = cloneDeep({ ...tektonHubProps.selectedItem });
+      newTask.uid = '54678';
+      newTask.attributes.versions = [];
+
+      await act(async () => {
+        render(<PipelineQuickSearchDetails {...tektonHubProps} selectedItem={newTask} />);
+      });
+
+      await waitFor(() => {
+        expect(coFetchMock).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
 });