Merge pull request #11553 from karthikjeeyar/fix-version-task-fetch-4.9

Bug 2089592: [release-4.9] Add debounce to tektonhub versions api call to avoid many calls
openshift · Jun 24, 2022 · 43a4326 · 43a4326
2 parents 3da1a7e + 76832db
commit 43a4326
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 21 deletions.
diff --git 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/...pipelines-plugin/src/components/quicksearch/__tests__/PipelineQuicksearchDetails.spec.tsx b/...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);
+      });
+    });
+  });
 });