Skip to content

fix(bulk-import): removing extra apis call#882

Merged
debsmita1 merged 7 commits into
redhat-developer:mainfrom
its-mitesh-kumar:fix/bulk-import-remove-extra-apis-call
Jun 6, 2025
Merged

fix(bulk-import): removing extra apis call#882
debsmita1 merged 7 commits into
redhat-developer:mainfrom
its-mitesh-kumar:fix/bulk-import-remove-extra-apis-call

Conversation

@its-mitesh-kumar
Copy link
Copy Markdown
Member

@its-mitesh-kumar its-mitesh-kumar commented Jun 1, 2025 •
edited
Loading

Description

This PR focuses on improving the performance and efficiency of the Bulk Import page by reducing unnecessary API calls and improving user experience.

Problem

  • When switching between the Organizations and Repositories tabs, API calls for both tabs were being made — even if only one was actively in view.
  • Unintended API requests were triggered by generic screen clicks.
  • Pagination controls triggered API calls even when the page number or page size didn't change.
  • Search input was missing debounce, resulting in multiple API requests for each keystroke (e.g., typing “test” sent 4 requests).

Fixes

Fixing https://issues.redhat.com/browse/RHIDP-7658

Fixes Implemented

  1. Tab Switching Optimization

    • Ensured that only the active tab triggers its respective API call.

  2. Reduced Redundant Triggers

    • Eliminated unnecessary API calls triggered by unrelated user interactions (e.g., page clicks).

  3. Pagination Optimization

    • API calls now only trigger when actual changes occur (e.g., page or page size changes).

  4. Search Input Debounce

    • Added lodash.debounce to avoid excessive API calls on fast typing.

Recording for Before Changes

Screen.Recording.2025-06-01.at.1.27.25.PM.mov

Recording for After Changes

Screen.Recording.2025-06-01.at.4.07.48.PM.mov

How to Test

  1. Go to the Bulk Import Add repository page.
  2. Switch between Organizations and Repositories.
  3. Interact with the pagination control without changing values.
  4. Type quickly in the search bar and observe the number of requests.

Result

  • Lower network traffic.
  • Smoother UX for users dealing with large sets of repositories/organizations.
  • Increased frontend responsiveness.

@its-mitesh-kumar
fix(bulk-import): removing extra apis call
794fabe 
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
@its-mitesh-kumar
adding yarn.lock
3004a72 
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
@rhdh-gh-app
Copy link
Copy Markdown

rhdh-gh-app Bot commented Jun 1, 2025 •
edited
Loading

Changed Packages

Package Name Package Path Changeset Bump Current Version
@red-hat-developer-hub/backstage-plugin-bulk-import workspaces/bulk-import/plugins/bulk-import patch v1.13.1

@its-mitesh-kumar
adding changeset
67b7ac3 
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
@its-mitesh-kumar
updating yarn.lock
7846f9b 
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
@invincibleJai
Copy link
Copy Markdown
Member

invincibleJai commented Jun 2, 2025

/cc @debsmita1

debsmita1
debsmita1 reviewed Jun 4, 2025
View reviewed changes
Comment thread ...aces/bulk-import/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesTable.tsx Outdated
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import { useFormikContext } from 'formik';
import debounce from 'lodash.debounce';
Copy link
Copy Markdown
Member

@debsmita1 debsmita1 Jun 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you try using the useDebounce hook from react-use library ?
We have used this one in our other plugins

Copy link
Copy Markdown
Member Author

@its-mitesh-kumar its-mitesh-kumar Jun 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@debsmita1 Thanks for the review!
Since lodash.debounce is already present indirectly via @babel/helper-define-polyfill-provider, I preferred using it to avoid adding a new dependency react-use just for this functionality — which would slightly increase the bundle size.

Let me know your thoughts on this

Copy link
Copy Markdown
Member

@debsmita1 debsmita1 Jun 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bulk-import plugin is already using this

Copy link
Copy Markdown
Member Author

@its-mitesh-kumar its-mitesh-kumar Jun 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yes, if both lodash.debounce and useDebounce from react-use are already present, it's better to stick with useDebounce from react-use. I'll update the code accordingly.

@its-mitesh-kumar
using useDebounce
cdbe228 
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
debsmita1
debsmita1 requested changes Jun 6, 2025
View reviewed changes
Comment thread workspaces/bulk-import/plugins/bulk-import/package.json Outdated
"formik": "^2.4.5",
"js-yaml": "^4.1.0",
"lodash": "^4.17.21",
"lodash.debounce": "^4.0.8",
Copy link
Copy Markdown
Member

@debsmita1 debsmita1 Jun 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not used anymore

@its-mitesh-kumar
removing lodash.debaounce from dependency
4a4b739 
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
@its-mitesh-kumar
removing unused dependency
ea2356b 
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Jun 6, 2025

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

debsmita1
debsmita1 approved these changes Jun 6, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@debsmita1 debsmita1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/lgtm

@openshift-ci openshift-ci Bot added the lgtm label Jun 6, 2025
@debsmita1 debsmita1 merged commit e99da2b into redhat-developer:main Jun 6, 2025
10 checks passed
debsmita1 pushed a commit to debsmita1/rhdh-plugins that referenced this pull request Jun 11, 2025
@its-mitesh-kumar @debsmita1
fix(bulk-import): removing extra apis call (redhat-developer#882)
1a8b199 
* fix(bulk-import): removing extra apis call

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* adding yarn.lock

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* adding changeset

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* updating yarn.lock

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* using useDebounce

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* removing lodash.debaounce from dependency

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* removing unused dependency

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

---------

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
batzionb pushed a commit to batzionb/rhdh-plugins that referenced this pull request Jun 15, 2025
@its-mitesh-kumar
fix(bulk-import): removing extra apis call (redhat-developer#882)
d593695 
* fix(bulk-import): removing extra apis call

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* adding yarn.lock

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* adding changeset

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* updating yarn.lock

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* using useDebounce

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* removing lodash.debaounce from dependency

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* removing unused dependency

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

---------

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
elai-shalev pushed a commit to elai-shalev/rhdh-plugins that referenced this pull request Jan 21, 2026
@its-mitesh-kumar
fix(bulk-import): removing extra apis call (redhat-developer#882)
605bb33 
* fix(bulk-import): removing extra apis call

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* adding yarn.lock

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* adding changeset

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* updating yarn.lock

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* using useDebounce

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* removing lodash.debaounce from dependency

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* removing unused dependency

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

---------

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@debsmita1 debsmita1 debsmita1 approved these changes

@christoph-jerolimov christoph-jerolimov Awaiting requested review from christoph-jerolimov

@rm3l rm3l Awaiting requested review from rm3l rm3l is a code owner

Assignees

@debsmita1 debsmita1

Labels

lgtm

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@its-mitesh-kumar @invincibleJai @debsmita1